ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove content div wrappers. Use grid template columns for main to support stretch and breakout classes.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-11-10 14:52:09 +01:00
commit 4bb4c9dec1
11 changed files with 169 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

12
assets/sass/_root.scss
View file

@ -1,3 +1,4 @@
$breakout: $gutters !default;
$max-page-width: $max-content-width !default;
:root {
@ -23,11 +24,12 @@ $max-page-width: $max-content-width !default;
--radius-#{$name}: #{$radius};
}
--heading-line-height: #{$heading-line-height};
--max-content-width: #{$max-content-width};
--max-page-width: #{$max-page-width};
--max-line-width: #{$max-line-width};
--gutters: #{$gutters};
--breakout: #{$breakout};
--gutters-reverse: #{$gutters-reverse};
--gutters: #{$gutters};
--heading-line-height: #{$heading-line-height};
--indent-amount: #{$indent-amount};
--max-content-width: #{$max-content-width};
--max-line-width: #{$max-line-width};
--max-page-width: #{$max-page-width};
}

4
assets/sass/_variables.scss
View file

@ -147,6 +147,10 @@ $max-line-width: 70ch;
$gutters: calc(5px + 1.5625vw);
$gutters-reverse: calc(0px - (5px + 1.5625vw));
// Breakout amount.
// How much should the "breakout" be. Defaults to gutters value.
// $breakout: calc(5px + 1.5625vw);
// The amount lists, blockquotes and comments are indented.
// Use like this: var(--indent-amount)
$indent-amount: 2rem;

8
assets/sass/_zen.scss
View file

@ -47,13 +47,13 @@ label {
// Article and content.
article > .content,
article,
aside {
ul {
& > ul {
@extend %ul-straight-left;
}
ol {
& > ol {
@extend %ol-straight-left;
}
}
@ -212,7 +212,7 @@ figure {
// Form
.content {
main {
input,
textarea {
&:not(:placeholder-shown):valid {

13
assets/sass/base/forms/_forms.scss
View file

@ -5,11 +5,6 @@
form {
// Add vertical rhythm margins.
@include margin-block(1);
// Set max text line width in main for readability.
.main & {
max-width: var(--max-line-width);
}
}
input,
@ -28,6 +23,14 @@ label {
}
}
// Set max text line width in main for readability.
input,
label,
textarea,
select {
max-width: var(--max-line-width);
}
fieldset {
border: 1px solid var(--color-border);
}

2
assets/sass/base/grouping/_grouping.scss
View file

@ -74,7 +74,7 @@ hr {
p {
// Add vertical rhythm margins.
@include margin-block(.75);
@include margin-block(.375 .75);
// Set max text line width in main for readability.
.main & {

2
assets/sass/base/headings/_headings.scss
View file

@ -15,7 +15,7 @@ h5,
%h5,
h6,
%h6 {
@include margin-block(1 .5, 'em');
@include margin-block(1 0, 'em');
color: var(--color-headings);
font-family: var(--ff-headings);
font-weight: var(--fw-headings);

6
assets/sass/components/box/_box.scss
View file

@ -44,6 +44,10 @@
width: fit-content;
}
&--gutter {
padding-inline: var(--gutters);
}
&--inverted {
@extend %link-inverted;
background: var(--color-border);
@ -51,7 +55,7 @@
// Make sure headings etc. also gets inverted.
* {
color: inherit;
color: var(--color-text-bg);
}
}

4
assets/sass/components/cards/_cards.scss
View file

@ -23,6 +23,10 @@
grid-column: span 2;
}
&--gutter {
padding-inline: var(--gutters);
}
&--inverted {
@extend %link-inverted;
background: var(--color-border);

12
assets/sass/components/stretch/_stretch.scss
View file

@ -1,12 +0,0 @@
// Stretch content to the page edge.
//
// Requeried: Set max-page-width to a larger value than max-content-width.
.stretch,
%stretch {
width: 100%;
.main & {
max-width: none;
}
}

249
assets/sass/layouts/_layouts.scss
View file

@ -1,5 +1,6 @@
// stylelint-disable indentation, declaration-colon-newline-after
// Initial layout setup.
.layout {
&__page {
max-width: var(--max-page-width);
@ -23,135 +24,155 @@
padding-inline: var(--gutters);
min-width: 0; // With display grid defaults to auto, making <pre> overflow.
}
}
@if $max-page-width > $max-content-width {
&__main {
padding-inline: 0;
}
&__navigation > *,
&__main > * {
// 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);
&:not(.stretch) {
padding-inline: var(--gutters);
}
@include respond-to(s) {
margin-inline: auto;
}
}
}
}
@supports (display: grid) {
.layout {
&__page {
&__main,
&__grid {
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;
}
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
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];
padding-inline: 0;
@include respond-to(xl) {
&__page {
grid-template-rows: auto
auto
auto
1fr
auto
auto
auto;
& > :not(.breakout, .stretch) {
grid-column: content;
}
&__sidebar-first {
grid-template-areas: 'head head'
'nav nav'
'side1 top'
'side1 main'
'side1 bottom'
'foot foot'
'notice notice';
grid-template-columns: 1fr
2fr;
& > .breakout {
grid-column: breakout;
}
&__sidebar-second {
grid-template-areas: 'head head'
'nav nav'
'top side2'
'main side2'
'bottom side2'
'foot foot'
'notice notice';
grid-template-columns: 2fr
1fr;
& > .stretch {
grid-column: stretch;
padding-inline: var(--gutters);
}
&__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;
}
}
}
// 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;
}
}

1
assets/sass/styles.scss
View file

@ -54,7 +54,6 @@
@import 'components/meta/meta';
@import 'components/responsive-video/responsive-video';
@import 'components/spacing/spacing';
@import 'components/stretch/stretch';
@import 'components/tables/tables';
@import 'components/tags/tags';
@import 'components/visually-hidden/visually-hidden';