emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bigly styling update

This commit is contained in:
Emilia Allison 2024-11-09 12:51:32 -06:00
parent 64226497d8
commit 4f94881acc
Signed by: emilia
GPG Key ID: 05D5D1107E5100A1
10 changed files with 78 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Makefile
View File

@ -8,7 +8,7 @@ css-watch:
sass -w scss:css
server:
python -m http.server
python -m http.server -b 127.0.0.1
dev:
make -j 2 css-watch server

18
src/about.html
View File

@ -9,23 +9,24 @@
<div id="overlay"></div>
<main class="offset-grid--top--wide fullsize side-a">
<div>
<div class="flex column">
<h1>
<div class="flex column-tight">
<h1 class="ff-serif fs-700 padding-high-top">
About
</h1>
<h3>there used to be a subtitle here</h3>
<p>
<h3 class="ff-serif fs-500 padding-none-top">there used to be a subtitle here</h3>
<p class="ff-sans fs-300 padding-high-top">
I'm not super keen on saying that much about myself on the <span class="waltuh-gradient">internet</span>.
Here's some information about myself, posted on the aforementioned <span class="waltuh-gradient">internet</span>.
</p>
<p>
<p class="ff-sans fs-300 padding-mid-top">
I work for a pretty neat company as an associate robotic automation engineer.
(this means I am cool, I think.)
</p>
</div>
<div class="flex column">
<h1>Opinions</h1>
<h3>A 100% exhaustive list, of course</h3>
<div class="flex column-tight">
<h1 class="ff-serif fs-700 padding-high-top">Opinions</h1>
<h3 class="ff-serif fs-500 padding-none-top">A 100% exhaustive list, of course</h3>
<span class="ff-sans fs-300 padding-low-top">
<ul>
<li>
the modern internet is bloated
@ -40,6 +41,7 @@ Here's some information about myself, posted on the aforementioned <span class="
<li>FluentControl whistle noise &#x1f525; &#x1F5E3;</li>
<li>&#129424 &#127844</li>
</ul>
</span>
</div>
</div>
</div>

22
src/cool-stuff/index.html
View File

@ -12,31 +12,36 @@
</div>
<main class="offset-grid--top--wide--column side-a">
<div>
<h1 class="gap-small-bottom">
<h1 class="ff-serif fs-700 gap-small-bottom">
Cool Stuff
</h1>
<h3 class="gap-mid-bottom">it's debatably cool</h3>
<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
<span class="ff-sans fs-300 span-full-width">
<p>
If a page uses/requires JavaScript (or WASM), its link will be marked with (&#x2615).
When relevant, a link to a Git repo will be provided (&#128187).
If content is useful for my job, it will be marked with
(&#x1f935;&#x200d;&#x2640;&#xfe0f;).
</p>
<h1 class="gap-small-bottom">
</span>
<h1 class="gap-small-bottom ff-serif fs-700">
the stuff
</h1>
<h3>
<h3 class="ff-serif fs-500">
Artisan Handcrafted
</h3>
<span class="ff-sans fs-300 span-full-width">
<ul>
<li><a href="plate-tool-beta">Plate tool</a> &#x2615
<a href="https://git.ilia.moe/emilia/plate-tool">&#128187;
<li><a href="plate-tool-beta">Plate tool</a>
<a href="https://git.ilia.moe/emilia/plate-tool">&#x2615;&#128187;
&#x1f935;&#x200d;&#x2640;&#xfe0f;</a>
</li>
</ul>
<h3>
</span>
<h3 class="ff-serif fs-500 padding-low-top">
Static Generated (sometimes)
</h3>
<span class="ff-sans fs-300 span-full-width">
<ul>
<li><a href="recipes">Recipes</a>
<ul>
@ -46,12 +51,13 @@
</li>
<li><a href="/pictures">Pictures</a>
<ul>
Password protected, and also linked from web root.
Password protected for your non-enjoyment.
intentionally bizarre pictures blasted onto your screen
by way of a terrible python pipeline.
</ul>
</li>
</ul>
</span>
</div>
<a href="../">
</a>

BIN
src/fonts/Playfair.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/PlayfairItalic.ttf Normal file
View File

Binary file not shown.

6
src/index.html
View File

@ -21,16 +21,18 @@
<div id="overlay"></div>
<main class="offset-grid--top fullsize">
<div>
<h1 class="text-dark ff-serif fs-800 gap-large-bottom">
<h1 class="text-dark ff-mono fs-800 gap-large-bottom">
Em<span class="waltuh-gradient-underline">ilia</span>.
</h1>
<div class="ff-sans fs-400">
<p>allegedly an engineer???</p>
<p id="pgp_p">pgp:
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
</a>
</p>
<p>bottom text (now with extra spice&trade;)</p>
<p class="fs-100 padding-mid-top">bottom text (now with extra spice&trade;)</p>
</div>
</div>
<footer class="lock-bottom flex row">
<a title="about" href="about">

2
src/scss/about.scss
View File

@ -1,4 +1,4 @@
@import "waltuh/waltuh";
@use "waltuh/waltuh";
h1 {
margin-top: 3vh;

2
src/scss/pictures.scss
View File

@ -1,4 +1,4 @@
@import "waltuh/waltuh";
@use "waltuh/waltuh";
main {
grid-template-rows: 0.1fr 1fr 1fr !important; // Override default

21
src/scss/waltuh/_variables.scss
View File

@ -4,7 +4,8 @@
$-color-white: hsl(280 30% 80%);
$-color-dark: color.adjust($-color-white, $lightness: -50%);
$-color-light: hsl(190 80% 30%);
$-ff-serif: "Inconsolata", monospace;
$-ff-mono: "Inconsolata", monospace;
$-ff-serif: "Playfair", serif;
$-ff-sans: "Jost", sans-serif;
$-fs-900: math.div(100rem, 16);
@ -14,6 +15,7 @@ $-fs-900: math.div(100rem, 16);
$color-light: $-color-light,
$ff-serif: $-ff-serif,
$ff-sans: $-ff-sans,
$ff-mono: $-ff-mono,
$fs-900: $-fs-900
);
@ -30,4 +32,21 @@ $-fs-900: math.div(100rem, 16);
src: url("/fonts/Jost.ttf");
font-display: swap;
font-variation-settings: "wght" 300;
}
@font-face {
font-family: "Shantell";
src: url("/fonts/Shantell.ttf");
font-display: swap;
}
@font-face {
font-family: "Playfair";
src: url("/fonts/Playfair.ttf");
font-display: swap;
font-variation-settings: "wght" 300;
font-variation-settings: "wdth" 85;
}

27
src/scss/waltuh/base.scss
View File

@ -30,10 +30,12 @@ $fs-500: math.div(28rem, 16) !default;
$fs-400: math.div(24rem, 16) !default;
$fs-300: math.div(18rem, 16) !default;
$fs-200: math.div(16rem, 16) !default;
$fs-100: math.div(12rem, 16) !default;
$ff-serif: serif !default;
$ff-sans-cond: sans-serif !default;
$ff-sans: sans-serif !default;
$ff-mono: monospace !default;
/* --------------- */
/* Utility Classes */
@ -60,6 +62,11 @@ $ff-sans: sans-serif !default;
max-width: 800px;
}
.column-tight {
@extend .column;
gap: 0rem;
}
.row {
flex-direction: row;
flex-wrap: wrap;
@ -83,6 +90,10 @@ $ff-sans: sans-serif !default;
bottom: 0%;
}
.span-full-width {
width: 100%;
}
/* Other */
.hr::after { /* Add fake hr after header */
@ -117,14 +128,30 @@ $ff-sans: sans-serif !default;
.fs-400 { font-size: $fs-400; }
.fs-300 { font-size: $fs-300; }
.fs-200 { font-size: $fs-200; }
.fs-100 { font-size: $fs-100; }
.ff-serif { font-family: $ff-serif; }
.ff-sans-cond { font-family: $ff-sans-cond; }
.ff-sans { font-family: $ff-sans; }
.ff-mono { font-family: $ff-mono; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
/* Padding Classes */
$padding-amounts: ("low": 0.5rem, "mid": 1rem, "high": 1.5rem, "none": 0rem);
$padding-directions: "all", "top", "bottom", "left", "right";
@each $amount-name, $amount-val in $padding-amounts {
@each $dir in $padding-directions {
.padding-#{$amount-name}-#{$dir} {
padding-#{$dir}: $amount-val;
}
}
}
/* Semantic Tags and Their Classes */
header {