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;
 | 
			
		||||
}
 | 
			
		||||
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 */
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
 | 
			
		||||
::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};
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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