diff --git a/changelog b/changelog index 3b21aa3..8901dfb 100644 --- a/changelog +++ b/changelog @@ -23,3 +23,4 @@ 2024-07-27: modernize /html/site-info.html, finally 2024-07-27: improve image accessibility, update blog posts to be compliant with new style 2024-07-28: add support for planned footer in all relevant html documents, simplify inclusion of other documents in a document using include script +2024-08-05: add 88x31s, clean up css diff --git a/files/88x31/bunbun.dev.gif b/files/88x31/bunbun.dev.gif deleted file mode 100644 index e2569ee..0000000 Binary files a/files/88x31/bunbun.dev.gif and /dev/null differ diff --git a/files/88x31/bunbun.dev.html b/files/88x31/bunbun.dev.html new file mode 100644 index 0000000..3377a7f --- /dev/null +++ b/files/88x31/bunbun.dev.html @@ -0,0 +1,2 @@ +bunbun.dev + diff --git a/files/88x31/luxen.neocities.html b/files/88x31/luxen.neocities.html new file mode 100644 index 0000000..4cd8a83 --- /dev/null +++ b/files/88x31/luxen.neocities.html @@ -0,0 +1 @@ + diff --git a/files/88x31/natalieee.net.html b/files/88x31/natalieee.net.html new file mode 100644 index 0000000..4f17294 --- /dev/null +++ b/files/88x31/natalieee.net.html @@ -0,0 +1 @@ + diff --git a/style.css b/style.css index 0459574..ec828dd 100644 --- a/style.css +++ b/style.css @@ -22,6 +22,12 @@ } } +* { + font-family: 'MapleMono'; + font-size: 16.5px; + text-wrap: wrap; +} + :root { --bg: #F2F4F8; --alt-bg: #dde1e6; @@ -64,6 +70,27 @@ body { padding-bottom: 10px; } +h1 { + font-size: 33px; + font-weight: normal; +} + +h2 { + font-size: 22px; + font-family: 'MapleMonoItalic'; + font-weight: normal; +} + +h3 { + font-size: 18px; + font-weight: bold; +} + +img { + max-width: 100%; + height: auto; +} + main { display: flex; flex-direction: column; @@ -104,10 +131,30 @@ header { } } -* { - font-family: 'MapleMono'; - font-size: 16.5px; - text-wrap: wrap; +section { + display: flex; + flex-direction: column; + justify-content: center; + + background: var(--alt-bg); + box-shadow: 10px 10px var(--gray); + margin: 15px 30px; + padding: 20px; + + > p { + margin: 5px 0; + } + + > h1, h2, h3 { + margin: 10px 0; + } + + .ignore-section { + background: var(--bg); + box-shadow: none; + margin: 0; + padding: 5px 10px; + } } form { @@ -125,49 +172,46 @@ form { border: none; color: var(--fg); background: var(--bg); - } - - > button:hover { - background: var(--hl); + + &:hover { + background: var(--hl); + } } > input { color: var(--fg); margin: 10px; border: none; - background: var(--bg) - } - - > input:focus { - outline: none; + background: var(--bg); + + &:focus { + outline: none; + } } } -section { +figure { display: flex; flex-direction: column; - justify-content: center; - - background: var(--alt-bg); - box-shadow: 10px 10px var(--gray); - margin: 15px 30px; - padding: 20px; - /* border-bottom: 1px solid var(--fg); */ - - > p { - margin: 5px 0; - } - - > h1, h2, h3 { - margin: 10px 0; - } -} - -.ignore-section { + justify-content: flex-start; + max-width: 125%; background: var(--bg); - box-shadow: none; margin: 0; - padding: 5px 10px; + margin-bottom: 15px; + + > img { + height: auto; + padding: 10px; + padding-bottom: 0; + } + + > figcaption { + display: flex; + justify-content: center; + text-align: center; + padding: 5px; + margin: 0; + } } table { @@ -189,10 +233,6 @@ th:last-child, td:last-child { width: 20%; } -tr.rowhighlight { - background-color: var(--fg); -} - iframe { border: none; padding: 0; @@ -201,49 +241,12 @@ iframe { overflow: hidden; } -h1 { - font-size: 33px; - font-weight: normal; -} - -h2 { - font-size: 22px; - font-family: 'MapleMonoItalic'; - font-weight: normal; -} - -h3 { - font-size: 18px; - font-weight: bold; -} - -img { - max-width: 100%; - height: auto; -} - summary { -webkit-user-select: none; -ms-user-select: none; user-select: none; } -.post { - background: var(--alt-bg); - box-shadow: 10px 10px var(--gray); - margin: 30px; - padding: 20px; -} - -::-webkit-scrollbar { - width: 0px; - height: 0px; -} - -.italic { - font-family: 'MapleMonoItalic' !important; -} - code, pre { background: var(--bg); margin: 10px; @@ -263,8 +266,15 @@ a:visited { color: var(--visited-link); } -::selection { - background: var(--highlight) +.post { + background: var(--alt-bg); + box-shadow: 10px 10px var(--gray); + margin: 30px; + padding: 20px; +} + +.italic { + font-family: 'MapleMonoItalic' !important; } .captioned-image { @@ -290,6 +300,15 @@ a:visited { } } +::-webkit-scrollbar { + width: 0px; + height: 0px; +} + +::selection { + background: var(--highlight) +} + image-column-container { min-width: 100%; display: flex; @@ -304,30 +323,6 @@ image-container { height: auto; } -figure { - display: flex; - flex-direction: column; - justify-content: flex-start; - max-width: 125%; - background: var(--bg); - margin: 0; - margin-bottom: 15px; - - > img { - height: auto; - padding: 10px; - padding-bottom: 0; - } - - > figcaption { - display: flex; - justify-content: center; - text-align: center; - padding: 5px; - margin: 0; - } -} - flex-column { width: 100%; display: flex; @@ -353,7 +348,7 @@ flex-grid { } flex-grid-item { - flex: 1 0 200px; /* Flex grow, flex shrink, flex basis */ + flex: 1 0 200px; margin: 5px; overflow: hidden; position: relative;