Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-08 23:15:28 +02:00
Code Issues Releases Activity

layout for header completed

Browse source
This commit is contained in:
Umang G. Patel 2022-06-02 00:05:07 +05:30
parent 789e806594
commit b06105180a
4 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/styles/components/aside.pcss
View file

@ -40,6 +40,10 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.18em; font-size: 1.18em;
font-weight: 600; font-weight: 600;
max-width: var(--layout-width-aside);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (--mobile) { @media (--mobile) {
margin-bottom: 10px; margin-bottom: 10px;

5
src/frontend/styles/components/header.pcss
View file

@ -1,12 +1,13 @@
.docs-header { .docs-header {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 0 var(--layout-padding-horizontal); padding: 12px var(--layout-padding-horizontal);
border-bottom: 1px solid var(--color-line-gray); border-bottom: 1px solid var(--color-line-gray);
font-size: 15.8px; font-size: 18px;
line-height: 50px; line-height: 50px;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
line-height: 24px;
@media (--mobile) { @media (--mobile) {
line-height: 40px; line-height: 40px;

28
src/frontend/styles/layout.pcss
View file

@ -1,23 +1,10 @@
.docs { .docs {
display: flex; display: flex;
padding: 0px var(--layout-padding-horizontal);
@media (--mobile) { @media (--mobile) {
flex-wrap: wrap; flex-wrap: wrap;
} }
&__aside {
width: var(--layout-width-aside);
@media (--mobile) {
width: 100%;
flex-basis: 100%;
padding: 20px var(--layout-padding-horizontal) !important;
margin: 0 calc(-1 * var(--layout-padding-horizontal));
border-bottom: 1px solid var(--color-line-gray);
}
}
&__content { &__content {
flex-grow: 2; flex-grow: 2;
word-wrap: break-word; word-wrap: break-word;
@ -41,4 +28,19 @@
padding: 20px 0; padding: 20px 0;
} }
} }
&__aside {
width: var(--layout-width-aside);
padding: var(--layout-padding-vertical) 22px;
border-right: solid 1px red;
height: 100%;
@media (--mobile) {
width: 100%;
flex-basis: 100%;
padding: 20px var(--layout-padding-horizontal) !important;
margin: 0 calc(-1 * var(--layout-padding-horizontal));
border-bottom: 1px solid var(--color-line-gray);
}
}
} }

2
src/frontend/styles/vars.pcss
View file

@ -10,7 +10,7 @@
/** /**
* Site layout sizes * Site layout sizes
*/ */
--layout-padding-horizontal: 30px; --layout-padding-horizontal: 16px;
--layout-padding-vertical: 30px; --layout-padding-vertical: 30px;
--layout-width-aside: 300px; --layout-width-aside: 300px;
--layout-width-main-col: 650px; --layout-width-main-col: 650px;