From d6a8a773cb46355761b2f0c7cf6596a3cbf7a01c Mon Sep 17 00:00:00 2001 From: "Alexander \"Arav\" Andreev" Date: Wed, 26 Oct 2022 01:52:16 +0400 Subject: [PATCH] Cleaned up CSS. --- homepage/static/assets/css/about.css | 51 ++++++++++++++++++++++ homepage/static/assets/css/articles.css | 9 ++-- homepage/static/assets/css/guestbook.css | 44 ++++++++++--------- homepage/static/assets/css/index.css | 3 +- homepage/static/assets/css/main.css | 55 +----------------------- homepage/static/assets/css/mindflow.css | 6 +-- 6 files changed, 85 insertions(+), 83 deletions(-) create mode 100644 homepage/static/assets/css/about.css diff --git a/homepage/static/assets/css/about.css b/homepage/static/assets/css/about.css new file mode 100644 index 0000000..8d95e00 --- /dev/null +++ b/homepage/static/assets/css/about.css @@ -0,0 +1,51 @@ +.service-up::after { content: '●'; } + +.service-down::after { content: '○'; } + +h3:is(.service-up, .service-down)::after { + font-size: 1rem; + margin-right: -.9rem; + vertical-align: text-top; + padding-left: .2rem; } + +.columns { + column-count: 3; + column-fill: balance-all; + column-gap: 1rem; + column-span: none; } + +.columns.figs { column-count: 2; } + +.columns > div { + display: inline-block; + width: 100%; } + +.columns h3 { color: var(--primary-color); } + +figure figcaption { font-size: .8rem; } + +figure.center, +figure figcaption { text-align: center; } + +figure img { width: 100%; } + +figure.center img { width: 60%; } + +#contacts, +#donation { + text-align: center; + width: 100%; + word-wrap: break-word; } + +:is(#contacts, #donation) :is(a, span) { margin: .3rem; } + +#contacts span a { margin: 0; } + +.banners { + display: flex; + flex-wrap: wrap; + justify-content: center; } + +@media screen and (max-width: 640px) { + .columns, + .columns.figs { column-count: 1; } } \ No newline at end of file diff --git a/homepage/static/assets/css/articles.css b/homepage/static/assets/css/articles.css index ace57d4..cb0612c 100644 --- a/homepage/static/assets/css/articles.css +++ b/homepage/static/assets/css/articles.css @@ -29,11 +29,10 @@ pre { pre { border-left: 1px solid var(--primary-color); padding-left: .25rem; - margin-bottom: .5rem; - margin-left: 1.6rem; - overflow-x: auto; - overflow-y: auto; - white-space: pre; } + margin: .5rem 0; + overflow: scroll; + white-space: pre-wrap; + word-break: break-all; } article { margin-top: 1rem; diff --git a/homepage/static/assets/css/guestbook.css b/homepage/static/assets/css/guestbook.css index 717b293..6503a67 100644 --- a/homepage/static/assets/css/guestbook.css +++ b/homepage/static/assets/css/guestbook.css @@ -1,8 +1,6 @@ ::placeholder { color: var(--primary-color); } -button.refresh:disabled { - color: gray; - cursor: progress; } +small { font-size: .8rem; } form { display: grid; @@ -36,21 +34,29 @@ textarea { color: var(--text-color); font: inherit; } -span.checkboxes { grid-area: c; } +.checkboxes { grid-area: c; } -span.checkbox:not(:last-child) { margin-right: 2rem; } +label { padding-left: .5rem; } -span.captcha { +button.refresh:disabled { + color: gray; + cursor: progress; } + +.captcha { + align-items: center; + column-gap: .5rem; display: flex; - flex-basis: 100%; grid-area: a; - justify-content: space-evenly; align-items: center; column-gap: .5rem; } + justify-content: space-evenly; } -span.captcha img { +.captcha img { height: 40px; width: 160px; } -span.captcha input[type="text"] { width: 4.5rem; text-align: center; height: 27px; } +.captcha input[type="text"] { + height: 27px; + text-align: center; + width: 4.5rem; } input[type="submit"] { background-color: var(--primary-color); @@ -60,11 +66,15 @@ input[type="submit"] { grid-area: s; height: 2rem; } -input[type="submit"]:hover { background-color: var(--secondary-color); } +input[type="submit"]:hover { + background-color: var(--secondary-color); + cursor: pointer; } article:not(:last-child) { margin-bottom: 1rem; } -article header { display: inline; font-size: .85rem; } +article header { + display: inline; + font-size: .85rem; } article > *, article div.reply > * { margin-left: .5rem; } @@ -76,11 +86,5 @@ article p.quote { font-style: italic; } @media screen and (max-width: 641px) { form { gap: 1.5rem; - grid-template-areas: - "n" - "w" - "m" - "c" - "a" - "s"; - grid-template-columns: 1fr; } } \ No newline at end of file + display: flex; + flex-direction: column; } } \ No newline at end of file diff --git a/homepage/static/assets/css/index.css b/homepage/static/assets/css/index.css index c7aeadf..60250a7 100644 --- a/homepage/static/assets/css/index.css +++ b/homepage/static/assets/css/index.css @@ -1,7 +1,6 @@ body { height: 75vh; - margin-top: 25vh; - } + margin-top: 25vh; } header { position: relative; } diff --git a/homepage/static/assets/css/main.css b/homepage/static/assets/css/main.css index de83973..0d43c39 100644 --- a/homepage/static/assets/css/main.css +++ b/homepage/static/assets/css/main.css @@ -75,27 +75,6 @@ h3 { h3 { font-size: 1.05rem; } -h3:is(.service-up, .service-down)::after { - font-size: 1rem; - margin-right: -.9rem; - vertical-align: text-top; - padding-left: .2rem; } - -.service-up::after { content: '●'; } - -.service-down::after { content: '○'; } - -.highlighted { color: var(--primary-color); } - -small, -figure figcaption { font-size: .8rem; } - -figure.center, -figure figcaption { text-align: center; } - -figure img { width: 100%; } - -figure.center img { width: 60%; } table { border-collapse: collapse; @@ -107,24 +86,7 @@ tr :is(th, td) { tr :is(th, td):not(:last-child) { padding-right: .5rem; } -.columns { - column-count: 3; - column-fill: balance-all; - column-gap: 1rem; - column-span: none; } - -.columns.figs { column-count: 2; } - -.columns > div { - display: inline-block; - width: 100%; } - -.columns h3 { color: var(--primary-color); } - -.banners { - display: flex; - flex-wrap: wrap; - justify-content: center; } +.highlighted { color: var(--primary-color); } html { margin-left: calc(100vw - 100%); @@ -182,16 +144,6 @@ section { margin-top: 1rem; max-width: 100%; } -#contacts, -#donation { - text-align: center; - width: 100%; - word-wrap: break-word; } - -:is(#contacts, #donation) :is(a, span) { margin: .3rem; } - -#contacts span a { margin: 0; } - footer { font-size: .8rem; text-align: center; @@ -202,7 +154,4 @@ footer { #logo { width: 100%; } - body > header nav { text-align: center; } - - .columns, - .columns.figs { column-count: 1; } } \ No newline at end of file + body > header nav { text-align: center; } } \ No newline at end of file diff --git a/homepage/static/assets/css/mindflow.css b/homepage/static/assets/css/mindflow.css index a90b036..fc61cf3 100644 --- a/homepage/static/assets/css/mindflow.css +++ b/homepage/static/assets/css/mindflow.css @@ -1,9 +1,9 @@ +.hidden { display: none; } + button:not(:last-child) { padding-right: 1rem; } article header a { color: var(--text-color); } article footer { text-align: right; - padding: 0; } - -.hidden { display: none; } \ No newline at end of file + padding: 0; } \ No newline at end of file