Major refactor, redoing entire layout system with flexbox

This commit is contained in:
gil 2024-06-23 23:01:58 -05:00
parent 239b9d9a9b
commit fb0719db65
25 changed files with 416 additions and 189 deletions

View file

@ -21,14 +21,15 @@
## 0.0.2 ## 0.0.2
- Change to layout based on CSS grid - Changed to layout based on CSS grid
- Switch to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries - Switched to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries
- Add blog/lib sections (empty for now) - Added blog/lib sections (empty for now)
- Partial reorganizing of SCSS files - Partially reorganized of SCSS files
## 0.0.3 ## 0.0.3
- Add pagination to blog - Added pagination to blog
- Add `home` layout - Added `home` layout
- Refactored base template - Refactored base template
- Switch layout back to CSS flex - Switched layout back to CSS flex
- Created `theme-default`, which provides default theming based on browser preference

10
src/404.md Normal file
View file

@ -0,0 +1,10 @@
---
title: Not found
permalink: 404.html
---
# 404 - Not found
There's nothing here.
<a href="/"><- Home page</a>

View file

@ -0,0 +1,19 @@
---
layout: layouts/base.njk
---
<main>
<article>
<header>
{% if page.date -%}
<time datetime="{{ page.date | formatDate }}">
{{ page.date | formatDate }}
</time>
{%- endif %}
{% if title -%}
<h1>{{ title }}</h1>
{%- endif %}
</header>
{{ content | safe }}
</article>
</main>

View file

@ -1,12 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: layouts/blank.njk
{% include "partials/meta.njk" %} ---
<body>
<div class="site">
{% include "partials/header.njk" %} {% include "partials/header.njk" %}
{% include "partials/navbar.njk" %} {% include "partials/nav.njk" %}
{{ content | safe }} {{ content | safe }}
{% include "partials/footer.njk" %} {% include "partials/footer.njk" %}
</div>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!doctype html>
<html lang="en">
{% include "partials/meta.njk" %}
<body class="theme-default">
<div class="site">
{{ content | safe }}
</div>
</body>
</html>

View file

@ -2,6 +2,8 @@
layout: layouts/base.njk layout: layouts/base.njk
--- ---
<main> <main class="site-main">
<article class="markup">{{ content | safe }}</article> <article class="page-article">
{{ content | safe }}
</article>
</main> </main>

View file

@ -1,21 +1,9 @@
--- ---
layout: layouts/base.njk layout: layouts/base.njk
--- ---
<main>
<article class="markup box flex-auto width-2/3"> <main class="site-main">
<article class="page-article">
{{ content | safe }} {{ content | safe }}
</article> </article>
<aside class="markup box flex-initial width-1/6 order-first">
<h2>Status</h2>
<p>Writing posts</p>
</aside>
<aside class="markup box flex-initial width-1/6 order-last">
<h2>Latest posts</h2>
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
</ul>
<p><a href="/rss.xml">Feed</a></p>
</aside>
</main> </main>

View file

@ -1,6 +1,14 @@
<footer class="footer"> <footer class="site-footer">
<p>Made with <a href="https://www.11ty.dev/">11ty</a>. <!-- TODO add social links -->
{%- if page.date %}<i> <section>
Last updated on <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>. <p>
</i>{% endif -%}</p> Made with <a href="https://www.11ty.dev/">11ty</a>.
{%- if page.date %}
<i>
Last updated on
<time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>.
</i>
{% endif -%}
</p>
</section>
</footer> </footer>

View file

@ -1,3 +1,3 @@
<header class="banner"> <header class="site-header">
<a class="logo" href="{{ meta.homepage }}">{{ meta.siteName }}</a> <a class="logo" href="{{ meta.homepage }}">{{ meta.siteName }}</a>
</header> </header>

View file

@ -2,7 +2,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="{{ eleventy.generator }}"> <meta name="generator" content="{{ eleventy.generator }}">
<title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title> <title>
{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}
</title>
<link rel="stylesheet" href="/css/reset.css"> <link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="/css/global.css">
</head> </head>

View file

@ -0,0 +1,3 @@
<nav class="site-navigation">
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
</nav>

View file

@ -1,3 +0,0 @@
<nav class="navbar">
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
</nav>

View file

@ -23,6 +23,4 @@ Hey. I'm Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a software de
## Colophon ## Colophon
I first started building this site in mid 2023, and I've been gradually tweaking it since then. I first started building this site in mid 2023, and I've been gradually tweaking it since then. This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then parsed into plain HTML, using templates I created for Eleventy. I used [Sass](https://sass-lang.com/) to create some stylesheets. The source files for this website are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).
This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then parsed into plain HTML, using templates I created for Eleventy. I used [Sass](https://sass-lang.com/) to create some stylesheets. The source files for this website are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).

View file

@ -47,64 +47,85 @@ Full license texts:
} }
/* ============================================================================ /* ============================================================================
COMPONENTS COMPONENTS
---------- -------------------------------------------------------------------------------
Reusable components for use across my site Reusable components for use across my site
============================================================================ */ ============================================================================ */
.markup { .markup, .page-article {
word-wrap: break-word; word-wrap: break-word;
line-height: 1.7; line-height: 1.7;
padding: 0; padding: 0;
} }
.markup p, .markup > :first-child, .page-article > :first-child {
margin-top: 0;
}
.markup > :last-child, .page-article > :last-child {
margin-bottom: 0;
}
.markup p, .page-article p,
.markup blockquote, .markup blockquote,
.page-article blockquote,
.markup ul, .markup ul,
.page-article ul,
.markup ol, .markup ol,
.page-article ol,
.markup dl, .markup dl,
.page-article dl,
.markup table, .markup table,
.markup pre { .page-article table,
.markup pre,
.page-article pre {
margin: 1em 0; margin: 1em 0;
} }
.markup ul, .markup ul, .page-article ul,
.markup ol { .markup ol,
.page-article ol {
list-style-type: revert; list-style-type: revert;
padding-left: 30px; padding-left: 30px;
} }
.markup h1 { .markup h1, .page-article h1 {
font-size: 2.5em; font-size: 2.5em;
} }
.markup h2 { .markup h2, .page-article h2 {
font-size: 2em; font-size: 2em;
} }
.markup h3 { .markup h3, .page-article h3 {
font-size: 1.5em; font-size: 1.5em;
} }
.markup h4 { .markup h4, .page-article h4 {
font-size: 1.2em; font-size: 1.2em;
} }
.markup h5 { .markup h5, .page-article h5 {
font-size: 1em; font-size: 1em;
} }
.markup h6 { .markup h6, .page-article h6 {
font-size: 1em; font-size: 1em;
} }
.markup h1, .markup h1, .page-article h1,
.markup h2, .markup h2,
.page-article h2,
.markup h3, .markup h3,
.page-article h3,
.markup h4, .markup h4,
.page-article h4,
.markup h5, .markup h5,
.markup h6 { .page-article h5,
.markup h6,
.page-article h6 {
margin: 0.5em 0 0.25em 0; margin: 0.5em 0 0.25em 0;
} }
.markup h1 + p, .markup h1 + p, .page-article h1 + p,
.markup h2 + p, .markup h2 + p,
.markup h3 + p { .page-article h2 + p,
.markup h3 + p,
.page-article h3 + p {
margin-top: 0.5em; margin-top: 0.5em;
} }
.markup img { .markup img, .page-article img {
max-width: 100%; max-width: 100%;
} }
.markup code, .markup code, .page-article code,
.markup pre { .markup pre,
.page-article pre {
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -114,84 +135,149 @@ Reusable components for use across my site
padding: 0 5px; padding: 0 5px;
white-space: pre; white-space: pre;
} }
.markup pre code { .markup pre code, .page-article pre code {
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
white-space: pre; white-space: pre;
} }
/* ============================================================================
DEFAULT THEME
-------------------------------------------------------------------------------
This is the default theme for my website, which uses the prefer-color-scheme
query to provide the appropriate styles for light mode or dark mode. The other
themes can be selected with a dropdown which is only shown when JavaScript is
enabled.
============================================================================ */
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.theme-default body {
background: url("/img/background2.png");
}
.theme-default .site-header {
border: solid black 2px;
background: white;
}
.theme-default .site-main {
border: solid black 2px;
background: white;
}
.theme-default .site-navigation {
background: white;
border: solid black 2px;
border-top: none;
}
}
@media (prefers-color-scheme: light) and (min-width: 641px) {
.theme-default .site-navigation {
border-top: solid black 2px;
}
}
@media (prefers-color-scheme: light) {
.theme-default .site-footer {
border: solid black 2px;
background: white;
}
}
@media (prefers-color-scheme: dark) {
.theme-default body {
background: black;
}
.theme-default .site-header {
border: solid white 2px;
background: black;
}
.theme-default .site-main {
border: solid white 2px;
background: black;
}
.theme-default .site-navigation {
border: solid white 2px;
background: black;
border-top: none;
}
}
@media (prefers-color-scheme: dark) and (min-width: 641px) {
.theme-default .site-navigation {
border-top: solid white 2px;
}
}
@media (prefers-color-scheme: dark) {
.theme-default .site-footer {
border: solid white 2px;
background: black;
}
}
/* ============================================================================ /* ============================================================================
GLOBAL VARIABLES GLOBAL VARIABLES
============================================================================ */ ============================================================================ */
/* Media breakpoints ------------------------------------------------------- */ /* Sizing ------------------------------------------------------------------ */
/* Spacing ----------------------------------------------------------------- */ /* Spacing ----------------------------------------------------------------- */
/* Typography -------------------------------------------------------------- */ /* Typography -------------------------------------------------------------- */
/* -- Font ----------------------------------------------------------------- */ /* -- Font ----------------------------------------------------------------- */
:root { :root {
font-size: 12pt; font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif; font-family: "Linux Libertine", "Times New Roman", Times, serif;
color-scheme: light dark;
}
body {
background: url("/img/background2.png");
}
.site > .banner,
.site > .navbar,
.site > .footer {
text-align: center;
} }
.site { .site {
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
max-width: 60em;
margin: 1em auto 1em;
} }
.site > .navbar {
border: solid black 1px; .site-header {
} flex: 0 0 100%;
.site > .navbar li { box-sizing: border-box;
display: inline-flex; padding: 1em;
} }
@media (min-width: 641px) { @media (min-width: 641px) {
.site > main { .site-header {
display: flex; margin-bottom: 1em;
flex-direction: row;
gap: 1em;
} }
} }
.box { .site-main {
border: solid black 1px; flex: 1 0 50%;
padding: 0 1em; box-sizing: border-box;
padding: 1em;
height: min-content;
} }
@media (min-width: 769px) { .site-navigation {
.width-1\/6 { flex: 0 0 100%;
width: 16.66666667%; box-sizing: border-box;
margin-bottom: 1em;
padding: 1em;
height: min-content;
}
@media (min-width: 641px) {
.site-navigation {
flex: 0 1 10em;
margin-right: 1em;
margin-bottom: 0;
}
}
.site-navigation li {
display: inline-block;
}
@media (min-width: 641px) {
.site-navigation li {
display: block;
} }
} }
@media (min-width: 769px) { .site-footer {
.width-2\/3 { flex: 0 0 100%;
width: 66.66666667%; box-sizing: border-box;
} margin-top: 1em;
} padding: 1em;
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.order-first {
order: -999;
}
.order-last {
order: 999;
} }
/*# sourceMappingURL=global.css.map */ /*# sourceMappingURL=global.css.map */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_vars.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACDA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACvFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;AHHA;EAEI,WGEa;EHDb,aGEe;EHAjB;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EACE;;;AAGF;EACE;EACA;;AASE;EACE;;AAEA;EACE;;AI0jBJ;EJrjBE;IACE;IACA;IACA,KGzCC;;;;AH+CT;EACE;EACA;;;AI0iBE;EJviBJ;IAEI;;;;AIqiBA;EJjiBJ;IAEI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAEF;EACE","file":"global.css"} {"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_themes.scss","../scss/modules/_include-media.scss","../scss/_vars.scss"],"names":[],"mappings":"AAEA;ACDA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;;AAGE;EACE;;AAEF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AChGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAIA;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;ACikBF;EDpkBA;IAKI;;;AApBN;EAwBE;IACE;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;ACmiBF;EDtiBA;IAKI;;;AApBN;EAwBE;IACE;IACA;;;;AExEN;AAAA;AAAA;AAIA;AAKA;AAKA;AAGA;ALNA;EAEI,WKKa;ELJb,aKKe;;;ALDnB;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AIukBE;EJ1kBJ;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AIqjBE;EJ1jBJ;IAOI;IACA;IACA;;;AAGF;EACE;;AI6iBA;EJ9iBF;IAGI;;;;AAKN;EACE;EACA;EACA;EACA","file":"global.css"}

View file

@ -252,16 +252,31 @@ More resets/normalizations courtesy of https://mattbrictson.com/blog/css-normali
line-height: 1.5; line-height: 1.5;
} }
h1, h2, h3, h4, h5, h6, figure, p, ol, ul { h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
ol,
ul {
margin: 0; margin: 0;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
ol, ul { ol,
ul {
list-style: none; list-style: none;
padding-inline: 0; padding-inline: 0;
} }
@ -274,3 +289,12 @@ img {
blockquote { blockquote {
margin: 0; margin: 0;
} }
section,
article,
aside,
footer,
header,
nav {
display: block;
}

View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/theme-default.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAMF;IACE","file":"theme-default.css"}

View file

@ -5,4 +5,8 @@ eleventyNavigation:
key: Home key: Home
--- ---
Custom blurb # Welcome
Welcome to my website! Gil's Nexus launched on October 12, 2023. Until June 2024, it was mostly just a placeholder and hosted my social media links. With time and effort, I hope to make it into a cute website reminiscent of the late 1990s and 2000s internet, with more recent design considerations like accessibility and responsiveness.
To learn more about me, see my [About page](/about).

View file

@ -1,6 +1,7 @@
--- ---
title: Hey Girl title: Hey Girl
date: Last Modified date: 2023-05-31T12:00:00-5
excerpt: test
--- ---
Hey girl, Hey girl,

View file

@ -2,6 +2,11 @@
title: Poetry title: Poetry
permalink: /poetry/ permalink: /poetry/
override:tags: [] override:tags: []
pagination:
data: collections.poems
size: 5
reverse: true
generatePageOnEmptyData: true
eleventyNavigation: eleventyNavigation:
key: Poetry key: Poetry
order: 2 order: 2
@ -10,8 +15,8 @@ eleventyNavigation:
# Poetry # Poetry
<ul> <ul>
{%- for poem in collections.poems reversed -%} {%- for post in pagination.items %}
<li><a href="{{ poem.url }}">{{ poem.data.title }}</a> <li><a href="{{ post.url }}">{{ post.data.title }}</a>
&mdash; <i>updated <time datetime="{{ poem.date | formatDate }}">{{ poem.date | formatDate }}</time></i></li> &mdash; <i>updated <time datetime="{{ post.date | formatDate }}">{{ post.date | formatDate }}</time></i></li>
{%- endfor -%} {% endfor -%}
</ul> </ul>

View file

@ -1,6 +1,6 @@
--- ---
title: Self-Effacing title: Self-Effacing
date: Last Modified date: 2022-12-01T12:00:00-5
--- ---
i was born beneath the rocks of a single-minded destiny: cutting cords. i was born beneath the rocks of a single-minded destiny: cutting cords.

View file

@ -1,7 +1,7 @@
// _components.scss // _components.scss
/* ============================================================================ /* ============================================================================
COMPONENTS COMPONENTS
---------- -------------------------------------------------------------------------------
Reusable components for use across my site Reusable components for use across my site
============================================================================ */ ============================================================================ */
@ -11,6 +11,15 @@ Reusable components for use across my site
line-height: 1.7; line-height: 1.7;
padding: 0; padding: 0;
> {
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
}
p, p,
blockquote, blockquote,
ul, ul,

77
src/scss/_themes.scss Normal file
View file

@ -0,0 +1,77 @@
// theme-default.scss
/* ============================================================================
DEFAULT THEME
-------------------------------------------------------------------------------
This is the default theme for my website, which uses the prefer-color-scheme
query to provide the appropriate styles for light mode or dark mode. The other
themes can be selected with a dropdown which is only shown when JavaScript is
enabled.
============================================================================ */
@use "modules/include-media" as *;
:root {
color-scheme: light dark;
}
.theme-default {
@media (prefers-color-scheme: light) {
body {
background: url("/img/background2.png");
}
.site-header {
border: solid black 2px;
background: white;
}
.site-main {
border: solid black 2px;
background: white;
}
.site-navigation {
background: white;
border: solid black 2px;
border-top: none;
@include media(">sm") {
border-top: solid black 2px;
}
}
.site-footer {
border: solid black 2px;
background: white;
}
}
@media (prefers-color-scheme: dark) {
body {
background: black;
}
.site-header {
border: solid white 2px;
background: black;
}
.site-main {
border: solid white 2px;
background: black;
}
.site-navigation {
border: solid white 2px;
background: black;
border-top: none;
@include media(">sm") {
border-top: solid white 2px;
}
}
.site-footer {
border: solid white 2px;
background: black;
}
}
}

View file

@ -3,11 +3,15 @@
GLOBAL VARIABLES GLOBAL VARIABLES
============================================================================ */ ============================================================================ */
/* Media breakpoints ------------------------------------------------------- */ /* Sizing ------------------------------------------------------------------ */
$site-width: 60em;
$site-nav-width: 10em;
$site-main-min-width: 50%;
/* Spacing ----------------------------------------------------------------- */ /* Spacing ----------------------------------------------------------------- */
$gutter: 1em; $site-top: 1em;
$site-bottom: 1em;
$site-gutter: 1em;
/* Typography -------------------------------------------------------------- */ /* Typography -------------------------------------------------------------- */
$leading: 1.7; $leading: 1.7;

View file

@ -7,6 +7,7 @@
@use "modules/include-media" as *; @use "modules/include-media" as *;
@use "components"; @use "components";
@use "themes";
@use "vars" as *; @use "vars" as *;
:root { :root {
@ -14,76 +15,58 @@
size: $font-base-size; size: $font-base-size;
family: $font-stack-serif; family: $font-stack-serif;
} }
color-scheme: light dark;
}
body {
background: url("/img/background2.png");
}
%text-center {
text-align: center;
} }
.site { .site {
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
max-width: #{$site-width};
> { margin: #{$site-top} auto #{$site-bottom};
.banner,
.navbar,
.footer {
@extend %text-center;
} }
.navbar { .site-header {
border: solid black 1px; flex: 0 0 100%;
box-sizing: border-box;
padding: 1em;
@include media(">sm") {
margin-bottom: #{$site-gutter};
}
}
.site-main {
flex: 1 0 #{$site-main-min-width};
box-sizing: border-box;
padding: 1em;
height: min-content;
}
.site-navigation {
flex: 0 0 100%;
box-sizing: border-box;
margin-bottom: #{$site-gutter};
padding: 1em;
height: min-content;
@include media(">sm") {
flex: 0 1 #{$site-nav-width};
margin-right: #{$site-gutter};
margin-bottom: 0;
}
li { li {
display: inline-flex; display: inline-block;
}
}
@include media(">sm") { @include media(">sm") {
main { display: block;
display: flex;
flex-direction: row;
gap: $gutter;
}
} }
} }
} }
.box { .site-footer {
border: solid black 1px; flex: 0 0 100%;
padding: 0 1em; box-sizing: border-box;
margin-top: #{$site-gutter};
padding: 1em;
} }
.width-1\/6 { .page-article {
@include media(">md") { @extend .markup;
width: 16.66666667%;
}
}
.width-2\/3 {
@include media(">md") {
width: 66.66666667%;
}
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.order- {
&first {
order: -999;
}
&last {
order: 999;
}
} }