From 5e2291d2daba9c76c086e70c9cddd9ecd3e45bf4 Mon Sep 17 00:00:00 2001 From: Frederick Yin Date: Sun, 15 Jan 2023 13:44:37 +0800 Subject: Revise homepage (again) Transparent instead of solid colors. Fits better with the overall theme. --- alabaster-lite/css/alabaster.css | 121 +++++++++++++++++++++++---------------- docs/img/icons/comics.png | Bin 12887 -> 7783 bytes docs/img/icons/ham.png | Bin 12674 -> 8007 bytes docs/img/icons/icons.kra | Bin 409336 -> 249073 bytes docs/img/icons/projects.png | Bin 17891 -> 9362 bytes docs/img/icons/random.png | Bin 22337 -> 14600 bytes docs/img/icons/shitpost.png | Bin 13048 -> 7254 bytes docs/img/icons/ta.png | Bin 15985 -> 9997 bytes docs/index.md | 32 ++++++----- 9 files changed, 90 insertions(+), 63 deletions(-) diff --git a/alabaster-lite/css/alabaster.css b/alabaster-lite/css/alabaster.css index 804746d..e733917 100644 --- a/alabaster-lite/css/alabaster.css +++ b/alabaster-lite/css/alabaster.css @@ -424,7 +424,7 @@ a:hover tt, a:hover code { @media screen and (max-width: 870px) { div.sphinxsidebar { - display: none; + display: none; } div.document { @@ -432,25 +432,25 @@ a:hover tt, a:hover code { } div.documentwrapper { - margin-left: 0; - margin-top: 0; - margin-right: 0; - margin-bottom: 0; + margin-left: 0; + margin-top: 0; + margin-right: 0; + margin-bottom: 0; } div.bodywrapper { - margin-top: 0; - margin-right: 0; - margin-bottom: 0; - margin-left: 0; + margin-top: 0; + margin-right: 0; + margin-bottom: 0; + margin-left: 0; } ul { - margin-left: 0; + margin-left: 0; } .document { - width: auto; + width: auto; } .footer { @@ -458,11 +458,11 @@ a:hover tt, a:hover code { } .bodywrapper { - margin: 0; + margin: 0; } .footer { - width: auto; + width: auto; } .github { @@ -577,60 +577,81 @@ nav li.active:not(.inactive) > a { * Created on 2022-12-28 */ -div .home-block-container { - display: grid; - gap: 20px; - grid-template-columns: 320px 320px; +div .category-block-container { + display: grid; + gap: 20px; + grid-template-columns: 320px 320px; } @media screen and (max-width: 870px) { - div .home-block-container { - display: grid; - gap: 20px; - /* one column only on narrow screens */ - grid-template-columns: 320px; - } + div .category-block-container { + display: grid; + gap: 20px; + /* one column only on narrow screens */ + grid-template-columns: 320px; + } } -div .home-block { - display: block; - width: 320px; - height: 120px; - background-size: contain; - background-repeat: no-repeat; +.category-block { + display: grid; + text-align: center; } -div .home-block > span { - position: absolute; - margin-left: 150px; - margin-top: 40px; - color: white; - font-size: 1.5em; - font-variant-caps: small-caps; +.category-icon { + display: block; + width: 120px; + height: 120px; + background-color: #3E4349; + background-size: contain; + background-repeat: no-repeat; + mask-size: contain; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +@media (prefers-color-scheme: dark) { + .category-icon { + background-color: white; + } +} + +.category-text { + position: absolute; + margin-left: 130px; + margin-top: 40px; + font-size: 1.5em; + font-variant-caps: small-caps; } -#category-projects { - background-image: url("../img/icons/projects.png"); +#icon-projects { + mask-image: url("../img/icons/projects.png"); + -webkit-mask-image: url("../img/icons/projects.png"); } -#category-random { - background-image: url("../img/icons/random.png"); +#icon-random { + mask-image: url("../img/icons/random.png"); + -webkit-mask-image: url("../img/icons/random.png"); } -#category-shitpost { - background-image: url("../img/icons/shitpost.png"); +#icon-shitpost { + mask-image: url("../img/icons/shitpost.png"); + -webkit-mask-image: url("../img/icons/shitpost.png"); } -#category-ta { - background-image: url("../img/icons/ta.png"); +#icon-ta { + mask-image: url("../img/icons/ta.png"); + -webkit-mask-image: url("../img/icons/ta.png"); } -#category-ham { - background-image: url("../img/icons/ham.png"); +#icon-ham { + mask-image: url("../img/icons/ham.png"); + -webkit-mask-image: url("../img/icons/ham.png"); } -#category-comics { - background-image: url("../img/icons/comics.png"); +#icon-comics { + mask-image: url("../img/icons/comics.png"); + -webkit-mask-image: url("../img/icons/comics.png"); } @@ -1218,11 +1239,11 @@ span.eqno { } a { - color: #7b91be; + color: #a5c5ff; } a:hover { - color: #9bb1de; + color: #cddfff; } tt, code { diff --git a/docs/img/icons/comics.png b/docs/img/icons/comics.png index 0073e6a..578779f 100644 Binary files a/docs/img/icons/comics.png and b/docs/img/icons/comics.png differ diff --git a/docs/img/icons/ham.png b/docs/img/icons/ham.png index e82e2b5..4765727 100644 Binary files a/docs/img/icons/ham.png and b/docs/img/icons/ham.png differ diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra index fbc9db6..60cb94c 100644 Binary files a/docs/img/icons/icons.kra and b/docs/img/icons/icons.kra differ diff --git a/docs/img/icons/projects.png b/docs/img/icons/projects.png index 6c8c9bd..1833b84 100644 Binary files a/docs/img/icons/projects.png and b/docs/img/icons/projects.png differ diff --git a/docs/img/icons/random.png b/docs/img/icons/random.png index e2355fd..aa689c1 100644 Binary files a/docs/img/icons/random.png and b/docs/img/icons/random.png differ diff --git a/docs/img/icons/shitpost.png b/docs/img/icons/shitpost.png index f404a07..4373a98 100644 Binary files a/docs/img/icons/shitpost.png and b/docs/img/icons/shitpost.png differ diff --git a/docs/img/icons/ta.png b/docs/img/icons/ta.png index 08fd8c3..f1dfe7e 100644 Binary files a/docs/img/icons/ta.png and b/docs/img/icons/ta.png differ diff --git a/docs/index.md b/docs/index.md index 53dda73..fc7ad0d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,35 +2,41 @@ ## Categories -
+
-