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

Merge pull request #6 from fybx/dev

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-26 01:54:32 +03:00
committed by GitHub
parent 2e4a75470f c717a90825
commit 1b9a2550b2
12 changed files with 219 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/css/mixins.scss
View File

@@ -71,4 +71,22 @@
@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;
}
}

6
resources/css/overflow.scss
View File

@@ -1,2 +1,6 @@
$kamera_sec_links-to-documents: 1215px;
$kamera_sec_links-to-documents2: 610px;
$kamera_sec_links-to-documents2: 610px;
$iletisim_sec_information: 1235px;
$iletisim_sec_information2: 1170px;
$iletisim_sec_information3: 490px;

50
resources/css/partials/header.scss
View File

@@ -2,15 +2,15 @@
@use "../mixins.scss";
@use "sass:math";
$dropdown-toggle_l_width_no_unit: 36;
$dropdown-toggle_s_width_no_unit: 28;
$toggle-label_l_width_no_unit: 36;
$toggle-label_s_width_no_unit: 28;
$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
$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 {
@@ -92,16 +92,16 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
display: none;
}
.dropdown-toggle {
#toggle-label {
margin: 0;
width: $dropdown-toggle_l_width;
height: $dropdown-toggle_l_width;
width: $toggle-label_l_width;
height: $toggle-label_l_width;
position: relative;
cursor: pointer;
.bar {
padding: 0;
width: $dropdown-toggle_l_width;
width: $toggle-label_l_width;
height: 4px;
background-color: variables.$clr_brand;
display: block;
@@ -119,11 +119,11 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
}
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_width;
height: $dropdown-toggle_s_width;
width: $toggle-label_s_width;
height: $toggle-label_s_width;
.bar {
width: $dropdown-toggle_s_width;
width: $toggle-label_s_width;
}
}
}
@@ -134,10 +134,10 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
.bar2,
.bar3 {
top: $dropdown-toggle_l_second_bar;
top: $toggle-label_l_second_bar;
@include mixins.header_overflow2 {
top: $dropdown-toggle_s_second_bar;
top: $toggle-label_s_second_bar;
}
}
@@ -149,35 +149,35 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
bottom: 0;
}
.toggle:checked + label > .dropdown-toggle > .bar1{
#toggle:checked + #toggle-label > .bar1{
transform: rotate(45deg);
height: 3px;
width: $dropdown-toggle_l_cross_width;
width: $toggle-label_l_cross_width;
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_cross_width;
width: $toggle-label_s_cross_width;
}
}
.toggle:checked + label > .dropdown-toggle > .bar3{
#toggle:checked + #toggle-label > .bar3{
transform: rotate(45deg);
height: 3px;
background-color: transparent;
}
.toggle:checked + label > .dropdown-toggle > .bar2{
#toggle:checked + #toggle-label > .bar2{
transform: rotate(-45deg);
height: 3px;
background-color: transparent;
}
.toggle:checked + label > .dropdown-toggle > .bar4{
#toggle:checked + #toggle-label > .bar4{
transform: rotate(-45deg);
height: 3px;
width: $dropdown-toggle_l_cross_width;
width: $toggle-label_l_cross_width;
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_cross_width;
width: $toggle-label_s_cross_width;
}
}

38
resources/css/views/hakkimizda.scss
View File

@@ -1,32 +1,34 @@
@use "../variables.scss";
@use "../mixins.scss";
#video, #misyon, #vizyon, #hikaye, #yonetim {
text-align: center;
h1 {
margin: 0 0 1em 0;
font: 600 2.5vw "Montserrat", sans-serif;
color: black;
}
p {
font: 500 1.25vw "Montserrat", sans-serif;
}
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;
}
h1 {
margin: 0 0 1em 0;
font: 600 2.5vw "Montserrat", sans-serif;
color: white;
}
}
#hikaye {
}
#misyon, #vizyon {
}
#yonetim {
}

67
resources/css/views/iletisim.scss
View File

@@ -1,18 +1,10 @@
@use "../variables.scss";
@use "../variables";
@use "../mixins";
h1 {
margin: 0;
}
a {
text-decoration: none;
color: variables.$clr_nav_sleep;
&:hover {
color: variables.$clr_nav_active;
}
}
#map {
width: calc(100vw - (100vw - 100%));
height: auto;
@@ -28,28 +20,70 @@ a {
font: 500 24px "Montserrat", sans-serif;
.contact, .location {
width: 100%;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
width: 50%;
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 50px 0 0;
margin: 0 2vw 0 0;
@include mixins.mx_iletisim_sec_information2 {
margin: 0 0 2vh 0;
}
}
.click-call, .click-pm{
@@ -67,6 +101,15 @@ a {
//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;
}
}

105
resources/css/views/index.scss
View File

@@ -38,6 +38,11 @@ $social-button_inner_margin: 10px;
}
}
.araclar {
text-align: center;
font: 600 32px "Montserrat", sans-serif;
}
.table {
display: flex;
flex-direction: column;
@@ -46,7 +51,6 @@ $social-button_inner_margin: 10px;
margin-top: $table-item_margin_between_items;
display: inline-flex;
flex-direction: row;
align-items: center;
p {
font: x-large sans-serif;
@@ -56,11 +60,16 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
font-size: xx-small;
font-size: 18px;
}
@include mixins.mx_mobile {
font-size: 16px;
}
}
img {
align-self: center;
margin-right: math.div(variables.$px_horizontalPadding, 10);
width: $table-item_img_width_l;
@@ -80,34 +89,25 @@ $social-button_inner_margin: 10px;
}
}
.vertical-separator {
// vertical-separator makes an empty div behave as a separator which aligned vertically
height: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin-right: 9 * math.div(variables.$px_horizontalPadding, 10);
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);
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);
margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10) - 5;
}
@include mixins.mx_mobile {
display: none;
}
}
.horizontal-separator {
// horizontal-separator makes an empty div behave as a separator which aligned horizontally
display: none;
width: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin: 0 0 18px 0;
@include mixins.mx_mobile {
display: block;
width: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin: 0 0 18px 0;
}
}
@@ -117,6 +117,7 @@ $social-button_inner_margin: 10px;
@include mixins.mx_mobile {
flex-direction: column;
align-items: center;
}
}
@@ -139,7 +140,7 @@ $social-button_inner_margin: 10px;
}
}
.vertical-separator {
hr {
margin-right: 0;
margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
@@ -150,6 +151,10 @@ $social-button_inner_margin: 10px;
@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 {
@@ -227,34 +232,38 @@ $social-button_inner_margin: 10px;
margin: 30px 0;
}
.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;
nav {
display: flex;
img {
margin: 10px;
height: $social-button_img_width;
width: $social-button_img_width;
}
&:hover {
background-color: white;
.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 {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
margin: 10px;
height: $social-button_img_width;
width: $social-button_img_width;
}
}
&:last-of-type {
margin: 0;
}
&:hover {
background-color: white;
@include mixins.mx_mobile {
margin: 0 0 30px 0;
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;
}
}
}
@@ -266,5 +275,11 @@ $social-button_inner_margin: 10px;
font-weight: 600;
text-align: center;
}
nav {
.social-button {
margin-right: 10px;
}
}
}
}