From 2cd9cbe7095fa525292fb001ade541be4bd95a02 Mon Sep 17 00:00:00 2001 From: Ethan Yoo Date: Tue, 25 Jun 2024 20:40:46 -0400 Subject: [PATCH] Update home page --- layouts/index.html | 150 ++++++++++----- static/icon/letterboxd.svg | 34 ++++ static/icon/linkedin.svg | 1 + themes/geronimo/static/css/style.css | 272 +++++++++++++++++---------- 4 files changed, 316 insertions(+), 141 deletions(-) create mode 100644 static/icon/letterboxd.svg create mode 100644 static/icon/linkedin.svg diff --git a/layouts/index.html b/layouts/index.html index 596b498..51eed41 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,51 +1,113 @@ {{ define "header" }} -
-{{ "" | safeHTML }} -
- -

{{ .Site.Params.author }}

 - -

Pronouns: {{ .Site.Params.authorPronouns }}

- -

I am a data enthusiast skilled in data management, qualitative and quantitative data analysis, and low-code automation. My research interests include disability, health equity, poverty, and social policy. I am also an advocate for digital rights and free culture, and I maintain a page with useful resources.

- - Photo of an East Asian man wearing a dark gray suit and a floral tie - -

My guiding principles draw from disability justice and the ethics of care; these principles are connected to current sociopolitical issues and my commitment to progressive social change.

-
-
+
+ {{ "" | safeHTML }} +
+ + +

{{ .Site.Params.author }}

+ + +

+ Pronouns: + {{ .Site.Params.authorPronouns }} +

+

+ I am a data enthusiast skilled in data management, qualitative and + quantitative data analysis, and low-code automation. My research interests + include disability, health equity, poverty, and social policy. I am also + an advocate for digital rights and free culture, and I maintain + a page with useful resources. +

+ Photo of an East Asian man wearing a dark gray suit and a floral tie +

+ My guiding principles draw from disability justice and the ethics of care; + these principles are connected to current sociopolitical issues and my + commitment to progressive social change. +

+
+
{{- end }} {{ define "main" }} -
-
-

Where should you go from here?

-

📢 I found these current events and recent articles interesting. 📢

-

📆 I regularly write updates on what I'm doing now. 📆

-

📙 You can browse my recommended resources. 📙

-

Elsewhere

-

📌 I have a LinkedIn profile. 📌

-

🎬 I use Letterboxd, "the social network for film lovers." 🎬

-

🙌 This website is a member of The 512KB Club! 🙌

-
-
+
+
+

Where should you go from here?

+

+ 📢 I found these current events and recent articles interesting. +

+

+ 📆 I regularly write updates on what I'm doing now. +

+

+ 📚 You can browse my recommended resources. +

+

Elsewhere

+ + LinkedIn + + + Letterboxd + +
+
- + {{ "" | safeHTML }} - - - -{{- end }} + + + +{{- end }} \ No newline at end of file diff --git a/static/icon/letterboxd.svg b/static/icon/letterboxd.svg new file mode 100644 index 0000000..cee5a1c --- /dev/null +++ b/static/icon/letterboxd.svg @@ -0,0 +1,34 @@ + + + + letterboxd-decal-dots-neg-rgb + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icon/linkedin.svg b/static/icon/linkedin.svg new file mode 100644 index 0000000..5002508 --- /dev/null +++ b/static/icon/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/themes/geronimo/static/css/style.css b/themes/geronimo/static/css/style.css index 5a55735..f77ffbf 100644 --- a/themes/geronimo/static/css/style.css +++ b/themes/geronimo/static/css/style.css @@ -1,133 +1,211 @@ -/* Body */ a, a:link { - text-decoration: none; - color: #ace; + text-decoration: none; + color: #ace; } + a:hover { - background: #2b5278; - text-decoration: underline dotted; - border: 1px solid; + background: #2b5278; + text-decoration: underline dotted; + border: 1px solid; } + header a:link, header a:visited, footer a:link, footer a:visited, aside a:visited, main a:visited { - color: #FFF; + color: #fff; } + body { - background: #10151a; - color: #d3dae3; - font: 1em/1.5 sans-serif; - margin: 2em auto; - max-width: 50em; - padding: 0 2em; + background: #10151a; + color: #d3dae3; + font: 1em/1.5 sans-serif; + margin: 2em auto; + max-width: 50em; + padding: 0 2em; } + h2, main h1 { - text-align: center; + text-align: center; } + h1 { - font-size: 2.1em; + font-size: 2em; } + h2 { - font-size: 1.8em; + font-size: 1.75em; } + h3 { - font-size: 1.5em; + font-size: 1.5em; } + article, main { - padding: 4px 2px; + padding: 4px 2px; } + blockquote { - padding: 0.25em 1.5em; - background: #ddd; - color: #000; - border-radius: 4px; + padding: 0.25em 1.5em; + background: #ddd; + color: #000; + border-radius: 4px; } + code { - background: #000; - font: 1em/1.5 monospace, monospace; - padding: 2px; + background: #000; + font: 1em/1.5 monospace, monospace; + padding: 2px; } + img[src$='#center'] { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +.nextcloud { + width: 50px; + height: 30px; + position: relative; + top: 8px; + background-size: contain; + display: inline-block; + background-repeat: no-repeat; + background-position: center center; +} + +.post-title { + line-height: 1.8; +} + +.subtitle { + float: right; +} + +a.link-000 { + background: #000; + border: none; +} + +a.link-nextcloud { + padding: 10px; + background-color: #0082c9; + color: #fff; + border-radius: 3px; + padding-left: 4px; +} + +html { + overflow-y: scroll; + visibility: visible; + opacity: 1; +} + +a.link-letterboxd { + padding: 0.5em; + background-color: #202830; + border-radius: 3px; + padding-left: 0.25em; +} + +.letterboxd { + display: inline-block; + width: 1em; + margin-right: 0.25em; + vertical-align: middle; +} + +a.link-linkedin { + padding: 0.5em; + background-color: #0077b5; + border-radius: 3px; + margin-right: 0.5em; + padding-left: 0.25em; + color: #fff; +} + +.linkedin { + display: inline-block; + width: 1em; + margin-right: 0.25em; + vertical-align: middle; +} + +.btn { + display: block; + margin: 0.5em auto; + padding: 0.5em; + border: none; + border-radius: 3px; + background-color: #e36d25; + color: #000; + cursor: pointer; + width: fit-content; +} + +.btn:hover { + background-color: #d15d27; +} + +a.btn:hover { + text-decoration: none; + border: none; +} + +a.btn:link, +a.btn:visited { + color: #000; +} + +a.link-letterboxd:link, +a.link-letterboxd:visited, +a.link-linkedin:link, +a.link-linkedin:visited { + color: #fff; } /* Light theme */ @media (prefers-color-scheme: light) { - body { - background: #f2f2f2; - color: #000; - } - header a:link, - header a:visited, - footer a:link, - footer a:visited, - aside a:link { - color: #000; - } - a:hover { - background: #cae6ef; - text-decoration: underline dotted; - border: 1px solid; - } - main a:link { - color: #004962; - } - main a:visited, - aside a:visited { - color: #542baa; - } - code { - background: #ccc; - color: #000; - font: 1em/1.5 monospace, monospace; - padding: 2px; - } -} - -/* Classes */ -.center { - display: block; - margin-left: auto; - margin-right: auto; - text-align: center; -} -.nextcloud { - width: 50px; - height: 30px; - position: relative; - top: 8px; - background-size: contain; - display: inline-block; - background-repeat: no-repeat; - background-position: center center; -} -.post-title { - line-height: 1.8; -} -.subtitle { - float: right; -} -a.link-000 { - background: #000; - border: none; -} -a.link-001 { - padding: 10px; - background-color: #0082c9; - color: #ffffff; - border-radius: 3px; - padding-left: 4px; -} -html { - overflow-y: scroll; - visibility: visible; - opacity: 1; + body { + background: #f2f2f2; + color: #000; + } + header a:link, + header a:visited, + footer a:link, + footer a:visited, + aside a:link { + color: #000; + } + a:hover { + background: #cae6ef; + text-decoration: underline dotted; + border: 1px solid; + } + main a:link { + color: #004962; + } + main a:visited, + aside a:visited { + color: #542baa; + } + code { + background: #ccc; + color: #000; + font: 1em/1.5 monospace, monospace; + padding: 2px; + } }