gil/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Change default to grid layout

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/layouts/default.njk
View file

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

2
src/_includes/layouts/landing.njk
View file

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

223
src/css/global.css
View file

@ -73,134 +73,61 @@ For license text, see:
font-weight: 700; font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf"); src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
} }
/* .markup {
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;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.5; line-height: 1.7;
padding: 0 1.5em; padding: 0 1.5em;
} }
main.page, .markup p,
article.page { .markup blockquote,
border: 32px solid transparent; .markup ul,
border-image: url(/img/nine-patch.png) 32 round; .markup ol,
-webkit-border-image: url(/img/nine-patch.png) 32 round; .markup dl,
background-color: rgb(255, 252, 240); .markup table,
color: #802659; .markup pre {
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 {
margin: 1em 0; margin: 1em 0;
} }
main ul, .markup ul,
main ol, .markup ol {
article ul,
article ol {
all: revert; all: revert;
padding-left: 30px; padding-left: 30px;
} }
main h1, .markup h1 {
article h1 {
font-size: 2.5em; font-size: 2.5em;
} }
main h2, .markup h2 {
article h2 {
font-size: 2em; font-size: 2em;
} }
main h3, .markup h3 {
article h3 {
font-size: 1.5em; font-size: 1.5em;
} }
main h4, .markup h4 {
article h4 {
font-size: 1.2em; font-size: 1.2em;
} }
main h5, .markup h5 {
article h5 {
font-size: 1em; font-size: 1em;
} }
main h6, .markup h6 {
article h6 {
font-size: 1em; font-size: 1em;
} }
main h1, .markup h1,
main h2, .markup h2,
main h3, .markup h3,
main h4, .markup h4,
main h5, .markup h5,
main h6, .markup h6 {
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
margin: 0.5em 0 0.25em 0; margin: 0.5em 0 0.25em 0;
} }
main h1 + p, .markup h1 + p,
main h2 + p, .markup h2 + p,
main h3 + p, .markup h3 + p {
article h1 + p,
article h2 + p,
article h3 + p {
margin-top: 0.5em; margin-top: 0.5em;
} }
main img, .markup img {
article img {
max-width: 100%; max-width: 100%;
} }
main code, .markup code,
main pre, .markup pre {
article code,
article pre {
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -210,21 +137,70 @@ article pre {
padding: 0 5px; padding: 0 5px;
white-space: pre; white-space: pre;
} }
main pre code, .markup pre code {
article pre code {
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
white-space: pre; white-space: pre;
} }
main a,
article a { /******************************************************************************
color: #9ec611; _vars.scss
text-decoration: underline #9ec611 2px; *******************************************************************************
Global variables for the entire website
============================================================================ */
/* SPACING ================================================================= */
/* FONT SIZING ============================================================= */
html {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
}
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;
} }
main a:hover,
article a:hover {
color: #beec1f;
} }
header.banner { header.banner {
@ -243,29 +219,4 @@ footer.footer-main {
text-align: center; 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 */ /*# sourceMappingURL=global.css.map */

2
src/css/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"}

159
src/css/landing.css
View file

@ -1,3 +1,4 @@
/* IMPORTS ================================================================= */
/* /*
COLORS COLORS
@ -73,16 +74,85 @@ For license text, see:
font-weight: 700; font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf"); src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
} }
/* .markup {
word-wrap: break-word;
VARIABLES
===============================================================================
*/
* {
line-height: 1.7; 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 { html {
font-size: 12pt; font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif; font-family: "Linux Libertine", "Times New Roman", Times, serif;
@ -130,84 +200,9 @@ nav a::after {
} }
} }
main article { main article {
word-wrap: break-word;
line-height: 1.5;
padding: 0 1.5em;
padding: 0; padding: 0;
font-size: 1rem; 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 { main article h1 {
margin-top: 0; margin-top: 0;
} }

2
src/css/landing.css.map
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;
}
}

93
src/scss/_mixins.scss
View file

@ -18,96 +18,3 @@ $breakpoints: (
@content; @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;

100
src/scss/global.scss
View file

@ -1,63 +1,55 @@
@use "colors"; @use "colors";
@use "fonts"; @use "fonts";
@use "mixins" as *; @use "mixins" as *;
@use "classes" as *;
/* @use "vars" 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%);
html { html {
font-size: 20px; font: {
font-family: "Linux Libertine", "Times New Roman", Times, serif; size: $font-base-size;
family: $font-stack-serif;
}
} }
body { body {
background-color: #{colors.$background}; display: grid;
color: #{colors.$paper}; padding: $gutter * 2;
@include breakpoint("md") {
grid-template-columns: 2fr 3fr 2fr;
height: 100%;
padding: ($gutter * 2) 0;
& > header {
grid-row: 1;
grid-column: 2;
} }
::selection { & > footer {
background: #{$bg-highlight}; grid-row: 3;
grid-column: 2;
}
}
} }
main, main,
article { article {
font-size: 1rem; font-size: 1rem;
@include breakpoint("md") {
&.page { grid-row: 2;
border: 32px solid transparent; grid-column: 2;
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("sm") { .gba-portrait {
max-width: 900px; margin: auto;
width: 90%; margin-bottom: 1em;
margin: 0 auto; width: 100%;
box-shadow: 8px 8px #{colors.$base-850}; height: auto;
max-width: 192px;
@include breakpoint("md") {
float: right;
margin: 1em;
}
} }
@include markup;
} }
header.banner { header.banner {
@ -76,27 +68,3 @@ footer.footer-main {
margin: 2em 1em 1em 1em; margin: 2em 1em 1em 1em;
text-align: center; 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};
}
}

23
src/scss/landing.scss
View file

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