fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename folder resources => assets

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-08-11 19:40:31 +03:00
parent 45b8fd72be
commit ab8c5738af
120 changed files with 531 additions and 1125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
assets/sass/views/index.scss Normal file
View File

@@ -0,0 +1,289 @@
@use "../variables.scss";
@use "../mixins.scss";
@use "../urls.scss";
@use "../keyframes";
@use "sass:math";
$table-item_img_width_l: 150px;
$table-item_img_width: 100px;
$table-item_img_width_s: 60px;
$table-item_margin_between_items: 10px;
$social-button_img_width: 32px;
$social-button_inner_margin: 10px;
.slideshow {
margin: 0;
padding: 0;
height: 80vh;
z-index: 0;
list-style-type: none;
@include mixins.header_overflow2 {
height: calc(100vh - 45px);
}
li span {
position: absolute;
width: 100%;
height: 80vh;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 90%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: slideshow 30s linear infinite 0s;
@include mixins.header_overflow2 {
height: calc(100vh - 45px);
}
}
li:nth-child(1) span {
background-image: urls.$index_slide1;
background-position-y: 50%;
}
li:nth-child(2) span {
background-image: urls.$index_slide2;
animation-delay: 6s;
}
li:nth-child(3) span {
background-image: urls.$index_slide3;
animation-delay: 12s;
}
li:nth-child(4) span {
background-image: urls.$index_slide4;
animation-delay: 18s;
}
li:nth-child(5) span {
background-image: urls.$index_slide5;
animation-delay: 24s;
}
}
.araclar {
background: variables.$clr_brand_gradient;
text-align: center;
a {
display: inline-block;
color: white;
font: 600 32px "Montserrat", sans-serif;
animation: important 2s infinite ease-in-out;
&:hover {
animation-play-state: paused;
font-style: italic;
color: variables.$clr_dark;
}
@include mixins.header_overflow2 {
margin: 1.5vh 1vw;
}
}
}
.table {
display: flex;
flex-direction: column;
.table-item {
margin-top: $table-item_margin_between_items;
display: inline-flex;
flex-direction: row;
picture {
place-self: center;
}
img {
align-self: center;
margin-right: math.div(variables.$px_horizontalPadding, 10);
@include mixins.mx_index_brands_fix {
margin-right: math.div(variables.$px_horizontalPadding2, 10);
}
@include mixins.mx_index_brands_fix2 {
margin-right: math.div(variables.$px_horizontalPadding3, 10);
}
@include mixins.mx_mobile {
margin: 0 0 2px 0;
}
}
hr {
min-height: 100%;
max-height: 100vh;
width: 5px;
background: variables.$clr_brand;
margin-right: 9 * math.div(variables.$px_horizontalPadding, 10) - 5;
@include mixins.mx_index_brands_fix {
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10) - 5;
}
@include mixins.mx_index_brands_fix2 {
margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10) - 5;
}
@include mixins.mx_mobile {
width: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin: 0 0 18px 0;
}
}
&:first-of-type {
margin-top: 0;
}
@include mixins.mx_mobile {
flex-direction: column;
align-items: center;
}
}
.reverse {
// reverse is a property given to .table-item elements
// it contains styling for img and .vertical-separator elements contained under
// a .table-item element
flex-direction: row-reverse;
img {
margin-right: 0;
margin-left: math.div(variables.$px_horizontalPadding, 10);;
@include mixins.mx_index_brands_fix {
margin-left: math.div(variables.$px_horizontalPadding2, 10);
}
@include mixins.mx_index_brands_fix2 {
margin-left: math.div(variables.$px_horizontalPadding3, 10);
}
}
hr {
margin-right: 0;
margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
@include mixins.mx_index_brands_fix {
margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
}
@include mixins.mx_index_brands_fix2 {
margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
@include mixins.mx_mobile {
margin: 0 0 18px 0;
}
}
@include mixins.mx_mobile {
flex-direction: column;
img {
margin: 0 0 2px 0;
}
}
}
.table-item-animation {
animation: slide-in-right 3000ms;
}
.table-item-animation-reverse {
animation: slide-in-left 3000ms;
}
@keyframes slide-in-left {
from {
transform: translateX(-5%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes slide-in-right {
from {
transform: translateX(+5%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
}
.social {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: variables.$clr_brand_gradient;
color: white;
p {
font: 700 $social-button_img_width "Montserrat", sans-serif;
margin: 30px 0;
}
nav {
display: flex;
.social-button {
display: inline-block;
height: $social-button_img_width + (2 * $social-button_inner_margin);
width: auto;
border: 2px solid white;
border-radius: 50%;
margin: 0 10px 0 0;
img {
margin: 10px;
}
&:hover {
background-color: white;
img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
}
}
&:last-of-type {
margin: 0;
}
@include mixins.mx_mobile {
margin: 0 0 30px 0;
}
}
}
@include mixins.mx_mobile {
flex-direction: column;
p {
font-size: 20px;
font-weight: 600;
text-align: center;
}
nav {
.social-button {
margin-right: 10px;
}
}
}
}