CCCHH/hacker.tours-website
0
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial version

Browse source
This commit is contained in:
Stefan Bethke 2024-06-13 22:14:05 +02:00
commit ed5653a7fc
211 changed files with 11043 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

182
themes/zen/assets/sass/layouts/_layouts.scss Normal file
View file

@ -0,0 +1,182 @@
// stylelint-disable indentation, declaration-colon-newline-after, no-duplicate-selectors
// Initial layout setup.
.layout {
&__page {
max-width: var(--max-page-width);
@include respond-to(s) {
margin-inline: auto;
min-height: 100vh;
min-height: 100svh;
}
}
&__header,
&__footer,
&__main,
&__navigation,
&__first-sidebar,
&__second-sidebar,
&__page-top,
&__page-bottom,
&__cookieconsent {
padding-inline: var(--gutters);
min-width: 0; // With display grid defaults to auto, making <pre> overflow.
}
}
// If page width is bigger then content with,
// setup grid with breakout and stretch for main section.
@if $max-page-width > $max-content-width {
.layout {
&__navigation > * {
max-width: var(--max-content-width);
@include respond-to(s) {
margin-inline: auto;
}
}
&__main,
&__grid {
display: grid;
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
// stylelint-disable function-name-case
grid-template-columns:
[stretch-start] minmax(var(--gutters), 1fr)
[breakout-start] minmax(0, var(--breakout))
[content-start] Min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
minmax(0, var(--breakout)) [breakout-end]
minmax(var(--gutters), 1fr) [stretch-end];
// stylelint-enable function-name-case
padding-inline: 0;
// Stop content in main from streatching.
height: fit-content;
& > :not(.breakout, .stretch) {
grid-column: content;
}
& > .breakout {
grid-column: breakout;
}
& > .stretch {
grid-column: stretch;
padding-inline: var(--gutters);
}
}
}
}
// Setup template areas/rown/columns for page.
.layout {
&__page {
display: grid;
grid-template-areas: 'head'
'nav'
'top'
'main'
'side1'
'side2'
'bottom'
'foot'
'notice';
grid-template-rows: auto
auto
auto
1fr
auto
auto
auto
auto
auto;
grid-template-columns: 1fr;
}
@include respond-to(xl) {
&__page {
grid-template-rows: auto
auto
auto
1fr
auto
auto
auto;
}
&__sidebar-first {
grid-template-areas: 'head head'
'nav nav'
'side1 top'
'side1 main'
'side1 bottom'
'foot foot'
'notice notice';
grid-template-columns: 1fr
2fr;
}
&__sidebar-second {
grid-template-areas: 'head head'
'nav nav'
'top side2'
'main side2'
'bottom side2'
'foot foot'
'notice notice';
grid-template-columns: 2fr
1fr;
}
&__sidebar-two {
grid-template-areas: 'head head head'
'nav nav nav'
'side1 top side2'
'side1 main side2'
'side1 bottom side2'
'foot foot foot'
'notice notice notice';
grid-template-columns: 1fr
2fr
1fr;
}
}
&__header {
grid-area: head;
}
&__navigation {
grid-area: nav;
}
&__page-top {
grid-area: top;
}
&__main {
grid-area: main;
}
&__first-sidebar {
grid-area: side1;
}
&__second-sidebar {
grid-area: side2;
}
&__page-bottom {
grid-area: bottom;
}
&__footer {
grid-area: foot;
}
&__cookieconsent {
grid-area: notice;
}
}