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

Bulk commit 

I forgor what happened
This commit is contained in:
Emilia Allison 2022-09-26 22:09:28 -04:00
parent 8790ec387e
commit d4826b33ab
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
6 changed files with 360 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
hugo/recipe/content/sandwich-bread.md Normal file
View File

@ -0,0 +1,23 @@
---
title: "Sandwich Bread"
lastmod: 2022-09-10T14:33:38-04:00
date: 2022-09-10T14:33:38-04:00
author: "Emilia"
tags: ["baked"]
draft: true
---
### Ingredients
- 0.75 cups water
- 0.5 cups milk
- 1 Tbsp yeast
- 3 cups flour
- 1.5 tsp salt
- 1 Tbsp sugar
- 3 Tbsp unsalted butter
### Procedure
1. Heat water and milk to around 100°F
2. Add yeast to liquid mixture, wait for bloom
3. Whisk together flour, salt, and sugar
4. Pour liquid into dry ingredient mix

12
src/cool-stuff/css-purgatory/base/index.css
View File

@ -112,8 +112,18 @@ input, button, textarea, select {
max-width: 100%;
}
.two-columns {
display: grid;
/* Will shrink to one column, never exceed two!
* The `max` in `minmax` asks that the columns
* be no smaller */
grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
column-gap: 1rem;
justify-content: space-evenly;
}
.container {
padding-inline: 2em;
padding-inline: clamp(0.5rem, 4rem, 5rem);
margin-inline: auto;
max-width: 80rem;
}

18
src/cool-stuff/css-purgatory/base/index.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - Base</title>
<link rel="stylesheet" href="index.css">
<!-- Base v1 -->
</head>
<body>
<header id="title">
@ -16,7 +17,9 @@
<article class="">
<section id="description">
<h2>Description</h2>
<p><em>Base</em> is not a style, it is a template for other styles to be copied from</p>
<div class="container">
<p><em>Base</em> is not a style, it is a template for other styles to be copied from</p>
</div>
</section>
<hr>
@ -43,7 +46,7 @@
<section id="typography">
<h2>Typography</h2>
<div class="flex row">
<div class="container two-columns">
<div>
<p class="ff-serif fs-900">Heading 1</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
@ -87,6 +90,17 @@
</div>
</section>
<hr>
<section id="samples">
<h2>Sample Pages</h2>
<ul class="container two-columns">
<li><a>First Sample Page</a></li>
<li><a>Second Sample Page</a></li>
<li><a>Third Sample Page</a></li>
</ul>
</section>
</article>
<hr>

167
src/cool-stuff/css-purgatory/ilia2/index.css Normal file
View File

@ -0,0 +1,167 @@
/* ----------------- */
/* Custom Properties */
/* ----------------- */
/* Many of the prop-
* erties here are
* where the substa-
* ntive changes
* will be made */
:root {
/* colors */
--color-dark: 348 79% 81% ;/* White */
--color-light: 0 0% 50% ; /* Gray */
/*--color-white: 348 79% 97% ;*/
--color-white: var( --color-dark) / .2 ;
--color-accent: 45 79% 81% ;/* White */
/* font */
/* Sizes divided by 16 so values given in px */
--fs-900: calc(125rem / 16);
--fs-800: calc(75rem / 16);
--fs-700: calc(56rem / 16);
--fs-600: calc(32rem / 16);
--fs-500: calc(28rem / 16);
--fs-400: calc(24rem / 16);
--fs-300: calc(18rem / 16);
--fs-200: calc(16rem / 16);
--ff-serif: serif;
--ff-sans-cond: sans-serif;
--ff-sans: sans-serif;
}
/* ----- */
/* Reset */
/* ----- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 400;
}
h1, h2, h3 {
line-height: 1.1;
}
body {
font-family: var(--ff-sans);
font-size: var(--fs-400);
color: hsl( var(--color-dark) );
background-color: hsl( var(--color-white) );
line-height: 1.5;
min-height: 100vh;
}
img, picture {
max-width: 100%;
display: block;
}
input, button, textarea, select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behaviour: auto !important;
}
}
/* --------------- */
/* Utility Classes */
/* --------------- */
.flex {
display: flex;
gap: 2rem;
}
.column {
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
}
.row {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: baseline;
max-width: 100%;
}
.two-columns {
display: grid;
/* Will shrink to one column, never exceed two!
* The `max` in `minmax` asks that the columns
* be no smaller */
grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
column-gap: 1rem;
justify-content: space-evenly;
}
.container {
padding-inline: clamp(0.5rem, 4rem, 5rem);
margin-inline: auto;
max-width: 80rem;
}
/* Color Classes */
.bg-dark { background-color: hsl( var(--color-dark) ); }
.bg-light { background-color: hsl( var(--color-light) ); }
.bg-white { background-color: hsl( var(--color-white) ); }
.text-dark { color: hsl( var(--color-dark) ); }
.text-light { color: hsl( var(--color-light) ); }
.text-white { color: hsl( var(--color-white) ); }
/* Font Classes */
.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }
.ff-serif { font-family: var(--ff-serif); }
.ff-sans-cond { font-family: var(--ff-sans-cond); }
.ff-sans { font-family: var(--ff-sans); }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
/* -------------------- */
/* Non-Reusable Classes */
/* -------------------- */
/* meant for these pages
* only, not to be used
* in practice */
.colors--block {
padding: 3rem 1rem 1rem;
border: 1px solid black;
}

121
src/cool-stuff/css-purgatory/ilia2/index.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - ilia2</title>
<link rel="stylesheet" href="index.css">
<!-- Base v1 -->
</head>
<body>
<header id="title">
<h1>ilia2</h1>
</header>
<hr>
<article class="">
<section id="description">
<h2>Description</h2>
<div class="container">
<p>
<em>ilia2</em> is being considered as a replacement for <em>ilia1</em>.
While <em>ilia1</em> features a dark background and a static effect overlay,
<em>ilia2</em> is meant to be brighter.
</p>
</div>
</section>
<hr>
<section id="colors">
<h2>Colors</h2>
<div class="container flex">
<div>
<div class="colors--block bg-dark text-white">#Color hex code</div>
<p> HSL: 348 79% 81%
</div>
<div>
<div class="colors--block bg-light text-white">#Color hex code</div>
<p> HSL: 0 0% 50%
</div>
<div>
<div class="colors--block bg-white text-dark">#f5a8b8</div>
<p> HSL: 348
</div>
<div>
<div class="colors--block bg-white text-dark">#f5a8b8</div>
<p> HSL: 348
</div>
</div>
</section>
<hr>
<section id="typography">
<h2>Typography</h2>
<div class="container two-columns">
<div>
<p class="ff-serif fs-900">Heading 1</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-serif fs-800">Heading 2</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-serif fs-700">Heading 3</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-sans fs-600">Heading 4</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-sans fs-500">Heading 5</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-sans fs-400">Heading 6</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-sans fs-300">Text</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-sans-cond fs-200">Subtext</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
</div>
</section>
<hr>
<section id="samples">
<h2>Sample Pages</h2>
<ul class="container two-columns">
<li><a>First Sample Page</a></li>
<li><a>Second Sample Page</a></li>
<li><a>Third Sample Page</a></li>
</ul>
</section>
</article>
<hr>
<footer>
<a href="../">Return to Purgatory</a>
</footer>
</body>
</html>

23
src/cool-stuff/css-purgatory/index.html
View File

@ -23,7 +23,28 @@
</h1>
<ol>
<li>
<a href="base">base</a>
<h3>
<a href="base">base</a>
</h3>
<p>
Base format for color and typography schemes
</p>
</li>
<li>
<h3>
<a href="https://ilia.moe">ilia1</a>
</h3>
<p>
First layout used for <a href="https://ilia.moe">the homepage</a>
</p>
</li>
<li>
<h3>
<a href="ilia2">ilia2</a>
</h3>
<p>
Second candidate format for the homepage
</p>
</li>
</ol>
</div>