mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-28 09:39:41 +02:00
Some design updates (#70)
* Auth page styles improved * styles updated * upd bundles
This commit is contained in:
Peter Savchenko
GitHub
parent
7c7c0d62d9
commit
c7219f8943
20 changed files with 288 additions and 48 deletions
|
|
@ -1,8 +1,16 @@
|
|||
.docs-aside {
|
||||
font-size: 15px;
|
||||
color: var(--color-text-second);
|
||||
position: sticky;
|
||||
top: var(--layout-padding-vertical);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.01em;
|
||||
overflow-y: scroll;
|
||||
max-height: 100vh;
|
||||
//padding-right: 50px;
|
||||
|
||||
@media (--mobile) {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
|
|
@ -13,7 +21,12 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
|
|
@ -28,8 +41,10 @@
|
|||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 15px;
|
||||
color: var(--color-link-active);
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.18em;
|
||||
font-weight: 600;
|
||||
|
||||
@media (--mobile) {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -38,6 +53,7 @@
|
|||
|
||||
&-list {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
|
|
|
|||
33
src/frontend/styles/components/auth.pcss
Normal file
33
src/frontend/styles/components/auth.pcss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.auth-form {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
margin-top: 30vh;
|
||||
|
||||
h1 {
|
||||
@media (--mobile){
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
padding: 9px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid var(--color-line-gray);
|
||||
}
|
||||
|
||||
input[type="submit"]{
|
||||
@apply --button;
|
||||
@apply --button-primary;
|
||||
font-size: 15px;
|
||||
padding: 10px 20px;
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
.page {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.005em;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
|
@ -48,10 +49,11 @@
|
|||
}
|
||||
|
||||
&__title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04px;
|
||||
margin-bottom: -0.2em;
|
||||
@apply --font-serif;
|
||||
font-size: 35px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.04em;
|
||||
margin-bottom: -0.1em;
|
||||
}
|
||||
|
||||
.cdx-marker {
|
||||
|
|
@ -59,6 +61,18 @@
|
|||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&__content {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -75,21 +89,74 @@
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Paragraph
|
||||
* ==================
|
||||
*/
|
||||
.block-paragraph {
|
||||
.inline-code {
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Header
|
||||
* ==================
|
||||
*/
|
||||
.block-header {
|
||||
margin: 1.5em 0 0.5em;
|
||||
@apply --font-serif;
|
||||
margin: 2.1em 0 0.5em;
|
||||
|
||||
&--2 {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
border: 0;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
&--anchor {
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
margin-left: -30px;
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
margin-top: 0.35em;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14' height='19' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237B7E89' fill-rule='nonzero'%3E%3Cpath d='M8.58 11.997L2.283 5.701a1.762 1.762 0 0 1 0-2.49l.933-.935a1.762 1.762 0 0 1 2.49 0l6.298 6.297a3.508 3.508 0 0 0-.901-3.39L6.952 1.031a3.522 3.522 0 0 0-4.982 0l-.933.933a3.522 3.522 0 0 0 0 4.982l4.151 4.151c.92.92 2.218 1.208 3.392.9z'/%3E%3Cpath d='M12.958 11.628l-4.151-4.15a3.507 3.507 0 0 0-3.391-.899l6.296 6.296a1.76 1.76 0 0 1 0 2.49l-.933.936a1.764 1.764 0 0 1-2.49 0l-6.296-6.298a3.507 3.507 0 0 0 .899 3.39l4.151 4.15a3.522 3.522 0 0 0 4.982 0l.933-.935a3.52 3.52 0 0 0 0-4.98z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0;
|
||||
transform: translateX(5px);
|
||||
will-change: opacity, transform;
|
||||
transition: all 100ms ease;
|
||||
|
||||
@media (--mobile){
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #4c4c58;
|
||||
}
|
||||
|
||||
&:hover::before{
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,12 +165,48 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-code {
|
||||
padding: 20px !important;
|
||||
background: var(--color-bg-light);
|
||||
border: 1px solid #f1f1f4;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
//border: 1px solid var(--color-line-gray);
|
||||
font-family: Menlo,Monaco,Consolas,Courier New,monospace;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.7em;
|
||||
font-size: 13px;
|
||||
|
||||
&__content {
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
overflow-x: auto;
|
||||
background: transparent !important;
|
||||
padding: 15px !important;
|
||||
color: #41314e !important;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-section{
|
||||
color: #359f3f;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #718c77;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-title {
|
||||
color: #904eb3;
|
||||
}
|
||||
|
||||
.hljs-emphasis,
|
||||
.hljs-quote,
|
||||
.hljs-string,
|
||||
.hljs-strong,
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #c21f04;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -111,6 +214,8 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-list {
|
||||
margin: 20px 0;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
@ -149,7 +254,7 @@
|
|||
|
||||
&--with-background {
|
||||
padding: 15px;
|
||||
background: var(--color-line-gray);
|
||||
background: var(--color-bg-light);
|
||||
|
||||
img, video {
|
||||
max-width: 60%;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
}
|
||||
|
||||
select {
|
||||
max-width: 100px
|
||||
max-width: 100px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -47,9 +48,30 @@
|
|||
}
|
||||
|
||||
.writing-editor {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.005em;
|
||||
|
||||
@media (--desktop) {
|
||||
margin: 0 -100px;
|
||||
}
|
||||
|
||||
.ce-code__textarea {
|
||||
color: #41314e;
|
||||
line-height: 1.6em;
|
||||
font-size: 12px;
|
||||
background: var(--color-bg-light);
|
||||
border: 1px solid #f1f1f4;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ce-paragraph a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ce-header {
|
||||
@apply --font-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.codex-editor__redactor .ce-block:first-of-type .ce-header {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
@import './components/writing.pcss';
|
||||
@import './components/page.pcss';
|
||||
@import './components/landing.pcss';
|
||||
@import './components/auth.pcss';
|
||||
|
||||
body {
|
||||
font-family: system-ui, Helvetica, Arial, Verdana;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
:root {
|
||||
--color-text-main: #1D202B;
|
||||
--color-text-second: #7B7E89;
|
||||
--color-text-main: #313649;
|
||||
--color-text-second: #5d6068;
|
||||
--color-line-gray: #E8E8EB;
|
||||
--color-link-active: #388AE5;
|
||||
--color-button-danger: #ff1629;
|
||||
--color-link-active: #2071cc;
|
||||
--color-button-danger: #ff5159;
|
||||
--color-bg-light: #f8f7fa;
|
||||
|
||||
/**
|
||||
* Site layout sizes
|
||||
*/
|
||||
--layout-padding-horisontal: 40px;
|
||||
--layout-padding-vertical: 40px;
|
||||
--layout-width-aside: 200px;
|
||||
--layout-padding-horisontal: 30px;
|
||||
--layout-padding-vertical: 30px;
|
||||
--layout-width-aside: 300px;
|
||||
--layout-width-main-col: 650px;
|
||||
|
||||
@media (--mobile) {
|
||||
|
|
@ -18,6 +19,13 @@
|
|||
--layout-padding-vertical: 15px;
|
||||
}
|
||||
|
||||
--font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
|
||||
|
||||
--font-serif {
|
||||
font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Arial, sans-serif;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
--button {
|
||||
display: inline-block;
|
||||
padding: 9px 15px;
|
||||
|
|
@ -30,6 +38,8 @@
|
|||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
|
||||
svg {
|
||||
margin: 0 0.3em 0 -0.05em;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue