|
|
@ -1,9 +1,9 @@ |
|
|
|
/* Test */ |
|
|
|
/* only load with child template */ |
|
|
|
|
|
|
|
|
|
|
|
.mobile_placeholder { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.open { |
|
|
@ -18,22 +18,23 @@ |
|
|
|
border-image: linear-gradient(#BDD4E7, #8693AB) 30; |
|
|
|
} |
|
|
|
|
|
|
|
.open .box { |
|
|
|
/* background-image: url('/assets/img/spider_out_bw.webp'); */ |
|
|
|
/* .open .box { |
|
|
|
background-image: url('/assets/img/spider_out_bw.webp'); |
|
|
|
background-size: cover; |
|
|
|
background-repeat: no-repeat; |
|
|
|
height: inherit; |
|
|
|
width: inherit; |
|
|
|
opacity: 20%; |
|
|
|
grid-row: 1/5; |
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
.content { |
|
|
|
height: inherit; |
|
|
|
width: inherit; |
|
|
|
display: grid; |
|
|
|
grid-template-rows: .5fr .25fr 1fr .45fr; |
|
|
|
grid-template-rows: .35fr .25fr 1fr .45fr; |
|
|
|
max-width: inherit; |
|
|
|
max-height: inherit; |
|
|
|
} |
|
|
|
|
|
|
|
.content h2 { |
|
|
@ -60,7 +61,7 @@ |
|
|
|
font-size: 1.5vh; |
|
|
|
text-align: center; |
|
|
|
line-height: 3.5vh; |
|
|
|
margin-top: 2vh; |
|
|
|
margin: 2vh 2vw; |
|
|
|
} |
|
|
|
|
|
|
|
.content a { |
|
|
@ -88,8 +89,16 @@ |
|
|
|
background-size: 200% 100%; |
|
|
|
background-position: left bottom; |
|
|
|
border: .5vw solid #8693AB; |
|
|
|
color: #BDD4E7; |
|
|
|
} |
|
|
|
|
|
|
|
.content a:active { |
|
|
|
background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%); |
|
|
|
background-size: 100% 120%; |
|
|
|
background-position: left bottom; |
|
|
|
border: .25vw solid #8693AB; |
|
|
|
color: #BDD4E7; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.close { |
|
|
@ -99,7 +108,7 @@ |
|
|
|
color: #e5e7e6; |
|
|
|
position: fixed; |
|
|
|
top: 15vh; |
|
|
|
left: 80vw; |
|
|
|
left: 70vw; |
|
|
|
} |
|
|
|
|
|
|
|
input { |
|
|
@ -110,37 +119,62 @@ input { |
|
|
|
cursor: pointer; |
|
|
|
position: fixed; |
|
|
|
top: 15vh; |
|
|
|
left: 80vw; |
|
|
|
left: 70vw; |
|
|
|
} |
|
|
|
|
|
|
|
input:checked ~ .open { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
input:checked ~ .close { |
|
|
|
display: none; |
|
|
|
@keyframes shine { |
|
|
|
0% { |
|
|
|
stroke: url('#myGradient'); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
50% { |
|
|
|
stroke: url('#myGradient2'); |
|
|
|
|
|
|
|
} |
|
|
|
100% { |
|
|
|
stroke: url('#myGradient'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
input:hover ~ .close { |
|
|
|
animation: shine 4s ease-in forwards; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
@keyframes shine { |
|
|
|
input:active ~ .close { |
|
|
|
animation: shine 4s ease-in forwards; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* test */ |
|
|
|
|
|
|
|
@keyframes shine2 { |
|
|
|
0% { |
|
|
|
stroke: url('#myGradient'); |
|
|
|
stroke: #8693AB; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
25% { |
|
|
|
stroke:#BDD4E7; |
|
|
|
} |
|
|
|
50% { |
|
|
|
stroke: url('#myGradient2'); |
|
|
|
stroke: #8693AB; |
|
|
|
|
|
|
|
} |
|
|
|
75% { |
|
|
|
stroke:#BDD4E7; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
stroke: url('#myGradient'); |
|
|
|
stroke: #8693AB |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (min-height: 750px) { |
|
|
|
.open { |
|
|
|
max-height: 60vh; |
|
|
@ -153,10 +187,66 @@ input:hover ~ .close { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-height: 880px) { |
|
|
|
@media (min-height: 800px) and (max-width: 768px) { |
|
|
|
.open { |
|
|
|
max-height: 45vh; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-size: 3.25vh !important; |
|
|
|
margin: 3vh 0 2vh 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
font-size: 1.5vh !important; |
|
|
|
line-height: 2.5vh !important; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 1.05vh !important; |
|
|
|
line-height: 2.5vh !important; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
font-size: 1.45vh !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-height: 840px) and (max-width: 1080px) { |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-size: 3.25vh !important; |
|
|
|
margin: 3vh 0 2vh 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
font-size: 1.5vh !important; |
|
|
|
line-height: 2.5vh !important; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 1.05vh !important; |
|
|
|
line-height: 2.5vh !important; |
|
|
|
} |
|
|
|
|
|
|
|
.content a { |
|
|
|
font-size: 1.45vh !important; |
|
|
|
margin: 0 !important; |
|
|
|
width: 15vw !important; |
|
|
|
height: 3.5vh !important; |
|
|
|
border: .25vw solid #000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (min-height: 1020px) and (max-width: 768px) { |
|
|
|
p { |
|
|
|
font-size: 1.25vh !important; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
margin-top: 0 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-height: 1000px) { |
|
|
@ -177,6 +267,39 @@ input:hover ~ .close { |
|
|
|
max-width: inherit; |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 768px) { |
|
|
|
input:hover ~ .close { |
|
|
|
animation: shine2 3s ease-in forwards; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 1000px) { |
|
|
|
|
|
|
|
.open { |
|
|
|
max-width: 35vw; |
|
|
|
top: 20vh; |
|
|
|
right: 10vw; |
|
|
|
} |
|
|
|
|
|
|
|
.close { |
|
|
|
top: 10vh; |
|
|
|
left: 75vw; |
|
|
|
} |
|
|
|
|
|
|
|
input { |
|
|
|
height: 10vh; |
|
|
|
top: 10vh; |
|
|
|
left: 80vw; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|