www/assets/scss/main.scss

107 lines
2.1 KiB
SCSS

$palette1-color1: #212A3E;
$palette1-color2: #394867;
$palette1-color3: #9BA4B5;
$palette1-color4: #F1F6F9;
$palette2-color1: #1B262C;
$palette2-color2: #0F4C75;
$palette2-color3: #3282B8;
$palette2-color4: #BBE1FA;
$cur-color1: $palette1-color1;
$cur-color2: $palette1-color2;
$cur-color3: $palette1-color3;
$cur-color4: $palette1-color4;
body {
background-color: $cur-color1;
.block-out {
display: flex;
flex-direction: column;
@media only screen and (min-width: 768px) {
margin: 0rem 5rem;
}
align-self: center;
.block-in {
background-color: adjust-color($color: $cur-color1, $red: -10, $green: 12, $blue: 20, $alpha: 0.8);
color: $cur-color4;
border-radius: 10px;
border-style: groove;
padding: 1rem 0;
margin: 1rem 0;
.list-header {
text-align: center;
}
.basic-list {
list-style-type: none;
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
>.block-list-in {
padding: 0rem 0;
margin: 0.5rem 0;
text-align: center;
background-color: $cur-color2;
border-radius: 10px;
border-style: dotted;
width: fit-content;
min-width: 50%;
@media only screen and (max-width: 768px) {
min-width: 90%;
}
.in-p {
margin: 0px;
padding: 1rem;
font-size: x-large;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
>a {
color: $cur-color4;
&:hover {
color: $cur-color3;
}
&:visited {
color: adjust-color($color: $cur-color3, $red: 10, $green: -100, $blue: -100, $alpha: 1.0);
}
}
}
>.block-hover {
transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
&:hover {
transform: scale(1.2);
}
}
}
}
}
.HID {
display: none;
}
}