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