Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 05:09:41 +02:00
Code Issues Releases Activity

Increase content paddings (#257)

Browse source 
* Increase content paddings

* add margin to the page title
This commit is contained in:
Peter Savchenko 2022-09-13 17:08:07 +03:00 • committed by GitHub
parent a7e859bfd1
commit ceccd234cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/styles/components/page.pcss
View file

@ -53,6 +53,7 @@
&__title {
@apply --text-content-title;
margin-bottom: 10px;
}
.cdx-marker {

22
src/frontend/styles/components/sidebar.pcss
View file

@ -1,6 +1,15 @@
.docs-sidebar {
width: 100vw;
/* Bottom and Left coord of the "Hide Sidebar" toggler */
--hide-sidebar-toggler-offset: 11px;
--hide-sidebar-toggler-size: 28px;
@media (--widest-desktop) {
--hide-sidebar-toggler-offset: var(--layout-padding-horizontal);
--hide-sidebar-toggler-size: 32px;
}
&--animated {
.docs-sidebar__content {
transition: transform 200ms ease-in-out;
@ -21,7 +30,7 @@
}
.docs-sidebar__slider {
transform: translateX(20px);
transform: translateX(var(--hide-sidebar-toggler-offset));
svg {
transform: rotate(180deg);
@ -228,15 +237,16 @@
&__slider {
display: none;
position: fixed;
transform: translateX(calc(var(--layout-sidebar-width) + 20px));
bottom: 20px;
width: 32px;
height: 32px;
border-radius: 8px;
transform: translateX(calc(var(--layout-sidebar-width) + var(--hide-sidebar-toggler-offset)));
bottom: var(--hide-sidebar-toggler-offset);
width: var(--hide-sidebar-toggler-size);
height: var(--hide-sidebar-toggler-size);
cursor: pointer;
background-color: var(--color-link-hover);
z-index: 10;
@apply --squircle;
@media (--desktop) {
display: flex;
justify-content: center;

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

@ -14,15 +14,29 @@
}
&__content {
--max-space-between-cols: 160px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
flex-grow: 2;
word-wrap: break-word;
@media (--mobile) {
width: 100%;
flex-basis: 100%;
}
@media (--desktop) {
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(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
margin-right: auto;
padding: 0;
}
&-inner {
max-width: var(--layout-width-main-col);
margin: 0 auto;
@ -31,29 +45,11 @@
@media (--desktop) {
margin-left: 0;
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
padding: var(--layout-padding-vertical) var(--layout-padding-content-horizontal);
}
}
}
&__content {
--max-space-between-cols: 160px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
@media (--desktop) {
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(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
margin-right: auto;
padding: 0;
}
}
&__aside-right {
width: var(--layout-sidebar-width);
min-width: 160px;

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

@ -40,7 +40,8 @@
*/
--layout-padding-horizontal: 22px;
--layout-padding-vertical: 30px;
--layout-sidebar-width: 290px;
--layout-padding-content-horizontal: 50px;
--layout-sidebar-width: 280px;
--layout-width-main-col: 700px;
--layout-height-header: 56px;
@ -48,6 +49,7 @@
--layout-padding-horizontal: 15px;
--layout-padding-vertical: 15px;
--layout-height-header: 88px;
--layout-padding-content-horizontal: var(--layout-padding-horizontal);
}
@media (--wide-desktop) {
@ -264,3 +266,7 @@
@custom-media --not-mobile all and (min-width: 981px);
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
@custom-media --can-hover all and (hover:hover);
/**
* Big screens that have additional space around the center column
*/
@custom-media --widest-desktop all and (min-width: 1470px);