diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/style.css | 149 | ||||
| -rw-r--r-- | docs/style.css.map | 2 |
2 files changed, 135 insertions, 16 deletions
diff --git a/docs/style.css b/docs/style.css index dae8b33..32bbce4 100644 --- a/docs/style.css +++ b/docs/style.css @@ -7,15 +7,34 @@ *:focus, *::selection { background-color: inherit; outline: none !important; - color: #ededed; +} +@media (prefers-color-scheme: dark) { + *:focus, *::selection { + color: #ededed; + } +} +@media (prefers-color-scheme: light) { + *:focus, *::selection { + color: black; + } } body { - background-color: #131313; - color: lightgray; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; } +@media (prefers-color-scheme: dark) { + body { + background-color: #131313; + color: lightgray; + } +} +@media (prefers-color-scheme: light) { + body { + background-color: lightgray; + color: #131313; + } +} header { text-align: center; @@ -38,7 +57,16 @@ nav { justify-content: space-evenly; align-items: center; padding: 0em 2em; - background-color: #131313; +} +@media (prefers-color-scheme: dark) { + nav { + background-color: #131313; + } +} +@media (prefers-color-scheme: light) { + nav { + background-color: lightgray; + } } main { @@ -74,7 +102,16 @@ main .about-me { footer { text-align: center; font-size: 0.8em; - background-color: #333; +} +@media (prefers-color-scheme: dark) { + footer { + background-color: #333; + } +} +@media (prefers-color-scheme: light) { + footer { + background-color: #f0f0f0; + } } a { @@ -83,7 +120,16 @@ a { } a:hover { border-color: #a29d7f; - color: #ededed; +} +@media (prefers-color-scheme: dark) { + a:hover { + color: #ededed; + } +} +@media (prefers-color-scheme: light) { + a:hover { + color: black; + } } h3 { @@ -93,9 +139,19 @@ h3 { .card { padding: 2em; - background-color: #333; border-radius: 0.3em; - border: 1px solid #131313; +} +@media (prefers-color-scheme: dark) { + .card { + background-color: #333; + border: 1px solid #131313; + } +} +@media (prefers-color-scheme: light) { + .card { + background-color: #f0f0f0; + border: 1px solid lightgray; + } } .card ul { list-style: none; @@ -104,9 +160,18 @@ h3 { padding: 0.5em; } .card ul li span { - background-color: #131313; padding: 0.2em; } +@media (prefers-color-scheme: dark) { + .card ul li span { + background-color: #131313; + } +} +@media (prefers-color-scheme: light) { + .card ul li span { + background-color: lightgray; + } +} .card.work-card { display: flex; flex-direction: column; @@ -118,11 +183,20 @@ h3 { flex-flow: row wrap; } .card.work-card .info span { - background-color: #131313; padding: 0.5em; margin: 0 0.5em 0.5em; font-size: 0.8em; } +@media (prefers-color-scheme: dark) { + .card.work-card .info span { + background-color: #131313; + } +} +@media (prefers-color-scheme: light) { + .card.work-card .info span { + background-color: lightgray; + } +} .card.work-card:hover { border: 1px solid #a29d7f; } @@ -153,38 +227,83 @@ h3 { } .works-filter label { margin-left: 2em; - color: lightgray; +} +@media (prefers-color-scheme: dark) { + .works-filter label { + color: lightgray; + } +} +@media (prefers-color-scheme: light) { + .works-filter label { + color: #131313; + } } .works-filter select { - background-color: #333; color: #a29d7f; border: none; text-align: center; padding: 0.2em; } +@media (prefers-color-scheme: dark) { + .works-filter select { + background-color: #333; + } +} +@media (prefers-color-scheme: light) { + .works-filter select { + background-color: #f0f0f0; + } +} .works-description { margin: 2em 1em; padding: 1em; - border: 1px solid #333; font-size: 0.9em; } +@media (prefers-color-scheme: dark) { + .works-description { + border: 1px solid #333; + } +} +@media (prefers-color-scheme: light) { + .works-description { + border: 1px solid #f0f0f0; + } +} .download-button { - border: 1px solid #333; padding: 0.5em; margin: 0.5em 3em; font-size: 0.8em; color: #a29d7f; } +@media (prefers-color-scheme: dark) { + .download-button { + border: 1px solid #333; + } +} +@media (prefers-color-scheme: light) { + .download-button { + border: 1px solid #f0f0f0; + } +} .story-text p { padding: 2em; margin: 2em 1em; - background-color: #333; line-height: 1.8rem; font-size: 0.9em; } +@media (prefers-color-scheme: dark) { + .story-text p { + background-color: #333; + } +} +@media (prefers-color-scheme: light) { + .story-text p { + background-color: #f0f0f0; + } +} @media screen and (min-width: 480px) { .story-text p { line-height: 2rem; diff --git a/docs/style.css.map b/docs/style.css.map index 30dbeb0..b348fc5 100644 --- a/docs/style.css.map +++ b/docs/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI,kBAlBe;EAmBf,OAjBS;EAkBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,kBA7Ce;;;AAgDnB;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;EACA,kBA1EQ;;;AA6EZ;EACI;EACA;;AACA;EACI,cA/EO;EAgFP;;;AAIR;EACI;EACA,OAtFW;;;AAyFf;EACI;EACA,kBA7FQ;EA8FR;EACA;;AAEA;EACI;;AACA;EACI;;AACA;EACI,kBAvGG;EAwGH;;AAKZ;EACI;EACA;EACA;EAcA;;AAbA;EACI;EACA;;AACA;EACI,kBArHG;EAsHH;EACA;EACA;;AAGR;EACI;;AAGJ;EAlBJ;IAmBQ;;;AAEJ;EArBJ;IAsBQ;;;AAEJ;EAxBJ;IAyBQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;EACA,OAjJK;;AAmJT;EACI,kBArJI;EAsJJ,OApJO;EAqJP;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,OAvKW;;;AA2KX;EACI;EACA;EACA,kBAhLI;EAiLJ;EACA;;AACA;EANJ;IAOQ;IACA;;;AAEJ;EAVJ;IAWQ;IACA","file":"style.css"}
\ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAMA;EACI;EACA;EACA;EAYA;;AAXA;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EANJ;IAOQ;;;;AAOZ;EAUI;EACA;;AAVA;EADJ;IAEQ,kBA1BK;IA2BL,OAxBM;;;AA0BV;EALJ;IAMQ,kBA3BM;IA4BN,OA/BK;;;;AAsCb;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EALJ;IAMQ,kBA5DK;;;AA8DT;EARJ;IASQ,kBA5DM;;;;AAiEd;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ,kBA/FU;;;AAiGd;EANJ;IAOQ,kBAjGgB;;;;AAsGxB;EACI;EACA;;AACA;EACI,cAxGO;;AAyGP;EAFJ;IAGQ;;;AAEJ;EALJ;IAMQ;;;;AAMZ;EACI;EACA,OArHW;;;AAwHf;EACI;EACA;;AACA;EAHJ;IAIQ,kBA/HU;IAgIV;;;AAEJ;EAPJ;IAQQ,kBAlIgB;IAmIhB;;;AAIJ;EACI;;AACA;EACI;;AACA;EAQI;;AAPA;EADJ;IAEQ,kBA/IP;;;AAiJG;EAJJ;IAKQ,kBA/IN;;;AAuJV;EACI;EACA;EACA;EAmBA;;AAlBA;EACI;EACA;;AACA;EAOI;EACA;EACA;;AARA;EADJ;IAEQ,kBAnKP;;;AAqKG;EAJJ;IAKQ,kBAnKN;;;AA0KN;EACI;;AAGJ;EAvBJ;IAwBQ;;;AAEJ;EA1BJ;IA2BQ;;;AAEJ;EA7BJ;IA8BQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;;AACA;EAFJ;IAGQ,OAnME;;;AAqMN;EALJ;IAMQ,OAzMC;;;AA4MT;EAOI,OA/MO;EAgNP;EACA;EACA;;AATA;EADJ;IAEQ,kBA7MM;;;AA+MV;EAJJ;IAKQ,kBA/MY;;;;AAwNxB;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;;AAKR;EACI;EACA;EACA;EACA,OAvOW;;AAwOX;EALJ;IAMQ;;;AAEJ;EARJ;IASQ;;;;AAMJ;EACI;EACA;EACA;EACA;;AACA;EALJ;IAMQ,kBA3PM;;;AA6PV;EARJ;IASQ,kBA7PY;;;AAgQhB;EAZJ;IAaQ;IACA;;;AAEJ;EAhBJ;IAiBQ;IACA","file":"style.css"}
\ No newline at end of file |
