mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 12:37:58 +01:00
91 lines
1.4 KiB
CSS
91 lines
1.4 KiB
CSS
.column-layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
|
|
.column-layout__left {
|
|
margin-right: var(--padding-normal);
|
|
width: var(--column-left-width);
|
|
}
|
|
|
|
.column-layout__main {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
@mixin if-mobile {
|
|
.column-layout {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.column-layout__left {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
margin: auto;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.layout--narrow {
|
|
width: 96vw;
|
|
max-width: var(--narrow-layout-width);
|
|
}
|
|
|
|
.layout--medium {
|
|
width: 96vw;
|
|
max-width: var(--medium-layout-width);
|
|
}
|
|
|
|
@mixin if-desktop {
|
|
.centered-layout {
|
|
.layout--medium, .layout--narrow {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#container.centered-layout .layout--centered {
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#container.centered-layout .layout--centered-flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.spacing {
|
|
margin: var(--padding-normal);
|
|
}
|
|
|
|
.spacing--right {
|
|
margin-right: var(--padding-normal);
|
|
}
|
|
|
|
.spacing--left {
|
|
margin-left: var(--padding-normal);
|
|
}
|
|
|
|
.spacing--top {
|
|
margin-top: var(--padding-normal);
|
|
}
|
|
|
|
.spacing--bottom {
|
|
margin-bottom: var(--padding-normal);
|
|
}
|