From 01d972792e07da91ad5c883438a1a6973c60c389 Mon Sep 17 00:00:00 2001 From: Xevion Date: Fri, 24 Nov 2023 03:41:10 -0600 Subject: [PATCH] Add base layout, copy SCSS --- src/layouts/{Layout.astro => Base.astro} | 3 + src/layouts/Post.astro | 8 + src/pages/posts/test-post.md | 16 + src/styles/code.scss | 31 ++ src/styles/fonts.scss | 116 ++++++++ src/styles/glitch.scss | 84 ++++++ src/styles/global.scss | 356 +++++++++++++++++++++++ src/styles/helpers.scss | 37 +++ src/styles/mixins.scss | 23 ++ 9 files changed, 674 insertions(+) rename src/layouts/{Layout.astro => Base.astro} (93%) create mode 100644 src/layouts/Post.astro create mode 100644 src/pages/posts/test-post.md create mode 100644 src/styles/code.scss create mode 100644 src/styles/fonts.scss create mode 100644 src/styles/glitch.scss create mode 100644 src/styles/global.scss create mode 100644 src/styles/helpers.scss create mode 100644 src/styles/mixins.scss diff --git a/src/layouts/Layout.astro b/src/layouts/Base.astro similarity index 93% rename from src/layouts/Layout.astro rename to src/layouts/Base.astro index 7b552be..7f91b23 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Base.astro @@ -1,4 +1,7 @@ --- +import '../styles/global.scss'; +import '../styles/fonts.scss'; + interface Props { title: string; } diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro new file mode 100644 index 0000000..fe5adb3 --- /dev/null +++ b/src/layouts/Post.astro @@ -0,0 +1,8 @@ +--- +import Base from '@layouts/Base.astro'; +--- + + + testing 123 + + diff --git a/src/pages/posts/test-post.md b/src/pages/posts/test-post.md new file mode 100644 index 0000000..15a03d3 --- /dev/null +++ b/src/pages/posts/test-post.md @@ -0,0 +1,16 @@ +--- +title: "Test Post Here" +pubDate: 2023-11-24 +description: "This is a test post" +layout: "@layouts/Post.astro" +--- + +# My First Blog Post + +This is just a test to test markdown formatting features + +```python +a = None +for i in range(3, a or 93 // 7): + print(list(range(1, i * 2, i / 3))) +``` diff --git a/src/styles/code.scss b/src/styles/code.scss new file mode 100644 index 0000000..4f6f6a1 --- /dev/null +++ b/src/styles/code.scss @@ -0,0 +1,31 @@ +pre, +code { + font-family: "CMU Typewriter Text", monospace; + font-size: 0.75em; + font-style: normal !important; +} + +a > code { + color: #90bcff; +} + +code { + border: 1px solid rgb(150, 150, 150); + border-radius: 3px; + background-color: rgb(0, 0, 0); + padding: 0.15em 0.34em; + white-space: nowrap; +} + +pre { + background: rgb(25, 25, 25); + border-radius: 7px; + padding: 1em; + + code { + font-size: 1em; + border: 0; + background-color: transparent !important; + white-space: pre-wrap; + } +} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 0000000..2764b9d --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,116 @@ +@mixin font($path, $family, $weight: normal, $style: normal, $range...) { + @font-face { + font: { + display: fallback; + family: $family; + weight: $weight; + style: $style; + } + @if length($range) > 0 { + unicode-range: $range; + } + src: url($path); + } +} + +@include font("fonts/cmunrm.woff2", "CMU Serif", normal, normal, U+0-10FFFF); +@include font( + "fonts/-cmunrm.woff2", + "CMU Serif", + normal, + normal, + U+20-7E, + U+A0-FF, + U+17F, + U+200-2FF, + U+627, + U+62F, + U+644, + U+646, + U+649, + U+2010-201F, + U+2122, + U+1F4D6 +); +@include font("fonts/cmunti.woff2", "CMU Serif", normal, italic, U+0-10FFFF); +@include font( + "fonts/-cmunti.woff2", + "CMU Serif", + normal, + italic, + U+20-7E, + U+A0-FF, + U+17F, + U+200-2FF, + U+627, + U+62F, + U+644, + U+646, + U+649, + U+2010-201F, + U+2122, + U+1F4D6 +); +@include font("fonts/cmunbx.woff2", "CMU Serif", bold, normal, U+0-10FFFF); +@include font( + "fonts/-cmunbx.woff2", + "CMU Serif", + bold, + normal, + U+20-7E, + U+A0-FF, + U+17F, + U+200-2FF, + U+627, + U+62F, + U+644, + U+646, + U+649, + U+2010-201F, + U+2122, + U+1F4D6 +); +@include font("fonts/cmunbi.woff2", "CMU Serif", bold, italic, U+0-10FFFF); +@include font( + "fonts/-cmunbi.woff2", + "CMU Serif", + bold, + italic, + U+20-7E, + U+A0-FF, + U+17F, + U+200-2FF, + U+627, + U+62F, + U+644, + U+646, + U+649, + U+2010-201F, + U+2122, + U+1F4D6 +); +@include font( + "fonts/cmuntt.woff2", + "CMU Typewriter Text", + normal, + normal, + U+0-10FFFF +); +@include font( + "fonts/-cmuntt.woff2", + "CMU Typewriter Text", + normal, + normal, + U+20-7E, + U+A0-FF, + U+17F, + U+200-2FF, + U+627, + U+62F, + U+644, + U+646, + U+649, + U+2010-201F, + U+2122, + U+1F4D6 +); diff --git a/src/styles/glitch.scss b/src/styles/glitch.scss new file mode 100644 index 0000000..ad1a484 --- /dev/null +++ b/src/styles/glitch.scss @@ -0,0 +1,84 @@ +header { + max-width: 100%; + width: 100%; + + .stack { + overflow: hidden; + display: grid; + grid-template-columns: 1fr; + + &.glitch span { + animation: + glitch 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards + calc(var(--index) * 120ms), + jitter 2000ms ease infinite 2s alternate-reverse; + } + + span { + font-weight: bold; + grid-row-start: 1; + grid-column-start: 1; + font-size: 4rem; + + --stack-height: calc(100% / var(--stacks) - 1px); + --inverse-index: calc(calc(var(--stacks) - 1) - var(--index)); + --clip-top: calc(var(--stack-height) * var(--index)); + --clip-bottom: calc(var(--stack-height) * var(--inverse-index)); + + clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0); + + animation: jitter 2000ms ease infinite 2s alternate-reverse; + + &:nth-child(odd) { + --glitch-translate: 8px; + } + + &:nth-child(even) { + --glitch-translate: -8px; + } + } + } +} + +@keyframes glitch { + 0% { + opacity: 0; + transform: translateX(-50%); + text-shadow: + -2px 3px 0 red, + 2px -3px 0 blue; + } + 60% { + opacity: 0.5; + transform: translateX(50%); + } + 80% { + transform: none; + opacity: 1; + text-shadow: + 2px -3px 0 red, + -2px 3px 0 blue; + } + 100% { + text-shadow: none; + } +} + +@keyframes jitter { + 0% { + text-shadow: + -2px 3px 0 red, + 2px -3px 0 blue; + transform: translate(var(--glitch-translate)); + } + 2% { + text-shadow: + 2px -3px 0 red, + -2px 3px 0 blue; + } + 4%, + 100% { + text-shadow: none; + transform: none; + } +} diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..2c82134 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,356 @@ +@import "glitch"; +@import "mixins"; +@import "helpers"; +@import "code"; + +// Dark-mode selections +::selection, +::-moz-selection { + background: #444444; + color: #ffffff; +} + +// All img tags will use the EXIF data to rotate images +img { + image-orientation: from-image; +} + +html, +body { + max-width: 100%; + max-height: 100%; + width: 100%; + height: 100%; + margin: 0; +} + +html { + padding: 0; + margin: 0; + overflow-y: scroll; + text-rendering: optimizeLegibility; + + @include for-size(phone-only) { + font-size: 10pt; + } + @include for-size(tablet-portrait-up) { + font-size: 12pt; + } + @include for-size(tablet-landscape-up) { + font-size: 14pt; + } + @include for-size(desktop-up) { + font-size: 16pt; + } + @include for-size(big-desktop-up) { + font-size: 18pt; + } +} + +body { + padding: 0; + font-family: "CMU Serif", serif; + line-height: 1.5; + background: #0e0e0e; + color: white; + + display: grid; + justify-items: center; + align-items: center; +} + +.body-container { + max-width: 46em; + margin: 0 1em; +} + +p, +table { + margin: 0.5em 0; +} + +header { + font-size: 4em; + text-align: center; + text-transform: lowercase; + letter-spacing: 0.1em; +} + +@include for-size(tablet-portrait-up) { + header { + font-size: 3em; + } +} + +header span { + letter-spacing: 0; +} + +aside, +blockquote { + margin: 1em 1em 1em 4em; +} + +aside.references:before, +blockquote:before { + display: block; + float: left; + margin-left: -4rem; + color: #808080; +} + +aside.references:before { + font-size: 3em; + margin-top: -0.5rem; + font-family: "Symbola", serif; + + /* OPEN BOOK in text presentation */ + content: "\1F4D6\FE0E"; +} + +blockquote:before { + font-size: 4em; + margin-top: -1rem; + + content: "“"; +} + +h1, +h2, +h3, +h4 { + margin-top: 0.5em; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 2em; +} + +a, +hr { + color: white; +} + +hr { + font-size: 1.5em; + margin: 1rem 0; + border: none; + + &:before { + display: block; + text-align: center; + content: "❦ ❦ ❦"; + } +} + +i, +i *, +em, +em * { + font-style: italic; +} + +b, +b *, +strong, +strong * { + font-weight: bold; +} + +strong, +strong * { + font-style: italic; +} + +ul, +ol, +dl { + margin: 0.5em 0 0.5em 2em; +} + +ul ul, +ul ol, +ul dl, +ol ul, +ol ol, +ol dl, +dl ul, +dl ol, +dl dl { + margin: 0 0 0 2em; + list-style: circle outside none; +} + +ul { + list-style: disc outside none; +} + +ol { + list-style: decimal outside none; +} + +sub { + vertical-align: sub; + font-size: 0.75em; +} + +sup { + vertical-align: super; + font-size: 0.75em; +} + +nav { + text-align: center; + font-family: "CMU Typewriter Text", monospace, monospace; + font-size: 1.25em; + color: #808080; + + a { + color: white; + } +} + +.post_summary { + clear: both; +} + +.post_date { + float: right; + margin: 0 0 1em 2em; + line-height: 1; + text-align: center; + text-transform: uppercase; + border: thin solid white; + border-width: thin 0; + padding: 0.25em 0; + + a { + text-decoration: none; + } + + .date { + font-size: 2em; + } +} + +.post_combo { + margin-top: 0.75em; + + > h2 { + display: inline; + } +} + +.post_image { + max-width: 30%; + margin: 0.5em; + vertical-align: middle; +} + +.post_image_half { + width: 50%; + vertical-align: top; +} + +.post_image_full { + width: 100%; +} + +// Show site with proper CSS styling +html, +body { + visibility: visible !important; +} + +small { + opacity: 50%; +} + +figure { + margin: 1em; +} + +.row { + display: flex; + align-items: center; + height: 100%; +} + +.column { + flex: 50%; +} + +figcaption { + font-size: 70%; + opacity: 40%; + padding-left: 0.4em; + + a { + text-decoration: none; + } +} + +article { + img, + video { + object-fit: contain; + max-width: 100%; + max-height: 100%; + display: block; + margin-left: auto; + margin-right: auto; + } +} + +.build-revision { + font-family: "CMU Typewriter Text", sans-serif; + + a { + color: #d2d2d2; + text-decoration: none; + } +} + +.container { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + + .inner-container { + max-width: 600px; + + h1 { + margin: 0; + font-size: 6em; + line-height: 1; + letter-spacing: -1px; + } + + span { + font-family: "CMU Typewriter Text", sans-serif; + + a { + text-decoration: none; + font-style: italic; + } + } + } +} diff --git a/src/styles/helpers.scss b/src/styles/helpers.scss new file mode 100644 index 0000000..0ce9140 --- /dev/null +++ b/src/styles/helpers.scss @@ -0,0 +1,37 @@ +span, +p { + &.tab { + margin-left: 2em; + } +} + +.nowrap { + white-space: nowrap; +} + +.no-underline { + text-decoration: none; +} + +.text-center { + text-align: center; +} + +.callout-section { + border: solid white; + border-width: thin 0; + padding: 10px; +} + +body.wide { + max-width: 60rem !important; +} + +.no-select { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ +} diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 0000000..ea78cce --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,23 @@ +@mixin for-size($size) { + @if $size == phone-only { + @media (max-width: 599px) { + @content; + } + } @else if $size == tablet-portrait-up { + @media (min-width: 600px) { + @content; + } + } @else if $size == tablet-landscape-up { + @media (min-width: 900px) { + @content; + } + } @else if $size == desktop-up { + @media (min-width: 1200px) { + @content; + } + } @else if $size == big-desktop-up { + @media (min-width: 1800px) { + @content; + } + } +}