diff options
Diffstat (limited to 'pyssg.xyz/live/static/css/style.css')
-rw-r--r-- | pyssg.xyz/live/static/css/style.css | 393 |
1 files changed, 0 insertions, 393 deletions
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; - } -} |