From abc0de079b895af1b705894eb2b63596e3e37274 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Tue, 13 Dec 2022 20:44:08 -0600 Subject: add pyssg.xyz configs and templates --- pyssg.xyz/live/static/css/style.css | 393 ++++++++++++++++++++++++++++++++++++ 1 file changed, 393 insertions(+) create mode 100644 pyssg.xyz/live/static/css/style.css (limited to 'pyssg.xyz/live/static/css/style.css') diff --git a/pyssg.xyz/live/static/css/style.css b/pyssg.xyz/live/static/css/style.css new file mode 100644 index 0000000..d6b10eb --- /dev/null +++ b/pyssg.xyz/live/static/css/style.css @@ -0,0 +1,393 @@ +: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; + } +} -- cgit v1.2.3-70-g09d2