From f797bb14f7413df2abac6326c6df769004e50aa1 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Mon, 1 May 2023 09:35:25 -0600 Subject: small bugfix, add toc settings, update example site and delete unnecessary static assets --- pyssg.xyz/live/static/css/style.css | 393 ------------------------------------ pyssg.xyz/live/static/css/theme.css | 243 ---------------------- 2 files changed, 636 deletions(-) delete mode 100644 pyssg.xyz/live/static/css/style.css delete mode 100644 pyssg.xyz/live/static/css/theme.css (limited to 'pyssg.xyz/live/static/css') diff --git a/pyssg.xyz/live/static/css/style.css b/pyssg.xyz/live/static/css/style.css deleted file mode 100644 index d6b10eb..0000000 --- a/pyssg.xyz/live/static/css/style.css +++ /dev/null @@ -1,393 +0,0 @@ -:root { - font-family: Verdana, Geneva, sans-serif; - font-size: larger; -} - -* { - box-sizing: border-box; - transition: all 0.25s ease-in-out; -} - -h1, -h2 { - text-align: center; -} - -body, -html { - margin: 0; - padding: 0; -} - -body { - width: 100%; - display: grid; - - grid-template-areas: - 'header' - 'main' - 'footer'; - grid-template-rows: 3em auto auto; - grid-template-columns: auto; -} - -body > header { - grid-area: header; -} - -body > footer { - grid-area: footer; - padding-top: 0.5em; - padding-bottom: 0.5em; -} - -main { - grid-area: main; - padding-top: 0.5em; - border-radius: 5px; - padding-bottom: 0.5em; -} - -a{ - text-decoration: none; -} - -mark, -mark * { - background: none; - animation: mark-rainbow 2s linear infinite; -} - -body > header, -body > footer, -main { - justify-self: center; - width: clamp(30ch, calc(100% - 1em), 75ch); - padding-left: 0.5em; - padding-right: 0.5em; -} - -main.art { - width: clamp(30ch, calc(100% - 1em), 100%); -} - -main.art p { - margin-left: auto; - margin-right: auto; - width: clamp(30ch, calc(100% - 1em), 75ch); -} - - -/* article/art elements */ -div.article-info, -div.art-info { - line-height: 0.5; - font-size: smaller; -} - - -/* nav bar / header */ -body > header { - display: flex; - justify-content: space-between; - align-items: center; - align-content: center; -} - -nav ul { - margin: 0; - padding: 0; - list-style-type: none; -} - -nav li { - display: block; - float: left; - border-radius: 5px; - min-width: 1em; - max-width: 10em; - padding-top: 0.2em; - padding-bottom: 0.2em; - padding-left: 0.4em; - padding-right: 0.4em; - margin-left: 0.2em; - margin-right: 0.2em; -} - -nav > ul > li > ul { - visibility: hidden; - position: absolute; - padding-top: 0.2em; - padding-bottom: 0.2em; -} - -nav > ul > li:hover > ul { - visibility: visible; -} - -nav > ul > li > ul > li { - float: none; - margin-top: 0.4em; -} - -nav span { - display: none; -} - -@media screen and (min-width: 600px) { - nav span { - display: inline; - padding-left: 0.4em; - } -} - - -/* footer */ -body > footer { - margin-left: auto; - margin-right: auto; - text-align: center; -} - -body > footer > span { - font-size: smaller; -} - - -/* theme swticher */ -button.theme-switcher { - border: none; - font: inherit; - cursor: pointer; - position: relative; - border-radius: 5px; - padding-top: 0.2em; - padding-bottom: 0.2em; - padding-left: 0; - padding-right: 0; - margin-left: 0.2em; - margin-right: 0.2em; -} - -button.theme-switcher > .fa-sun { - transform: translate(-0.5em, -1em); -} - -.theme-light button.theme-switcher > .fa-sun { - transform: translateX(-0.5em); - transition: all 0.25s ease-in-out; -} - -button.theme-switcher > .fa-moon { - transform: translate(0.5em, -1em); -} - -.theme-dark button.theme-switcher > .fa-moon { - transform: translateX(0.5em); - transition: all 0.25s ease-in-out; -} - -/* code blocks */ -pre { - white-space: pre-wrap; -} - -code { - padding: 0.1em; - padding-left: 0.4em; - padding-right: 0.4em; - overflow-wrap: anywhere; -} - -code.crypto { - font-size: smaller; -} - -/* for hljs line numbers */ -.hljs-ln-numbers { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - text-align: right; - border-right: 1px solid #CCC; - vertical-align: top; - padding-right: 0.5em !important; -} - -.hljs-ln-code { - padding-left: 0.5em !important; -} - - -/* images */ -figure { - margin: 0; - margin-left: 1em; - margin-right: 1em; -} - -figcaption { - margin-top: 0.5em; - text-align: center; - font-size: smaller; - font-style: italic; -} - -img { - border-radius: 5px; - max-width: 100%; - display: block; - margin-left: auto; - margin-right: auto; - /* vertical-align: middle; */ -} - -img.wrap-right { - float: right; -} - -img.wrap-left { - float: left; -} - -/* img grid */ -div.img-grid, -div.img-grid > p { - display: grid; - gap: 1em; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); -} - -div.img-grid img { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow: hidden; -} - -/* crypto grid */ -div.crypto-grid { - display: grid; - gap: 1em; - /* the 200px corresponds tothe img qr size */ - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); -} - -div.crypto-grid figure { - margin: 0; -} - -div.crypto-grid a { - display: contents; -} - -div.crypto-grid img.qr { - max-width: 140px; -} - -/* art grid / art gallery */ -div.art-grid { - display: grid; - gap: 0.5em; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-auto-rows: auto; -} - -div.art-grid a { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow: hidden; -} - -div.art-grid a { - display: contents; -} - -div.art-grid img { - object-fit: cover; - width: 100%; - height: 100%; -} - -/* not sure if these two are needed as the one above works fine */ -div.art-grid a.wide img { - width: 100%; -} - -div.art-grid a.tall img { - height: 100%; -} - -@media screen and (min-width: 600px) { - div.art-grid a.wide img { - grid-column: span 2 / auto; - } - - div.art-grid a.tall img { - grid-row: span 2 / auto; - } -} - -a.zoom-in { - cursor: zoom-in; -} - -/* art nav / for now also page nav */ -div.art-nav, -div.page-nav { - width: 100%; - display: grid; - grid-template-areas: - 'next index prev'; - grid-template-columns: 1fr 1fr 1fr; - - align-items: center; - justify-items: center; -} - -div.art-nav > span.index, -div.page-nav > span.index { - grid-area: index; -} - -div.art-nav > span.previous, -div.page-nav > span.previous { - grid-area: prev; -} - -div.art-nav > span.next, -div.page-nav > span.next { - grid-area: next; -} - -div.art-nav > span, -div.page-nav > span { - border-radius: 5px; - min-width: 1em; - max-width: 10em; - padding-top: 0.2em; - padding-bottom: 0.2em; - padding-left: 0.4em; - padding-right: 0.4em; - margin-left: 0.2em; - margin-right: 0.2em; -} - -div.art-nav > span span, -div.page-nav > span span { - display: none; -} - -@media screen and (min-width: 600px) { - div.art-nav > span span, - div.page-nav > span span { - display: inline; - } -} diff --git a/pyssg.xyz/live/static/css/theme.css b/pyssg.xyz/live/static/css/theme.css deleted file mode 100644 index c9b85c6..0000000 --- a/pyssg.xyz/live/static/css/theme.css +++ /dev/null @@ -1,243 +0,0 @@ -/* nord theme */ -:root { - --color0: #2e3440; - --color1: #3b4252; - --color2: #434c5e; - --color3: #4c566a; - --color4: #d8dee9; - --color5: #e5e9f0; - --color6: #eceff4; - --color7: #8fbcbb; - --color8: #88c0d0; - --color9: #81a1c1; - --color10: #5e81ac; - --color11: #bf616a; - --color12: #d08770; - --color13: #ebcb8b; - --color14: #a3be8c; - --color15: #b48ead; -} - -.theme-light { - --bg: var(--color5); - --body-bg: var(--color4); - --navitem-bg: var(--color10); - --navitem-bg-hl: var(--color9); - - --fg: var(--color0); - --fg-hl: var(--color3); - - --link: var(--color15); - --link-hl: var(--color7); - --navitem-link: var(--color7); - --navitem-link-hl: var(--color6); - - --fg-acc1: var(--color11); - --fg-acc2: var(--color12); - --fg-acc3: var(--color13); - --fg-acc4: var(--color14); - --fg-acc5: var(--color15); - - --switch-bg: var(--color9); - --switch-bg-hl: var(--color10); - --switch-moon: var(--color10); - --switch-sun: var(--color13); - - --code-border: var(--color3); - --art-border: var(--color3); - - --pagenav-bg: var(--color1); - --pagenav-bg-hl: var(--color2); - --pagenav-link: var(--color8); - --pagenav-link-hl: var(--color7); -} - -.theme-dark { - --bg: var(--color3); - --body-bg: var(--color0); - --navitem-bg: var(--color1); - --navitem-bg-hl: var(--color2); - - --fg: var(--color4); - --fg-hl: var(--color5); - - --link: var(--color15); - --link-hl: var(--color10); - --navitem-link: var(--color8); - --navitem-link-hl: var(--color7); - - --fg-acc1: var(--color11); - --fg-acc2: var(--color12); - --fg-acc3: var(--color13); - --fg-acc4: var(--color14); - --fg-acc5: var(--color15); - - --switch-bg: var(--color1); - --switch-bg-hl: var(--color2); - --switch-moon: var(--color10); - --switch-sun: var(--color13); - - --code-border: var(--color4); - --art-border: var(--color4); - - --pagenav-bg: var(--color10); - --pagenav-bg-hl: var(--color9); - --pagenav-link: var(--color7); - --pagenav-link-hl: var(--color6); -} - -/* animations */ -@keyframes mark-rainbow { - 0%{ - color: var(--color11); - } - 20%{ - color: var(--color12); - } - 40%{ - color: var(--color13); - } - 60%{ - color: var(--color14); - } - 80%{ - color: var(--color15); - } - 100%{ - color: var(--color11); - } -} - -/* general */ -a { - color: var(--link); -} - -a:hover { - color: var(--link-hl); -} - -h1 { - color: var(--fg-acc1); -} - -h2 { - color: var(--fg-acc2); -} - -h3 { - color: var(--fg-acc3); -} - -h4 { - color: var(--fg-acc4); -} - -h5 { - color: var(--fg-acc5); -} - -body { - background: var(--bg); - color: var(--fg); -} - -main { - background: var(--body-bg); -} - -pre, code { - border-radius: 5px; - border: 1px solid var(--code-border); -} - -/* nav bar */ -body > header { - background: var(--bg); -} - -nav li { - background: var(--navitem-bg); -} - -nav a { - color: var(--navitem-link); -} - -nav li:hover { - background: var(--navitem-bg-hl); - color: var(--fg-hl); -} - -nav li:hover > a { - color: var(--navitem-link-hl); -} - - -/* footer */ -body > footer { - background: var(--bg); -} - - -/* image gallery (not really being used rn) */ -div.gallery { - border: 1px solid var(--fg-hl); -} - -div.gallery:hover { - border: var(--fg-acc5); -} - - -/* switch */ -button.theme-switcher { - background-color: var(--switch-bg); -} - -button.theme-switcher:hover { - background-color: var(--switch-bg-hl); -} - -button.theme-switcher > .fa-moon, -button.theme-switcher > .fa-sun { - color: transparent; -} - -.theme-dark button.theme-switcher > .fa-moon { - color: var(--switch-moon); -} - -.theme-light button.theme-switcher > .fa-sun { - color: var(--switch-sun); -} - -/* art grid / art gallery */ -div.art-grid img { - border: 1px solid var(--art-border); -} - -div.art-grid img:hover { - border: 5px solid var(--art-border); -} - -/* art nav / for now also page nav */ -div.art-nav > span, -div.page-nav > span { - background: var(--pagenav-bg); -} - -div.art-nav > span > a, -div.page-nav > span > a { - color: var(--pagenav-link); -} - -div.art-nav > span:hover, -div.page-nav > span:hover { - background: var(--pagenav-bg-hl); -} - -div.art-nav > span:hover > a, -div.page-nav > span:hover > a { - color: var(--pagenav-link-hl); -} -- cgit v1.2.3-70-g09d2