From 6af2a0d73c5f9826c36b3b2320caa41f5848a54b Mon Sep 17 00:00:00 2001 From: walcutt Date: Mon, 5 May 2025 15:18:31 -0400 Subject: [PATCH] Responsive & dark modes --- site/assets/chloe.css | 92 +++++++++++++++++++++++++++++++++++++- site/index.html | 101 +++++++++++++++++++++++++++++++++++++++--- 2 files changed, 185 insertions(+), 8 deletions(-) diff --git a/site/assets/chloe.css b/site/assets/chloe.css index 0980b83..94eded9 100644 --- a/site/assets/chloe.css +++ b/site/assets/chloe.css @@ -28,12 +28,32 @@ font-style: italic; } +:root { + --background-color: #000000; + --text-color: #FFFFFF; +} + +.mobile-only { + display: none; +} + +.print-only { + display: none; +} + body { font-family: archer; + background-color: var(--background-color); + color: var(--text-color); +} + +a { + color: var(--text-color); } .container { - width: 600px; + width: 100%; + max-width: 600px; margin: 2em auto; } @@ -43,7 +63,7 @@ body { justify-content: space-between; align-items: center; - border-bottom: 1px solid #000; + border-bottom: 1px solid var(--text-color); } .header .name { @@ -74,6 +94,8 @@ body { text-align: right; font-style: italic; font-weight: bold; + padding-right: 0.5em; + border-right: 1px solid var(--text-color); } ul { @@ -84,4 +106,70 @@ ul { display: flex; flex-direction: row; justify-content: space-evenly; +} + +.icon { + width: 2em; + height: 2em; +} + +@media (prefers-color-scheme:light) { + :root { + --background-color: #FFFFFF; + --text-color: #000000; + } + + /* + body { + background-color: #FFF; + color: #000; + } + + a { + color: #000; + } + + .header, .section .block .title { + border-color: #000; + } */ +} + +@media (max-width:600px) { + .mobile-only { + display: inherit; + } + + .mobile-hide { + display: none; + } + + .container { + width: 100%; + margin: 2em 0; + } + + .header { + display: block; + } + + .header .name { + text-align: center; + } + + .header .contact { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + } +} + +@media print { + .print-only { + display: inherit; + } + + .print-hide { + display: none; + } } \ No newline at end of file diff --git a/site/index.html b/site/index.html index d9fac85..0499225 100644 --- a/site/index.html +++ b/site/index.html @@ -3,6 +3,8 @@ Chloe Herd + + @@ -15,14 +17,101 @@ Chloe Herd
+
- Columbus, OH + + Columbus, OH + + + + + + + + + + + +
- chloe@chloeherd.codes + + + chloe@chloeherd.codes + + + + Columbus, OH +
- Linkedin + + + Linkedin + + + + + + + + + + + + + + + + + +
@@ -33,7 +122,7 @@
- 2023 - Present –  Full-Stack Engineer, Safelite, Columbus OH. + 2023 - Present ~ Full-Stack Engineer, Safelite
    @@ -59,11 +148,11 @@
- 2020 – B.S. Computer Science, University of Virginia + 2020 ~ B.S. Computer Science, University of Virginia
-
+
Technologies