Change default to grid layout

This commit is contained in:
gil 2024-06-19 01:24:06 -05:00
parent 03672e452b
commit 3d7ef57e7b
11 changed files with 306 additions and 397 deletions

View file

@ -2,7 +2,7 @@
layout: layouts/base.njk
---
{% include "partials/header.njk" %}
<main class="page">
<main class="page markup">
<header>
<h1>{{ title }}</h1>
</header>

View file

@ -11,7 +11,7 @@
<body>
<nav><a href="{{ entry }}" class="enter-link">Enter</a></nav>
<main>
<article>{{ content | safe }}</article>
<article class="markup">{{ content | safe }}</article>
</main>
<aside>
<img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">

View file

@ -73,134 +73,61 @@ For license text, see:
font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
}
/*
VARIABLES
===============================================================================
*/
/*
COLORS
===============================================================================
*/
html {
font-size: 20px;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
}
body {
background-color: #141013;
color: rgb(255, 252, 240);
}
::selection {
background: rgba(160, 47, 111, 0.25);
}
main,
article {
font-size: 1rem;
.markup {
word-wrap: break-word;
line-height: 1.5;
line-height: 1.7;
padding: 0 1.5em;
}
main.page,
article.page {
border: 32px solid transparent;
border-image: url(/img/nine-patch.png) 32 round;
-webkit-border-image: url(/img/nine-patch.png) 32 round;
background-color: rgb(255, 252, 240);
color: #802659;
box-shadow: 0 8px rgb(52, 51, 49);
}
@media screen and (min-width: 600px) {
main,
article {
max-width: 900px;
width: 90%;
margin: 0 auto;
box-shadow: 8px 8px rgb(52, 51, 49);
}
}
main p,
main blockquote,
main ul,
main ol,
main dl,
main table,
main pre,
article p,
article blockquote,
article ul,
article ol,
article dl,
article table,
article pre {
.markup p,
.markup blockquote,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
margin: 1em 0;
}
main ul,
main ol,
article ul,
article ol {
.markup ul,
.markup ol {
all: revert;
padding-left: 30px;
}
main h1,
article h1 {
.markup h1 {
font-size: 2.5em;
}
main h2,
article h2 {
.markup h2 {
font-size: 2em;
}
main h3,
article h3 {
.markup h3 {
font-size: 1.5em;
}
main h4,
article h4 {
.markup h4 {
font-size: 1.2em;
}
main h5,
article h5 {
.markup h5 {
font-size: 1em;
}
main h6,
article h6 {
.markup h6 {
font-size: 1em;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6 {
margin: 0.5em 0 0.25em 0;
}
main h1 + p,
main h2 + p,
main h3 + p,
article h1 + p,
article h2 + p,
article h3 + p {
.markup h1 + p,
.markup h2 + p,
.markup h3 + p {
margin-top: 0.5em;
}
main img,
article img {
.markup img {
max-width: 100%;
}
main code,
main pre,
article code,
article pre {
.markup code,
.markup pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
@ -210,21 +137,70 @@ article pre {
padding: 0 5px;
white-space: pre;
}
main pre code,
article pre code {
.markup pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
main a,
article a {
color: #9ec611;
text-decoration: underline #9ec611 2px;
/******************************************************************************
_vars.scss
*******************************************************************************
Global variables for the entire website
============================================================================ */
/* SPACING ================================================================= */
/* FONT SIZING ============================================================= */
html {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
}
main a:hover,
article a:hover {
color: #beec1f;
body {
display: grid;
padding: 2em;
}
@media screen and (min-width: 768px) {
body {
grid-template-columns: 2fr 3fr 2fr;
height: 100%;
padding: 2em 0;
}
body > header {
grid-row: 1;
grid-column: 2;
}
body > footer {
grid-row: 3;
grid-column: 2;
}
}
main,
article {
font-size: 1rem;
}
@media screen and (min-width: 768px) {
main,
article {
grid-row: 2;
grid-column: 2;
}
}
main .gba-portrait,
article .gba-portrait {
margin: auto;
margin-bottom: 1em;
width: 100%;
height: auto;
max-width: 192px;
}
@media screen and (min-width: 768px) {
main .gba-portrait,
article .gba-portrait {
float: right;
margin: 1em;
}
}
header.banner {
@ -243,29 +219,4 @@ footer.footer-main {
text-align: center;
}
.gba-portrait {
margin: auto;
margin-bottom: 1em;
transform: rotate(2deg);
background: white;
box-shadow: 4px 4px 0px rgb(183, 181, 172);
width: 100%;
height: auto;
max-width: 288px;
}
@media screen and (min-width: 768px) {
.gba-portrait {
float: right;
margin: 1em;
}
}
a {
color: #9ec611;
text-decoration: underline #9ec611 2px;
}
a:hover {
color: #beec1f;
}
/*# sourceMappingURL=global.css.map */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;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;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;ECnBD;EACA;EACA;;ADmBC;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;;ACjCF;EDuBF;AAAA;IAcI;IACA;IACA;IACA;;;AC9BF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;;AD/CN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACvEA;ED+DF;IAUI;IACA;;;;AAIJ;EACE;EACA;;AAEA;EACE","file":"global.css"}
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;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;;ACxDF;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;;;AChFJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAGA;ACHA;EAEI,WDEa;ECDb,aDEe;;;ACEnB;EACE;EACA;;ACCA;EDHF;IAII;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;;AAKN;AAAA;EAEE;;ACnBA;EDiBF;AAAA;IAII;IACA;;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;AC9BF;EDyBA;AAAA;IAOI;IACA;;;;AAKN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA","file":"global.css"}

View file

@ -1,3 +1,4 @@
/* IMPORTS ================================================================= */
/*
COLORS
@ -73,16 +74,85 @@ For license text, see:
font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
}
/*
VARIABLES
===============================================================================
*/
* {
.markup {
word-wrap: break-word;
line-height: 1.7;
padding: 0 1.5em;
}
.markup p,
.markup blockquote,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
margin: 1em 0;
}
.markup ul,
.markup ol {
all: revert;
padding-left: 30px;
}
.markup h1 {
font-size: 2.5em;
}
.markup h2 {
font-size: 2em;
}
.markup h3 {
font-size: 1.5em;
}
.markup h4 {
font-size: 1.2em;
}
.markup h5 {
font-size: 1em;
}
.markup h6 {
font-size: 1em;
}
.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6 {
margin: 0.5em 0 0.25em 0;
}
.markup h1 + p,
.markup h2 + p,
.markup h3 + p {
margin-top: 0.5em;
}
.markup img {
max-width: 100%;
}
.markup code,
.markup pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
font-family: monospace;
font-size: 12px;
margin: 0 2px;
padding: 0 5px;
white-space: pre;
}
.markup pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
/* IMPORTS ================================================================= */
/******************************************************************************
_vars.scss
*******************************************************************************
Global variables for the entire website
============================================================================ */
/* SPACING ================================================================= */
/* FONT SIZING ============================================================= */
html {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
@ -130,84 +200,9 @@ nav a::after {
}
}
main article {
word-wrap: break-word;
line-height: 1.5;
padding: 0 1.5em;
padding: 0;
font-size: 1rem;
}
main article p,
main article blockquote,
main article ul,
main article ol,
main article dl,
main article table,
main article pre {
margin: 1em 0;
}
main article ul,
main article ol {
all: revert;
padding-left: 30px;
}
main article h1 {
font-size: 2.5em;
}
main article h2 {
font-size: 2em;
}
main article h3 {
font-size: 1.5em;
}
main article h4 {
font-size: 1.2em;
}
main article h5 {
font-size: 1em;
}
main article h6 {
font-size: 1em;
}
main article h1,
main article h2,
main article h3,
main article h4,
main article h5,
main article h6 {
margin: 0.5em 0 0.25em 0;
}
main article h1 + p,
main article h2 + p,
main article h3 + p {
margin-top: 0.5em;
}
main article img {
max-width: 100%;
}
main article code,
main article pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
font-family: monospace;
font-size: 12px;
margin: 0 2px;
padding: 0 5px;
white-space: pre;
}
main article pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
main article a {
color: #9ec611;
text-decoration: underline #9ec611 2px;
}
main article a:hover {
color: #beec1f;
}
main article h1 {
margin-top: 0;
}

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;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;;ACnDF;;AAAA;AAAA;;AAAA;AAQA;EACE;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;;ACVA;EDQF;IAII;IACA,KAlBK;IAmBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;ACzBA;EDmBF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;ACrCJ;ED0CF;IAEI;IACA;IACA;;;AAGF;EC3CD;EACA;EACA;ED2CG;EACA;;AC1CF;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;;AAGF;EACE;EACA;;AAEA;EACE;;ADvCF;EACE;;;AAKN;EACE;EACA;EACA;;AC/DA;ED4DF;IAKI;;;AAGF;EACE","file":"landing.css"}
{"version":3,"sourceRoot":"","sources":["../scss/landing.scss","../scss/_colors.scss","../scss/_fonts.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAEA;ACDA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;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;;ACxDF;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;;;AH9EJ;AIFA;AAAA;AAAA;AAAA;AAAA;AAMA;AAGA;AJEA;EAEI,WIHa;EJIb,aIHe;;;AJOnB;EACE;EACA;;AKJA;ELEF;IAII;IACA,KIhBK;IJiBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AKnBA;ELaF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;AK/BJ;ELoCF;IAEI;IACA;IACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AKxDA;ELqDF;IAKI;;;AAGF;EACE","file":"landing.css"}

83
src/scss/_classes.scss Normal file
View file

@ -0,0 +1,83 @@
.markup {
word-wrap: break-word;
line-height: 1.7;
padding: 0 1.5em;
p,
blockquote,
ul,
ol,
dl,
table,
pre {
margin: 1em 0;
}
ul,
ol {
all: revert;
padding-left: 30px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0.5em 0 0.25em 0;
}
h1 + p,
h2 + p,
h3 + p {
margin-top: 0.5em;
}
img {
max-width: 100%;
}
code,
pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
font-family: monospace;
font-size: 12px;
margin: 0 2px;
padding: 0 5px;
white-space: pre;
}
pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
}

View file

@ -18,96 +18,3 @@ $breakpoints: (
@content;
}
}
@mixin markup {
word-wrap: break-word;
line-height: 1.5;
padding: 0 1.5em;
p,
blockquote,
ul,
ol,
dl,
table,
pre {
margin: 1em 0;
}
ul,
ol {
all: revert;
padding-left: 30px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0.5em 0 0.25em 0;
}
h1 + p,
h2 + p,
h3 + p {
margin-top: 0.5em;
}
img {
max-width: 100%;
}
code,
pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
font-family: monospace;
font-size: 12px;
margin: 0 2px;
padding: 0 5px;
white-space: pre;
}
pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
a {
color: #{colors.$link};
text-decoration: underline #{colors.$link} 2px;
&:hover {
color: #{colors.$link-hover};
}
}
}

12
src/scss/_vars.scss Normal file
View file

@ -0,0 +1,12 @@
/******************************************************************************
_vars.scss
*******************************************************************************
Global variables for the entire website
============================================================================ */
/* SPACING ================================================================= */
$gutter: 1em;
/* FONT SIZING ============================================================= */
$font-base-size: 12pt;
$font-stack-serif: "Linux Libertine", "Times New Roman", Times, serif;

View file

@ -1,63 +1,55 @@
@use "colors";
@use "fonts";
@use "mixins" as *;
/*
VARIABLES
===============================================================================
*/
/*
COLORS
===============================================================================
*/
$fg: scale-color(colors.$magenta-600, $lightness: -20%);
$fg-logo: colors.$magenta-600;
$link: colors.$green-600;
$bg-hover: scale-color(colors.$green-400, $alpha: -75%);
$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);
@use "classes" as *;
@use "vars" as *;
html {
font-size: 20px;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
font: {
size: $font-base-size;
family: $font-stack-serif;
}
}
body {
background-color: #{colors.$background};
color: #{colors.$paper};
}
display: grid;
padding: $gutter * 2;
@include breakpoint("md") {
grid-template-columns: 2fr 3fr 2fr;
height: 100%;
padding: ($gutter * 2) 0;
::selection {
background: #{$bg-highlight};
& > header {
grid-row: 1;
grid-column: 2;
}
& > footer {
grid-row: 3;
grid-column: 2;
}
}
}
main,
article {
font-size: 1rem;
&.page {
border: 32px solid transparent;
border-image: url(/img/nine-patch.png) 32 round;
-webkit-border-image: url(/img/nine-patch.png) 32 round;
background-color: #{colors.$paper};
color: $fg;
box-shadow: 0 8px #{colors.$base-850};
@include breakpoint("md") {
grid-row: 2;
grid-column: 2;
}
@include breakpoint("sm") {
max-width: 900px;
width: 90%;
margin: 0 auto;
box-shadow: 8px 8px #{colors.$base-850};
.gba-portrait {
margin: auto;
margin-bottom: 1em;
width: 100%;
height: auto;
max-width: 192px;
@include breakpoint("md") {
float: right;
margin: 1em;
}
}
@include markup;
}
header.banner {
@ -76,27 +68,3 @@ footer.footer-main {
margin: 2em 1em 1em 1em;
text-align: center;
}
.gba-portrait {
margin: auto;
margin-bottom: 1em;
transform: rotate(2deg);
background: white;
box-shadow: 4px 4px 0px #{colors.$base-300};
width: 100%;
height: auto;
max-width: 288px;
@include breakpoint("md") {
float: right;
margin: 1em;
}
}
a {
color: #{colors.$link};
text-decoration: underline #{colors.$link} 2px;
&:hover {
color: #{colors.$link-hover};
}
}

View file

@ -1,24 +1,18 @@
// landing.scss
/* IMPORTS ================================================================= */
@use "sass:math";
@use "colors";
@use "fonts";
@use "classes" as *;
@use "mixins" as *;
/*
VARIABLES
===============================================================================
*/
$gutter: 1em;
* {
line-height: 1.7;
}
@use "vars" as *;
html {
font: {
size: 12pt;
family: "Linux Libertine", "Times New Roman", Times, serif;
size: $font-base-size;
family: $font-stack-serif;
}
}
@ -64,7 +58,6 @@ main {
}
article {
@include markup;
padding: 0;
font-size: 1rem;