diff --git a/hugo/recipe/content/sandwich-bread.md b/hugo/recipe/content/sandwich-bread.md new file mode 100644 index 0000000..5a93a16 --- /dev/null +++ b/hugo/recipe/content/sandwich-bread.md @@ -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 diff --git a/src/cool-stuff/css-purgatory/base/index.css b/src/cool-stuff/css-purgatory/base/index.css index 325c4fc..cde45a7 100644 --- a/src/cool-stuff/css-purgatory/base/index.css +++ b/src/cool-stuff/css-purgatory/base/index.css @@ -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; } diff --git a/src/cool-stuff/css-purgatory/base/index.html b/src/cool-stuff/css-purgatory/base/index.html index 49f3753..9583593 100644 --- a/src/cool-stuff/css-purgatory/base/index.html +++ b/src/cool-stuff/css-purgatory/base/index.html @@ -5,6 +5,7 @@ CSS Purgatory - Base +
@@ -16,7 +17,9 @@

Description

-

Base is not a style, it is a template for other styles to be copied from

+
+

Base is not a style, it is a template for other styles to be copied from

+
@@ -43,7 +46,7 @@

Typography

-
+

Heading 1

font information

@@ -87,6 +90,17 @@
+ +
+ +
+

Sample Pages

+ +
diff --git a/src/cool-stuff/css-purgatory/ilia2/index.css b/src/cool-stuff/css-purgatory/ilia2/index.css new file mode 100644 index 0000000..2807e62 --- /dev/null +++ b/src/cool-stuff/css-purgatory/ilia2/index.css @@ -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; +} diff --git a/src/cool-stuff/css-purgatory/ilia2/index.html b/src/cool-stuff/css-purgatory/ilia2/index.html new file mode 100644 index 0000000..fd95e0e --- /dev/null +++ b/src/cool-stuff/css-purgatory/ilia2/index.html @@ -0,0 +1,121 @@ + + + + + + CSS Purgatory - ilia2 + + + + +
+

ilia2

+
+ +
+ +
+
+

Description

+
+

+ ilia2 is being considered as a replacement for ilia1. + While ilia1 features a dark background and a static effect overlay, + ilia2 is meant to be brighter. +

+
+
+ +
+ +
+

Colors

+
+
+
#Color hex code
+

HSL: 348 79% 81% +

+
+
#Color hex code
+

HSL: 0 0% 50% +

+
+
#f5a8b8
+

HSL: 348 +

+
+
#f5a8b8
+

HSL: 348 +

+
+
+ +
+ +
+

Typography

+
+
+

Heading 1

+

font information

+
+ +
+

Heading 2

+

font information

+
+ +
+

Heading 3

+

font information

+
+ +
+

Heading 4

+

font information

+
+ +
+

Heading 5

+

font information

+
+ +
+

Heading 6

+

font information

+
+ +
+

Text

+

font information

+
+ + +
+

Subtext

+

font information

+
+ +
+
+ +
+ +
+

Sample Pages

+ +
+
+ +
+ + + + + diff --git a/src/cool-stuff/css-purgatory/index.html b/src/cool-stuff/css-purgatory/index.html index f34e1e1..4ea8c56 100644 --- a/src/cool-stuff/css-purgatory/index.html +++ b/src/cool-stuff/css-purgatory/index.html @@ -23,7 +23,28 @@
  1. - base +

    + base +

    +

    + Base format for color and typography schemes +

    +
    2. +
  2. +

    + ilia1 +

    +

    + First layout used for the homepage +

    +
    3. +
  3. +

    + ilia2 +

    +

    + Second candidate format for the homepage +