Rename scripts => js & css => sass
This commit is contained in:
Ferit Yiğit BALABAN
84
resources/sass/partials/footer.scss
Normal file
84
resources/sass/partials/footer.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: variables.$clr_footerBackground;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.footer-columns {
|
||||
display: flex;
|
||||
|
||||
.footer-column {
|
||||
margin: 0 20px 20px 20px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 16px 0;
|
||||
font: 700 18px "Montserrat", sans-serif;
|
||||
color: variables.$clr_footerSleepHigh;
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: variables.$clr_footerSleepLow;
|
||||
|
||||
&:hover {
|
||||
font-size: 17px;
|
||||
color: variables.$clr_footerActive;
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: variables.$clr_brand;
|
||||
color: white;
|
||||
font: 14px "Montserrat", sans-serif;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.smaller {
|
||||
font-weight: 200;
|
||||
font-size: 12px;
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
198
resources/sass/partials/header.scss
Normal file
198
resources/sass/partials/header.scss
Normal file
@@ -0,0 +1,198 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
@use "sass:math";
|
||||
|
||||
$toggle-label_l_width_no_unit: 36;
|
||||
$toggle-label_s_width_no_unit: 28;
|
||||
|
||||
$toggle-label_l_width: $toggle-label_l_width_no_unit * 1px;
|
||||
$toggle-label_l_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_l_width_no_unit, 2))) * 1px;
|
||||
$toggle-label_l_second_bar: math.div($toggle-label_l_width - 4, 2);
|
||||
$toggle-label_s_width: $toggle-label_s_width_no_unit * 1px;
|
||||
$toggle-label_s_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_s_width_no_unit, 2))) * 1px;
|
||||
$toggle-label_s_second_bar: math.div($toggle-label_s_width - 4, 2);
|
||||
|
||||
|
||||
#header {
|
||||
// Height is set in main.scss
|
||||
background: variables.$clr_header;
|
||||
padding: 0 variables.$px_headerPadding;
|
||||
position: sticky;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
padding: 0 variables.$px_headerPadding2;
|
||||
}
|
||||
|
||||
@include mixins.header_overflow3 {
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.bounce-animation {
|
||||
span {
|
||||
font: 600 56px 'Oswald', sans-serif;
|
||||
display: inline-block;
|
||||
color: variables.$clr_brand;
|
||||
animation: bounce 2500ms infinite;
|
||||
animation-delay: calc(.1s * var(--i));
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,40%,100% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-5px)
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
|
||||
.nav-item {
|
||||
margin-right: 1vw;
|
||||
font: 18px "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
color: variables.$clr_nav_sleep;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: variables.$clr_nav_active;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@include mixins.header_overflow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-label {
|
||||
margin: 0;
|
||||
width: $toggle-label_l_width;
|
||||
height: $toggle-label_l_width;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
.bar {
|
||||
padding: 0;
|
||||
width: $toggle-label_l_width;
|
||||
height: 4px;
|
||||
background-color: variables.$clr_brand;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
transition: all 0.4s ease-in-out;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bar1 {
|
||||
transform-origin: 5%;
|
||||
}
|
||||
|
||||
.bar4 {
|
||||
transform-origin: 5%;
|
||||
}
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
width: $toggle-label_s_width;
|
||||
height: $toggle-label_s_width;
|
||||
|
||||
.bar {
|
||||
width: $toggle-label_s_width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar1 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bar2,
|
||||
.bar3 {
|
||||
top: $toggle-label_l_second_bar;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
top: $toggle-label_s_second_bar;
|
||||
}
|
||||
}
|
||||
|
||||
.bar3 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bar4 {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#toggle:checked + #toggle-label > .bar1{
|
||||
transform: rotate(45deg);
|
||||
height: 3px;
|
||||
width: $toggle-label_l_cross_width;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
width: $toggle-label_s_cross_width;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle:checked + #toggle-label > .bar3{
|
||||
transform: rotate(45deg);
|
||||
height: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#toggle:checked + #toggle-label > .bar2{
|
||||
transform: rotate(-45deg);
|
||||
height: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#toggle:checked + #toggle-label > .bar4{
|
||||
transform: rotate(-45deg);
|
||||
height: 3px;
|
||||
width: $toggle-label_l_cross_width;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
width: $toggle-label_s_cross_width;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-label {
|
||||
display: none;
|
||||
|
||||
@include mixins.header_overflow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user