This commit is contained in:
parent
71c5b98197
commit
8142c4b58c
|
@ -6,7 +6,8 @@
|
||||||
-webkit-tap-highlight-color: transparent; // fuck you (L)
|
-webkit-tap-highlight-color: transparent; // fuck you (L)
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,7 +52,8 @@ main {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
ul,
|
||||||
|
ol {
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -146,6 +148,7 @@ img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
||||||
mask-image: linear-gradient(to right, transparent, rgba(red, 0.3));
|
mask-image: linear-gradient(to right, transparent, rgba(red, 0.3));
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
mask-image: linear-gradient(to right, transparent, rgba(red, 0.1));
|
mask-image: linear-gradient(to right, transparent, rgba(red, 0.1));
|
||||||
}
|
}
|
||||||
|
@ -172,11 +175,11 @@ a {
|
||||||
|
|
||||||
.pageHero {
|
.pageHero {
|
||||||
background-image: linear-gradient(rgba(light.$headerOverlay, 0.9), rgba(light.$headerOverlay, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
|
background-image: linear-gradient(rgba(light.$headerOverlay, 0.9), rgba(light.$headerOverlay, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
|
||||||
url('/img/Panorama-Lens-Blur.png');
|
url('/img/Panorama-Lens-Blur.png');
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
background-image: linear-gradient(rgba(dark.$headerOverlay, 0.9), rgba(dark.$headerOverlay, 0.9)),
|
background-image: linear-gradient(rgba(dark.$headerOverlay, 0.9), rgba(dark.$headerOverlay, 0.9)),
|
||||||
url('/img/Panorama-Lens-Blur.png');
|
url('/img/Panorama-Lens-Blur.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
@ -184,7 +187,7 @@ a {
|
||||||
|
|
||||||
height: 220px;
|
height: 220px;
|
||||||
|
|
||||||
> .container {
|
>.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -197,7 +200,7 @@ a {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
>div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
@ -249,6 +252,7 @@ a {
|
||||||
@media (min-width: 601px) {
|
@media (min-width: 601px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -287,7 +291,7 @@ a {
|
||||||
background: dark.$navBG;
|
background: dark.$navBG;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .container {
|
>.container {
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -306,6 +310,7 @@ a {
|
||||||
|
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
background: rgba(light.$navBG, 0.86);
|
background: rgba(light.$navBG, 0.86);
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
background: rgba(dark.$navBG, 0.9);
|
background: rgba(dark.$navBG, 0.9);
|
||||||
}
|
}
|
||||||
|
@ -314,7 +319,8 @@ a {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 64px;
|
gap: 64px;
|
||||||
|
|
||||||
&, > * {
|
&,
|
||||||
|
>* {
|
||||||
transition: 0.16s
|
transition: 0.16s
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -323,13 +329,13 @@ a {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
//&, > * { transition: 0.12s }
|
//&, > * { transition: 0.12s }
|
||||||
> * {
|
>* {
|
||||||
transform: translateX(32px);
|
transform: translateX(32px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
>div {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -343,13 +349,14 @@ a {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
>a {
|
||||||
font-family: Outfit;
|
font-family: Outfit;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: light.$navLinkNormalColor;
|
color: light.$navLinkNormalColor;
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
color: dark.$navLinkNormalColor;
|
color: dark.$navLinkNormalColor;
|
||||||
}
|
}
|
||||||
|
@ -380,7 +387,8 @@ a {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &.active {
|
&:hover,
|
||||||
|
&.active {
|
||||||
//background: rgba(15, 23, 42, 0.1);
|
//background: rgba(15, 23, 42, 0.1);
|
||||||
color: light.$navLinkActiveColor;
|
color: light.$navLinkActiveColor;
|
||||||
outline-color: light.$navLinkOutlineColor;
|
outline-color: light.$navLinkOutlineColor;
|
||||||
|
@ -416,19 +424,24 @@ a {
|
||||||
//
|
//
|
||||||
}
|
}
|
||||||
|
|
||||||
.nationLayout {
|
@media (max-width: 600px) {
|
||||||
display: flex;
|
.nationLayout {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 601px) {
|
@media (min-width: 601px) {
|
||||||
.nationLayout {
|
.nationLayout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nationFlag {
|
.nationFlag {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nationCoreInfo {
|
.nationCoreInfo {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -440,12 +453,12 @@ a {
|
||||||
.pageFooter {
|
.pageFooter {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|
||||||
> .SNS-Links {
|
>.SNS-Links {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|
||||||
> a {
|
>a {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue