mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-08-10 07:55:24 +02:00
make content and write page styles more consistent
This commit is contained in:
Peter Savchenko
parent
538e2f62fc
commit
3659d55edc
4 changed files with 171 additions and 72 deletions
|
|
@ -52,9 +52,7 @@
|
|||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
@apply --text-content-title;
|
||||
}
|
||||
|
||||
.cdx-marker {
|
||||
|
|
@ -64,58 +62,20 @@
|
|||
|
||||
.inline-code,
|
||||
.block-header a .inline-code {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
background: rgba(251,241,241,0.78);
|
||||
color: #C44545;
|
||||
|
||||
padding: 3px 4px 2px;
|
||||
margin: -1px 2px 0;
|
||||
font-family: Menlo, Monaco, Consolas, Courier New, monospace;
|
||||
font-size: 0.84em;
|
||||
line-height: 1.4em;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,241,241,0.78);
|
||||
}
|
||||
@apply --text-inline-code;
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
@apply --text-content-main;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 1px;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
border-bottom-color: var(--color-link-active);
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
|
||||
color: #1f6fd8;
|
||||
background-color: #daf1fe;
|
||||
border-radius: 3px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #c8edfe;
|
||||
}
|
||||
}
|
||||
@apply --text-inline-link;
|
||||
}
|
||||
|
||||
&-block {
|
||||
padding: 10px 0;
|
||||
@apply --content-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -136,17 +96,14 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-header {
|
||||
margin: 18px 0 0;
|
||||
line-height: 1.35em;
|
||||
@apply --text-header;
|
||||
|
||||
&--2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
@apply --text-header-2;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
@apply --text-header-3;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -207,14 +164,7 @@
|
|||
--color-code-number: #ff6262;
|
||||
--color-code-comment: #6c7f93;
|
||||
|
||||
|
||||
background: var(--color-code-bg);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.5em;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
|
||||
@apply --text-code-block;
|
||||
@apply --squircle;
|
||||
|
||||
&__content {
|
||||
|
|
@ -409,6 +359,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Warning
|
||||
* ==================
|
||||
|
|
|
|||
|
|
@ -52,24 +52,56 @@
|
|||
}
|
||||
|
||||
.writing-editor {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.005em;
|
||||
@apply --text-content-main;
|
||||
|
||||
.ce-code__textarea {
|
||||
color: #41314e;
|
||||
line-height: 1.6em;
|
||||
font-size: 12px;
|
||||
background: var(--color-bg-light);
|
||||
border: 1px solid #f1f1f4;
|
||||
box-shadow: none;
|
||||
@apply --text-code-block;
|
||||
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ce-paragraph a {
|
||||
color: inherit;
|
||||
@apply --text-inline-link;
|
||||
}
|
||||
|
||||
.ce-header {
|
||||
@apply --text-header;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2.ce-header {
|
||||
@apply --text-header-2;
|
||||
}
|
||||
|
||||
h3.ce-header {
|
||||
@apply --text-header-3;
|
||||
}
|
||||
|
||||
.cdx-block {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
@apply --text-inline-code;
|
||||
}
|
||||
|
||||
.tc-table {
|
||||
@apply --text-content-main;
|
||||
}
|
||||
|
||||
.tc-cell {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.codex-editor__redactor .ce-block:first-of-type .ce-header {
|
||||
font-size: 32px;
|
||||
@apply --text-content-title;
|
||||
}
|
||||
|
||||
|
||||
.ce-block {
|
||||
@apply --content-block;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@
|
|||
|
||||
@media (--desktop) {
|
||||
margin-left: 0;
|
||||
/* padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); */
|
||||
}
|
||||
|
||||
@media (--less-then-3-col){
|
||||
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +35,10 @@
|
|||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
|
||||
max-width: min(
|
||||
calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
|
||||
calc(100vw - var(--layout-sidebar-width))
|
||||
);
|
||||
margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
|
||||
margin-right: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,19 @@
|
|||
--color-input-primary: #F3F6F8;
|
||||
--color-input-border: #477CFF;
|
||||
|
||||
|
||||
/* Code Block styles */
|
||||
--color-code-bg: #252935;
|
||||
--color-code-main: #E1EBFE;
|
||||
--color-code-keyword: #ff6675;
|
||||
--color-code-class: #bf9dff;
|
||||
--color-code-variable: #69c6ff;
|
||||
--color-code-string: #81bcff;
|
||||
--color-code-params: #ffa259;
|
||||
--color-code-tag: #74e59d;
|
||||
--color-code-number: #ff6262;
|
||||
--color-code-comment: #6c7f93;
|
||||
|
||||
--color-button-primary: #3389FF;
|
||||
--color-button-primary-hover: #2E7AE6;
|
||||
--color-button-primary-active: #296DCC;
|
||||
|
|
@ -29,7 +42,7 @@
|
|||
--layout-padding-horizontal: 22px;
|
||||
--layout-padding-vertical: 30px;
|
||||
--layout-sidebar-width: 290px;
|
||||
--layout-width-main-col: 650px;
|
||||
--layout-width-main-col: 700px;
|
||||
--layout-height-header: 56px;
|
||||
|
||||
@media (--mobile) {
|
||||
|
|
@ -126,6 +139,102 @@
|
|||
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The common styles for the Page blocks as well as Editor blocks
|
||||
*/
|
||||
--content-block {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main page H1 title
|
||||
*/
|
||||
--text-content-title {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page body font
|
||||
*/
|
||||
--text-content-main {
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Code on page and in the Editor
|
||||
*/
|
||||
--text-code-block {
|
||||
background: var(--color-code-bg);
|
||||
color: var(--color-code-main);
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.5em;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
--text-header {
|
||||
margin: 18px 0 0;
|
||||
line-height: 1.35em;
|
||||
}
|
||||
|
||||
--text-header-2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
--text-header-3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
--text-inline-code {
|
||||
display: inline-block;
|
||||
background: rgba(251,241,241,0.78);
|
||||
color: #C44545;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 0;
|
||||
|
||||
padding: 3px 4px 2px;
|
||||
margin: -1px 2px 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.84em;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,241,241,0.78);
|
||||
}
|
||||
}
|
||||
|
||||
--text-inline-link {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 1px;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
border-bottom-color: var(--color-link-active);
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
|
||||
color: #1f6fd8;
|
||||
background-color: #daf1fe;
|
||||
border-radius: 3px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #c8edfe;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue