From 01773eabc92ef6ee90657e8fa179e36e52464f4e Mon Sep 17 00:00:00 2001 From: Ivan Davydov Date: Sat, 21 Jun 2025 18:29:46 +0300 Subject: Make the website minimalistic --- css/header.css | 21 ---- css/isso.css | 324 --------------------------------------------------- css/main.css | 254 +--------------------------------------- css/responsivity.css | 162 +++++--------------------- css/theme.css | 85 -------------- css/third-party.css | 21 ---- 6 files changed, 31 insertions(+), 836 deletions(-) delete mode 100644 css/header.css delete mode 100644 css/isso.css delete mode 100644 css/theme.css delete mode 100644 css/third-party.css (limited to 'css') diff --git a/css/header.css b/css/header.css deleted file mode 100644 index 4830f72..0000000 --- a/css/header.css +++ /dev/null @@ -1,21 +0,0 @@ -div.page_header { - width: 100%; - display: flex; - justify-content: center; - - background-color: var(--theme-color); - border-radius: 15px 15px 0 0; -} - -.floating_element { - color: var(--bg-color); - position: relative; - background-color: var(--theme-color); - border-radius: 0px 0px 20px 20px; - text-align: center; - - img { - max-width: 13%; - display: block; - } -} diff --git a/css/isso.css b/css/isso.css deleted file mode 100644 index d8b3f00..0000000 --- a/css/isso.css +++ /dev/null @@ -1,324 +0,0 @@ -/* ========================================================================== */ -/* Generic styling */ -/* ========================================================================== */ -#isso-thread * { - /* Reset */ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* ========================================================================== */ -/* Thread heading area */ -/* ========================================================================== */ -#isso-thread { - padding: 4px 8px 4px 8px; - margin: 0; - text-align: left; - color: var(--text-color); -} -h4.isso-thread-heading { - padding-bottom: 8px; - color: var(--gray-color); - font-weight: bold; -} -.isso-feedlink { - padding-bottom: 8px; - float: right; - padding-left: 1em; -} -.isso-feedlink a { - font-size: 0.8em; - vertical-align: bottom; -} - -/* ========================================================================== */ -/* Comments */ -/* ========================================================================== */ - -.isso-comment { - max-width: 68em; - margin: 0 auto; -} -.isso-preview .isso-comment { - padding-top: 0; - margin: 0; -} -.isso-comment:not(:first-of-type), -.isso-follow-up .isso-comment { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-bottom: 0.5em; -} -.isso-avatar { - display: block; - float: left; - margin: 0.95em 0.95em 0; -} -.isso-avatar svg { - max-width: 48px; - max-height: 48px; - width: 100%; - height: 100%; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 3px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} -.isso-text-wrapper { - display: block; - padding: 0.95em; -} -.isso-follow-up { - padding-left: calc(7% + 20px); -} -.isso-comment-footer { - font-size: 0.95em; -} -.isso-comment-header { - font-size: 0.85em; -} -.isso-comment-header a { - text-decoration: none; -} -/* Only for comment header, spacer between up-/downvote should have no padding */ -.isso-comment-header .isso-spacer { - padding: 0 6px; -} -.isso-spacer, -.isso-permalink, -.isso-note, -.isso-parent { - color: gray; - font-weight: normal; - text-shadow: none; -} -.isso-spacer:hover, -.isso-permalink:hover, -.isso-note:hover, -.isso-parent:hover { - color: #606060; -} -.isso-note { - float: right; -} -.isso-author { - font-weight: bold; - color: var(--gray-color); -} -.isso-page-author-suffix { - font-weight: bold; - color: #2c2c2c; -} -.isso-textarea, -.isso-preview { - margin-top: 0.2em; - width: 100%; - border: 1px solid #f0f0f0; - border-radius: 2px; - box-shadow: 0 0 2px #888; -} -.isso-text p { - margin-top: 0.2em; -} -.isso-text p:last-child { - margin-bottom: 0.2em; -} -.isso-text h1, -.isso-text h2, -.isso-text h3, -.isso-text h4, -.isso-text h5, -.isso-text h6 { - font-size: 130%; - font-weight: bold; -} -.isso-comment-footer { - font-size: 0.80em; - color: gray; - clear: left; -} -.isso-feedlink, -.isso-comment-footer a { - font-weight: bold; - text-decoration: none; -} -.isso-feedlink:hover, -.isso-comment-footer a:hover { - color: #111111; - text-shadow: #aaaaaa 0 0 1px; -} -.isso-comment-footer > a { - position: relative; - top: .2em; -} -.isso-comment-footer > a + a { - padding-left: 1em; -} -.isso-comment-footer .isso-votes { - color: gray; -} -.isso-upvote svg, -.isso-downvote svg { - position: relative; - top: .2em; -} -/* Reply postbox under existing comment */ -.isso-comment .isso-postbox { - margin-top: 0.8em; -} -.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes { - display: none; -} - -/* ========================================================================== */ -/* Postbox */ -/* ========================================================================== */ -.isso-postbox { - max-width: 68em; - margin: 0 auto; - clear: right; -} -.isso-form-wrapper { - display: block; - padding: 0; - background: var(--bg-color); - color: var(--text-color); -} -.isso-textarea, -.isso-preview { - margin: 0 0 .3em; - padding: .4em .8em; - border-radius: 3px; - border: 1px solid rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} -.isso-textarea { - outline: 0; - width: 100%; - resize: none; - background: var(--bg-color); - color: var(--text-color); -} -.isso-form-wrapper input[type=checkbox] { - vertical-align: middle; - position: relative; - accent-color: var(--theme-color); - background: var(--bg-color); - margin-left: 0; - margin-right: 4px; -} -.isso-notification-section { - font-size: 0.90em; - padding-top: .3em; - display: none; - padding-bottom: 10px; -} -.isso-auth-section { - display: block; -} -.isso-textarea:focus, -.isso-auth-section input:focus { - border-color: rgba(0, 0, 0, 0.8); -} -.isso-input-wrapper { - display: inline-block; - position: relative; - max-width: 25%; - margin: 0; -} -.isso-input-wrapper input { - padding: .3em 10px; - max-width: 100%; - border-radius: 3px; - line-height: 1.4em; - border: 1px solid rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - background: var(--bg-color); - color: var(--text-color); -} -.isso-input-wrapper label { - display: inline-block; - line-height: 1.4em; - height: 1.4em; -} -.isso-post-action { - display: block; - float: right; - margin: 1.4em 0 0 5px; -} -.isso-post-action > input { - padding: calc(.3em - 1px); - border-radius: 2px; - border: 1px solid rgba(0, 0, 0, 0.2); - cursor: pointer; - outline: 0; - line-height: 1.4em; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - background: var(--bg-color); - color: var(--text-color); -} -.isso-post-action > input:hover { - background-color: var(--gray-color); -} -.isso-post-action > input:active { - background-color: var(--theme-color); -} - -/* ========================================================================== */ -/* Postbox (preview mode) */ -/* ========================================================================== */ -.isso-preview, -.isso-post-action input[name="edit"], -.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"], -.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea { - display: none; -} -.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview { - display: block; -} -.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] { - display: inline; -} -.isso-preview { - /*background-color: #f8f8f8; - background: repeating-linear-gradient( - -45deg, - #f8f8f8, - #f8f8f8 10px, - #fff 10px, - #fff 20px - );*/ -} - -/* ========================================================================== */ -/* Animations */ -/* ========================================================================== */ - -/* "target" means the comment that's being linked to, for example: - * https://example.com/blog/example/#isso-15 - */ -.isso-target { - animation: isso-target-fade 5s ease-out; -} -@keyframes isso-target-fade { - 0% { background-color: #eee5a1; } - /* This color should be changed when used on a dark background, - * maybe #3f3c1c for example - */ -} - -/* ========================================================================== */ -/* Media queries */ -/* ========================================================================== */ -@media screen and (max-width:600px) { - .isso-input-wrapper { - display: block; - max-width: 100%; - margin: 0 0 .3em; - } - .isso-input-wrapper input { - width: 100%; - } - .isso-post-action { - margin-top: 0; - } -} diff --git a/css/main.css b/css/main.css index d6c0d76..97cf762 100644 --- a/css/main.css +++ b/css/main.css @@ -1,254 +1,8 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - hyphens: auto; - /*word-break: break-all;*/ +:root { + font-family: monospace; } -html { - min-height: 100%; - min-width: 100%; - - display: flex; - flex-direction: column; -} - -body { - min-height: 100%; - width: 100%; - - display: flex; - flex-direction: column; - flex-grow: 1; - - font-family: Verdana, sans-serif; - font-size: 11pt; - - text-align: center; -} - -div#page, div#divbodyholder, div#cgit { - background-color: var(--bg-color); - - padding: 3px 0px 3px 0px; - - min-height: 100%; - width: 100%; - - flex-grow: 1; - - /*background-image: url(/icons/collage.png); - background-size: contain; - background-attachment: fixed; - background-repeat: repeat;*/ -} - -div.inner_page { - position: relative; - - width: 65%; - - align-items: center; - justify-content: center; - - margin: 0px auto 0px auto; - - border-width: 0px; - border-color: var(--theme-color); - border-style: solid; - border-radius: 15px; - - box-shadow: 0px 0px 33px 14px #000000; -} - -div.page_header { - padding-top: 2em; - padding-bottom: 2em; - width: 100%; - display: flex; - justify-content: center; - - background-color: var(--theme-color); - border-radius: 15px 15px 0 0; -} - - -div.page_header img { - margin: 3px 0px 0px 40px; - - border: 0px 0px 0px; -} - -div.table_of_contents { - clear: center; - - min-width: 200px; - - margin: 3px 3px 3px 3px; - padding: 10px; - - background-color: var(--bg-color); - - text-align: center; -} - -div.table_of_contents_item { - clear: center; - text-align: center; - +/*iframe { width: 100%; - margin: 4px 0px 0px 0px; - - background-color: var(--bg-color); - color: var(--text-color); -} - -div.table_of_contents_item a { - margin: 6px 0px 0px 6px; -} - -div.content_section, div.content { - margin: 3px 3px 3px 3px; - background-color: var(--bg-color); - text-align: left; -} - -div.content_section_text, div.content { - padding: 4px 8px 4px 8px; - color: var(--text-color); -} - -a.ablack { - color: var(--bg-color); - text-decoration: none; -} - -div.subtitle { - margin-bottom: 2ex; - text-align: center; -} - -div#footer { - padding-top: 5px; - color: var(--text-color); -} - -div.content_section_text pre { - margin: 8px 0px 8px 0px; - padding: 8px 8px 8px 8px; - - border-width: 1px; - border-style: solid; - border-color: var(--text-color); - - background-color: var(--bg-color); - - font-style: italic; -} - -div.content_section_text p, -div.content p { - margin-bottom: 6px; - text-align: left; -} - -div.content_section_text p:first-letter, -div.content:first-letter { - font-size: 15pt; -} - -ul, ol { - padding: 4px 8px 4px 16px; - margin-left: 1%; - - text-align: left; -} - -div.section_header, -summary.section_header { - padding: 3px 6px 3px 6px; - border-radius: 15px; - - background-color: var(--theme-color); - - color: var(--bg-color); - font-weight: bold; - font-size: 112%; - text-align: center; -} - -div.section_header_last { - border-radius: 0px 0px 15px 15px; -} - -.floating_element { - color: var(--bg-color); - position: relative; - background-color: var(--theme-color); - border-radius: 0px 0px 20px 20px; - - img { - max-width: 13%; - display: block; - } -} - -table.services_table { - border-collapse: collapse; - - padding: 5px 20px 15px 20px; - margin: 10px auto 10px auto; -} - -tr.services_table_item { - border-top: 1px solid var(--text-color); - border-bottom: 1px solid var(--text-color); -} - -td:nth-of-type(5) { - word-break: break-all; -} - -/*img.floating_element { - justify-content: center; - position: relative; - float: left; - max-width: 13%; + aspect-ratio: unset; }*/ - -a { - color: var(--text-color); - word-break: break-all; -} - -a:hover { - text-decoration: underline; - font-weight: bold; - color: var(--text-color); -} - -div.section_header_last a:visited, -div.section_header_last a:link, -div.section_header_last a:active { - font-weight: initial; -} - -div.section_header_last a:hover { - text-decoration: underline; - font-weight: bold; - color: var(--text-color); -} - -.word-break { - word-break: all; -} - -div.validator { -} - -/* - * There was a CSS snippet to reset custom browser behaviour - * https://stackoverflow.com/a/19184796 - * - */ diff --git a/css/responsivity.css b/css/responsivity.css index 58fc1f3..75d4ec7 100644 --- a/css/responsivity.css +++ b/css/responsivity.css @@ -1,8 +1,4 @@ -@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){ - div.inner_page { - width: 95%; - } - +@media (max-width: 1199px) and (min-width: 401px) { body { font-size: 32pt; } @@ -46,148 +42,44 @@ padding-right: 10px; white-space: nowrap; } -} -/* iframe */ -@media (width: 400px) and (height: 250px) { - div.inner_page { - width: 95%; + iframe { + width: 100%; + aspect-ratio: 1/1!important; } +} +@media only screen and (orientation: landscape) +and (min-width: 992px) +and (max-width: 1199px) { body { - font-size: 11pt; - } - - div.content_section_text p::first-letter,div.content::first-letter { - font-size: 15pt; - } - - /* - * Force table to not be like tables anymore - */ - table, thead, tbody, th, td, tr { - display: block; - } - - /* - * Hide table headers (but not display: none;, for accessibility) - */ - thead tr { - position: absolute; - top: -9999%; - left: -9999%; - } - - td { - /* Behave like a "row" */ - border: none; - position: relative; - padding-left: 50%; - } - - td::before { - /* Now like a table header */ - position: absolute; - /* Top/left values mimic padding */ - left: 6px; - width: 45%; - padding-right: 10px; - white-space: nowrap; + font-size: 14pt; } } - -@media (max-width: 400px) and (orientation: portrait){ - div.inner_page { - width: 100%; - margin: 0; - } - +@media only screen and (orientation: landscape) +and (min-width: 768px) +and (max-width: 991px) { body { - font-size: 24pt; + font-size: 14pt; } } @media only screen and (orientation: landscape) - and (min-width: 992px) - and (max-width: 1199px) { - body { font-size: 14pt; } - } - @media only screen and (orientation: landscape) - and (min-width: 768px) - and (max-width: 991px) { - body { font-size: 14pt; } - } - @media only screen and (orientation: landscape) - and (min-width: 480px) - and (max-width: 767px) { - body { font-size: 11pt; } - } - @media only screen and (orientation: landscape) - and (max-width: 479px) { - body { font-size: 8pt; } - } - @media only screen and (orientation: landscape) - and (min-device-width : 375px) - and (max-device-width : 667px) { - body { font-size: 9.5pt; } - } - -/* https://css-tricks.com/responsive-data-tables/ */ -/* -Max width before this PARTICULAR table gets nasty -This query will take effect for any screen smaller than 760px -and also iPads specifically. -*/ -/*@media -only screen and (max-width: 760px), -(min-device-width: 768px) and (max-device-width: 1024px) {*/ -@media (max-width: 1024px) and (min-width: 401px) { - div.inner_page { - width: 95%; - } - +and (min-width: 480px) +and (max-width: 767px) { body { - font-size: 32pt; - } - - div.content_section_text p::first-letter,div.content::first-letter { - font-size: 37pt; - } - - /* - * Force table to not be like tables anymore - */ - table, thead, tbody, th, td, tr { - display: block; - } - - /* - * Hide table headers (but not display: none;, for accessibility) - */ - thead tr { - position: absolute; - top: -9999%; - left: -9999%; - } - - tbody tr { - border-top: 5px solid var(--gray-color); - border-bottom: 5px solid var(--gray-color); + font-size: 11pt; } - - td { - /* Behave like a "row" */ - border: none; - position: relative; - padding-left: 50%; +} +@media only screen and (orientation: landscape) +and (max-width: 479px) { + body { + font-size: 8pt; } - - td::before { - /* Now like a table header */ - position: absolute; - /* Top/left values mimic padding */ - left: 6px; - width: 45%; - padding-right: 10px; - white-space: nowrap; +} +@media only screen and (orientation: landscape) +and (min-device-width : 375px) +and (max-device-width : 667px) { + body { + font-size: 9.5pt; } } diff --git a/css/theme.css b/css/theme.css deleted file mode 100644 index 2d15bc5..0000000 --- a/css/theme.css +++ /dev/null @@ -1,85 +0,0 @@ -/* Thanks to https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */ -:root { - /* Light mode */ - --light-text: #222430; - --light-bg: #f5f6f7; - --light-theme: #1f9aff; - --light-gray: #707070; - - /* Dark mode */ - --dark-text: #f7f7f7; - --dark-bg: #222430; - --dark-theme: #bd93f9; - --dark-gray: #838383; - - /* Default mode */ - --text-color: var(--dark-text); - --bg-color: var(--dark-bg); - --theme-color: var(--dark-theme); - --gray-color: var(--dark-gray); -} - -#theme-switch:checked ~ #page { - --text-color: var(--light-text); - --bg-color: var(--light-bg); - --theme-color: var(--light-theme); - --gray-color: var(--light-gray); -} - -#theme-switch:checked ~ #divbodyholder { - --text-color: var(--light-text); - --bg-color: var(--light-bg); - --theme-color: var(--light-theme); - --gray-color: var(--light-gray); -} - -:root { - /* Light mode */ - --light-switch-text: "тёмный|dark"; - - /* Dark mode */ - --dark-switch-text: "светлый|light"; - - /* Default mode */ - --switch-text: var(--dark-switch-text); -} - -#theme-switch:checked ~ #page { - --switch-text: var(--light-switch-text); -} - -#theme-switch:checked ~ #divbodyholder { - --switch-text: var(--light-switch-text); -} - -#switch-label::after { - content: var(--switch-text); -} - -#theme-switch { - position: absolute !important; - height: 0px; - width: 0px; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); -} - -@media (prefers-color-scheme: dark) { - :root { - --switch-text: var(--dark-switch-text); - --text-color: var(--dark-text); - --bg-color: var(--dark-bg); - --theme-color: var(--dark-theme); - --gray-color: var(--dark-gray); - } -} - -@media (prefers-color-scheme: light) { - :root { - --switch-text: var(--light-switch-text); - --text-color: var(--light-text); - --bg-color: var(--light-bg); - --theme-color: var(--light-theme); - --gray-color: var(--light-gray); - } -} diff --git a/css/third-party.css b/css/third-party.css deleted file mode 100644 index 1c44e61..0000000 --- a/css/third-party.css +++ /dev/null @@ -1,21 +0,0 @@ -.spoiler, .spoiler a { - color: black; - background-color: black; -} - -.spoiler:hover, .spoiler:hover a { - color: gray; -} - -/* https://flaviocopes.com/css-system-fonts */ -body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol"; -} - -/* https://stackoverflow.com/a/40032327 */ -pre { - white-space: pre-wrap; - word-wrap: break-word; -} -- cgit v1.2.3