Rename scripts => js & css => sass
This commit is contained in:
Ferit Yiğit BALABAN
@@ -1,54 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
@keyframes fullscreen-image-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideshow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
8% {
|
||||
opacity: 1;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
17% {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes important {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
text-shadow: black 0 0 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
text-shadow: variables.$clr_dark 0 0 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
text-shadow: black 0 0 0;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -1,263 +0,0 @@
|
||||
@use "variables.scss";
|
||||
@use "mixins.scss";
|
||||
@use "views/index.scss";
|
||||
@use "views/aydinlatma.scss";
|
||||
@use "views/iletisim.scss";
|
||||
@use "views/hakkimizda.scss";
|
||||
@use "views/kamera.scss";
|
||||
@use "views/galeri.scss";
|
||||
@use "partials/header.scss";
|
||||
@use "partials/footer.scss";
|
||||
@use "keyframes";
|
||||
@use "sass:math";
|
||||
|
||||
$px_scroll-to-top_size: 50px;
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: variables.$clr_sides;
|
||||
scroll-behavior: smooth;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: variables.$clr_nav_sleep;
|
||||
|
||||
&:hover {
|
||||
color: variables.$clr_nav_active;
|
||||
}
|
||||
|
||||
&:active {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.content-spacing {
|
||||
padding: math.div(variables.$px_horizontalPadding, 2) variables.$px_horizontalPadding;
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
padding: math.div(variables.$px_horizontalPadding2, 2) variables.$px_horizontalPadding2;
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
padding: math.div(variables.$px_horizontalPadding3, 2) variables.$px_horizontalPadding3;
|
||||
}
|
||||
}
|
||||
|
||||
.content-spacing-small {
|
||||
padding: math.div(variables.$px_horizontalPadding, 4) math.div(variables.$px_horizontalPadding, 2);
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
padding: math.div(variables.$px_horizontalPadding2, 4) math.div(variables.$px_horizontalPadding2, 2);
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
padding: math.div(variables.$px_horizontalPadding3, 4) math.div(variables.$px_horizontalPadding3, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.ignore-vertical {
|
||||
// ignores vertical padding applied by .content-spacing
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.no-decoration {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font: 500 x-large "Montserrat", sans-serif;
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
font: 600 50px "Montserrat", sans-serif;
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@include mixins.mx_mobile {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
// Layout, details and children is set in partials/header.scss
|
||||
height: 10vh;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
#drawer {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: variables.$cg_drawer;
|
||||
width: 0;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: width 500ms;
|
||||
|
||||
.drawer-item {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
margin-top: math.div(variables.$px_horizontalPadding, 4);
|
||||
background: variables.$cg_drawer_navitem;
|
||||
-webkit-background-clip: text;
|
||||
//noinspection CssInvalidPropertyValue
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font: 600 28px "Montserrat", sans-serif;
|
||||
text-decoration: none;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: math.div(variables.$px_horizontalPadding, 2);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scaleX(0);
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to left, #FFF, #AFF);
|
||||
transform-origin: bottom right;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
width: 100%;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
height: calc(100vh - 45px);
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
min-height: 90vh;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 0;
|
||||
overflow: auto;
|
||||
|
||||
@include mixins.header_overflow2 {
|
||||
min-height: calc(100vh - 45px);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
background: whitesmoke;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#scroll-to-top {
|
||||
width: $px_scroll-to-top_size;
|
||||
height: $px_scroll-to-top_size;
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
bottom: 55px;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: variables.$clr_brand;
|
||||
box-shadow: white 0 0 50px -5px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
@include mixins.mx_ismobile {
|
||||
&:hover {
|
||||
width: $px_scroll-to-top_size + 10;
|
||||
height: $px_scroll-to-top_size + 10;
|
||||
right: 20px;
|
||||
bottom: 50px;
|
||||
transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
|
||||
|
||||
img {
|
||||
transform: translateY(-5px);
|
||||
transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
@use "variables.scss";
|
||||
@use "overflow";
|
||||
|
||||
@mixin footer_overflow {
|
||||
@media screen and (max-width: variables.$footer_overflow) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin footer_overflow2 {
|
||||
@media screen and (max-width: variables.$footer_overflow2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header_overflow {
|
||||
@media screen and (max-width: variables.$header_overflow) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header_overflow2 {
|
||||
@media screen and (max-width: variables.$header_overflow2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header_overflow3 {
|
||||
@media screen and (max-width: variables.$header_overflow3) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_index_brands_fix {
|
||||
@media screen and (max-width: variables.$index_brands_fix) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_index_brands_fix2 {
|
||||
@media screen and (max-width: variables.$index_brands_fix2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_mobile {
|
||||
@media screen and (max-width: 400px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_aydinlatma_documents_fix {
|
||||
@media screen and (max-width: variables.$aydinlatma_documents_fix) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_aydinlatma_documents_fix2 {
|
||||
@media screen and (max-width: variables.$aydinlatma_documents_fix2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_kamera_sec-links-to-documents {
|
||||
@media screen and (max-width: overflow.$kamera_sec_links-to-documents) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_kamera_sec-links-to-documents2 {
|
||||
@media screen and (max-width: overflow.$kamera_sec_links-to-documents2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_iletisim_sec_information {
|
||||
@media screen and (max-width: overflow.$iletisim_sec_information) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_iletisim_sec_information2 {
|
||||
@media screen and (max-width: overflow.$iletisim_sec_information2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_iletisim_sec_information3 {
|
||||
@media screen and (max-width: overflow.$iletisim_sec_information3) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_ismobile {
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_hakkimizda_text-area {
|
||||
@media screen and (max-width: overflow.$hakkimizda_sec_text-area) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
$kamera_sec_links-to-documents: 1215px;
|
||||
$kamera_sec_links-to-documents2: 610px;
|
||||
|
||||
$iletisim_sec_information: 1235px;
|
||||
$iletisim_sec_information2: 1170px;
|
||||
$iletisim_sec_information3: 490px;
|
||||
|
||||
$hakkimizda_sec_text-area: 1700px;
|
||||
@@ -1,84 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
$index_showcase_bg_day: url("../img/index/g.jpg");
|
||||
$index_showcase_bg_night: url("../img/index/y.jpg");
|
||||
|
||||
$index_slide1: url("../img/galeri/9761.webp");
|
||||
$index_slide2: url("../img/galeri/7925.webp");
|
||||
$index_slide3: url("../img/galeri/0414.webp");
|
||||
$index_slide4: url("../img/galeri/7815.webp");
|
||||
$index_slide5: url("../img/galeri/0429.webp");
|
||||
@@ -1,44 +0,0 @@
|
||||
$header_overflow: 1200px;
|
||||
$header_overflow2: 850px;
|
||||
$header_overflow3: 360px;
|
||||
$index_brands_fix: 1100px;
|
||||
$index_brands_fix2: 850px;
|
||||
$footer_overflow: 1200px;
|
||||
$footer_overflow2: 850px;
|
||||
$aydinlatma_documents_fix: 1515px;
|
||||
$aydinlatma_documents_fix2: 420px;
|
||||
|
||||
$px_headerPadding: 150px;
|
||||
$px_headerPadding2: 50px;
|
||||
$px_horizontalPadding: 200px;
|
||||
$px_horizontalPadding2: 100px;
|
||||
$px_horizontalPadding3: 20px;
|
||||
|
||||
$sz_l_footer_h: 22px;
|
||||
$sz_m_footer_h: 18px;
|
||||
$sz_s_footer_h: 14px;
|
||||
$sz_l_footer_p: 16px;
|
||||
$sz_m_footer_p: 12px;
|
||||
$sz_s_footer_p: 8px;
|
||||
|
||||
$clr_dark: #01003B;
|
||||
$clr_brand: #1d60b5;
|
||||
$clr_brand_gradient: linear-gradient(to left, $clr_brand, #77afff);
|
||||
$cg_drawer: linear-gradient(to left bottom, $clr_brand, #003e86);
|
||||
$cg_drawer_navitem: linear-gradient(#FFFFFF, #adf0ff);
|
||||
$cg_drawer_navitem2: linear-gradient(to top, #FFFFFF, #adf0ff);
|
||||
$cg_brand_reverse: linear-gradient(to right, $clr_brand, #77afff);
|
||||
|
||||
$clr_logo: #FDFFFF;
|
||||
$clr_header: #FDFFFF;
|
||||
$clr_nav_sleep: #706fff;
|
||||
$clr_nav_active: #01003B;
|
||||
|
||||
$clr_footerBackground: #000000;
|
||||
$clr_footerSleepLow: #abb3b3;
|
||||
$clr_footerSleepHigh: #f5ffff;
|
||||
$clr_footerActive: #b3d1ff;
|
||||
|
||||
$clr_sides: #364040;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Oswald:wght@600&display=swap');
|
||||
@@ -1,84 +0,0 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 1vw;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
.documents {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: variables.$clr_brand_gradient;
|
||||
|
||||
.document {
|
||||
margin: 0 5vw 0 0;
|
||||
padding: 1vh 1vw;
|
||||
flex: 1;
|
||||
display: block;
|
||||
filter: light(50%);
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(100%, 100%, 100%, 75%);
|
||||
transition: 250ms cubic-bezier(0.4, 0, 1, 1);
|
||||
|
||||
img {
|
||||
filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(2506%) hue-rotate(220deg) brightness(96%) contrast(90%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1d409d;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0 2.5vh 0;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font: 600 18px Montserrat, sans-serif;
|
||||
}
|
||||
|
||||
@include mixins.mx_aydinlatma_documents_fix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 0 4.5vh 0;
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 2.5vw 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_aydinlatma_documents_fix2 {
|
||||
img {
|
||||
width: 50px;
|
||||
margin: 0 2vw 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_aydinlatma_documents_fix {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
@use "../mixins";
|
||||
@use "../keyframes";
|
||||
@use "../variables";
|
||||
|
||||
#fullscreen {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: black;
|
||||
|
||||
#fullscreen-img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-text {
|
||||
overflow: auto;
|
||||
background: variables.$clr_brand_gradient;
|
||||
|
||||
h1 {
|
||||
margin: 2.5vh 0;
|
||||
text-align: center;
|
||||
font: 600 2.5vw "Montserrat", sans-serif;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.photo-container {
|
||||
margin: 1vh 1vw;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
overflow: hidden;
|
||||
|
||||
.photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: 750ms all ease-in-out;
|
||||
filter: brightness(80%);
|
||||
|
||||
&:hover {
|
||||
filter: brightness(100%);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
@include mixins.mx_ismobile {
|
||||
&:active {
|
||||
filter: brightness(100%);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
|
||||
#video, #misyon, #vizyon, #hikaye, #yonetim {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 1em 0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: inside;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
#video {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: variables.$clr_brand_gradient;
|
||||
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
#hikaye {
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
figure {
|
||||
img {
|
||||
height: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_hakkimizda_text-area {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.text-area {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
@use "../variables";
|
||||
@use "../mixins";
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: calc(100vw - (100vw - 100%));
|
||||
height: auto;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#information {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font: 500 24px "Montserrat", sans-serif;
|
||||
|
||||
.contact, .location {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
h1 {
|
||||
font: 600 48px "Montserrat", sans-serif;
|
||||
|
||||
@include mixins.mx_iletisim_sec_information {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information2 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information3 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: 600 40px "Montserrat", sans-serif;
|
||||
margin: 0.5em 0 0 0;
|
||||
|
||||
@include mixins.mx_iletisim_sec_information {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: 600 32px "Montserrat", sans-serif;
|
||||
margin: 0.5em 0 0.25em 0;
|
||||
|
||||
@include mixins.mx_iletisim_sec_information {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
||||
@include mixins.mx_iletisim_sec_information3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin: 0 2vw 0 0;
|
||||
|
||||
@include mixins.mx_iletisim_sec_information2 {
|
||||
margin: 0 0 2vh 0;
|
||||
}
|
||||
}
|
||||
|
||||
.click-call, .click-pm{
|
||||
margin: 0 0 0 1em;
|
||||
img {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-separator {
|
||||
width: 100%;
|
||||
width: -moz-available;
|
||||
//noinspection CssInvalidPropertyValue
|
||||
width: -webkit-fill-available;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information2 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@include mixins.mx_iletisim_sec_information3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -1,289 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
@use "../variables";
|
||||
@use "../mixins";
|
||||
|
||||
.sec-links-to-documents {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: variables.$clr_brand_gradient;
|
||||
|
||||
h1 {
|
||||
font: 500 32px "Montserrat", sans-serif;
|
||||
|
||||
a {
|
||||
background: variables.$cg_drawer_navitem;
|
||||
-webkit-background-clip: text;
|
||||
//noinspection CssInvalidPropertyValue
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font: 700 33px "Montserrat", sans-serif;
|
||||
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: variables.$cg_drawer_navitem2;
|
||||
-webkit-background-clip: text;
|
||||
//noinspection CssInvalidPropertyValue
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin: 0 0 2.5vh 0;
|
||||
}
|
||||
|
||||
@include mixins.mx_kamera_sec-links-to-documents {
|
||||
font-size: 22px;
|
||||
|
||||
a {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_kamera_sec-links-to-documents2 {
|
||||
font-size: 12px;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user