95 lines
1.6 KiB
SCSS
95 lines
1.6 KiB
SCSS
$base-white: #ffffff;
|
|
$hover-white: #d0d0d0;
|
|
$dark-blue: #244e9c;
|
|
$base-blue: #305ba9;
|
|
$base-orange: #ff8007;
|
|
$base-gray: #c4c4c4;
|
|
$light-gray: #f2f2f2;
|
|
$base-black: #333333;
|
|
$section-fz: 3.2rem;
|
|
$section-fz-mobile: 2.4rem;
|
|
|
|
// Mixins
|
|
|
|
@mixin flex($dir: row) {
|
|
display: flex;
|
|
flex-direction: $dir;
|
|
}
|
|
|
|
@mixin stretch {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@mixin transition-std($duration: 0.3s) {
|
|
transition: $duration all ease;
|
|
}
|
|
|
|
@mixin imgStyle($mWidth: unset, $mHeight: unset, $objFit: cover) {
|
|
max-width: $mWidth;
|
|
max-height: $mHeight;
|
|
@include stretch;
|
|
|
|
img {
|
|
@include stretch;
|
|
object-fit: $objFit;
|
|
}
|
|
}
|
|
|
|
@mixin grid($row, $layout) {
|
|
display: grid;
|
|
|
|
@if ($row) {
|
|
grid-template-rows: $layout;
|
|
} @else {
|
|
grid-template-columns: $layout;
|
|
}
|
|
}
|
|
|
|
@mixin input {
|
|
border: 0.1rem solid $border-black;
|
|
font-size: 1.2rem;
|
|
padding: 1rem 0.8rem;
|
|
@include stretch;
|
|
|
|
&::placeholder {
|
|
color: $base-gray;
|
|
}
|
|
}
|
|
|
|
@mixin section-title {
|
|
@include flex(column);
|
|
gap: 1.6rem;
|
|
h4 {
|
|
text-transform: uppercase;
|
|
color: $base-blue;
|
|
font-size: $section-fz;
|
|
@media screen and (max-width: 600px) {
|
|
font-size: $section-fz-mobile;
|
|
}
|
|
}
|
|
span {
|
|
display: block;
|
|
max-width: 8rem;
|
|
width: 100%;
|
|
border-top: 0.2rem solid $base-orange;
|
|
}
|
|
}
|
|
|
|
@mixin btn {
|
|
@include flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 1.6rem 3.2rem;
|
|
background: $base-orange;
|
|
text-transform: uppercase;
|
|
font-size: 1.6rem;
|
|
color: $base-white;
|
|
}
|
|
|
|
// Media
|
|
@media screen and (max-width: 600px) {
|
|
$section-fz: 2.4rem;
|
|
}
|