diff options
| -rw-r--r-- | alabaster-lite/css/alabaster.css | 121 | ||||
| -rw-r--r-- | docs/img/icons/comics.png | bin | 12887 -> 7783 bytes | |||
| -rw-r--r-- | docs/img/icons/ham.png | bin | 12674 -> 8007 bytes | |||
| -rw-r--r-- | docs/img/icons/icons.kra | bin | 409336 -> 249073 bytes | |||
| -rw-r--r-- | docs/img/icons/projects.png | bin | 17891 -> 9362 bytes | |||
| -rw-r--r-- | docs/img/icons/random.png | bin | 22337 -> 14600 bytes | |||
| -rw-r--r-- | docs/img/icons/shitpost.png | bin | 13048 -> 7254 bytes | |||
| -rw-r--r-- | docs/img/icons/ta.png | bin | 15985 -> 9997 bytes | |||
| -rw-r--r-- | 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 Binary files differindex 0073e6a..578779f 100644 --- a/docs/img/icons/comics.png +++ b/docs/img/icons/comics.png diff --git a/docs/img/icons/ham.png b/docs/img/icons/ham.png Binary files differindex e82e2b5..4765727 100644 --- a/docs/img/icons/ham.png +++ b/docs/img/icons/ham.png diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra Binary files differindex fbc9db6..60cb94c 100644 --- a/docs/img/icons/icons.kra +++ b/docs/img/icons/icons.kra diff --git a/docs/img/icons/projects.png b/docs/img/icons/projects.png Binary files differindex 6c8c9bd..1833b84 100644 --- a/docs/img/icons/projects.png +++ b/docs/img/icons/projects.png diff --git a/docs/img/icons/random.png b/docs/img/icons/random.png Binary files differindex e2355fd..aa689c1 100644 --- a/docs/img/icons/random.png +++ b/docs/img/icons/random.png diff --git a/docs/img/icons/shitpost.png b/docs/img/icons/shitpost.png Binary files differindex f404a07..4373a98 100644 --- a/docs/img/icons/shitpost.png +++ b/docs/img/icons/shitpost.png diff --git a/docs/img/icons/ta.png b/docs/img/icons/ta.png Binary files differindex 08fd8c3..f1dfe7e 100644 --- a/docs/img/icons/ta.png +++ b/docs/img/icons/ta.png 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 -<div class="home-block-container"> +<div class="category-block-container"> <a href="/projects"> - <div class="home-block" id="category-projects"> - <span>Projects</span> + <div class="category-block"> + <span class="category-icon" id="icon-projects"></span> + <span class="category-text">Projects</span> </div> </a> <a href="/random"> - <div class="home-block" id="category-random"> - <span>Random</span> + <div class="category-block"> + <span class="category-icon" id="icon-random"></span> + <span class="category-text">Random</span> </div> </a> <a href="/ta"> - <div class="home-block" id="category-ta"> - <span>TA</span> + <div class="category-block"> + <span class="category-icon" id="icon-ta"></span> + <span class="category-text">TA</span> </div> </a> <a href="/ham"> - <div class="home-block" id="category-ham"> - <span>Ham Radio</span> + <div class="category-block"> + <span class="category-icon" id="icon-ham"></span> + <span class="category-text">Ham Radio</span> </div> </a> <a href="/shitpost"> - <div class="home-block" id="category-shitpost"> - <span>Shitpost</span> + <div class="category-block"> + <span class="category-icon" id="icon-shitpost"></span> + <span class="category-text">Shitpost</span> </div> </a> <a href="/comics"> - <div class="home-block" id="category-comics"> - <span>Comics</span> + <div class="category-block"> + <span class="category-icon" id="icon-comics"></span> + <span class="category-text">Comics</span> </div> </a> </div> |
