Slight minify CSS files

This commit is contained in:
Helen Chong 2024-07-02 18:08:45 +08:00
parent 043a0d0d8d
commit 474e73e258
8 changed files with 67 additions and 211 deletions

View File

@ -33,10 +33,6 @@
.hero__top-bar, .hero__top-bar,
.footer, .footer,
.footer a { .footer a { color: var(--clr-navbar-link); }
color: var(--clr-navbar-link);
}
.footer a:focus { .footer a:focus { outline-color: var(--clr-navbar-link); }
outline-color: var(--clr-navbar-link);
}

View File

@ -6,9 +6,7 @@
* File Description: Styles for the guestbook control * File Description: Styles for the guestbook control
* CSS variables come from https://groundedwren.neocities.org/styles/gwBoilerPlatePersonalization.css * CSS variables come from https://groundedwren.neocities.org/styles/gwBoilerPlatePersonalization.css
*/ */
:root { :root { --icon-color: var(--clr-body-txt); }
--icon-color: var(--clr-body-txt);
}
.comment-form { .comment-form {
display: grid; display: grid;
@ -18,9 +16,7 @@
} }
.comment-form, .comment-form,
.input-horizontal-wrapper { .input-horizontal-wrapper { gap: 1em; }
gap: 1em;
}
.comment-form-title { .comment-form-title {
text-align: center; text-align: center;
@ -45,13 +41,9 @@
} }
.input-vertical input:focus, .input-vertical input:focus,
.comment-box-container textarea:focus { .comment-box-container textarea:focus { outline: 0.15em solid var(--clr-link); }
outline: 0.15em solid var(--clr-link);
}
.comment-box-container textarea { .comment-box-container textarea { resize: vertical; }
resize: vertical;
}
.inline-banner { .inline-banner {
padding: 0.5em; padding: 0.5em;
@ -63,13 +55,9 @@
background-color: var(--clr-quote-bg); background-color: var(--clr-quote-bg);
} }
.inline-banner.warning { .inline-banner.warning { background-color: #9e0f00; }
background-color: #9e0f00;
}
.inline-banner.warning a { .inline-banner.warning a { color: unset; }
color: unset;
}
.form-footer, .form-footer,
.comment-footer { .comment-footer {
@ -77,9 +65,7 @@
gap: 0.5em; gap: 0.5em;
} }
.form-footer { .form-footer { justify-content: flex-end; }
justify-content: flex-end;
}
.form-footer input, .form-footer input,
.comment-footer button, .comment-footer button,
@ -93,23 +79,12 @@
} }
.comment-footer button, .comment-footer button,
.show-comment { .show-comment { font-size: initial; }
font-size: initial;
}
gw-comment-card:not(.collapsed) .show-comment { gw-comment-card:not(.collapsed) .show-comment { display: none; }
display: none; gw-comment-card.collapsed .comment-article > *:not(.comment-header) { display: none !important; }
} gw-comment-card.collapsed .show-comment { display: block; }
gw-comment-card.collapsed .comment-article > *:not(.comment-header) { gw-comment-card.collapsed .comment-header-right time { display: none; }
display: none !important;
}
gw-comment-card.collapsed .show-comment {
display: block;
}
gw-comment-card.collapsed .comment-header-right time {
display: none;
}
.comments-container { .comments-container {
display: flex; display: flex;
@ -131,9 +106,7 @@ gw-comment-card.collapsed .comment-header-right time {
margin: 0.5em 0; margin: 0.5em 0;
} }
.comment-article > button { .comment-article > button { max-width: fit-content; }
max-width: fit-content;
}
.comment-header { .comment-header {
display: grid; display: grid;

View File

@ -74,9 +74,7 @@
.link-btn, .link-btn,
.link-btn:hover, .link-btn:hover,
.link-btn:visited { .link-btn:visited { text-decoration: none; }
text-decoration: none;
}
.link-btn:hover { .link-btn:hover {
background: var(--clr-link-btn-hover); background: var(--clr-link-btn-hover);
@ -89,30 +87,14 @@
} }
/* Content Accordion */ /* Content Accordion */
* + .content-accordion { * + .content-accordion { margin-top: var(--sz-paragraph-margin); }
margin-top: var(--sz-paragraph-margin); .content-accordion { padding: 0.5em 0; }
} .content-accordion__summary { font-weight: 700; }
.content-accordion__content { padding: 0.5em 1em; }
.content-accordion { .content-accordion__content p + p { margin-top: 1em; }
padding: 0.5em 0;
}
.content-accordion__summary {
font-weight: 700;
}
.content-accordion__content {
padding: 0.5em 1em;
}
.content-accordion__content p + p {
margin-top: 1em;
}
/* Content warning accordion */ /* Content warning accordion */
* + .contnet-warning { * + .contnet-warning { margin-top: var(--sz-paragraph-margin); }
margin-top: var(--sz-paragraph-margin);
}
.contnet-warning { .contnet-warning {
border: 0.1em solid var(--clr-title-border); border: 0.1em solid var(--clr-title-border);
@ -132,13 +114,9 @@
} }
.contnet-warning__warning:hover, .contnet-warning__warning:hover,
.contnet-warning__warning:focus { .contnet-warning__warning:focus { --stripe-color: var(--clr-cw-hover); }
--stripe-color: var(--clr-cw-hover);
}
.contnet-warning__content { .contnet-warning__content { padding: 1em; }
padding: 1em;
}
/* Adoptables wrapper */ /* Adoptables wrapper */
.adoptables { .adoptables {

View File

@ -1,18 +1,12 @@
/* MAIN CONTENT */ /* MAIN CONTENT */
content-wrapper, content-wrapper,
.content--divided { .content--divided { display: grid; }
display: grid;
}
content-wrapper, content-wrapper,
.content--divided { .content--divided { gap: 1rem; }
gap: 1rem;
}
.content:not(.content--divided), .content:not(.content--divided),
.content__section { .content__section { padding: 1.5rem var(--sz-main-padding); }
padding: 1.5rem var(--sz-main-padding);
}
.main__header { .main__header {
padding: 2.5rem var(--sz-main-padding); padding: 2.5rem var(--sz-main-padding);
@ -21,9 +15,7 @@ content-wrapper,
} }
.content:not(.content--divided), .content:not(.content--divided),
.content__section { .content__section { background-color: var(--clr-content-bg); }
background-color: var(--clr-content-bg);
}
.article__info { .article__info {
text-align: center; text-align: center;
@ -32,14 +24,10 @@ content-wrapper,
} }
.content > * + .h2, .content > * + .h2,
.content__section > * + .h2 { .content__section > * + .h2 { margin-top: 2em; }
margin-top: 2em;
}
.content > * + :not([class]), .content > * + :not([class]),
.content__section > * + :not([class]) { .content__section > * + :not([class]) { margin-top: var(--sz-paragraph-margin); }
margin-top: var(--sz-paragraph-margin);
}
.content ul:not([class]), .content ol:not([class]) { .content ul:not([class]), .content ol:not([class]) {
display: grid; display: grid;
@ -47,9 +35,7 @@ content-wrapper,
} }
.content ul ul, .content ol ol, .content ul ul, .content ol ol,
.content ul ol, .content ol ul { .content ul ol, .content ol ul { margin-top: 0.7em; }
margin-top: 0.7em;
}
.sidebar--sticky { .sidebar--sticky {
position: sticky; position: sticky;
@ -64,15 +50,7 @@ content-wrapper,
grid-template-columns: minmax(0, 18vw) minmax(min(60ch, 40vw), 2.5fr) minmax(0, 18vw); grid-template-columns: minmax(0, 18vw) minmax(min(60ch, 40vw), 2.5fr) minmax(0, 18vw);
} }
.content { .content { grid-area: content; }
grid-area: content; .left-sidebar { grid-area: leftbar; }
} .right-sidebar { grid-area: rightbar; }
.left-sidebar {
grid-area: leftbar;
}
.right-sidebar {
grid-area: rightbar;
}
} }

View File

@ -28,55 +28,30 @@ h1 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 { color: var(--clr-sub-heading); }
color: var(--clr-sub-heading); h1, h2, h3 { line-height: 1.2; }
} h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h1, h2, h3 {
line-height: 1.2;
}
h2, .h2 {
font-size: var(--fs-h2);
}
h3, .h3 {
font-size: var(--fs-h3);
}
h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]), h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { margin-bottom: 0.5em; }
margin-bottom: 0.5em;
}
h4, .h4 { h4, .h4 { font-size: var(--fs-h4); }
font-size: var(--fs-h4);
}
strong { strong { color: var(--clr-bold-txt); }
color: var(--clr-bold-txt);
}
:focus { :focus { outline: 0.15em solid var(--clr-body-txt); }
outline: 0.15em solid var(--clr-body-txt);
}
a { a {
font-weight: 700; font-weight: 700;
color: var(--clr-link); color: var(--clr-link);
} }
a:hover { a:hover { color: var(--clr-link-hover); }
color: var(--clr-link-hover);
}
a:not([class]):focus { a:not([class]):focus { outline: 0.15rem solid var(--clr-link); }
outline: 0.15rem solid var(--clr-link);
}
a:focus img { a:focus img { outline: 0.2em solid var(--clr-body-txt); }
outline: 0.2em solid var(--clr-body-txt);
}
:not(.c-blockquote) > blockquote, :not(.c-blockquote) > blockquote,
.c-blockquote { .c-blockquote {
@ -89,18 +64,12 @@ a:focus img {
blockquote > * + :not([class]), blockquote > * + :not([class]),
* + blockquote, * + blockquote,
* + .c-blockquote, * + .c-blockquote,
.c-blockquote__attribution { .c-blockquote__attribution { margin-top: var(--sz-paragraph-margin); }
margin-top: var(--sz-paragraph-margin);
}
button:hover { button:hover { cursor: pointer; }
cursor: pointer;
}
button:focus, button:focus,
details:focus { details:focus { outline-offset: 0.2em; }
outline-offset: 0.2em;
}
figure { figure {
margin-bottom: var(--sz-paragraph-margin); margin-bottom: var(--sz-paragraph-margin);
@ -115,18 +84,12 @@ figcaption {
margin-top: 0.2em; margin-top: 0.2em;
} }
code { code { font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
:not(pre) > code { :not(pre) > code { padding: 0.125em 0.25em; }
padding: 0.125em 0.25em;
}
:not(pre) > code, :not(pre) > code,
pre { pre { background-color: var(--clr-code-bg); }
background-color: var(--clr-code-bg);
}
pre { pre {
border: 0.1em solid var(--clr-code-border); border: 0.1em solid var(--clr-code-border);
@ -135,13 +98,9 @@ pre {
padding: 1rem; padding: 1rem;
} }
pre > code { pre > code { white-space: pre; }
white-space: pre;
}
summary { summary { cursor: pointer; }
cursor: pointer;
}
dl { dl {
display: grid; display: grid;
@ -149,10 +108,5 @@ dl {
grid-template-columns: auto auto; grid-template-columns: auto auto;
} }
dt { dt { font-weight: 700; }
font-weight: 700; dd {grid-column-start: 2; }
}
dd {
grid-column-start: 2;
}

View File

@ -107,17 +107,14 @@ body {
text-align: center; text-align: center;
} }
body, body, main {
main {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
main { main { max-width: 90%; }
max-width: 90%;
}
h1 { h1 {
font-size: var(--fs-h1); font-size: var(--fs-h1);
@ -128,9 +125,7 @@ h1 {
line-height: 1; line-height: 1;
} }
p { p { font-size: var(--fs-p); }
font-size: var(--fs-p);
}
.index__btn-wrapper { .index__btn-wrapper {
display: flex; display: flex;

View File

@ -5,9 +5,7 @@
align-items: baseline; align-items: baseline;
} }
* + .heading-wrapper { * + .heading-wrapper { margin-top: 1.8em; }
margin-top: 1.8em;
}
.heading-anchor { .heading-anchor {
order: -1; order: -1;
@ -19,14 +17,10 @@
outline-offset: 0.05em; outline-offset: 0.05em;
} }
.heading-anchor [hidden] { .heading-anchor [hidden] { display: block; }
display: block;
}
/* BLOCKQUOTES With CITATIONS */ /* BLOCKQUOTES With CITATIONS */
.c-blockquote__attribution { .c-blockquote__attribution { text-align: left; }
text-align: left;
}
.c-blockquote__attribution::before { .c-blockquote__attribution::before {
content: "—"; content: "—";
@ -34,13 +28,8 @@
} }
/* FOOTNOTES */ /* FOOTNOTES */
.footnote-ref { .footnote-ref { margin-left: 0.2em; }
margin-left: 0.2em; .footnote-ref a:target { scroll-margin-block: calc(var(--sz-navbar-ht) + 5ex); }
}
.footnote-ref a:target {
scroll-margin-block: calc(var(--sz-navbar-ht) + 5ex);
}
.footnotes { .footnotes {
margin-top: 3em; margin-top: 3em;

View File

@ -1,17 +1,12 @@
/* UTILITY CLASSES */ /* UTILITY CLASSES */
.bold-text { .bold-text { font-weight: 700; }
font-weight: 700; .center-text { text-align: center; }
}
.center-el { .center-el {
display: grid; display: grid;
place-content: center; place-content: center;
} }
.center-text {
text-align: center;
}
.indent-text { .indent-text {
padding: 1em 0 1em 2em; padding: 1em 0 1em 2em;
display: grid; display: grid;
@ -23,9 +18,7 @@
color: var(--clr-dates); color: var(--clr-dates);
} }
.hidden { .hidden { display: none; }
display: none;
}
.visually-hidden { .visually-hidden {
position: absolute; position: absolute;