diff --git a/assets/css/app.css b/assets/css/app.css index e666e2a..b908ada 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,161 +1,2 @@ -@layer reset theme,layout; - -@font-face { - font-family: "BerkeleyMono"; - src: url("/fonts/BerkeleyMonoVariable-Regular.woff2") format("woff2"); -} - -@font-face { - font-family: "BerkeleyMonoItalic"; - src: url("/fonts/BerkeleyMonoVariable-Italic.woff2") format("woff2"); -} - -@layer reset { - /* - 1. Use a more-intuitive box-sizing model. - */ - *, - *::before, - *::after { - box-sizing: border-box; - } - /* - 2. Remove default margin - */ - * { - margin: 0; - } - /* - Typographic tweaks! - 3. Add accessible line-height - 4. Improve text rendering - */ - body { - line-height: 1.5; - } - /* - 5. Improve media defaults - */ - img, - picture, - video, - canvas, - svg { - display: block; - max-width: 100%; - } - /* - 6. Remove built-in form typography styles - */ - input, - button, - textarea, - select { - font: inherit; - } - /* - 7. Avoid text overflows - */ - p, - h1, - h2, - h3, - h4, - h5, - h6 { - overflow-wrap: break-word; - } - - p { - margin-bottom: 1em; - } -} - -@layer theme { - :root { - --header-font: BerkeleyMono; - --body-font: BerkeleyMono; - --main-accent-color: #ff0095; - --main-background-color: #001626; - --main-text-color: #ffffff; - - --default-grid-gap: 0vmax; - } -} - -@layout layout { -} - -body { - color: var(--main-text-color); - background: var(--main-background-color); - font-family: var(--header-font); - margin: 1rem; -} - -main { - display: grid; - gap: var(--default-grid-gap); - grid-template-areas: - "header" - "sidebar" - "content" - "sidebar2" - "footer"; - overflow: hidden; - height: 90vh; -} - -@media only screen and (min-width: 600px) { - body { - margin: 1rem; - } - - main { - grid-template-columns: 1fr 4fr; - grid-template-areas: - "header header" - "sidebar content" - "sidebar2 sidebar2" - "footer footer"; - } -} - -@media only screen and (min-width: 1100px) { - body { - margin: 1rem 5rem; - } - - main { - grid-template-columns: min-content 3fr min-content; - grid-template-areas: - "header header header" - "sidebar content sidebar2" - "footer footer footer"; - } -} - -header { - grid-area: header; - color: var(--main-accent-color); -} - -div#sidebar { - grid-area: sidebar; -} - -div#sidebar2 { - grid-area: sidebar2; -} - -div#content { - grid-area: content; - padding: 0 1em; -} - -footer { - grid-area: footer; -} - -.gridbox { -} +@import "style"; +@import "color/pink"; diff --git a/assets/css/buttons.css b/assets/css/buttons.css new file mode 100644 index 0000000..0395889 --- /dev/null +++ b/assets/css/buttons.css @@ -0,0 +1,95 @@ +.button-container { + display: table; + margin-left: auto; + margin-right: auto; +} + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ +} +button.outline, +.button.outline, +a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; +} +button.outline :hover, +.button.outline :hover, +a.button.outline :hover { + transform: none; + box-shadow: none; +} +button.primary, +.button.primary, +a.button.primary { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} +button.primary:hover, +.button.primary:hover, +a.button.primary:hover { + box-shadow: 0 2px 6px rgba(50, 50, 93, 0.21), 0 1px 3px rgba(0, 0, 0, 0.08); +} +button.link, +.button.link, +a.button.link { + background: none; + font-size: 1rem; +} +button.small, +.button.small, +a.button.small { + font-size: 0.8rem; +} +button.wide, +.button.wide, +a.button.wide { + min-width: 200px; + padding: 14px 24px; +} + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; +} + +.code-toolbar { + margin-bottom: 20px; +} +.code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; +} diff --git a/assets/css/color/background_auto.css b/assets/css/color/background_auto.css new file mode 100644 index 0000000..6fff4f8 --- /dev/null +++ b/assets/css/color/background_auto.css @@ -0,0 +1,12 @@ +@media (prefers-color-scheme: light) { + :root { + --background: white; + --color: #101010; + } +} +@media (prefers-color-scheme: dark) { + :root { + --background: #101010; + --color: #A9B7C6; + } +} diff --git a/assets/css/color/background_blue.css b/assets/css/color/background_blue.css new file mode 100644 index 0000000..d7ce46a --- /dev/null +++ b/assets/css/color/background_blue.css @@ -0,0 +1,3 @@ +:root { + --background: #1D212C; +} diff --git a/assets/css/color/background_dark.css b/assets/css/color/background_dark.css new file mode 100644 index 0000000..f63321b --- /dev/null +++ b/assets/css/color/background_dark.css @@ -0,0 +1,4 @@ +:root { + --background: #101010; + --color: #A9B7C6; +} diff --git a/assets/css/color/background_green.css b/assets/css/color/background_green.css new file mode 100644 index 0000000..3bcdf16 --- /dev/null +++ b/assets/css/color/background_green.css @@ -0,0 +1,3 @@ +:root { + --background: #1F222A; +} diff --git a/assets/css/color/background_light.css b/assets/css/color/background_light.css new file mode 100644 index 0000000..ac41318 --- /dev/null +++ b/assets/css/color/background_light.css @@ -0,0 +1,3 @@ +:root { + --background: #f0f0f0; +} diff --git a/assets/css/color/background_orange.css b/assets/css/color/background_orange.css new file mode 100644 index 0000000..ea0ef7d --- /dev/null +++ b/assets/css/color/background_orange.css @@ -0,0 +1,3 @@ +:root { + --background: #222129; +} diff --git a/assets/css/color/background_pink.css b/assets/css/color/background_pink.css new file mode 100644 index 0000000..565d610 --- /dev/null +++ b/assets/css/color/background_pink.css @@ -0,0 +1,3 @@ +:root { + --background: #21202C; +} diff --git a/assets/css/color/background_red.css b/assets/css/color/background_red.css new file mode 100644 index 0000000..fbce29e --- /dev/null +++ b/assets/css/color/background_red.css @@ -0,0 +1,3 @@ +:root { + --background: #221F29; +} diff --git a/assets/css/color/blue-auto.css b/assets/css/color/blue-auto.css new file mode 100644 index 0000000..ef991a0 --- /dev/null +++ b/assets/css/color/blue-auto.css @@ -0,0 +1,26 @@ +@media (prefers-color-scheme: dark) { + :root { + --accent: rgb(35,176,255); + --accent-alpha-70: rgba(35,176,255,.7); + --accent-alpha-20: rgba(35,176,255,.2); + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + } + :root div.logo { + color: black; + } +} +@media (prefers-color-scheme: light) { + :root { + --accent: rgb(32,128,192); + --accent-alpha-70: rgba(32,128,192,.7); + --accent-alpha-20: rgba(32,128,192,.2); + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + } + :root div.logo { + color: white; + } +} diff --git a/assets/css/color/blue-light.css b/assets/css/color/blue-light.css new file mode 100644 index 0000000..1b05c4c --- /dev/null +++ b/assets/css/color/blue-light.css @@ -0,0 +1,11 @@ +:root { + --accent: rgb(32,128,192); + --accent-alpha-70: rgba(32,128,192,.7); + --accent-alpha-20: rgba(32,128,192,.2); + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); +} +:root div.logo { + color: white; +} diff --git a/assets/css/color/blue.css b/assets/css/color/blue.css new file mode 100644 index 0000000..b731ec0 --- /dev/null +++ b/assets/css/color/blue.css @@ -0,0 +1,8 @@ +:root { + --accent: rgb(35,176,255); + --accent-alpha-70: rgba(35,176,255,.7); + --accent-alpha-20: rgba(35,176,255,.2); + --background: #1D212C; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/color/green-auto.css b/assets/css/color/green-auto.css new file mode 100644 index 0000000..bbfed7c --- /dev/null +++ b/assets/css/color/green-auto.css @@ -0,0 +1,26 @@ +@media (prefers-color-scheme: dark) { + :root { + --accent: rgb(120,226,160); + --accent-alpha-70: rgba(120,226,160,.7); + --accent-alpha-20: rgba(120,226,160,.2); + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + } + :root div.logo { + color: black; + } +} +@media (prefers-color-scheme: light) { + :root { + --accent: rgb(24, 192, 128); + --accent-alpha-70: rgba(24, 192, 128,.7); + --accent-alpha-20: rgba(24, 192, 128,.2); + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + } + :root div.logo { + color: white; + } +} diff --git a/assets/css/color/green-light.css b/assets/css/color/green-light.css new file mode 100644 index 0000000..f54a0d1 --- /dev/null +++ b/assets/css/color/green-light.css @@ -0,0 +1,11 @@ +:root { + --accent: rgb(24, 192, 128); + --accent-alpha-70: rgba(24, 192, 128,.7); + --accent-alpha-20: rgba(24, 192, 128,.2); + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); +} +:root div.logo { + color: white; +} diff --git a/assets/css/color/green.css b/assets/css/color/green.css new file mode 100644 index 0000000..96bbc91 --- /dev/null +++ b/assets/css/color/green.css @@ -0,0 +1,8 @@ +:root { + --accent: rgb(120,226,160); + --accent-alpha-70: rgba(120,226,160,.7); + --accent-alpha-20: rgba(120,226,160,.2); + --background: #1F222A; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/color/orange-auto.css b/assets/css/color/orange-auto.css new file mode 100644 index 0000000..2caf9ce --- /dev/null +++ b/assets/css/color/orange-auto.css @@ -0,0 +1,26 @@ +@media (prefers-color-scheme: dark) { + :root { + --accent: rgb(255,168,106); + --accent-alpha-70: rgba(255,168,106,.7); + --accent-alpha-20: rgba(255,168,106,.2); + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + } + :root div.logo { + color: black; + } +} +@media (prefers-color-scheme: light) { + :root { + --accent: rgb(240,128,48); + --accent-alpha-70: rgba(240,128,48,.7); + --accent-alpha-20: rgba(240,128,48,.2); + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + } + :root div.logo { + color: white; + } +} diff --git a/assets/css/color/orange-light.css b/assets/css/color/orange-light.css new file mode 100644 index 0000000..a0a96a1 --- /dev/null +++ b/assets/css/color/orange-light.css @@ -0,0 +1,11 @@ +:root { + --accent: rgb(240,128,48); + --accent-alpha-70: rgba(240,128,48,.7); + --accent-alpha-20: rgba(240,128,48,.2); + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); +} +:root div.logo { + color: white; +} diff --git a/assets/css/color/orange.css b/assets/css/color/orange.css new file mode 100644 index 0000000..5006719 --- /dev/null +++ b/assets/css/color/orange.css @@ -0,0 +1,8 @@ +:root { + --accent: rgb(255,168,106); + --accent-alpha-70: rgba(255,168,106,.7); + --accent-alpha-20: rgba(255,168,106,.2); + --background: #222129; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/color/pink-auto.css b/assets/css/color/pink-auto.css new file mode 100644 index 0000000..9f4ea9e --- /dev/null +++ b/assets/css/color/pink-auto.css @@ -0,0 +1,26 @@ +@media (prefers-color-scheme: dark) { + :root { + --accent: rgb(224,64,192); + --accent-alpha-70: rgba(224,64,192); + --accent-alpha-20: rgba(224,64,192,.2); + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + } + :root div.logo { + color: black; + } +} +@media (prefers-color-scheme: light) { + :root { + --accent: rgb(238,114,241); + --accent-alpha-70: rgba(238,114,241,.7); + --accent-alpha-20: rgba(238,114,241,.2); + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + } + :root div.logo { + color: white; + } +} diff --git a/assets/css/color/pink-light.css b/assets/css/color/pink-light.css new file mode 100644 index 0000000..759aa56 --- /dev/null +++ b/assets/css/color/pink-light.css @@ -0,0 +1,11 @@ +:root { + --accent: rgb(224,64,192); + --accent-alpha-70: rgba(224,64,192); + --accent-alpha-20: rgba(224,64,192,.2); + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); +} +:root div.logo { + color: white; +} diff --git a/assets/css/color/pink.css b/assets/css/color/pink.css new file mode 100644 index 0000000..59c9f22 --- /dev/null +++ b/assets/css/color/pink.css @@ -0,0 +1,8 @@ +:root { + --accent: rgb(238,114,241); + --accent-alpha-70: rgba(238,114,241,.7); + --accent-alpha-20: rgba(238,114,241,.2); + --background: #21202C; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/color/red-auto.css b/assets/css/color/red-auto.css new file mode 100644 index 0000000..0ecd41e --- /dev/null +++ b/assets/css/color/red-auto.css @@ -0,0 +1,26 @@ +@media (prefers-color-scheme: dark) { + :root { + --accent: rgb(255,98,102); + --accent-alpha-70: rgba(255,98,102,.7); + --accent-alpha-20: rgba(255,98,102,.2); + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + } + :root div.logo { + color: black; + } +} +@media (prefers-color-scheme: light) { + :root { + --accent: rgb(240,48,64); + --accent-alpha-70: rgba(240,48,64,.7); + --accent-alpha-20: rgba(240,48,64,.2); + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + } + :root div.logo { + color: white; + } +} diff --git a/assets/css/color/red-light.css b/assets/css/color/red-light.css new file mode 100644 index 0000000..455753d --- /dev/null +++ b/assets/css/color/red-light.css @@ -0,0 +1,11 @@ +:root { + --accent: rgb(240,48,64); + --accent-alpha-70: rgba(240,48,64,.7); + --accent-alpha-20: rgba(240,48,64,.2); + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); +} +:root div.logo { + color: white; +} diff --git a/assets/css/color/red.css b/assets/css/color/red.css new file mode 100644 index 0000000..3c82b94 --- /dev/null +++ b/assets/css/color/red.css @@ -0,0 +1,8 @@ +:root { + --accent: rgb(255,98,102); + --accent-alpha-70: rgba(255,98,102,.7); + --accent-alpha-20: rgba(255,98,102,.2); + --background: #221F29; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/font-hack-subset.css b/assets/css/font-hack-subset.css new file mode 100644 index 0000000..46292c0 --- /dev/null +++ b/assets/css/font-hack-subset.css @@ -0,0 +1,31 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: "Hack"; + /* Use full version (not a subset) for unicode icon support */ + src: url("fonts/hack-regular.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-regular.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Hack"; + src: url("fonts/hack-bold-subset.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bold-subset.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Hack"; + src: url("fonts/hack-italic-subset.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-italic-webfont.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "Hack"; + src: url("fonts/hack-bolditalic-subset.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bolditalic-subset.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: italic; +} diff --git a/assets/css/font-hack.css b/assets/css/font-hack.css new file mode 100644 index 0000000..edbeb09 --- /dev/null +++ b/assets/css/font-hack.css @@ -0,0 +1,30 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: "Hack"; + src: url("fonts/hack-regular.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-regular.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Hack"; + src: url("fonts/hack-bold.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bold.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Hack"; + src: url("fonts/hack-italic.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-italic.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "Hack"; + src: url("fonts/hack-bolditalic.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bolditalic.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: italic; +} diff --git a/assets/css/footer.css b/assets/css/footer.css new file mode 100644 index 0000000..b1b14ed --- /dev/null +++ b/assets/css/footer.css @@ -0,0 +1,56 @@ +.footer { + flex-grow: 0; + opacity: 0.5; +} +.footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; +} +@media (max-width: 899px) { + .footer__inner { + flex-direction: column; + } +} +.footer a { + color: inherit; +} +.footer .copyright { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1rem; +} +.footer .copyright--user { + margin: auto; + text-align: center; +} +.footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; +} +@media (max-width: 899px) { + .footer .copyright > *:first-child:not(:only-child) { + border: none; + padding: 0; + margin: 0; + } +} +@media (max-width: 899px) { + .footer .copyright { + flex-direction: column; + margin-top: 10px; + } +} +@media (max-width: 899px) { + .footer .copyright-theme-sep { + display: none; + } +} +@media (max-width: 899px) { + .footer .copyright-theme { + font-size: 0.75rem; + } +} diff --git a/assets/css/header.css b/assets/css/header.css new file mode 100644 index 0000000..dc1583a --- /dev/null +++ b/assets/css/header.css @@ -0,0 +1,75 @@ +.header { + display: flex; + flex-direction: column; + position: relative; +} +.header__inner { + display: flex; + align-items: center; + justify-content: space-between; +} +.header__logo { + display: flex; + flex: 1; +} +.header__logo:after { + content: ""; + background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px); + display: block; + width: 100%; + right: 10px; +} +.header__logo a { + flex: 0 0 auto; + max-width: 100%; +} +.header .menu { + margin: 20px 0; +} +.header .menu__inner { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} +.header .menu__inner li.active { + color: var(--accent-alpha-70); +} +.header .menu__inner li:not(:last-of-type) { + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; +} +.header .menu__sub-inner { + position: relative; + list-style: none; + padding: 0; + margin: 0; +} +.header .menu__sub-inner:not(:only-child) { + margin-left: 20px; +} +.header .menu__sub-inner-more { + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; + top: 35px; + left: 0; +} +.header .menu__sub-inner-more-trigger { + color: var(--accent); + user-select: none; + cursor: pointer; +} +.header .menu__sub-inner-more li { + margin: 0; + padding: 5px; + white-space: nowrap; +} diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 0000000..7477f5a --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,5 @@ +div.homepage { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); + grid-gap: 3em; +} diff --git a/assets/css/logo.css b/assets/css/logo.css new file mode 100644 index 0000000..d455cc7 --- /dev/null +++ b/assets/css/logo.css @@ -0,0 +1,8 @@ +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; +} diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..ce01028 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,246 @@ +@charset "UTF-8"; +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + color: var(--color); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; +} +@media (max-width: 683px) { + body { + font-size: 1rem; + } +} + +.bg { + background: radial-gradient(at right top, #F68EF0, #74B9DF); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + min-height: 100vh; + min-height: 100dvh; + z-index: -1; +} + +h1, h2, h3, h4, h5, h6 { + display: flex; + align-items: center; + font-weight: bold; + line-height: 1.3; +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.3rem; +} + +h3 { + font-size: 1.2rem; +} + +h4, h5, h6 { + font-size: 1.15rem; +} + +a { + color: inherit; +} + +img { + display: block; + max-width: 100%; +} +img.left { + margin-right: auto; +} +img.center { + margin-left: auto; + margin-right: auto; +} +img.right { + margin-left: auto; +} + +p { + margin-bottom: 20px; +} + +figure { + display: table; + max-width: 100%; + margin: 25px 0; +} +figure.left, figure img { + margin-right: auto; +} +figure.center, figure img { + margin-left: auto; + margin-right: auto; +} +figure.right, figure img { + margin-left: auto; +} +figure figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: var(--accent); + color: var(--background); +} +figure figcaption.left { + text-align: left; +} +figure figcaption.center { + text-align: center; +} +figure figcaption.right { + text-align: right; +} + +code { + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + font-feature-settings: normal; + background: var(--accent-alpha-20); + padding: 1px 6px; + margin: 0 2px; + font-size: 0.95rem; +} + +pre { + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + padding: 20px; + font-size: 0.95rem; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} +@media (max-width: 683px) { + pre { + white-space: pre-wrap; + word-wrap: break-word; + } +} +pre code { + padding: 0; + margin: 0; + background: none; +} + +blockquote { + border-top: 1px solid var(--accent); + border-bottom: 1px solid var(--accent); + margin: 40px 0; + padding: 25px; +} +@media (max-width: 683px) { + blockquote { + padding-right: 0; + } +} +blockquote:before { + content: "”"; + font-family: Georgia, serif; + font-size: 3.875rem; + position: absolute; + left: -40px; + top: -20px; +} +blockquote p:first-of-type { + margin-top: 0; +} +blockquote p:last-of-type { + margin-bottom: 0; +} +blockquote p { + position: relative; +} +blockquote p:before { + content: ">"; + display: block; + position: absolute; + left: -25px; + color: var(--accent); +} + +table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; + margin: 40px 0; +} + +table, th, td { + border: 1px dashed var(--accent); + padding: 10px; +} + +th { + color: var(--accent); +} + +ul, ol { + margin-left: 30px; + padding: 0; +} +ul li, ol li { + position: relative; +} +@media (max-width: 683px) { + ul, ol { + margin-left: 20px; + } +} + +ol ol { + list-style-type: lower-alpha; +} + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + margin: 2em auto; + background: rgba(0, 0, 0, 0.4); +} +@media (max-width: 683px) { + .container { + padding: 20px; + margin: 0 auto; + } +} + +.content { + display: flex; +} + +hr { + width: 100%; + border: none; + background: var(--border-color); + height: 1px; +} + +.hidden { + display: none; +} diff --git a/assets/css/pagination.css b/assets/css/pagination.css new file mode 100644 index 0000000..6e0d983 --- /dev/null +++ b/assets/css/pagination.css @@ -0,0 +1,70 @@ +.pagination { + margin-top: 50px; +} +.pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; +} +.pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.1em; + z-index: 1; +} +.pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; +} +.pagination__buttons { + display: flex; + align-items: center; + justify-content: center; +} +@media (max-width: 683px) { + .pagination__buttons { + flex-direction: column; + } +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; +} +@media (max-width: 683px) { + .button { + max-width: 80%; + } +} +.button + .button { + margin-left: 10px; +} +.button a { + display: flex; + padding: 8px 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} diff --git a/assets/css/post.css b/assets/css/post.css new file mode 100644 index 0000000..e3b197b --- /dev/null +++ b/assets/css/post.css @@ -0,0 +1,106 @@ +@charset "UTF-8"; +.posts { + width: 100%; + margin: 0 auto; +} + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; +} +@media (max-width: 899px) { + .post { + max-width: 660px; + } +} +.post:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); +} +.post .post-meta-inline, .post .post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: var(--accent-alpha-70); +} +.post-meta-inline { + display: inline; +} +.post-title { + --border: 2px dashed var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + font-weight: normal; +} +.post-title a { + text-decoration: none; +} +.post .post-tags-inline, .post .post-tags { + margin-bottom: 20px; + font-size: 1rem; + opacity: 0.5; +} +.post-tags { + display: block; +} +.post-tags-inline { + display: inline; +} +@media (max-width: 683px) { + .post-tags-inline { + display: block; + } +} +.post-content { + margin-top: 30px; +} +.post-cover { + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; +} +@media (max-width: 683px) { + .post-cover { + padding: 10px; + border-width: 10px; + } +} +.post ul { + list-style: none; +} +.post ul li:before { + content: "►"; + position: absolute; + left: -20px; + color: var(--accent); +} + +.post--regulation h1 { + justify-content: center; +} +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; +} +.post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; +} + +.post-list .post-date { + color: var(--accent); + text-decoration: none; +} +.post-list a { + text-decoration: none; +} +.post-list .post-list-title { + text-decoration: underline; +} +.post-list .post-tag { + text-decoration: underline; +} diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/buttons.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/buttons.scssc new file mode 100644 index 0000000..fcc4778 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/buttons.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/font-hack-subset.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/font-hack-subset.scssc new file mode 100644 index 0000000..463e302 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/font-hack-subset.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/font-hack.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/font-hack.scssc new file mode 100644 index 0000000..137e668 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/font-hack.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/footer.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/footer.scssc new file mode 100644 index 0000000..1373f94 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/footer.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/header.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/header.scssc new file mode 100644 index 0000000..f4e7157 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/header.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/home.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/home.scssc new file mode 100644 index 0000000..0b6acef Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/home.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/logo.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/logo.scssc new file mode 100644 index 0000000..f887fa5 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/logo.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/main.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/main.scssc new file mode 100644 index 0000000..b2bbcef Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/main.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/pagination.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/pagination.scssc new file mode 100644 index 0000000..a52856c Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/pagination.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/post.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/post.scssc new file mode 100644 index 0000000..8f13046 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/post.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/style.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/style.scssc new file mode 100644 index 0000000..f813028 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/style.scssc differ diff --git a/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/variables.scssc b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/variables.scssc new file mode 100644 index 0000000..7236594 Binary files /dev/null and b/assets/css/sass/.sass-cache/c65d90b933adb2b4ccf6ececad60f3dbc15b478d/variables.scssc differ diff --git a/assets/css/sass/buttons.css b/assets/css/sass/buttons.css new file mode 100644 index 0000000..898061a --- /dev/null +++ b/assets/css/sass/buttons.css @@ -0,0 +1,83 @@ +.button-container { + display: table; + margin-left: auto; + margin-right: auto; } + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ } + button.outline, + .button.outline, + a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; } + button.outline :hover, + .button.outline :hover, + a.button.outline :hover { + transform: none; + box-shadow: none; } + button.primary, + .button.primary, + a.button.primary { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } + button.primary:hover, + .button.primary:hover, + a.button.primary:hover { + box-shadow: 0 2px 6px rgba(50, 50, 93, 0.21), 0 1px 3px rgba(0, 0, 0, 0.08); } + button.link, + .button.link, + a.button.link { + background: none; + font-size: 1rem; } + button.small, + .button.small, + a.button.small { + font-size: .8rem; } + button.wide, + .button.wide, + a.button.wide { + min-width: 200px; + padding: 14px 24px; } + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; } + +.code-toolbar { + margin-bottom: 20px; } + .code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; } diff --git a/assets/css/sass/buttons.scss b/assets/css/sass/buttons.scss new file mode 100644 index 0000000..7a864b0 --- /dev/null +++ b/assets/css/sass/buttons.scss @@ -0,0 +1,92 @@ +.button-container { + display: table; + margin-left: auto; + margin-right: auto; +} + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + + /* variants */ + + &.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; + + :hover { + transform: none; + box-shadow: none; + } + } + + &.primary { + box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); + + &:hover { + box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08); + } + } + + &.link { + background: none; + font-size: 1rem; + } + + + /* sizes */ + + &.small { + font-size: .8rem; + } + + &.wide { + min-width: 200px; + padding: 14px 24px; + } +} + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; +} + +.code-toolbar { + margin-bottom: 20px; + + .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + } +} diff --git a/assets/css/sass/color/background_auto.scss b/assets/css/sass/color/background_auto.scss new file mode 100644 index 0000000..e1cab79 --- /dev/null +++ b/assets/css/sass/color/background_auto.scss @@ -0,0 +1,14 @@ +:root { + + @media (prefers-color-scheme: light) { + --background: white; + + --color: #101010; + } + + @media (prefers-color-scheme: dark) { + --background: #101010; + + --color: #A9B7C6; + } +} diff --git a/assets/css/sass/color/background_blue.scss b/assets/css/sass/color/background_blue.scss new file mode 100644 index 0000000..d7ce46a --- /dev/null +++ b/assets/css/sass/color/background_blue.scss @@ -0,0 +1,3 @@ +:root { + --background: #1D212C; +} diff --git a/assets/css/sass/color/background_dark.scss b/assets/css/sass/color/background_dark.scss new file mode 100644 index 0000000..999212f --- /dev/null +++ b/assets/css/sass/color/background_dark.scss @@ -0,0 +1,5 @@ +:root { + --background: #101010; + + --color: #A9B7C6; +} diff --git a/assets/css/sass/color/background_green.scss b/assets/css/sass/color/background_green.scss new file mode 100644 index 0000000..3bcdf16 --- /dev/null +++ b/assets/css/sass/color/background_green.scss @@ -0,0 +1,3 @@ +:root { + --background: #1F222A; +} diff --git a/assets/css/sass/color/background_light.scss b/assets/css/sass/color/background_light.scss new file mode 100644 index 0000000..ac41318 --- /dev/null +++ b/assets/css/sass/color/background_light.scss @@ -0,0 +1,3 @@ +:root { + --background: #f0f0f0; +} diff --git a/assets/css/sass/color/background_orange.scss b/assets/css/sass/color/background_orange.scss new file mode 100644 index 0000000..ea0ef7d --- /dev/null +++ b/assets/css/sass/color/background_orange.scss @@ -0,0 +1,3 @@ +:root { + --background: #222129; +} diff --git a/assets/css/sass/color/background_pink.scss b/assets/css/sass/color/background_pink.scss new file mode 100644 index 0000000..565d610 --- /dev/null +++ b/assets/css/sass/color/background_pink.scss @@ -0,0 +1,3 @@ +:root { + --background: #21202C; +} diff --git a/assets/css/sass/color/background_red.scss b/assets/css/sass/color/background_red.scss new file mode 100644 index 0000000..fbce29e --- /dev/null +++ b/assets/css/sass/color/background_red.scss @@ -0,0 +1,3 @@ +:root { + --background: #221F29; +} diff --git a/assets/css/sass/color/blue-auto.scss b/assets/css/sass/color/blue-auto.scss new file mode 100644 index 0000000..bf20e33 --- /dev/null +++ b/assets/css/sass/color/blue-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(35,176,255); + --accent-alpha-70: rgba(35,176,255,.7); + --accent-alpha-20: rgba(35,176,255,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(32,128,192); + --accent-alpha-70: rgba(32,128,192,.7); + --accent-alpha-20: rgba(32,128,192,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/assets/css/sass/color/blue-light.scss b/assets/css/sass/color/blue-light.scss new file mode 100644 index 0000000..c41d839 --- /dev/null +++ b/assets/css/sass/color/blue-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(32,128,192); + --accent-alpha-70: rgba(32,128,192,.7); + --accent-alpha-20: rgba(32,128,192,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/assets/css/sass/color/blue.scss b/assets/css/sass/color/blue.scss new file mode 100644 index 0000000..231f362 --- /dev/null +++ b/assets/css/sass/color/blue.scss @@ -0,0 +1,9 @@ +:root { + --accent: rgb(35,176,255); + --accent-alpha-70: rgba(35,176,255,.7); + --accent-alpha-20: rgba(35,176,255,.2); + + --background: #1D212C; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/sass/color/green-auto.scss b/assets/css/sass/color/green-auto.scss new file mode 100644 index 0000000..2eb5e12 --- /dev/null +++ b/assets/css/sass/color/green-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(120,226,160); + --accent-alpha-70: rgba(120,226,160,.7); + --accent-alpha-20: rgba(120,226,160,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(24, 192, 128); + --accent-alpha-70: rgba(24, 192, 128,.7); + --accent-alpha-20: rgba(24, 192, 128,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/assets/css/sass/color/green-light.scss b/assets/css/sass/color/green-light.scss new file mode 100644 index 0000000..9ee64f3 --- /dev/null +++ b/assets/css/sass/color/green-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(24, 192, 128); + --accent-alpha-70: rgba(24, 192, 128,.7); + --accent-alpha-20: rgba(24, 192, 128,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/assets/css/sass/color/green.scss b/assets/css/sass/color/green.scss new file mode 100644 index 0000000..ff52fe2 --- /dev/null +++ b/assets/css/sass/color/green.scss @@ -0,0 +1,9 @@ +:root { + --accent: rgb(120,226,160); + --accent-alpha-70: rgba(120,226,160,.7); + --accent-alpha-20: rgba(120,226,160,.2); + + --background: #1F222A; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/sass/color/orange-auto.scss b/assets/css/sass/color/orange-auto.scss new file mode 100644 index 0000000..3c19ce4 --- /dev/null +++ b/assets/css/sass/color/orange-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(255,168,106); + --accent-alpha-70: rgba(255,168,106,.7); + --accent-alpha-20: rgba(255,168,106,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(240,128,48); + --accent-alpha-70: rgba(240,128,48,.7); + --accent-alpha-20: rgba(240,128,48,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/assets/css/sass/color/orange-light.scss b/assets/css/sass/color/orange-light.scss new file mode 100644 index 0000000..6f7b8f9 --- /dev/null +++ b/assets/css/sass/color/orange-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(240,128,48); + --accent-alpha-70: rgba(240,128,48,.7); + --accent-alpha-20: rgba(240,128,48,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} \ No newline at end of file diff --git a/assets/css/sass/color/orange.scss b/assets/css/sass/color/orange.scss new file mode 100644 index 0000000..46bb5ce --- /dev/null +++ b/assets/css/sass/color/orange.scss @@ -0,0 +1,9 @@ +:root { + --accent: rgb(255,168,106); + --accent-alpha-70: rgba(255,168,106,.7); + --accent-alpha-20: rgba(255,168,106,.2); + + --background: #222129; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} \ No newline at end of file diff --git a/assets/css/sass/color/pink-auto.scss b/assets/css/sass/color/pink-auto.scss new file mode 100644 index 0000000..705c706 --- /dev/null +++ b/assets/css/sass/color/pink-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(224,64,192); + --accent-alpha-70: rgba(224,64,192); + --accent-alpha-20: rgba(224,64,192,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(238,114,241); + --accent-alpha-70: rgba(238,114,241,.7); + --accent-alpha-20: rgba(238,114,241,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/assets/css/sass/color/pink-light.scss b/assets/css/sass/color/pink-light.scss new file mode 100644 index 0000000..aa8437c --- /dev/null +++ b/assets/css/sass/color/pink-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(224,64,192); + --accent-alpha-70: rgba(224,64,192); + --accent-alpha-20: rgba(224,64,192,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/assets/css/sass/color/pink.scss b/assets/css/sass/color/pink.scss new file mode 100644 index 0000000..6cc6064 --- /dev/null +++ b/assets/css/sass/color/pink.scss @@ -0,0 +1,9 @@ +:root { + --accent: rgb(238,114,241); + --accent-alpha-70: rgba(238,114,241,.7); + --accent-alpha-20: rgba(238,114,241,.2); + + --background: #21202C; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/sass/color/red-auto.scss b/assets/css/sass/color/red-auto.scss new file mode 100644 index 0000000..a0016f2 --- /dev/null +++ b/assets/css/sass/color/red-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(255,98,102); + --accent-alpha-70: rgba(255,98,102,.7); + --accent-alpha-20: rgba(255,98,102,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(240,48,64); + --accent-alpha-70: rgba(240,48,64,.7); + --accent-alpha-20: rgba(240,48,64,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/assets/css/sass/color/red-light.scss b/assets/css/sass/color/red-light.scss new file mode 100644 index 0000000..d2f0e4c --- /dev/null +++ b/assets/css/sass/color/red-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(240,48,64); + --accent-alpha-70: rgba(240,48,64,.7); + --accent-alpha-20: rgba(240,48,64,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/assets/css/sass/color/red.scss b/assets/css/sass/color/red.scss new file mode 100644 index 0000000..6e7b776 --- /dev/null +++ b/assets/css/sass/color/red.scss @@ -0,0 +1,9 @@ +:root { + --accent: rgb(255,98,102); + --accent-alpha-70: rgba(255,98,102,.7); + --accent-alpha-20: rgba(255,98,102,.2); + + --background: #221F29; + --color: white; + --border-color: rgba(255, 255, 255, .1); +} diff --git a/assets/css/sass/font-hack-subset.css b/assets/css/sass/font-hack-subset.css new file mode 100644 index 0000000..5e4c671 --- /dev/null +++ b/assets/css/sass/font-hack-subset.css @@ -0,0 +1,27 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: 'Hack'; + /* Use full version (not a subset) for unicode icon support */ + src: url("fonts/hack-regular.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-regular.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: normal; } +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-bold-subset.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bold-subset.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: normal; } +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-italic-subset.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-italic-webfont.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: italic; } +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-bolditalic-subset.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bolditalic-subset.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: italic; } diff --git a/assets/css/sass/font-hack-subset.scss b/assets/css/sass/font-hack-subset.scss new file mode 100644 index 0000000..31281aa --- /dev/null +++ b/assets/css/sass/font-hack-subset.scss @@ -0,0 +1,34 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: 'Hack'; + /* Use full version (not a subset) for unicode icon support */ + src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold-subset.woff?sha=3114f1256') format('woff'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic-webfont.woff?sha=3114f1256') format('woff'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic-subset.woff?sha=3114f1256') format('woff'); + font-weight: 700; + font-style: italic; +} diff --git a/assets/css/sass/font-hack.css b/assets/css/sass/font-hack.css new file mode 100644 index 0000000..02a51f5 --- /dev/null +++ b/assets/css/sass/font-hack.css @@ -0,0 +1,26 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-regular.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-regular.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: normal; } +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-bold.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bold.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: normal; } +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-italic.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-italic.woff?sha=3114f1256") format("woff"); + font-weight: 400; + font-style: italic; } +@font-face { + font-family: 'Hack'; + src: url("fonts/hack-bolditalic.woff2?sha=3114f1256") format("woff2"), url("fonts/hack-bolditalic.woff?sha=3114f1256") format("woff"); + font-weight: 700; + font-style: italic; } diff --git a/assets/css/sass/font-hack.scss b/assets/css/sass/font-hack.scss new file mode 100644 index 0000000..fef7588 --- /dev/null +++ b/assets/css/sass/font-hack.scss @@ -0,0 +1,33 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-bold.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold.woff?sha=3114f1256') format('woff'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-italic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic.woff?sha=3114f1256') format('woff'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic.woff?sha=3114f1256') format('woff'); + font-weight: 700; + font-style: italic; +} diff --git a/assets/css/sass/footer.css b/assets/css/sass/footer.css new file mode 100644 index 0000000..d32b673 --- /dev/null +++ b/assets/css/sass/footer.css @@ -0,0 +1,40 @@ +.footer { + flex-grow: 0; + opacity: .5; } + .footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; } + @media (max-width: 899px) { + .footer__inner { + flex-direction: column; } } + .footer a { + color: inherit; } + .footer .copyright { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1rem; } + .footer .copyright--user { + margin: auto; + text-align: center; } + .footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; } + @media (max-width: 899px) { + .footer .copyright > *:first-child:not(:only-child) { + border: none; + padding: 0; + margin: 0; } } + @media (max-width: 899px) { + .footer .copyright { + flex-direction: column; + margin-top: 10px; } } + @media (max-width: 899px) { + .footer .copyright-theme-sep { + display: none; } } + @media (max-width: 899px) { + .footer .copyright-theme { + font-size: 0.75rem; } } diff --git a/assets/css/sass/footer.scss b/assets/css/sass/footer.scss new file mode 100644 index 0000000..5fce73b --- /dev/null +++ b/assets/css/sass/footer.scss @@ -0,0 +1,62 @@ +@import "variables"; + +.footer { + flex-grow: 0; + opacity: .5; + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; + + @media (max-width: $tablet-max-width) { + flex-direction: column; + } + } + + a { + color: inherit; + } + + .copyright { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1rem; + + &--user { + margin: auto; + text-align: center; + } + + & > *:first-child:not(:only-child) { + margin-right: 10px; + + @media (max-width: $tablet-max-width) { + border: none; + padding: 0; + margin: 0; + } + } + + @media (max-width: $tablet-max-width) { + flex-direction: column; + margin-top: 10px; + } + } + + .copyright-theme-sep { + @media (max-width: $tablet-max-width) { + display: none; + } + } + + .copyright-theme { + @media (max-width: $tablet-max-width) { + font-size: 0.75rem; + } + } +} diff --git a/assets/css/sass/header.css b/assets/css/sass/header.css new file mode 100644 index 0000000..e8afddb --- /dev/null +++ b/assets/css/sass/header.css @@ -0,0 +1,61 @@ +.header { + display: flex; + flex-direction: column; + position: relative; } + .header__inner { + display: flex; + align-items: center; + justify-content: space-between; } + .header__logo { + display: flex; + flex: 1; } + .header__logo:after { + content: ''; + background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px); + display: block; + width: 100%; + right: 10px; } + .header__logo a { + flex: 0 0 auto; + max-width: 100%; } + .header .menu { + margin: 20px 0; } + .header .menu__inner { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; } + .header .menu__inner li.active { + color: var(--accent-alpha-70); } + .header .menu__inner li:not(:last-of-type) { + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; } + .header .menu__sub-inner { + position: relative; + list-style: none; + padding: 0; + margin: 0; } + .header .menu__sub-inner:not(:only-child) { + margin-left: 20px; } + .header .menu__sub-inner-more { + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; + top: 35px; + left: 0; } + .header .menu__sub-inner-more-trigger { + color: var(--accent); + user-select: none; + cursor: pointer; } + .header .menu__sub-inner-more li { + margin: 0; + padding: 5px; + white-space: nowrap; } diff --git a/assets/css/sass/header.scss b/assets/css/sass/header.scss new file mode 100644 index 0000000..703bbec --- /dev/null +++ b/assets/css/sass/header.scss @@ -0,0 +1,96 @@ +@import "variables"; + +@mixin menu { + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; +} + +.header { + display: flex; + flex-direction: column; + position: relative; + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo { + display: flex; + flex: 1; + + &:after { + content: ''; + background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px); + display: block; + width: 100%; + right: 10px; + } + + a { + flex: 0 0 auto; + max-width: 100%; + } + } + + .menu { + margin: 20px 0; + + &__inner { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + + li { + &.active { + color: var(--accent-alpha-70); + } + + &:not(:last-of-type) { + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; + } + } + } + + &__sub-inner { + position: relative; + list-style: none; + padding: 0; + margin: 0; + + &:not(:only-child) { + margin-left: 20px; + } + + &-more { + @include menu; + top: 35px; + left: 0; + + &-trigger { + color: var(--accent); + user-select: none; + cursor: pointer; + } + + li { + margin: 0; + padding: 5px; + white-space: nowrap; + } + } + } + } +} diff --git a/assets/css/sass/home.css b/assets/css/sass/home.css new file mode 100644 index 0000000..16c81e1 --- /dev/null +++ b/assets/css/sass/home.css @@ -0,0 +1,4 @@ +div.homepage { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); + grid-gap: 3em; } diff --git a/assets/css/sass/home.scss b/assets/css/sass/home.scss new file mode 100644 index 0000000..a923d25 --- /dev/null +++ b/assets/css/sass/home.scss @@ -0,0 +1,5 @@ +div.homepage { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); + grid-gap: 3em; +} diff --git a/assets/css/sass/logo.css b/assets/css/sass/logo.css new file mode 100644 index 0000000..768e655 --- /dev/null +++ b/assets/css/sass/logo.css @@ -0,0 +1,7 @@ +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; } diff --git a/assets/css/sass/logo.scss b/assets/css/sass/logo.scss new file mode 100644 index 0000000..d455cc7 --- /dev/null +++ b/assets/css/sass/logo.scss @@ -0,0 +1,8 @@ +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; +} diff --git a/assets/css/sass/main.css b/assets/css/sass/main.css new file mode 100644 index 0000000..1daf2f5 --- /dev/null +++ b/assets/css/sass/main.css @@ -0,0 +1,66 @@ +/* +Error: wrong number of arguments (1 for 3) for `rgb' + on line 242 of main.scss + +237: padding: 40px; +238: max-width: 864px; +239: // min-height: 100vh; +240: margin: 2em auto; +241: +242: background: rgb(0 0 0 / .4); +243: +244: @media (max-width: $phone-max-width) { +245: padding: 20px; +246: margin: 0 auto; +247: } + +Backtrace: +main.scss:242 +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/funcall.rb:311:in `reformat_argument_error' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/funcall.rb:158:in `rescue in _perform' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/funcall.rb:127:in `_perform' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/node.rb:50:in `perform' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:398:in `visit_prop' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `block in visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `map' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:166:in `visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:186:in `visit_root' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:157:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:10:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:36:in `css_tree' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:20:in `render' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/engine.rb:290:in `render' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:396:in `run' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:63:in `process_result' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/base.rb:50:in `parse' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/base.rb:18:in `parse!' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/bin/sass:13:in `' +/home/jess/.asdf/installs/ruby/3.3.0/bin/sass:25:in `load' +/home/jess/.asdf/installs/ruby/3.3.0/bin/sass:25:in `
' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Error: wrong number of arguments (1 for 3) for `rgb'\A on line 242 of main.scss\A \A 237: padding: 40px;\A 238: max-width: 864px;\A 239: // min-height: 100vh;\A 240: margin: 2em auto;\A 241: \A 242: background: rgb(0 0 0 / .4);\A 243: \A 244: @media (max-width: $phone-max-width) {\A 245: padding: 20px;\A 246: margin: 0 auto;\A 247: }"; } diff --git a/assets/css/sass/main.scss b/assets/css/sass/main.scss new file mode 100644 index 0000000..01b186a --- /dev/null +++ b/assets/css/sass/main.scss @@ -0,0 +1,263 @@ +@import "variables"; + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + // background-color: var(--background); + color: var(--color); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; + + @media (max-width: $phone-max-width) { + font-size: 1rem; + } +} + +.bg { + background: radial-gradient(at right top, #F68EF0, #74B9DF); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + min-height: 100vh; + min-height: 100dvh; + z-index: -1; +} + +h1, h2, h3, h4, h5, h6 { + display: flex; + align-items: center; + font-weight: bold; + line-height: 1.3; +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.3rem; +} + +h3 { + font-size: 1.2rem; +} + +h4, h5, h6 { + font-size: 1.15rem; +} + + +a { + color: inherit; +} + +img { + display: block; + max-width: 100%; + + &.left { + margin-right: auto; + } + + &.center { + margin-left: auto; + margin-right: auto; + } + + &.right { + margin-left: auto; + } +} + +p { + margin-bottom: 20px; +} + +figure { + display: table; + max-width: 100%; + margin: 25px 0; + + &.left, img { + margin-right: auto; + } + + &.center, img { + margin-left: auto; + margin-right: auto; + } + + &.right, img { + margin-left: auto; + } + + figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: var(--accent); + color: var(--background); + + &.left { + text-align: left; + } + + &.center { + text-align: center; + } + + &.right { + text-align: right; + } + } +} + +code { + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + font-feature-settings: normal; + background: var(--accent-alpha-20); + padding: 1px 6px; + margin: 0 2px; + font-size: .95rem; +} + +pre { + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + padding: 20px; + font-size: .95rem; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, .1); + border-bottom: 1px solid rgba(255, 255, 255, .1); + + @media (max-width: $phone-max-width) { + white-space: pre-wrap; + word-wrap: break-word; + } + + code { + padding: 0; + margin: 0; + background: none; + } +} + +blockquote { + border-top: 1px solid var(--accent); + border-bottom: 1px solid var(--accent); + margin: 40px 0; + padding: 25px; + + @media (max-width: $phone-max-width) { + padding-right: 0; + } + + &:before { + content: '”'; + font-family: Georgia, serif; + font-size: 3.875rem; + position: absolute; + left: -40px; + top: -20px; + } + + p:first-of-type { + margin-top: 0; + } + + p:last-of-type { + margin-bottom: 0; + } + + p { + position: relative; + } + + p:before { + content: '>'; + display: block; + position: absolute; + left: -25px; + color: var(--accent); + } +} + +table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; + margin: 40px 0; +} + +table, th, td { + border: 1px dashed var(--accent); + padding: 10px; +} + +th { + color: var(--accent); +} + +ul, ol { + margin-left: 30px; + padding: 0; + + li { + position: relative; + } + + @media (max-width: $phone-max-width) { + margin-left: 20px; + } +} + +ol ol { + list-style-type: lower-alpha; +} + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + // min-height: 100vh; + margin: 2em auto; + + background: rgb(0 0 0 / .4); + + @media (max-width: $phone-max-width) { + padding: 20px; + margin: 0 auto; + } +} + +.content { + display: flex; +} + +hr { + width: 100%; + border: none; + background: var(--border-color); + height: 1px; +} + +.hidden { + display: none; +} diff --git a/assets/css/sass/pagination.css b/assets/css/sass/pagination.css new file mode 100644 index 0000000..4926f15 --- /dev/null +++ b/assets/css/sass/pagination.css @@ -0,0 +1,57 @@ +.pagination { + margin-top: 50px; } + .pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; } + .pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + font-size: .8rem; + text-transform: uppercase; + letter-spacing: .1em; + z-index: 1; } + .pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; } + .pagination__buttons { + display: flex; + align-items: center; + justify-content: center; } + @media (max-width: 683px) { + .pagination__buttons { + flex-direction: column; } } + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; } + @media (max-width: 683px) { + .button { + max-width: 80%; } } + .button + .button { + margin-left: 10px; } + .button a { + display: flex; + padding: 8px 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } diff --git a/assets/css/sass/pagination.scss b/assets/css/sass/pagination.scss new file mode 100644 index 0000000..566005b --- /dev/null +++ b/assets/css/sass/pagination.scss @@ -0,0 +1,77 @@ +@import 'variables'; + +.pagination { + margin-top: 50px; + + &__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; + + &-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + font-size: .8rem; + text-transform: uppercase; + letter-spacing: .1em; + z-index: 1; + } + + hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; + } + } + + &__buttons { + display: flex; + align-items: center; + justify-content: center; + + @media (max-width: $phone-max-width) { + flex-direction: column; + } + } +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; + + @media (max-width: $phone-max-width) { + max-width: 80%; + } + + + .button { + margin-left: 10px; + } + + a { + display: flex; + padding: 8px 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } +} diff --git a/assets/css/sass/post.css b/assets/css/sass/post.css new file mode 100644 index 0000000..602d92a --- /dev/null +++ b/assets/css/sass/post.css @@ -0,0 +1,79 @@ +@charset "UTF-8"; +.posts { + width: 100%; + margin: 0 auto; } + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; } + @media (max-width: 899px) { + .post { + max-width: 660px; } } + .post:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); } + .post .post-meta, .post .post-meta-inline { + font-size: 1rem; + margin-bottom: 10px; + color: var(--accent-alpha-70); } + .post-meta-inline { + display: inline; } + .post-title { + --border: 2px dashed var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + font-weight: normal; } + .post-title a { + text-decoration: none; } + .post .post-tags, .post .post-tags-inline { + margin-bottom: 20px; + font-size: 1rem; + opacity: .5; } + .post-tags { + display: block; } + .post-tags-inline { + display: inline; } + @media (max-width: 683px) { + .post-tags-inline { + display: block; } } + .post-content { + margin-top: 30px; } + .post-cover { + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; } + @media (max-width: 683px) { + .post-cover { + padding: 10px; + border-width: 10px; } } + .post ul { + list-style: none; } + .post ul li:before { + content: '►'; + position: absolute; + left: -20px; + color: var(--accent); } + +.post--regulation h1 { + justify-content: center; } +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; } + .post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; } + +.post-list .post-date { + color: var(--accent); + text-decoration: none; } +.post-list a { + text-decoration: none; } +.post-list .post-list-title { + text-decoration: underline; } +.post-list .post-tag { + text-decoration: underline; } diff --git a/assets/css/sass/post.scss b/assets/css/sass/post.scss new file mode 100644 index 0000000..16fdbfe --- /dev/null +++ b/assets/css/sass/post.scss @@ -0,0 +1,135 @@ +@import "variables"; + +.posts { + width: 100%; + margin: 0 auto; +} + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; + + @media (max-width: $tablet-max-width) { + max-width: 660px; + } + + &:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); + } + + %meta { + font-size: 1rem; + margin-bottom: 10px; + color: var(--accent-alpha-70); + } + + &-meta { + @extend %meta; + } + + &-meta-inline { + @extend %meta; + + display: inline; + } + + &-title { + --border: 2px dashed var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + font-weight: normal; + + a { + text-decoration: none; + } + } + + %tags { + margin-bottom: 20px; + font-size: 1rem; + opacity: .5; + } + + &-tags { + @extend %tags; + + display: block; + } + + &-tags-inline { + @extend %tags; + + display: inline; + + @media (max-width: $phone-max-width) { + display: block; + } + } + + &-content { + margin-top: 30px; + } + + &-cover { + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; + + @media (max-width: $phone-max-width) { + padding: 10px; + border-width: 10px; + } + } + + ul { + list-style: none; + + li:before { + content: '►'; + position: absolute; + left: -20px; + color: var(--accent); + } + } +} + +.post--regulation { + h1 { + justify-content: center; + } + + h2 { + justify-content: center; + margin-bottom: 10px; + + &+ h2 { + margin-top: -10px; + margin-bottom: 20px; + } + } +} + +.post-list { + .post-date { + color: var(--accent); + text-decoration: none; + } + + a { + text-decoration: none; + } + + .post-list-title { + text-decoration: underline; + } + + .post-tag { + text-decoration: underline; + } +} diff --git a/assets/css/sass/style.css b/assets/css/sass/style.css new file mode 100644 index 0000000..757e144 --- /dev/null +++ b/assets/css/sass/style.css @@ -0,0 +1,69 @@ +/* +Error: wrong number of arguments (1 for 3) for `rgb' + on line 242 of main.scss + from line 5 of style.scss + +Backtrace: +main.scss:242 +style.scss:5 +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/funcall.rb:311:in `reformat_argument_error' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/funcall.rb:158:in `rescue in _perform' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/funcall.rb:127:in `_perform' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/script/tree/node.rb:50:in `perform' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:398:in `visit_prop' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:325:in `block (2 levels) in visit_import' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:325:in `map' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:325:in `block in visit_import' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:88:in `block in with_import' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:88:in `with_import' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:322:in `visit_import' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `block in visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `map' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:166:in `visit_children' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `block in visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:186:in `visit_root' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:157:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:10:in `visit' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:36:in `css_tree' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:20:in `render' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/engine.rb:290:in `render' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:396:in `run' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:63:in `process_result' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/base.rb:50:in `parse' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/lib/sass/exec/base.rb:18:in `parse!' +/home/jess/.asdf/installs/ruby/3.3.0/lib/ruby/gems/3.3.0/gems/sass-3.7.4/bin/sass:13:in `' +/home/jess/.asdf/installs/ruby/3.3.0/bin/sass:25:in `load' +/home/jess/.asdf/installs/ruby/3.3.0/bin/sass:25:in `
' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Error: wrong number of arguments (1 for 3) for `rgb'\A on line 242 of main.scss\A from line 5 of style.scss"; } diff --git a/assets/css/sass/style.scss b/assets/css/sass/style.scss new file mode 100644 index 0000000..591a67d --- /dev/null +++ b/assets/css/sass/style.scss @@ -0,0 +1,9 @@ +@import 'buttons'; + +@import 'header'; +@import 'logo'; +@import 'main'; +@import 'post'; +@import 'pagination'; +@import 'footer'; +@import 'home'; diff --git a/assets/css/sass/variables.css b/assets/css/sass/variables.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/sass/variables.scss b/assets/css/sass/variables.scss new file mode 100644 index 0000000..3b95a9c --- /dev/null +++ b/assets/css/sass/variables.scss @@ -0,0 +1,2 @@ +$phone-max-width: 683px; +$tablet-max-width: 899px; diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..b45a2e9 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,713 @@ +@charset "UTF-8"; + +.button-container { + display: table; + margin-left: auto; + margin-right: auto; +} + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ +} +button.outline, +.button.outline, +a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; +} +button.outline :hover, +.button.outline :hover, +a.button.outline :hover { + transform: none; + box-shadow: none; +} +button.primary, +.button.primary, +a.button.primary { + box-shadow: + 0 4px 6px rgba(50, 50, 93, 0.11), + 0 1px 3px rgba(0, 0, 0, 0.08); +} +button.primary:hover, +.button.primary:hover, +a.button.primary:hover { + box-shadow: + 0 2px 6px rgba(50, 50, 93, 0.21), + 0 1px 3px rgba(0, 0, 0, 0.08); +} +button.link, +.button.link, +a.button.link { + background: none; + font-size: 1rem; +} +button.small, +.button.small, +a.button.small { + font-size: 0.8rem; +} +button.wide, +.button.wide, +a.button.wide { + min-width: 200px; + padding: 14px 24px; +} + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; +} + +.code-toolbar { + margin-bottom: 20px; +} +.code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; +} + +.header { + display: flex; + flex-direction: column; + position: relative; +} +.header__inner { + display: flex; + align-items: center; + justify-content: space-between; +} +.header__logo { + display: flex; + flex: 1; +} +.header__logo:after { + content: ""; + background: repeating-linear-gradient( + 90deg, + var(--accent), + var(--accent) 2px, + transparent 0, + transparent 16px + ); + display: block; + width: 100%; + right: 10px; +} +.header__logo a { + flex: 0 0 auto; + max-width: 100%; +} +.header .menu { + margin: 20px 0; +} +.header .menu__inner { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} +.header .menu__inner li.active { + color: var(--accent-alpha-70); +} +.header .menu__inner li:not(:last-of-type) { + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; +} +.header .menu__sub-inner { + position: relative; + list-style: none; + padding: 0; + margin: 0; +} +.header .menu__sub-inner:not(:only-child) { + margin-left: 20px; +} +.header .menu__sub-inner-more { + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; + top: 35px; + left: 0; +} +.header .menu__sub-inner-more-trigger { + color: var(--accent); + user-select: none; + cursor: pointer; +} +.header .menu__sub-inner-more li { + margin: 0; + padding: 5px; + white-space: nowrap; +} + +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + font-family: + Hack, + DejaVu Sans Mono, + Monaco, + Consolas, + Ubuntu Mono, + monospace; + font-size: 1rem; + line-height: 1.54; + color: var(--color); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; +} +@media (max-width: 683px) { + body { + font-size: 1rem; + } +} + +.bg { + background: radial-gradient(at right top, #f68ef0, #74b9df); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + min-height: 100vh; + min-height: 100dvh; + z-index: -1; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + display: flex; + align-items: center; + font-weight: bold; + line-height: 1.3; +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.3rem; +} + +h3 { + font-size: 1.2rem; +} + +h4, +h5, +h6 { + font-size: 1.15rem; +} + +a { + color: inherit; +} + +img { + display: block; + max-width: 100%; +} +img.left { + margin-right: auto; +} +img.center { + margin-left: auto; + margin-right: auto; +} +img.right { + margin-left: auto; +} + +p { + margin-bottom: 20px; +} + +figure { + display: table; + max-width: 100%; + margin: 25px 0; +} +figure.left, +figure img { + margin-right: auto; +} +figure.center, +figure img { + margin-left: auto; + margin-right: auto; +} +figure.right, +figure img { + margin-left: auto; +} +figure figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: var(--accent); + color: var(--background); +} +figure figcaption.left { + text-align: left; +} +figure figcaption.center { + text-align: center; +} +figure figcaption.right { + text-align: right; +} + +code { + font-family: + Hack, + DejaVu Sans Mono, + Monaco, + Consolas, + Ubuntu Mono, + monospace; + font-feature-settings: normal; + background: var(--accent-alpha-20); + padding: 1px 6px; + margin: 0 2px; + font-size: 0.95rem; +} + +pre { + font-family: + Hack, + DejaVu Sans Mono, + Monaco, + Consolas, + Ubuntu Mono, + monospace; + padding: 20px; + font-size: 0.95rem; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} +@media (max-width: 683px) { + pre { + white-space: pre-wrap; + word-wrap: break-word; + } +} +pre code { + padding: 0; + margin: 0; + background: none; +} + +blockquote { + border-top: 1px solid var(--accent); + border-bottom: 1px solid var(--accent); + margin: 40px 0; + padding: 25px; +} +@media (max-width: 683px) { + blockquote { + padding-right: 0; + } +} +blockquote:before { + content: "”"; + font-family: Georgia, serif; + font-size: 3.875rem; + position: absolute; + left: -40px; + top: -20px; +} +blockquote p:first-of-type { + margin-top: 0; +} +blockquote p:last-of-type { + margin-bottom: 0; +} +blockquote p { + position: relative; +} +blockquote p:before { + content: ">"; + display: block; + position: absolute; + left: -25px; + color: var(--accent); +} + +table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; + margin: 40px 0; +} + +table, +th, +td { + border: 1px dashed var(--accent); + padding: 10px; +} + +th { + color: var(--accent); +} + +ul, +ol { + margin-left: 30px; + padding: 0; +} +ul li, +ol li { + position: relative; +} +@media (max-width: 683px) { + ul, + ol { + margin-left: 20px; + } +} + +ol ol { + list-style-type: lower-alpha; +} + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + margin: 2em auto; + background: rgba(0, 0, 0, 0.4); +} +@media (max-width: 683px) { + .container { + padding: 20px; + margin: 0 auto; + } +} + +.content { + display: flex; +} + +hr { + width: 100%; + border: none; + background: var(--border-color); + height: 1px; +} + +.hidden { + display: none; +} + +.posts { + width: 100%; + margin: 0 auto; +} + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; +} +@media (max-width: 899px) { + .post { + max-width: 660px; + } +} +.post:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); +} +.post .post-meta-inline, +.post .post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: var(--accent-alpha-70); +} +.post-meta-inline { + display: inline; +} +.post-title { + --border: 2px dashed var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + font-weight: normal; +} +.post-title a { + text-decoration: none; +} +.post .post-tags-inline, +.post .post-tags { + margin-bottom: 20px; + font-size: 1rem; + opacity: 0.5; +} +.post-tags { + display: block; +} +.post-tags-inline { + display: inline; +} +@media (max-width: 683px) { + .post-tags-inline { + display: block; + } +} +.post-content { + margin-top: 30px; +} +.post-cover { + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; +} +@media (max-width: 683px) { + .post-cover { + padding: 10px; + border-width: 10px; + } +} +.post ul { + list-style: none; +} +.post ul li:before { + content: "►"; + position: absolute; + left: -20px; + color: var(--accent); +} + +.post--regulation h1 { + justify-content: center; +} +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; +} +.post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; +} + +.post-list .post-date { + color: var(--accent); + text-decoration: none; +} +.post-list a { + text-decoration: none; +} +.post-list .post-list-title { + text-decoration: underline; +} +.post-list .post-tag { + text-decoration: underline; +} + +.pagination { + margin-top: 50px; +} +.pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; +} +.pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.1em; + z-index: 1; +} +.pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; +} +.pagination__buttons { + display: flex; + align-items: center; + justify-content: center; +} +@media (max-width: 683px) { + .pagination__buttons { + flex-direction: column; + } +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; +} +@media (max-width: 683px) { + .button { + max-width: 80%; + } +} +.button + .button { + margin-left: 10px; +} +.button a { + display: flex; + padding: 8px 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.footer { + flex-grow: 0; + opacity: 0.5; +} +.footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; +} +@media (max-width: 899px) { + .footer__inner { + flex-direction: column; + } +} +.footer a { + color: inherit; +} +.footer .copyright { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1rem; +} +.footer .copyright--user { + margin: auto; + text-align: center; +} +.footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; +} +@media (max-width: 899px) { + .footer .copyright > *:first-child:not(:only-child) { + border: none; + padding: 0; + margin: 0; + } +} +@media (max-width: 899px) { + .footer .copyright { + flex-direction: column; + margin-top: 10px; + } +} +@media (max-width: 899px) { + .footer .copyright-theme-sep { + display: none; + } +} +@media (max-width: 899px) { + .footer .copyright-theme { + font-size: 0.75rem; + } +} + +div.homepage { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); + grid-gap: 3em; +} diff --git a/assets/css/variables.css b/assets/css/variables.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/assets/css/variables.css @@ -0,0 +1 @@ + diff --git a/lib/jol/blog.ex b/lib/jol/blog.ex index 66878d1..a4b09a8 100644 --- a/lib/jol/blog.ex +++ b/lib/jol/blog.ex @@ -1,9 +1,11 @@ defmodule JOL.Blog do alias JOL.Blog.Post + alias JOL.Blog.Parser use NimblePublisher, build: Post, from: Application.app_dir(:jol, "priv/posts/**/*.md"), + parser: Parser, as: :posts @posts Enum.sort_by(@posts, & &1.date, {:desc, Date}) diff --git a/lib/jol/blog/post.ex b/lib/jol/blog/post.ex new file mode 100644 index 0000000..e081c50 --- /dev/null +++ b/lib/jol/blog/post.ex @@ -0,0 +1,8 @@ +defmodule JOL.Blog.Post do + @enforce_keys [:title, :body, :draft, :date, :tags] + defstruct [:title, :body, :draft, :date, :tags] + + def build(_filename, attrs, body) do + struct!(__MODULE__, [body: body] ++ Map.to_list(attrs)) + end +end diff --git a/lib/jol_web/components/layouts/app.html.heex b/lib/jol_web/components/layouts/app.html.heex index c0ecf4b..040fefb 100644 --- a/lib/jol_web/components/layouts/app.html.heex +++ b/lib/jol_web/components/layouts/app.html.heex @@ -1,11 +1,41 @@ -
-
-

Jessica Phoenix Canady

+
+
+ +
+
+ +
+ +
-
+ +
<%= @inner_content %>
-
-

YOU MADE IT!

+ +
+
+
+ Built with trans dork love. +
+
-
+ + diff --git a/lib/jol_web/components/layouts/root.html.heex b/lib/jol_web/components/layouts/root.html.heex index 199aeb1..8c911df 100644 --- a/lib/jol_web/components/layouts/root.html.heex +++ b/lib/jol_web/components/layouts/root.html.heex @@ -4,14 +4,14 @@ - <.live_title suffix=" · Jessica Phoenix Canady"> - <%= assigns[:page_title] || "Jessica Online Untitled Page" %> + <.live_title suffix=" · Jessica OnLine"> + <%= assigns[:page_title] || "Jess Forgot To Name This Page!" %> - + - + + <%= @inner_content %> diff --git a/lib/jol_web/controllers/page_controller.ex b/lib/jol_web/controllers/page_controller.ex index c8f4a7c..67cc0be 100644 --- a/lib/jol_web/controllers/page_controller.ex +++ b/lib/jol_web/controllers/page_controller.ex @@ -1,9 +1,22 @@ defmodule JOLWeb.PageController do + require Logger use JOLWeb, :controller + @spec home(Plug.Conn.t(), any()) :: Plug.Conn.t() def home(conn, _params) do conn |> assign(:page_title, "Home") |> render(:home) end + + @spec tags(Plug.Conn.t(), any()) :: Plug.Conn.t() + def tags(conn, _params) do + Logger.debug(JOL.Blog.posts()) + Logger.debug(JOL.Blog.unique_tag_list()) + + conn + |> assign(:tags, JOL.Blog.unique_tag_list()) + |> assign(:page_title, "Post Tags") + |> render(:tags) + end end diff --git a/lib/jol_web/controllers/page_html/home.html.heex b/lib/jol_web/controllers/page_html/home.html.heex index 67b3fb6..0bb4ab0 100644 --- a/lib/jol_web/controllers/page_html/home.html.heex +++ b/lib/jol_web/controllers/page_html/home.html.heex @@ -1,5 +1,13 @@ -

is some kind of dingus anyway

+
+
+

It's Jessica!

-

Hey I'm Jessica.

-

You probably know me from nothing.

-

Suggit.

+

I build stuff on the internet! I used to make a lot more stuff, but I burnt out pretty hard building startups and consulting too hard. I'm getting back into just doing fun stuff, y'know?

+

I'm also into poking synthesizers until they make music, but actually recording any of this is a new thing for me, so I'm figuring that out.

+

Besides that, I'm a parent to two amazing boys, a wife to a beautiful wife, and I occasionally play poker.

+

I write here about those things, about general tech dorkery, and about my experience with being super trans and learning who I am.

+
+
+
+ +
diff --git a/lib/jol_web/controllers/page_html/tags.html.heex b/lib/jol_web/controllers/page_html/tags.html.heex new file mode 100644 index 0000000..7b01efe --- /dev/null +++ b/lib/jol_web/controllers/page_html/tags.html.heex @@ -0,0 +1,10 @@ +
+

all tags

+
    + <%= for tag <- @tags do %> +
  • + <%= tag %> +
    • + <% end %> +
+
diff --git a/lib/jol_web/router.ex b/lib/jol_web/router.ex index b30e113..13fcefe 100644 --- a/lib/jol_web/router.ex +++ b/lib/jol_web/router.ex @@ -18,6 +18,11 @@ defmodule JOLWeb.Router do pipe_through :browser get "/", PageController, :home + get "/tags", PageController, :tags + get "/archive", PageController, :archive + get "/about", PageController, :about + get "/now", PageController, :now + get "/code", PageController, :code end # Other scopes may use custom stacks. diff --git a/priv/posts/lan-voice-chat.md b/priv/posts/lan-voice-chat.md new file mode 100644 index 0000000..4b537c3 --- /dev/null +++ b/priv/posts/lan-voice-chat.md @@ -0,0 +1,57 @@ ++++ +title = "LAN Voice Chat with Mumble" +date = 2024-04-16 11:51:33-04:00 +draft = false + +[taxonomies] +# these go in quotes, like the title +tags = ["software", "family"] ++++ + +My kids, 11yo and 7yo, are *really* into playing Minecraft and Terraria together. But, being siblings, it doesn't always go as well as anyone really wants it to. Sometimes, it's just that they can't be in the same *room* together. And since they both have fancy gaming headsets, they might as well get used to using voice chat. + +But how? + +It might be easy to give them Discord accounts and let them get to know the wide world of _Shitty Internet Culture_, _Awful Desktop Software_ and _Yay Notifications Forever_, but that seems like a horrible idea. Besides, what kind of Tech would I be if I didn't solve this problem by deploying software? + +Enter: [Mumble](https://www.mumble.info/downloads/). + +## The Server + +The server is called Murnur, and has [an official Docker image](https://github.com/mumble-voip/mumble-docker). + +In my case, I just plugged this into [Portainer](https://www.portainer.io) using their Docker Compose example. + +(If, like me, you're trying to copy/paste a reasonable looking `docker-compose.json` file while two kids are louodly wondering why this is taking so long, you might also miss the `image: mumblevoip/mumble-server:` placeholder in their example. I've replaced that with `latest` below.) + +```json +services: + mumble-server: + image: mumblevoip/mumble-server:latest + container_name: mumble-server + hostname: mumble-server + restart: on-failure + ports: + - 64738:64738 + - 64738:64738/udp +``` + +Literally nothing to do but run that. The Docker logs will show a password for the `SuperUser` account, which you may want, but for our simple use-case here I never needed it. + +## The Client + +Mumble has [clients](https://www.mumble.info/downloads/) for Windows, Mac, Linux, iOS, and Android. + +After running, you'll go through an Audio Setup Wizard that's fairly self-explanatory. Then it'll ask for connection details. + +Here's the fun bit: + +Since you're doing this locally and not publically, feel free to just pick a username for the server. Mumble will generate a certificate that identifies you, and normally you'd want to back that up and register with the server and all that, but for my use case none of that really matters. I just had the kids type in whatever name they wanted, and bam, they're in. + +There's a `Root` channel everyone joins by default. Others can be created, but since I've just got the two kids, it's easy enough just to let them both be in that channel. + +## How'd It Go? + +It's been running faultless for a few days, with the only real issue being that the client likes to be restarted after the kids' laptops resume from suspend. + +This rocks. Way better than having my kids ask me to buy _Discord Nitro_ for them. diff --git a/priv/posts/odyssey-gen2-kvm.md b/priv/posts/odyssey-gen2-kvm.md new file mode 100644 index 0000000..f43ad25 --- /dev/null +++ b/priv/posts/odyssey-gen2-kvm.md @@ -0,0 +1,44 @@ ++++ +title = "HOWTO: Use the KVM in the Odyssey Ark Gen2" +draft = false +date = 2024-01-02 14:00:00-05:00 + +[taxonomies] +tags = ["howto", "hardware"] ++++ + +I splurged on the absolutely monstrous Samsung Odyssey Ark 55" (Gen 2) monitor. + +If you want a gigantic beast of a monitor and you don't mind it also being a Smart TV kinda thing with its own Home screen and wifi connection, this is a fantastic device! + + + +One of my use cases for a primary display is plugging it into my desktop and also my laptop. The built-in KVM on the monitor is *superbly* under-documented. Here's how to set it up quickly: + +## Connect your computers + +The control box that the display connects to has four inputs: three HDMI and a DisplayPort. Pick the ones you like, and plug them in. Note which numbered port you connect which machine to. + +You also need a USB connection to each, so connect a USB B or C cable from one of the labeled ports on the control box. There's three B and a C. Same as before, note which port you plugged which computer into. + +## Connect your peripherals + +On the right side (from the front) of the control box, there's a couple of USB A ports. Each provides a different amount of power. + +There's only two, which will work for a mouse and a keyboard. I highly recommend plugging a USB hub of some kind into the control box, and then plugging your stuff into there. + +## Configure the Odyssey Ark + +In the Settings menu of the Odyssey Ark, navigate to Connection -> External Device Manager -> USB Input Port Setup. + +This menu maps USB input Ports on the control box to display inputs. For each USB input you've plugged into on the back of the control box, map it to one (or more) displays. + +--- + +That's it! Now, when you switch the monitor to a given input, it'll map the peripherals on the side ports to whichever USB Host port you've mapped them to. + +## What about the multi-monitor thing? + +Hell if I know, it requires some Windows-only software and so I haven't even attempted to give it a try yet. + +Hope this helps someone! diff --git a/priv/posts/steam-deck-touchscreen-fix.md b/priv/posts/steam-deck-touchscreen-fix.md new file mode 100644 index 0000000..663b9a1 --- /dev/null +++ b/priv/posts/steam-deck-touchscreen-fix.md @@ -0,0 +1,26 @@ ++++ +title = "HOWTO: Fix Steam Deck Unresponsive Touchscreen" +date = 2024-01-07 13:40:00-05:00 + +[taxonomies] +tags = ["howto", "hardware", "games", "shit's on fire yo"] ++++ + +If you've picked up your Steam Deck recently and the touchscreen just randomly stopped working, there is a *super* quick fix! Instead of factory resetting and wondering if you accidentally dropped the damn thing, do this: + + + +1. Turn your Steam Deck off. Actually off from the Steam menu, not just suspended by tapping the power button. +1. Unplug the Deck if it's plugged in. +1. Hold the volume up button while you tap the power button. Keep holding the volume up button until you hear the chime. +1. Use the D-Pad to select "Setup Utility" and press A. +1. Navigate to the Power menu. +1. Choose Battery storage mode, and confirm. + +Your Deck will power off and the power LED will blink three times to confirm battery storage mode. + +Plug back into the power supply, and turn it back on normally. This will automatically disable battery storage mode. + +After this, my touchscreen worked perfectly again. + +Hope this helps someone! diff --git a/priv/posts/the-names-we-discard.md b/priv/posts/the-names-we-discard.md new file mode 100644 index 0000000..4914c16 --- /dev/null +++ b/priv/posts/the-names-we-discard.md @@ -0,0 +1,51 @@ ++++ +title = "The Names We Discard" +date = 2024-01-30 15:53:22-05:00 + +[taxonomies] +tags = ["trans"] ++++ + +> It's the name you used for _thirty-some years_. It's not _evil_. +> +> -- My wife + + + +We were packing up boxes, finally clearing out our old house so we could sell it. A good few of the boxes were full of stuff from my childhood, things that my Mom gave me when I had could store them and get them out of the cramped apartment we lived in. They all had my deadname on them. + +I was visibly upset by those boxes, and had just commented about the bittersweetness of these items (and others, like pictures of me from Back When), when my wife fired off the quote above and I had to take a minute to get myself together. + +My wife isn't trans; her first experience with trans people in real life was when I transitioned; and she didn't say it maliciously. Just _thoughtlesly_, as if I had been acting silly. I had to figure out why her offhanded remark hurt _so damn much._ + +--- + +The name I discarded when I finally decided to embrace _the real me_ was indeed part of my life for 37 years. It was my email domain, it was (is) on my Bachelor of Science degree, On trophies. On boxes of childhood treasures in my Mom's neat handwriting. I don't hate it, and I don't hate who that person was. + +But seeing it makes me uncomfortable. + +It reminds me of the decades I outright suppressed and ignored my feelings. + +The young child afraid to be _too_ girly, so folks wouldn't make fun of them. + +The adolescent that knew that if they could wave a wand and, Sailor Moon-style, magically transform into a girl, that they'd do it. Y'know, just to _try it out_. + +The 20-something that would occasionally get pretty drunk and refer to themselves as a girl, but even then would look around to make sure nobody heard. + +The 30-something that was getting drunk _far_ too often, at times daily, and ordering cheap women's clothes from Amazon and hiding them from their wife and kids. + +My deadname reminds me that, despite my driver's license and credit cards all having Jessica Phoenix Canady printed on them, there are still people I love (or loved) who will absolutely use t to refer to me. Sometimes to my face. Sometimes after I just corrected them, hoping in vain that they "just forgot." + +It also reminds me of how I figured out why I never looked *right* in mirrors or pictures, and that I finally _do_. + +Of the card my eldest son made me that says he'll always love me no matter what my gender is. + +How my youngest son calls me "Dad" in public and doesn't understand or care why some folks give us weird looks sometimes. + +That my wife still loves me, despite everything. + +None of this even scratches the surface! The name kind of stores all my feelings about my transness encoded in it, and seeing it unexpectedly can drop them all back onto me at once. + +Hearing or seeing my deadname is going to be a weird, bittersweet, somewhat painful thing for a while. Eventually, I hope, it's only used by the folks I'll never speak to again because they can't put it down. + +But it's damn heavy, and I'm glad I don't always have to carry it anymore.