mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-28 01:29:42 +02:00
chore(ui): a bunch of style updates (#235)
* chore(styles): typography updating started * page styles updated * page header nav fix, inline code style fix, table, navigator * use arrow-right icon instead of "»" in bread crumbs * a bunch of updates * make content and write page styles more consistent * rollback layout change * upd color text second * upd sidebar logo text color * resovle someone's ts errors * remove duplicated variables
This commit is contained in:
Peter Savchenko
GitHub
parent
05f8f0d9e1
commit
237db3e472
12 changed files with 349 additions and 1174 deletions
|
|
@ -10,15 +10,14 @@ html {
|
|||
border-bottom: 1px solid var(--color-line-gray);
|
||||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
height: var(--layout-height-header);
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
|
||||
@media (--mobile){
|
||||
line-height: 40px;
|
||||
@media (--not-mobile){
|
||||
height: var(--layout-height-header);
|
||||
}
|
||||
|
||||
&__menu-link,
|
||||
|
|
@ -36,11 +35,13 @@ html {
|
|||
}
|
||||
|
||||
&__menu-link {
|
||||
padding: 4px 10px;
|
||||
font-weight: 500;
|
||||
transition: background-color .13s;
|
||||
|
||||
@apply --squircle;
|
||||
@media (--not-mobile) {
|
||||
padding: 4px 10px;
|
||||
@apply --squircle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-link-hover);
|
||||
|
|
@ -55,8 +56,9 @@ html {
|
|||
font-size: 16px;
|
||||
|
||||
@media (--mobile) {
|
||||
margin-top: 6px;
|
||||
flex-basis: 100%;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -85,8 +87,8 @@ html {
|
|||
@media (--mobile) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
top: 13px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--color-link-hover);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px 12px 16px;
|
||||
color: black;
|
||||
width: max-content;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
|
||||
@apply --squircle;
|
||||
|
||||
&--previous {
|
||||
align-items: flex-start;
|
||||
margin-left: 0;
|
||||
|
|
@ -29,13 +29,15 @@
|
|||
|
||||
&-direction {
|
||||
text-transform: capitalize;
|
||||
color: var(--color-direction-navigation);
|
||||
color: var(--color-text-second);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,38 @@
|
|||
.page {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.005em;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-second);
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (--mobile) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-nav {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (--mobile) {
|
||||
display: none;
|
||||
&-item {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@media (--mobile) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
svg {
|
||||
margin: 0 6px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
&::after {
|
||||
content: '»';
|
||||
margin: 0 0.7em 0 0.45em;
|
||||
@media (--mobile) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,11 +52,7 @@
|
|||
}
|
||||
|
||||
&__title {
|
||||
@apply --font-serif;
|
||||
font-size: 35px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.04em;
|
||||
margin-bottom: -0.1em;
|
||||
@apply --text-content-title;
|
||||
}
|
||||
|
||||
.cdx-marker {
|
||||
|
|
@ -61,48 +62,20 @@
|
|||
|
||||
.inline-code,
|
||||
.block-header a .inline-code {
|
||||
display: inline-block;
|
||||
background: rgba(251,241,241,0.78);
|
||||
color: #C44545;
|
||||
padding: 0.1em 0.5em;
|
||||
border-radius: 2px;
|
||||
margin: 0 2px;
|
||||
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 {
|
||||
@apply --text-content-main;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 1px;
|
||||
color: inherit;
|
||||
@apply --text-inline-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
border-bottom-color: var(--color-link-active);
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
margin: 0;
|
||||
padding: 0.15em .5em;
|
||||
border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
|
||||
color: #1f6fd8;
|
||||
background-color: #daf1fe;
|
||||
|
||||
&:hover {
|
||||
background-color: #c8edfe;
|
||||
}
|
||||
}
|
||||
&-block {
|
||||
@apply --content-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -110,6 +83,8 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-paragraph {
|
||||
margin: 0;
|
||||
|
||||
.inline-code {
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
|
|
@ -121,21 +96,14 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-header {
|
||||
@apply --font-serif;
|
||||
margin: 2.1em 0 0.5em;
|
||||
@apply --text-header;
|
||||
|
||||
&--2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
@apply --text-header-2;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& + p {
|
||||
margin-top: 0.5em;
|
||||
@apply --text-header-3;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -185,14 +153,8 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-code {
|
||||
background: var(--color-bg-light);
|
||||
border: 1px solid #f1f1f4;
|
||||
border-radius: 5px;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.7em;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
margin: 15px 0;
|
||||
@apply --text-code-block;
|
||||
@apply --squircle;
|
||||
|
||||
&__content {
|
||||
display: inline-block !important;
|
||||
|
|
@ -200,7 +162,7 @@
|
|||
word-wrap: normal;
|
||||
background: transparent !important;
|
||||
padding: 15px !important;
|
||||
color: #41314e !important;
|
||||
color: var(--color-code-main) !important;
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -211,13 +173,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: var(--color-code-params);
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: var(--color-code-number);
|
||||
}
|
||||
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
color: var(--color-code-class);
|
||||
}
|
||||
|
||||
|
||||
.hljs-name,
|
||||
.hljs-section{
|
||||
color: #359f3f;
|
||||
.hljs-section,
|
||||
.hljs-selector-tag {
|
||||
color: var(--color-code-tag);
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #718c77;
|
||||
color: var(--color-code-main);
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
|
|
@ -226,7 +206,13 @@
|
|||
.hljs-selector-id,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-title {
|
||||
color: #904eb3;
|
||||
color: var(--color-code-class);
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-operator {
|
||||
color: var(--color-code-variable);
|
||||
}
|
||||
|
||||
.hljs-emphasis,
|
||||
|
|
@ -235,8 +221,33 @@
|
|||
.hljs-strong,
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #c21f04;
|
||||
color: var(--color-code-string);
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type {
|
||||
color: var(--color-code-keyword);
|
||||
}
|
||||
|
||||
.hljs-variable.language_ {
|
||||
color: var(--color-code-variable) ;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-comment,
|
||||
.hljs-formula {
|
||||
color: var(--color-code-comment);
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: var(--color-code-tag);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -244,10 +255,12 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-list {
|
||||
margin: 20px 0;
|
||||
margin: 0;
|
||||
list-style: outside;
|
||||
padding-left: 26px;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -323,7 +336,6 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-table {
|
||||
margin: 20px 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
|
|
@ -331,11 +343,12 @@
|
|||
border: 1px solid var(--color-line-gray);
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-line-gray);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Warning
|
||||
* ==================
|
||||
|
|
@ -343,10 +356,9 @@
|
|||
.block-warning {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
margin: 30px 0;
|
||||
border-radius: 7px;
|
||||
background: #fff9ef;
|
||||
color: #392e2f;
|
||||
background: #fffad0;
|
||||
|
||||
@apply --squircle;
|
||||
|
||||
&__icon {
|
||||
margin-right: 15px;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (--mobile){
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -106,6 +110,11 @@
|
|||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
height: 29px;
|
||||
|
||||
@media (--mobile){
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__section-title,
|
||||
|
|
@ -116,6 +125,7 @@
|
|||
padding: 0 8px;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
@apply --squircle;
|
||||
}
|
||||
|
||||
|
|
@ -201,8 +211,6 @@
|
|||
|
||||
|
||||
&__toggler {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-second);
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid var(--color-line-gray);
|
||||
|
|
@ -242,6 +250,7 @@
|
|||
padding-bottom: 20px;
|
||||
padding-top: 60px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-second);
|
||||
|
||||
@media (--desktop) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.table-of-content {
|
||||
border-left: 1px solid var(--color-line-gray);
|
||||
padding-left: var(--layout-padding-horizontal);
|
||||
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
|
||||
padding: 0 var(--layout-padding-horizontal);
|
||||
margin: var(--layout-padding-vertical) 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
--padding-x: 8px;
|
||||
|
||||
&__header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
letter-spacing: -0.01em;
|
||||
|
||||
margin-bottom: 12px;
|
||||
padding: 0 6px;
|
||||
padding: 0 var(--padding-x);
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
|
||||
list-style: none;
|
||||
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
|
||||
&-item {
|
||||
@apply --squircle;
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
&--indent-4x { margin-left: 24px; }
|
||||
|
||||
& > a {
|
||||
padding: 4px 8px;
|
||||
padding: 4px var(--padding-x);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
|
|
|
|||
|
|
@ -52,28 +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 --font-serif;
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue