kimendisch/sbgg.jetzt
kimendisch/sbgg.jetzt
1
3
Fork 1
Code Issues 1 Pull Requests Projects Activity

🎨 reflow stylesheet

Browse Source
This commit is contained in:
DrMaxNix 2024-07-26 15:02:33 +02:00
parent f5f967a64b
commit e57c64f52f
1 changed files with 127 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
page/style.css
View File

@ -41,9 +41,8 @@
box-sizing: border-box; box-sizing: border-box;
} }
html,
body {
html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden; overflow-x: hidden;
@ -139,7 +138,9 @@ span.align-left {
border-radius: 50%; border-radius: 50%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.focus-remove-on-mobile { filter: blur(4px) } .focus-remove-on-mobile {
filter: blur(4px)
}
} }
@ -213,14 +214,26 @@ nav .width-governor > * {
text-align: center; text-align: center;
} }
nav .button-list { height: 100%; } nav .button-list {
height: 100%;
}
nav .branding { justify-content: flex-start !important; } nav .branding {
nav .branding img { height: 2rem; } justify-content: flex-start !important;
nav .branding span { font-weight: bold; } }
nav .branding img {
height: 2rem;
}
nav .branding span {
font-weight: bold;
}
nav .menu-container { justify-content: flex-end !important; } nav .menu-container {
nav .menu { gap: 2rem; } justify-content: flex-end !important;
}
nav .menu {
gap: 2rem;
}
nav .menu-mobile { nav .menu-mobile {
display: none; display: none;
@ -235,7 +248,9 @@ nav .menu-mobile {
overflow-y: auto; overflow-y: auto;
} }
nav .menu-mobile-button { display: none; } nav .menu-mobile-button {
display: none;
}
nav .menu-mobile-page-overlay { nav .menu-mobile-page-overlay {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -247,10 +262,18 @@ nav .menu-mobile-page-overlay {
background-color: #0004; background-color: #0004;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
nav .menu { display: none; } nav .menu {
nav .menu-mobile { display: flex; } display: none;
nav .menu-mobile-button { display: inline-flex; } }
nav .menu-mobile-page-overlay { display: block; } nav .menu-mobile {
display: flex;
}
nav .menu-mobile-button {
display: inline-flex;
}
nav .menu-mobile-page-overlay {
display: block;
}
} }
@ -320,7 +343,8 @@ nav .menu-mobile-page-overlay {
margin: 0 0; margin: 0 0;
} }
} }
.page > .title h1, .page > .title h2 { .page > .title h1,
.page > .title h2 {
align-self: center; align-self: center;
margin: 0; margin: 0;
} }
@ -366,7 +390,8 @@ nav .menu-mobile-page-overlay {
color: var(--color-gray); color: var(--color-gray);
} }
.section > .content, .legal-text { .section > .content,
.legal-text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
@ -393,7 +418,8 @@ nav .menu-mobile-page-overlay {
/* BOX */ /* BOX */
.box, .legal-text .section { .box,
.legal-text .section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -425,14 +451,17 @@ a.box:hover {
background-color: var(--color-gray-dark-dark); background-color: var(--color-gray-dark-dark);
} }
.box .title, .box .extra, .legal-text .title { .box .title,
.box .extra,
.legal-text .title {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: baseline; align-items: baseline;
gap: 0.5rem; gap: 0.5rem;
} }
.box .title, .legal-text .title { .box .title,
.legal-text .title {
position: relative; position: relative;
left: -0.5rem; left: -0.5rem;
padding-left: 0.5rem; padding-left: 0.5rem;
@ -454,14 +483,16 @@ a.box:hover {
flex-direction: column; flex-direction: column;
} }
.timeline > .item, .timeline > .wrapper > .item { .timeline > .item,
.timeline > .wrapper > .item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector { .timeline > .item > .connector,
.timeline > .wrapper > .item > .connector {
align-self: stretch; align-self: stretch;
position: relative; position: relative;
@ -470,7 +501,10 @@ a.box:hover {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.timeline > .item:not(:first-child) > .connector::before, .timeline > .wrapper:not(:first-child) > .item > .connector::before, .timeline > .item:not(:last-child) > .connector::after, .timeline > .wrapper:not(:last-child) > .item > .connector::after { .timeline > .item:not(:first-child) > .connector::before,
.timeline > .wrapper:not(:first-child) > .item > .connector::before,
.timeline > .item:not(:last-child) > .connector::after,
.timeline > .wrapper:not(:last-child) > .item > .connector::after {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(50% - 0.25rem); left: calc(50% - 0.25rem);
@ -481,24 +515,30 @@ a.box:hover {
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
z-index: 0; z-index: 0;
} }
.timeline > .item > .connector::before, .timeline > .wrapper > .item > .connector::before { .timeline > .item > .connector::before,
.timeline > .wrapper > .item > .connector::before {
top: 0; top: 0;
} }
.timeline > .item.done > .connector::before, .timeline > .wrapper > .item.done > .connector::before { .timeline > .item.done > .connector::before,
.timeline > .wrapper > .item.done > .connector::before {
background-color: var(--theme); background-color: var(--theme);
} }
.timeline > .item.next > .connector::before, .timeline > .wrapper > .item.next > .connector::before { .timeline > .item.next > .connector::before,
.timeline > .wrapper > .item.next > .connector::before {
background-color: var(--theme); background-color: var(--theme);
} }
.timeline > .item > .connector::after, .timeline > .wrapper > .item > .connector::after { .timeline > .item > .connector::after,
.timeline > .wrapper > .item > .connector::after {
top: 50%; top: 50%;
z-index: 1 !important; z-index: 1 !important;
} }
.timeline > .item.done > .connector::after, .timeline > .wrapper > .item.done > .connector::after { .timeline > .item.done > .connector::after,
.timeline > .wrapper > .item.done > .connector::after {
background-color: var(--theme); background-color: var(--theme);
} }
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint { .timeline > .item > .connector > .waypoint,
.timeline > .wrapper > .item > .connector > .waypoint {
padding: 1rem; padding: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
@ -506,15 +546,18 @@ a.box:hover {
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
z-index: 2; z-index: 2;
} }
.timeline > .item.done > .connector > .waypoint, .timeline > .wrapper > .item.done > .connector > .waypoint { .timeline > .item.done > .connector > .waypoint,
.timeline > .wrapper > .item.done > .connector > .waypoint {
color: var(--color-bg); color: var(--color-bg);
background-color: var(--theme); background-color: var(--theme);
} }
.timeline > .item.next > .connector > .waypoint, .timeline > .wrapper > .item.next > .connector > .waypoint { .timeline > .item.next > .connector > .waypoint,
.timeline > .wrapper > .item.next > .connector > .waypoint {
background-color: var(--color-gray-dark); background-color: var(--color-gray-dark);
} }
.timeline > .item > .box, .timeline > .wrapper > .item > .box { .timeline > .item > .box,
.timeline > .wrapper > .item > .box {
flex-grow: 1; flex-grow: 1;
align-items: flex-start; align-items: flex-start;
@ -523,24 +566,29 @@ a.box:hover {
text-align: left; text-align: left;
} }
.timeline > .item:first-child > .box, .timeline > .wrapper:first-child > .item > .box { .timeline > .item:first-child > .box,
.timeline > .wrapper:first-child > .item > .box {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box { .timeline > .item:last-child > .box,
.timeline > .wrapper:last-child > .item > .box {
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.timeline > .item, .timeline > .wrapper > .item { .timeline > .item,
.timeline > .wrapper > .item {
position: relative; position: relative;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector { .timeline > .item > .connector,
.timeline > .wrapper > .item > .connector {
align-self: center; align-self: center;
} }
.timeline > .item:not(:last-child)::after, .timeline > .wrapper:not(:last-child) > .item::after { .timeline > .item:not(:last-child)::after,
.timeline > .wrapper:not(:last-child) > .item::after {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(50% - 0.25rem); left: calc(50% - 0.25rem);
@ -551,35 +599,44 @@ a.box:hover {
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
z-index: 0; z-index: 0;
} }
.timeline > .item.done::after, .timeline > .wrapper > .item.done::after { .timeline > .item.done::after,
.timeline > .wrapper > .item.done::after {
background-color: var(--theme); background-color: var(--theme);
} }
.timeline > .item.done-stop::after, .timeline > .wrapper > .item.done-stop::after { .timeline > .item.done-stop::after,
.timeline > .wrapper > .item.done-stop::after {
background-color: var(--theme); background-color: var(--theme);
} }
.timeline > .item:not(:last-child) > .box, .timeline > .wrapper:not(:last-child) > .item > .box { .timeline > .item:not(:last-child) > .box,
.timeline > .wrapper:not(:last-child) > .item > .box {
margin: 0 0 4rem 0; margin: 0 0 4rem 0;
} }
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box { .timeline > .item:last-child > .box,
.timeline > .wrapper:last-child > .item > .box {
margin: 0; margin: 0;
} }
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint { .timeline > .item > .connector > .waypoint,
.timeline > .wrapper > .item > .connector > .waypoint {
border-radius: 50% 50% 0 0; border-radius: 50% 50% 0 0;
} }
.timeline > .item > .box, .timeline > .wrapper > .item > .box { .timeline > .item > .box,
.timeline > .wrapper > .item > .box {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.timeline > .item > .box, .timeline > .wrapper > .item > .box { .timeline > .item > .box,
.timeline > .wrapper > .item > .box {
outline: 0.125rem solid var(--color-bg-light); outline: 0.125rem solid var(--color-bg-light);
} }
.timeline > .item.done > .box, .timeline > .wrapper > .item.done > .box { .timeline > .item.done > .box,
.timeline > .wrapper > .item.done > .box {
outline: 0.125rem solid var(--theme); outline: 0.125rem solid var(--theme);
} }
.timeline > .item.next > .box, .timeline > .wrapper > .item.next > .box { .timeline > .item.next > .box,
.timeline > .wrapper > .item.next > .box {
outline: 0.125rem solid var(--color-gray-dark); outline: 0.125rem solid var(--color-gray-dark);
} }
} }
@ -599,7 +656,8 @@ a.box:hover {
justify-content: flex-start; justify-content: flex-start;
} }
.button, .button.disabled:hover { .button,
.button.disabled:hover {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
@ -633,7 +691,8 @@ a.box:hover {
cursor: not-allowed; cursor: not-allowed;
} }
.button.primary, .button.primary.disabled:hover { .button.primary,
.button.primary.disabled:hover {
color: var(--color-bg); color: var(--color-bg);
background-color: var(--theme); background-color: var(--theme);
} }
@ -641,14 +700,16 @@ a.box:hover {
background-color: var(--theme-dark); background-color: var(--theme-dark);
} }
.button.tertiary, .button.tertiary.disabled:hover { .button.tertiary,
.button.tertiary.disabled:hover {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 -1rem; /* NOTE: Fix to increase hitbox without messing up the button-list gap */ margin: 0 -1rem; /* NOTE: Fix to increase hitbox without messing up the button-list gap */
color: var(--color-white); color: var(--color-white);
background: none; background: none;
} }
.button.tertiary:hover, .button.tertiary.active { .button.tertiary:hover,
.button.tertiary.active {
color: var(--theme); color: var(--theme);
background: none; background: none;
} }
@ -667,7 +728,8 @@ a.box:hover {
/* SECTION: NEWS */ /* SECTION: NEWS */
#newsletter .box, #social-media .box { #newsletter .box,
#social-media .box {
align-items: flex-start; align-items: flex-start;
} }
#newsletter { #newsletter {
@ -818,12 +880,14 @@ a.box:hover {
*:hover > .copylink { *:hover > .copylink {
color: var(--color-gray); color: var(--color-gray);
} }
.copylink:hover, .copylink:focus-visible { .copylink:hover,
.copylink:focus-visible {
color: var(--color-white); color: var(--color-white);
cursor: pointer; cursor: pointer;
} }
.copylink.feedback-negative, .copylink.feedback-positive { .copylink.feedback-negative,
.copylink.feedback-positive {
opacity: 0; opacity: 0;
transition: opacity 1s 1.5s linear; transition: opacity 1s 1.5s linear;
} }
@ -885,10 +949,12 @@ a.box:hover {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.inputwrapper.valid input, .inputwrapper.invalid input { .inputwrapper.valid input,
.inputwrapper.invalid input {
padding-right: 2.5rem; padding-right: 2.5rem;
} }
.inputwrapper.valid::after, .inputwrapper.invalid::after { .inputwrapper.valid::after,
.inputwrapper.invalid::after {
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: 50%; top: 50%;
@ -1044,6 +1110,10 @@ input::placeholder {
animation-timing-function: linear; animation-timing-function: linear;
} }
@keyframes spinning { @keyframes spinning {
from { transform:rotate(0deg); } from {
to { transform:rotate(360deg); } transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
} }