Change default to grid layout
This commit is contained in:
parent
03672e452b
commit
3d7ef57e7b
|
@ -2,7 +2,7 @@
|
|||
layout: layouts/base.njk
|
||||
---
|
||||
{% include "partials/header.njk" %}
|
||||
<main class="page">
|
||||
<main class="page markup">
|
||||
<header>
|
||||
<h1>{{ title }}</h1>
|
||||
</header>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
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 {
|
||||
|
@ -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 */
|
||||
|
|
|
@ -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"}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
83
src/scss/_classes.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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
12
src/scss/_vars.scss
Normal 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;
|
|
@ -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;
|
||||
|
||||
& > header {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #{$bg-highlight};
|
||||
& > 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};
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue