server actix for cannabinieri website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

335 lines
4.8 KiB

.mobile_placeholder {
display: flex;
justify-content: center;
box-sizing: border-box;
}
/* To Do: opaque background solid text ! */
.open {
position: fixed;
height: 70vh;
width: 90vw;
background-color: fuchsia;
opacity: 70%;
top: 25vh;
display: grid;
grid-template-rows: repeat(4, 1fr);
border-style: solid;
border-image: linear-gradient(#BDD4E7, #8693AB) 30;
z-index: 300;
}
/* .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: .35fr .25fr 1fr .45fr;
max-width: inherit;
max-height: inherit;
}
.content h2 {
grid-row: 1;
display: grid;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-size: 6.5vh;
margin: 6vh 0 4vh 0;
}
.content h3 {
grid-row: 2;
display: grid;
text-transform: uppercase;
font-size: 3vh;
margin: 0;
line-height: 5vh;
text-align: center;
}
.content p {
font-size: 1.5vh;
text-align: center;
line-height: 3.5vh;
margin: 2vh 2vw;
}
.content a {
grid-row: 4;
display: grid;
justify-items: center;
align-items: center;
height: 4vh;
width: 10vw;
width: 30vw;
border: .5vw solid #000;
justify-self: center;
align-self: center;
margin-top: 2vh;
color: #000;
font-size: 1.95vh;
cursor: pointer;
z-index: 2;
background-position: right bottom;
transition: all .75s ease-out;
}
.content a:hover {
background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
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 {
height: 10vh;
width: auto;
align-self: flex-start;
color: #e5e7e6;
position: fixed;
top: 15vh;
left: 70vw;
}
input {
height: 20vw;
width: 20vh;
z-index: 200;
opacity: 0%;
cursor: pointer;
position: fixed;
top: 15vh;
left: 70vw;
}
@keyframes shine {
0% {
stroke: url('#myGradient');
}
50% {
stroke: url('#myGradient2');
}
100% {
stroke: url('#myGradient');
}
}
input:hover ~ .close {
animation: shine 4s ease-in forwards;
}
input:active ~ .close {
animation: shine 4s ease-in forwards;
}
/* test */
@keyframes shine2 {
0% {
stroke: #8693AB;
}
25% {
stroke:#BDD4E7;
}
50% {
stroke: #8693AB;
}
75% {
stroke:#BDD4E7;
}
100% {
stroke: #8693AB
}
}
@media (min-height: 750px) {
.open {
max-height: 60vh;
}
}
@media (min-height: 800px) {
.open {
max-height: 55vh;
}
}
@media (min-height: 750px) 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) {
.open {
max-height: 40vh;
}
}
@media (min-height: 1070px) {
.open {
max-height: 35vh;
}
}
#small {
font-size: 4.9vh;
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: 5vw;
max-height: 50vh;
}
.close {
top: 10vh;
left: 75vw;
}
input {
height: 10vh;
top: 10vh;
/* left: 80vw; */
}
.content h2 {
font-size: 3.25vh;
margin: 3vh 0 2vh 0;
}
.content h3 {
font-size: 1.75vh;
line-height: 3vh;
}
.content p {
font-size: 1.35vh;
line-height: 2.5vh;
}
.content a {
width: 15vw;
border: .25vw solid #000;
}
.content a:hover {
border: .1vw solid #8693AB;
}
.content a:active {
border: .1vw solid #8693AB;
}
}