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

Add blog section

Browse source
This commit is contained in:
gil 2024-06-19 19:21:44 -05:00
parent 3d7ef57e7b
commit 45ba56c49d
13 changed files with 859 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
src/css/global.css
View file

@ -1,78 +1,4 @@
/*
COLORS
===============================================================================
*/
/*
Flexoki (https://stephango.com/flexoki)
MIT License
Copyright (c) 2023 Steph Ango
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/*
FONT: LINUX LIBERTINE
===============================================================================
License: GPL and OFL 1.1
For license text, see:
- https://gils.nexus/font/GPL.txt
- https://gils.nexus/font/OFL-1.1.txt
*/
@font-face {
font-family: "Linux Libertine";
font-style: normal;
src: local("Linux Libertine"), url("../font/LinLibertine_Rah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: normal;
font-weight: 600;
src: local("Linux Libertine Semibold"), url("../font/LinLibertine_RZah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: normal;
font-weight: 700;
src: local("Linux Libertine Bold"), url("../font/LinLibertine_RBah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
src: local("Linux Libertine Italic"), url("../font/LinLibertine_RIah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
font-weight: 600;
src: local("Linux Libertine Semibold Italic"), url("../font/LinLibertine_RZIah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
}
/* IMPORTS ================================================================= */
.markup {
word-wrap: break-word;
line-height: 1.7;
@ -149,8 +75,84 @@ _vars.scss
*******************************************************************************
Global variables for the entire website
============================================================================ */
/* MEDIA BREAKPOINTS ======================================================= */
/* SPACING ================================================================= */
/* FONT SIZING ============================================================= */
/*
COLORS
===============================================================================
*/
/*
Flexoki (https://stephango.com/flexoki)
MIT License
Copyright (c) 2023 Steph Ango
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/*
FONT: LINUX LIBERTINE
===============================================================================
License: GPL and OFL 1.1
For license text, see:
- https://gils.nexus/font/GPL.txt
- https://gils.nexus/font/OFL-1.1.txt
*/
@font-face {
font-family: "Linux Libertine";
font-style: normal;
src: local("Linux Libertine"), url("../font/LinLibertine_Rah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: normal;
font-weight: 600;
src: local("Linux Libertine Semibold"), url("../font/LinLibertine_RZah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: normal;
font-weight: 700;
src: local("Linux Libertine Bold"), url("../font/LinLibertine_RBah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
src: local("Linux Libertine Italic"), url("../font/LinLibertine_RIah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
font-weight: 600;
src: local("Linux Libertine Semibold Italic"), url("../font/LinLibertine_RZIah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
}
html {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
@ -160,7 +162,7 @@ body {
display: grid;
padding: 2em;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
body {
grid-template-columns: 2fr 3fr 2fr;
height: 100%;
@ -180,7 +182,7 @@ main,
article {
font-size: 1rem;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
main,
article {
grid-row: 2;
@ -195,7 +197,7 @@ article .gba-portrait {
height: auto;
max-width: 192px;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
main .gba-portrait,
article .gba-portrait {
float: right;

2
src/css/global.css.map
View file

@ -1 +1 @@
{"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"}
{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/_colors.scss","../scss/_fonts.scss","../scss/include/_include-media.scss"],"names":[],"mappings":"AAEA;ACFA;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;AAGA;ACXA;;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;;AJnCF;EAEI,WEVa;EFWb,aEVe;;;AFcnB;EACE;EACA;;AKmkBE;ELrkBJ;IAII;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;;AAKN;AAAA;EAEE;;AK+iBE;ELjjBJ;AAAA;IAII;IACA;;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;AKoiBA;ELziBF;AAAA;IAOI;IACA;;;;AAKN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA","file":"global.css"}

166
src/css/landing.css
View file

@ -1,4 +1,83 @@
/* IMPORTS ================================================================= */
.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;
}
/******************************************************************************
_vars.scss
*******************************************************************************
Global variables for the entire website
============================================================================ */
/* MEDIA BREAKPOINTS ======================================================= */
/* SPACING ================================================================= */
/* FONT SIZING ============================================================= */
/*
COLORS
@ -74,85 +153,6 @@ For license text, see:
font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
}
.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;
@ -162,7 +162,7 @@ body {
display: grid;
padding: 2em;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
body {
grid-template-columns: 2fr 3fr 2fr;
gap: 1em;
@ -179,7 +179,7 @@ nav {
font-size: 1.5em;
font-weight: bold;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
nav {
grid-column: 2;
}
@ -192,7 +192,7 @@ nav a::after {
font-style: normal;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
main {
grid-row: 2;
grid-column: 2;
@ -212,7 +212,7 @@ aside {
grid-column: 1;
max-width: 192px;
}
@media screen and (min-width: 768px) {
@media (min-width: 769px) {
aside {
grid-column: 2;
}

2
src/css/landing.css.map
View file

@ -1 +1 @@
{"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"}
{"version":3,"sourceRoot":"","sources":["../scss/landing.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/_colors.scss","../scss/_fonts.scss","../scss/include/_include-media.scss"],"names":[],"mappings":"AAEA;ACFA;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;AAGA;ACXA;;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;;AJnCF;EAEI,WEVa;EFWb,aEVe;;;AFcnB;EACE;EACA;;AKmkBE;ELrkBJ;IAII;IACA,KEvBK;IFwBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AKojBE;EL1jBJ;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;AKwiBF;ELniBJ;IAEI;IACA;IACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AK+gBE;ELlhBJ;IAKI;;;AAGF;EACE","file":"landing.css"}

15
src/posts/index.md Normal file
View file

@ -0,0 +1,15 @@
---
title: Blog
permalink: /blog/
override:tags: []
eleventyNavigation:
key: Blog
order: 2
---
{%- for post in collections.blog reversed -%}
{% if forloop.first == true %}<ul>{% endif %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a>
&mdash; <i>updated <time datetime="{{ post.date | formatDate }}">{{ post.date | formatDate }}</time></i></li>
{% if forloop.last == true %}</ul>{% endif %}
{%- endfor -%}

3
src/posts/posts.json Normal file
View file

@ -0,0 +1,3 @@
{
"tags": "blog"
}

66
src/scss/_colors.scss
View file

@ -1,68 +1,4 @@
// src/scss/_colors.scss
/*
COLORS
===============================================================================
*/
/*
Flexoki (https://stephango.com/flexoki)
MIT License
Copyright (c) 2023 Steph Ango
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
$paper: rgb(255, 252, 240);
$base-50: rgb(242, 240, 229);
$base-100: rgb(230, 228, 217);
$base-150: rgb(218, 216, 206);
$base-200: rgb(206, 205, 195);
$base-300: rgb(183, 181, 172);
$base-500: rgb(135, 133, 128);
$base-600: rgb(111, 110, 105);
$base-700: rgb(87, 86, 83);
$base-800: rgb(64, 62, 60);
$base-850: rgb(52, 51, 49);
$base-900: rgb(40, 39, 38);
$base-950: rgb(28, 27, 26);
$black: rgb(16, 15, 15);
$red-400: rgb(209, 77, 65);
$red-600: rgb(175, 48, 41);
$orange-400: rgb(218, 112, 44);
$orange-600: rgb(188, 82, 21);
$yellow-400: rgb(208, 162, 21);
$yellow-600: rgb(173, 131, 1);
$green-400: rgb(135, 154, 57);
$green-600: rgb(102, 128, 11);
$cyan-400: rgb(58, 169, 159);
$cyan-600: rgb(36, 131, 123);
$blue-400: rgb(67, 133, 190);
$blue-600: rgb(32, 94, 166);
$purple-400: rgb(139, 126, 200);
$purple-600: rgb(94, 64, 157);
$magenta-400: rgb(206, 93, 151);
$magenta-600: rgb(160, 47, 111);
//-----------------------------------------------------------------------------
// _colors.scss
$background: #141013;
$text: $paper;

15
src/scss/_fonts.scss
View file

@ -1,14 +1,17 @@
/*
// _fonts.scss
/* ============================================================================
FONT SOURCES
============================================================================ */
FONT: LINUX LIBERTINE
===============================================================================
License: GPL and OFL 1.1
/* Linux Libertine ------------------------------------------------------------
For license text, see:
Licensed under GPL and OFL 1.1
Full license texts:
- https://gils.nexus/font/GPL.txt
- https://gils.nexus/font/OFL-1.1.txt
*/
---------------------------------------------------------------------------- */
// Normal
@font-face {

20
src/scss/_mixins.scss
View file

@ -1,20 +0,0 @@
@use "colors";
$breakpoints: (
"sm": 600px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
);
@mixin breakpoint($mq-breakpoint, $mq-breakpoints: $breakpoints) {
// If $mq-breakpoint is a key that exists in $mq-breakpoints, get and use the value
@if map-has-key($mq-breakpoints, $mq-breakpoint) {
$mq-breakpoint: map-get($mq-breakpoints, $mq-breakpoint);
}
// Place everything inside this mixin under the appropriate @media rule
@media screen and (min-width: #{$mq-breakpoint}) {
@content;
}
}

17
src/scss/_vars.scss
View file

@ -1,12 +1,17 @@
/******************************************************************************
_vars.scss
*******************************************************************************
Global variables for the entire website
// _vars.scss
/* ============================================================================
GLOBAL VARIABLES
============================================================================ */
/* SPACING ================================================================= */
/* Media breakpoints ------------------------------------------------------- */
/* Spacing ----------------------------------------------------------------- */
$gutter: 1em;
/* FONT SIZING ============================================================= */
/* Typography -------------------------------------------------------------- */
$leading: 1.7;
/* -- Font ----------------------------------------------------------------- */
$font-base-size: 12pt;
$font-stack-serif: "Linux Libertine", "Times New Roman", Times, serif;

26
src/scss/global.scss
View file

@ -1,8 +1,22 @@
@use "colors";
@use "fonts";
@use "mixins" as *;
// global.scss
/* IMPORTS ================================================================= */
@use "sass:math";
@use "modules/include-media" as * with (
$breakpoints: (
xs: 0,
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
2xl: 1536px,
)
);
@use "classes" as *;
@use "vars" as *;
@use "fonts";
html {
font: {
@ -14,7 +28,7 @@ html {
body {
display: grid;
padding: $gutter * 2;
@include breakpoint("md") {
@include media(">md") {
grid-template-columns: 2fr 3fr 2fr;
height: 100%;
padding: ($gutter * 2) 0;
@ -34,7 +48,7 @@ body {
main,
article {
font-size: 1rem;
@include breakpoint("md") {
@include media(">md") {
grid-row: 2;
grid-column: 2;
}
@ -45,7 +59,7 @@ article {
width: 100%;
height: auto;
max-width: 192px;
@include breakpoint("md") {
@include media(">md") {
float: right;
margin: 1em;
}

24
src/scss/landing.scss
View file

@ -2,12 +2,22 @@
/* IMPORTS ================================================================= */
@use "sass:math";
@use "colors";
@use "fonts";
@use "modules/include-media" as * with (
$breakpoints: (
xs: 0,
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
2xl: 1536px,
)
);
@use "classes" as *;
@use "mixins" as *;
@use "vars" as *;
@use "colors";
@use "fonts";
html {
font: {
@ -19,7 +29,7 @@ html {
body {
display: grid;
padding: $gutter * 2;
@include breakpoint("md") {
@include media(">md") {
grid-template-columns: 2fr 3fr 2fr;
gap: $gutter;
height: 100%;
@ -34,7 +44,7 @@ nav {
align-self: end;
font-size: 1.5em;
font-weight: bold;
@include breakpoint("md") {
@include media(">md") {
grid-column: 2;
}
@ -51,7 +61,7 @@ nav {
}
main {
@include breakpoint("md") {
@include media(">md") {
grid-row: 2;
grid-column: 2;
justify-self: center;
@ -71,7 +81,7 @@ aside {
grid-row: 1;
grid-column: 1;
max-width: 192px;
@include breakpoint("md") {
@include media(">md") {
grid-column: 2;
}

618
src/scss/modules/_include-media.scss Normal file
View file

@ -0,0 +1,618 @@
// _ _ _ _ _
// (_) | | | | | (_)
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
//
// Simple, elegant and maintainable media queries in Sass
// v2.0.0
//
// https://eduardoboucas.github.io/include-media
//
// Authors: Eduardo Boucas (@eduardoboucas)
// Kitty Giraudel (@kittygiraudel)
//
// This project is licensed under the terms of the MIT license
@charset "UTF-8";
////
/// include-media library public configuration
/// @author Eduardo Boucas
/// @access public
////
@use 'sass:math';
@use 'sass:map';
@use 'sass:list';
@use 'sass:string';
@use 'sass:meta';
///
/// Creates a list of global breakpoints
///
/// @example scss - Creates a single breakpoint with the label `phone`
/// $breakpoints: ('phone': 320px);
///
$breakpoints: (
'phone': 320px,
'tablet': 768px,
'desktop': 1024px,
) !default;
///
/// Creates a list of static expressions or media types
///
/// @example scss - Creates a single media type (screen)
/// $media-expressions: ('screen': 'screen');
///
/// @example scss - Creates a static expression with logical disjunction (OR operator)
/// $media-expressions: (
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
/// );
///
$media-expressions: (
'screen': 'screen',
'print': 'print',
'handheld': 'handheld',
'landscape': '(orientation: landscape)',
'portrait': '(orientation: portrait)',
'retina2x':
'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
'retina3x':
'(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)',
) !default;
///
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
///
/// @example scss - Interval for pixels is defined as `1` by default
/// @include media('>128px') {}
///
/// /* Generates: */
/// @media (min-width: 129px) {}
///
/// @example scss - Interval for ems is defined as `0.01` by default
/// @include media('>20em') {}
///
/// /* Generates: */
/// @media (min-width: 20.01em) {}
///
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
/// @include media('>2.0rem') {}
///
/// /* Generates: */
/// @media (min-width: 2.1rem) {}
///
$unit-intervals: (
'px': 1,
'em': 0.01,
'rem': 0.1,
'': 0,
) !default;
///
/// Defines whether support for media queries is available, useful for creating separate stylesheets
/// for browsers that don't support media queries.
///
/// @example scss - Disables support for media queries
/// $im-media-support: false;
/// @include media('>=tablet') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* Generates: */
/// .foo {
/// color: tomato;
/// }
///
$im-media-support: true !default;
///
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
/// intercept the breakpoint will be displayed, any others will be ignored.
///
/// @example scss - This media query will show because it intercepts the static breakpoint
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'desktop';
/// @include media('>=tablet') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* Generates: */
/// .foo {
/// color: tomato;
/// }
///
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'tablet';
/// @include media('>=desktop') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* No output */
///
$im-no-media-breakpoint: 'desktop' !default;
///
/// Selects which media expressions are allowed in an expression for it to be used when media queries
/// are not supported.
///
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'desktop';
/// $im-no-media-expressions: ('screen');
/// @include media('>=tablet', 'screen') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* Generates: */
/// .foo {
/// color: tomato;
/// }
///
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'desktop';
/// $im-no-media-expressions: ('screen');
/// @include media('>=tablet', 'retina2x') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* No output */
///
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
////
/// Cross-engine logging engine
/// @author Kitty Giraudel
/// @access private
////
///
/// Log a message either with `@error` if supported
/// else with `@warn`, using `feature-exists('at-error')`
/// to detect support.
///
/// @param {String} $message - Message to log
///
@function im-log($message) {
@if meta.feature-exists('at-error') {
@error $message;
} @else {
@warn $message;
$_: noop();
}
@return $message;
}
///
/// Wrapper mixin for the log function so it can be used with a more friendly
/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
/// within functions because it is not possible to include a mixin in a function
/// and use the mixin everywhere else because it's much more elegant.
///
/// @param {String} $message - Message to log
///
@mixin log($message) {
@if im-log($message) {
}
}
///
/// Function with no `@return` called next to `@warn` in Sass 3.3
/// to trigger a compiling error and stop the process.
///
@function noop() {
}
///
/// Determines whether a list of conditions is intercepted by the static breakpoint.
///
/// @param {Arglist} $conditions - Media query conditions
///
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
///
@function im-intercepts-static-breakpoint($conditions...) {
$no-media-breakpoint-value: map.get($breakpoints, $im-no-media-breakpoint);
@if not $no-media-breakpoint-value {
@if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {
}
}
@each $condition in $conditions {
@if not map.has-key($media-expressions, $condition) {
$operator: get-expression-operator($condition);
$prefix: get-expression-prefix($operator);
$value: get-expression-value($condition, $operator);
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
($prefix == 'min' and $value > $no-media-breakpoint-value)
{
@return false;
}
} @else if not list.index($im-no-media-expressions, $condition) {
@return false;
}
}
@return true;
}
////
/// Parsing engine
/// @author Kitty Giraudel
/// @access private
////
///
/// Get operator of an expression
///
/// @param {String} $expression - Expression to extract operator from
///
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
///
@function get-expression-operator($expression) {
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
@if string.index($expression, $operator) {
@return $operator;
}
}
// It is not possible to include a mixin inside a function, so we have to
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
// functions cannot be called anywhere in Sass, we need to hack the call in
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
$_: im-log('No operator found in `#{$expression}`.');
}
///
/// Get dimension of an expression, based on a found operator
///
/// @param {String} $expression - Expression to extract dimension from
/// @param {String} $operator - Operator from `$expression`
///
/// @return {String} - `width` or `height` (or potentially anything else)
///
@function get-expression-dimension($expression, $operator) {
$operator-index: string.index($expression, $operator);
$parsed-dimension: string.slice($expression, 0, $operator-index - 1);
$parsed-dimension: str-trim($parsed-dimension);
$dimension: 'width';
@if string.length($parsed-dimension) > 0 {
$dimension: $parsed-dimension;
}
@return $dimension;
}
///
/// Get dimension prefix based on an operator
///
/// @param {String} $operator - Operator
///
/// @return {String} - `min` or `max`
///
@function get-expression-prefix($operator) {
@return if(list.index(('<', '<=', '≤'), $operator), 'max', 'min');
}
///
/// Get value of an expression, based on a found operator
///
/// @param {String} $expression - Expression to extract value from
/// @param {String} $operator - Operator from `$expression`
///
/// @return {Number} - A numeric value
///
@function get-expression-value($expression, $operator) {
$operator-index: string.index($expression, $operator);
$value: string.slice($expression, $operator-index + string.length($operator));
$trimmedValue: str-trim($value);
@if map.has-key($breakpoints, $trimmedValue) {
$value: map.get($breakpoints, $trimmedValue);
} @else {
$value: to-number($trimmedValue);
}
$interval: map.get($unit-intervals, math.unit($value));
@if not $interval {
// It is not possible to include a mixin inside a function, so we have to
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
// functions cannot be called anywhere in Sass, we need to hack the call in
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
$_: im-log('Unknown unit `#{math.unit($value)}`.');
}
@if $operator == '>' {
$value: $value + $interval;
} @else if $operator == '<' {
$value: $value - $interval;
}
@return $value;
}
///
/// Parse an expression to return a valid media-query expression
///
/// @param {String} $expression - Expression to parse
///
/// @return {String} - Valid media query
///
@function parse-expression($expression) {
// If it is part of $media-expressions, it has no operator
// then there is no need to go any further, just return the value
@if map.has-key($media-expressions, $expression) {
@return map.get($media-expressions, $expression);
}
$operator: get-expression-operator($expression);
$dimension: get-expression-dimension($expression, $operator);
$prefix: get-expression-prefix($operator);
$value: get-expression-value($expression, $operator);
@return '(#{$prefix}-#{$dimension}: #{$value})';
}
///
/// Slice `$list` between `$start` and `$end` indexes
///
/// @access private
///
/// @param {List} $list - List to slice
/// @param {Number} $start [1] - Start index
/// @param {Number} $end [length($list)] - End index
///
/// @return {List} Sliced list
///
@function slice($list, $start: 1, $end: list.length($list)) {
@if list.length($list) < 1 or $start > $end {
@return ();
}
$result: ();
@for $i from $start through $end {
$result: list.append($result, list.nth($list, $i), comma);
}
@return $result;
}
////
/// String to number converter
/// @author Kitty Giraudel
/// @access private
////
///
/// Casts a string into a number
///
/// @param {String | Number} $value - Value to be parsed
///
/// @return {Number}
///
@function to-number($value) {
@if meta.type-of($value) == 'number' {
@return $value;
} @else if meta.type-of($value) != 'string' {
$_: im-log('Value for `to-number` should be a number or a string.');
}
$first-character: string.slice($value, 1, 1);
$result: 0;
$digits: 0;
$minus: ($first-character == '-');
$numbers: (
'0': 0,
'1': 1,
'2': 2,
'3': 3,
'4': 4,
'5': 5,
'6': 6,
'7': 7,
'8': 8,
'9': 9,
);
// Remove +/- sign if present at first character
@if ($first-character == '+' or $first-character == '-') {
$value: string.slice($value, 2);
}
@for $i from 1 through string.length($value) {
$character: string.slice($value, $i, $i);
@if not(list.index(map.keys($numbers), $character) or $character == '.') {
@return to-length(if($minus, -$result, $result), string.slice($value, $i));
}
@if $character == '.' {
$digits: 1;
} @else if $digits == 0 {
$result: $result * 10 + map.get($numbers, $character);
} @else {
$digits: $digits * 10;
$result: $result + math.div(map.get($numbers, $character), $digits);
}
}
@return if($minus, -$result, $result);
}
///
/// Add `$unit` to `$value`
///
/// @param {Number} $value - Value to add unit to
/// @param {String} $unit - String representation of the unit
///
/// @return {Number} - `$value` expressed in `$unit`
///
@function to-length($value, $unit) {
$units: (
'px': 1px,
'cm': 1cm,
'mm': 1mm,
'%': 1%,
'ch': 1ch,
'pc': 1pc,
'in': 1in,
'em': 1em,
'rem': 1rem,
'pt': 1pt,
'ex': 1ex,
'vw': 1vw,
'vh': 1vh,
'vmin': 1vmin,
'vmax': 1vmax,
);
@if not list.index(map.keys($units), $unit) {
$_: im-log('Invalid unit `#{$unit}`.');
}
@return $value * map.get($units, $unit);
}
////
/// String to number converter
/// @author Jack McNicol
/// @access private
////
///
/// Trims a string of leading and trailing spaces
///
/// @param {String} $string - Value to be trimmed
///
/// @return {String}
///
@function str-trim($string) {
@if (str-slice($string, 1, 1) == ' ') {
@return str-trim(str-slice($string, 2));
} @else if (str-slice($string, str-length($string), -1) == ' ') {
@return str-trim(str-slice($string, 1, -2));
} @else {
@return $string;
}
}
///
/// This mixin aims at redefining the configuration just for the scope of
/// the call. It is helpful when having a component needing an extended
/// configuration such as custom breakpoints (referred to as tweakpoints)
/// for instance.
///
/// @author Kitty Giraudel
///
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
///
/// @example scss - Extend the global breakpoints with a tweakpoint
/// @include media-context(('custom': 678px)) {
/// .foo {
/// @include media('>phone', '<=custom') {
/// // ...
/// }
/// }
/// }
///
/// @example scss - Extend the global media expressions with a custom one
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
/// .foo {
/// @include media('all', '>phone') {
/// // ...
/// }
/// }
/// }
///
/// @example scss - Extend both configuration maps
/// @include media-context(('custom': 678px), ('all': 'all')) {
/// .foo {
/// @include media('all', '>phone', '<=custom') {
/// // ...
/// }
/// }
/// }
///
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
// Save global configuration
$global-breakpoints: $breakpoints;
$global-media-expressions: $media-expressions;
// Update global configuration
$breakpoints: map.merge($breakpoints, $tweakpoints) !global;
$media-expressions: map.merge($media-expressions, $tweak-media-expressions) !global;
@content;
// Restore global configuration
$breakpoints: $global-breakpoints !global;
$media-expressions: $global-media-expressions !global;
}
////
/// include-media public exposed API
/// @author Eduardo Boucas
/// @access public
////
///
/// Generates a media query based on a list of conditions
///
/// @param {Arglist} $conditions - Media query conditions
///
/// @example scss - With a single set breakpoint
/// @include media('>phone') { }
///
/// @example scss - With two set breakpoints
/// @include media('>phone', '<=tablet') { }
///
/// @example scss - With custom values
/// @include media('>=358px', '<850px') { }
///
/// @example scss - With set breakpoints with custom values
/// @include media('>desktop', '<=1350px') { }
///
/// @example scss - With a static expression
/// @include media('retina2x') { }
///
/// @example scss - Mixing everything
/// @include media('>=350px', '<tablet', 'retina3x') { }
///
@mixin media($conditions...) {
@if ($im-media-support and list.length($conditions) == 0) or
(not $im-media-support and im-intercepts-static-breakpoint($conditions...))
{
@content;
} @else if ($im-media-support and list.length($conditions) > 0) {
@media #{string.unquote(parse-expression(list.nth($conditions, 1)))} {
// Recursive call
$sliced-conditions: slice($conditions, 2);
@include media($sliced-conditions...) {
@content;
}
}
}
}