From 848227c257ffe6453945fd0e81f102580b261bf4 Mon Sep 17 00:00:00 2001 From: DrMaxNix Date: Fri, 26 Jul 2024 15:10:32 +0200 Subject: [PATCH] :truck: modularize stylesheets --- page/copylink.css | 40 +++++ page/footer.css | 67 ++++++++ page/footer.php | 3 + page/nav.css | 127 +++++++++++++++ page/nav.php | 1 + page/page_base.php | 1 + page/start/index.php | 1 + page/start/style.css | 124 ++++++++++++++ page/style.css | 381 ------------------------------------------- 9 files changed, 364 insertions(+), 381 deletions(-) create mode 100644 page/copylink.css create mode 100644 page/footer.css create mode 100644 page/nav.css create mode 100644 page/start/style.css diff --git a/page/copylink.css b/page/copylink.css new file mode 100644 index 0000000..17dfdef --- /dev/null +++ b/page/copylink.css @@ -0,0 +1,40 @@ +.wrapper.copylink-id { + padding-top: 5.3rem; /* NOTE: This is tied to `nav .nav-container` */ + margin-top: -5.3rem; /* NOTE: This is tied to `nav .nav-container` */ +} + +.copylink { + position: absolute; + padding: 0.5rem; + + font-size: 1rem; + color: #0000; +} +.title .copylink { + left: -1.3rem; + padding-right: 0.2rem; +} +.header .copylink { + right: -1.3rem; + padding-left: 0.2rem; +} +*:hover > .copylink { + color: var(--color-gray); +} +.copylink:hover, +.copylink:focus-visible { + color: var(--color-white); + cursor: pointer; +} + +.copylink.feedback-negative, +.copylink.feedback-positive { + opacity: 0; + transition: opacity 1s 1.5s linear; +} +.copylink.feedback-negative { + color: var(--color-red); +} +.copylink.feedback-positive { + color: var(--color-green); +} diff --git a/page/footer.css b/page/footer.css new file mode 100644 index 0000000..e03e8ee --- /dev/null +++ b/page/footer.css @@ -0,0 +1,67 @@ +.footer { + width: 100%; + + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; + + padding: 1rem; + + background-color: var(--color-bg-light); + + /* NOTE: This fixes the partial edges when blur is active */ + -webkit-box-shadow: 0 2rem 0 2rem var(--color-bg-light); + -moz-box-shadow: 0 2rem 0 2rem var(--color-bg-light); + box-shadow: 0 2rem 0 2rem var(--color-bg-light); +} +.footer > div { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0.5rem; + + text-align: center; +} +@media only screen and (max-width: 1000px) { + .footer > div { + flex-basis: 100%; + justify-content: center !important; + } +} + +.footer > div a { + font-size: 1rem; + color: var(--theme); +} +.footer > div a:hover { + text-decoration: underline; +} + +.footer .delimiter { + color: var(--color-gray); +} +.footer .brand { + justify-content: flex-start; +} +.footer .legal { + justify-content: flex-end; +} + +.footer .brand img { + height: 2rem; +} +.footer .brand .version { + color: var(--color-gray); +} + +.footer .lang .selected { + font-weight: bold; + color: inherit; +} diff --git a/page/footer.php b/page/footer.php index 1b63538..f24b256 100644 --- a/page/footer.php +++ b/page/footer.php @@ -1,9 +1,12 @@ diff --git a/page/nav.css b/page/nav.css new file mode 100644 index 0000000..f85fa23 --- /dev/null +++ b/page/nav.css @@ -0,0 +1,127 @@ +nav { + position: fixed; + top: 0; + width: 100%; + + display: flex; + flex-direction: column; + justify-content: center; + flex-wrap: nowrap; + + z-index: 1024; + + box-shadow: #0004 0px 2px 4px; + background-color: var(--color-bg-light); +} +nav .nav-container { + height: 4.3rem; /* NOTE: This is tied to `.page-container` and `nav .menu-mobile` */ + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: nowrap; + + background-color: inherit; + z-index: 1025; +} + +nav .width-governor { + width: 50vw; /* NOTE: This is tied to `.page` */ + padding: 0 4rem; /* NOTE: This is tied to `.page` and many more */ + + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: space-between; + flex-wrap: nowrap; + gap: 1rem; +} +@media only screen and (max-width: 1600px) { + nav .width-governor { + width: 70vw; /* NOTE: This is tied to `.page` */ + } +} +@media only screen and (max-width: 1300px) { + nav .width-governor { + width: 80vw; /* NOTE: This is tied to `.page` */ + } +} +@media only screen and (max-width: 1000px) { + nav .width-governor { + width: 100vw; /* NOTE: This is tied to `.page` */ + padding: 0 1rem; /* NOTE: This is tied to `.page` */ + } +} + +nav .width-governor > * { + position: relative; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + text-align: center; +} +nav .button-list { + height: 100%; +} + +nav .branding { + justify-content: flex-start !important; +} +nav .branding img { + height: 2rem; +} +nav .branding span { + font-weight: bold; +} + +nav .menu-container { + justify-content: flex-end !important; +} +nav .menu { + gap: 2rem; +} + +nav .menu-mobile { + display: none; + flex-direction: column; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + + max-height: calc(100vh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */ + max-height: calc(100dvh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */ + padding: 2rem; + + overflow-y: auto; +} +nav .menu-mobile-button { + display: none; +} +nav .menu-mobile-page-overlay { + position: absolute; + top: 100%; + width: 100vw; + height: 100vh; + + display: none; + + background-color: #0004; +} +@media only screen and (max-width: 600px) { + nav .menu { + display: none; + } + nav .menu-mobile { + display: flex; + } + nav .menu-mobile-button { + display: inline-flex; + } + nav .menu-mobile-page-overlay { + display: block; + } +} diff --git a/page/nav.php b/page/nav.php index c98150c..b732b1e 100644 --- a/page/nav.php +++ b/page/nav.php @@ -5,6 +5,7 @@ use Flake\File; Page::js("./page/nav.js"); + Page::css("./page/nav.css"); ?> diff --git a/page/page_base.php b/page/page_base.php index 0d2aa29..756131f 100644 --- a/page/page_base.php +++ b/page/page_base.php @@ -29,6 +29,7 @@ Page::css("./page/style.css.php", eval: true); Page::js("./page/copylink_dict.js.php", eval: true); Page::js("./page/copylink.js"); + Page::css("./page/copylink.css"); Page::font("ubuntu"); Page::font("tabler"); diff --git a/page/start/index.php b/page/start/index.php index 401c069..34f8281 100644 --- a/page/start/index.php +++ b/page/start/index.php @@ -42,6 +42,7 @@ require("./page/page_base.php"); Page::js(__DIR__ . "/newsletter.js"); + Page::css(__DIR__ . "/style.css"); ?> diff --git a/page/start/style.css b/page/start/style.css new file mode 100644 index 0000000..a815425 --- /dev/null +++ b/page/start/style.css @@ -0,0 +1,124 @@ +/* SECTION: NEWS */ +#newsletter .box, +#social-media .box { + align-items: flex-start; +} +#newsletter { + flex-basis: 22rem; + flex-grow: 64; +} +#social-media { + flex-basis: 16rem; + flex-grow: 1; + flex-shrink: 1; +} + +.form-container { + position: relative; + width: 100%; +} + +.form { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + gap: 1rem; +} + +#newsletter-signup-form-mail-address { + min-width: 18rem; +} +@media only screen and (max-width: 1000px) { + #newsletter-signup-form-mail-address { + min-width: 14rem; + } +} + +.form-feedback { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; +} + +.form-feedback .centertext { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + gap: 0.5rem; +} +.form-feedback-wait { + color: var(--color-blue); +} +.form-feedback-success { + color: var(--color-green); +} +.form-feedback-failure { + color: var(--color-red); +} + + + + + +/* SECTION: RECOMMENDATIONS */ +.card-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + gap: 1rem; +} + +.card-list .card { + flex-basis: calc(50% - 0.5rem); + flex-grow: 1; + + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 1rem; + + max-width: 32rem; + padding: 1rem; + + border-radius: 2rem; + background-color: var(--color-bg-light); +} + +.card-list .card img { + align-self: center; + + width: 4rem; +} + +.card-list .card .text { + align-self: flex-start; + + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + gap: 0.5rem; + + text-align: left; +} +.card-list .card .text .title { + color: var(--color-white); + font-weight: bold; +} +.card-list .card:hover .text .title { + text-decoration: underline; +} +.card-list .card .text .description { + color: var(--color-gray); +} diff --git a/page/style.css b/page/style.css index 2ca2d2b..67d7c7f 100644 --- a/page/style.css +++ b/page/style.css @@ -147,139 +147,6 @@ span.align-left { -/* NAV */ -nav { - position: fixed; - top: 0; - width: 100%; - - display: flex; - flex-direction: column; - justify-content: center; - flex-wrap: nowrap; - - z-index: 1024; - - box-shadow: #0004 0px 2px 4px; - background-color: var(--color-bg-light); -} -nav .nav-container { - height: 4.3rem; /* NOTE: This is tied to `.page-container` and `nav .menu-mobile` */ - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - flex-wrap: nowrap; - - background-color: inherit; - z-index: 1025; -} - -nav .width-governor { - width: 50vw; /* NOTE: This is tied to `.page` */ - padding: 0 4rem; /* NOTE: This is tied to `.page` and many more */ - - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: space-between; - flex-wrap: nowrap; - gap: 1rem; -} -@media only screen and (max-width: 1600px) { - nav .width-governor { - width: 70vw; /* NOTE: This is tied to `.page` */ - } -} -@media only screen and (max-width: 1300px) { - nav .width-governor { - width: 80vw; /* NOTE: This is tied to `.page` */ - } -} -@media only screen and (max-width: 1000px) { - nav .width-governor { - width: 100vw; /* NOTE: This is tied to `.page` */ - padding: 0 1rem; /* NOTE: This is tied to `.page` */ - } -} - -nav .width-governor > * { - position: relative; - - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - text-align: center; -} -nav .button-list { - height: 100%; -} - -nav .branding { - justify-content: flex-start !important; -} -nav .branding img { - height: 2rem; -} -nav .branding span { - font-weight: bold; -} - -nav .menu-container { - justify-content: flex-end !important; -} -nav .menu { - gap: 2rem; -} - -nav .menu-mobile { - display: none; - flex-direction: column; - justify-content: flex-start; - align-items: center; - flex-wrap: wrap; - - max-height: calc(100vh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */ - max-height: calc(100dvh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */ - padding: 2rem; - - overflow-y: auto; -} -nav .menu-mobile-button { - display: none; -} -nav .menu-mobile-page-overlay { - position: absolute; - top: 100%; - width: 100vw; - height: 100vh; - - display: none; - - background-color: #0004; -} -@media only screen and (max-width: 600px) { - nav .menu { - display: none; - } - nav .menu-mobile { - display: flex; - } - nav .menu-mobile-button { - display: inline-flex; - } - nav .menu-mobile-page-overlay { - display: block; - } -} - - - - - /* PAGE LAYOUT */ .page-container { flex-grow: 1; @@ -727,181 +594,6 @@ a.box:hover { -/* SECTION: NEWS */ -#newsletter .box, -#social-media .box { - align-items: flex-start; -} -#newsletter { - flex-basis: 22rem; - flex-grow: 64; -} -#social-media { - flex-basis: 16rem; - flex-grow: 1; - flex-shrink: 1; -} - -.form-container { - position: relative; - width: 100%; -} - -.form { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - gap: 1rem; -} - -#newsletter-signup-form-mail-address { - min-width: 18rem; -} -@media only screen and (max-width: 1000px) { - #newsletter-signup-form-mail-address { - min-width: 14rem; - } -} - -.form-feedback { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; -} - -.form-feedback .centertext { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - align-items: center; - gap: 0.5rem; -} -.form-feedback-wait { - color: var(--color-blue); -} -.form-feedback-success { - color: var(--color-green); -} -.form-feedback-failure { - color: var(--color-red); -} - - - - - -/* SECTION: RECOMMENDATIONS */ -.card-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: stretch; - gap: 1rem; -} - -.card-list .card { - flex-basis: calc(50% - 0.5rem); - flex-grow: 1; - - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 1rem; - - max-width: 32rem; - padding: 1rem; - - border-radius: 2rem; - background-color: var(--color-bg-light); -} - -.card-list .card img { - align-self: center; - - width: 4rem; -} - -.card-list .card .text { - align-self: flex-start; - - display: flex; - flex-direction: column; - flex-wrap: nowrap; - align-items: stretch; - gap: 0.5rem; - - text-align: left; -} -.card-list .card .text .title { - color: var(--color-white); - font-weight: bold; -} -.card-list .card:hover .text .title { - text-decoration: underline; -} -.card-list .card .text .description { - color: var(--color-gray); -} - - - - - -/* COPYLINKS */ -.wrapper.copylink-id { - padding-top: 5.3rem; /* NOTE: This is tied to `nav .nav-container` */ - margin-top: -5.3rem; /* NOTE: This is tied to `nav .nav-container` */ -} - -.copylink { - position: absolute; - padding: 0.5rem; - - font-size: 1rem; - color: #0000; -} -.title .copylink { - left: -1.3rem; - padding-right: 0.2rem; -} -.header .copylink { - right: -1.3rem; - padding-left: 0.2rem; -} -*:hover > .copylink { - color: var(--color-gray); -} -.copylink:hover, -.copylink:focus-visible { - color: var(--color-white); - cursor: pointer; -} - -.copylink.feedback-negative, -.copylink.feedback-positive { - opacity: 0; - transition: opacity 1s 1.5s linear; -} -.copylink.feedback-negative { - color: var(--color-red); -} -.copylink.feedback-positive { - color: var(--color-green); -} - - - - - /* FORM ELEMENTS */ .key-value-pair { display: flex; @@ -1029,79 +721,6 @@ input::placeholder { -/* FOOTER */ -.footer { - width: 100%; - - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - gap: 1rem; - - padding: 1rem; - - background-color: var(--color-bg-light); - - /* NOTE: This fixes the partial edges when blur is active */ - -webkit-box-shadow: 0 2rem 0 2rem var(--color-bg-light); - -moz-box-shadow: 0 2rem 0 2rem var(--color-bg-light); - box-shadow: 0 2rem 0 2rem var(--color-bg-light); -} -.footer > div { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0px; - - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0.5rem; - - text-align: center; -} -@media only screen and (max-width: 1000px) { - .footer > div { - flex-basis: 100%; - justify-content: center !important; - } -} - -.footer > div a { - font-size: 1rem; - color: var(--theme); -} -.footer > div a:hover { - text-decoration: underline; -} - -.footer .delimiter { - color: var(--color-gray); -} -.footer .brand { - justify-content: flex-start; -} -.footer .legal { - justify-content: flex-end; -} - -.footer .brand img { - height: 2rem; -} -.footer .brand .version { - color: var(--color-gray); -} - -.footer .lang .selected { - font-weight: bold; - color: inherit; -} - - - - - /* ANIMATION KIT */ .form-feedback .spinning { animation-name: spinning;