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

No comment :D

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-05 21:07:25 +03:00
parent e0113c1b61
commit eb8e81541d
9 changed files with 229 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/css/main.scss
View File

@@ -4,6 +4,7 @@
@use "views/aydinlatma.scss";
@use "partials/header.scss";
@use "partials/footer.scss";
@use "sass:math";
html, body {
margin: 0;
@@ -11,18 +12,24 @@ html, body {
background-color: variables.$clr_sides;
}
.content_spacing {
padding: 0 variables.$px_contentPadding;
.content-spacing {
padding: math.div(variables.$px_horizontalPadding, 2) variables.$px_horizontalPadding;
@include mixins.mx_content_fix {
padding: 0 variables.$px_contentPadding2;
@include mixins.mx_index_brands_fix {
padding: math.div(variables.$px_horizontalPadding2, 2) variables.$px_horizontalPadding2;
}
@include mixins.mx_content_fix2 {
padding: 0 variables.$px_contentPadding3;
@include mixins.mx_index_brands_fix2 {
padding: math.div(variables.$px_horizontalPadding3, 2) variables.$px_horizontalPadding3;
}
}
.ignore-vertical {
// ignores vertical padding applied by .content-spacing
padding-top: 0;
padding-bottom: 0;
}
#header {
// Layout, details and children is set in partials/header.scss
height: 10vh;

8
resources/css/mixins.scss
View File

@@ -24,14 +24,14 @@
}
}
@mixin mx_content_fix {
@media screen and (max-width: variables.$content_fix) {
@mixin mx_index_brands_fix {
@media screen and (max-width: variables.$index_brands_fix) {
@content;
}
}
@mixin mx_content_fix2 {
@media screen and (max-width: variables.$content_fix2) {
@mixin mx_index_brands_fix2 {
@media screen and (max-width: variables.$index_brands_fix2) {
@content;
}
}

4
resources/css/partials/footer.scss
View File

@@ -6,7 +6,7 @@
justify-content: space-between;
background-color: variables.$clr_footerBackground;
font: 16px "Montserrat", sans-serif;
padding: 50px variables.$px_contentPadding;
padding: 50px 200px;
#small-logo {
height: 50px;
@@ -17,7 +17,7 @@
display: flex;
.footer-column {
margin: variables.$px_contentPadding / 10;
margin: 0 20px 20px 20px;
h1 {
margin: 0 0 16px 0;

10
resources/css/variables.scss
View File

@@ -1,15 +1,15 @@
$header_overflow: 1200px;
$header_overflow2: 850px;
$content_fix: 850px;
$content_fix2: 600px;
$index_brands_fix: 1100px;
$index_brands_fix2: 850px;
$footer_overflow2: 880px;
$footer_overflow: 1110px;
$px_headerPadding: 150px;
$px_headerPadding2: 50px;
$px_contentPadding: 200px;
$px_contentPadding2: 100px;
$px_contentPadding3: 20px;
$px_horizontalPadding: 200px;
$px_horizontalPadding2: 100px;
$px_horizontalPadding3: 20px;
$sz_l_footer_h: 22px;
$sz_m_footer_h: 18px;

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

@@ -1,9 +1,12 @@
@use "../variables.scss";
@use "../mixins.scss";
@use "sass:math";
$table-item_img_width: 100px;
$table-item_margin_between_items: 10px;
$table-item_margin_img_to_paragraph: 100px;
$social-button_img_width: 24px;
$social-button_inner_margin: 10px;
.showcase {
display: flex;
@@ -35,18 +38,56 @@ $table-item_margin_img_to_paragraph: 100px;
align-items: center;
img {
margin-right: $table-item_margin_img_to_paragraph;
margin-right: math.div(variables.$px_horizontalPadding, 10);
height: auto;
width: $table-item_img_width;
@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_horizontalPadding2, 10);
}
}
&:first-of-type {
margin-top: 0;
}
}
.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);
@include mixins.mx_index_brands_fix {
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
}
@include mixins.mx_index_brands_fix2 {
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
}
}
.reverse {
// reverse is a property given to .table-item elements
// it contains styling for img, p and .vertical-separator elements contained under
// a .table-item element
flex-direction: row-reverse;
img {
margin-right: 0;
margin-left: $table-item_margin_img_to_paragraph;
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_horizontalPadding2, 10);
}
}
p {
@@ -55,14 +96,16 @@ $table-item_margin_img_to_paragraph: 100px;
.vertical-separator {
margin-right: 0;
margin-left: $table-item_margin_img_to_paragraph;
}
}
margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
.vertical-separator {
height: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin-right: $table-item_margin_img_to_paragraph;
@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_horizontalPadding2, 10);
}
}
}
.square {
@@ -72,44 +115,16 @@ $table-item_margin_img_to_paragraph: 100px;
}
.table-item-animation {
animation: slide-in-left 3000ms;
}
.table-item-animation-reverse {
animation: slide-in-right 3000ms;
}
@keyframes fade-in {
from {
margin-left: 10%;
width: 105%;
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
opacity: 1;
}
}
@keyframes fade-in-reverse {
from {
margin-right: 10%;
width: 105%;
opacity: 0;
}
to {
margin-right: 0;
width: 100%;
opacity: 1;
}
.table-item-animation-reverse {
animation: slide-in-left 3000ms;
}
@keyframes slide-in-left {
from {
transform: translateX(-100%);
transform: translateX(-5%);
opacity: 0;
}
@@ -121,15 +136,48 @@ $table-item_margin_img_to_paragraph: 100px;
@keyframes slide-in-right {
from {
margin-left: 100%;
width: 300%;
transform: translateX(+5%);
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
transform: translateX(0%);
opacity: 1;
}
}
}
.social {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: variables.$clr_brand;
color: white;
p {
font: 700 $social-button_img_width "Montserrat", sans-serif;
}
.social-button {
display: inline-block;
height: $social-button_img_width + (2 * $social-button_inner_margin);
width: auto;
border: 2px solid white;
border-radius: 50%;
img {
margin: 10px;
height: $social-button_img_width;
width: $social-button_img_width;
}
&:hover {
background-color: white;
img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
}
}
}
}

146
resources/styles/main.css
View File

@@ -29,65 +29,84 @@
align-items: center;
}
.table .table-item img {
margin-right: 100px;
margin-right: 20px;
height: auto;
width: 100px;
}
@media screen and (max-width: 1100px) {
.table .table-item img {
margin-right: 10px;
}
}
@media screen and (max-width: 850px) {
.table .table-item img {
margin-right: 10px;
}
}
.table .table-item:first-of-type {
margin-top: 0;
}
.table .vertical-separator {
height: 120px;
border: solid 1px #1d60b5;
margin-right: 180px;
}
@media screen and (max-width: 1100px) {
.table .vertical-separator {
margin-right: 90px;
}
}
@media screen and (max-width: 850px) {
.table .vertical-separator {
margin-right: 90px;
}
}
.table .reverse {
flex-direction: row-reverse;
}
.table .reverse img {
margin-right: 0;
margin-left: 100px;
margin-left: 20px;
}
@media screen and (max-width: 1100px) {
.table .reverse img {
margin-left: 10px;
}
}
@media screen and (max-width: 850px) {
.table .reverse img {
margin-left: 10px;
}
}
.table .reverse p {
text-align: right;
}
.table .reverse .vertical-separator {
margin-right: 0;
margin-left: 100px;
margin-left: 180px;
}
.table .vertical-separator {
height: 120px;
border: solid 1px #1d60b5;
margin-right: 100px;
@media screen and (max-width: 1100px) {
.table .reverse .vertical-separator {
margin-left: 90px;
}
}
@media screen and (max-width: 850px) {
.table .reverse .vertical-separator {
margin-left: 90px;
}
}
.table .square img {
height: 100px;
}
.table .table-item-animation {
animation: slide-in-left 3000ms;
}
.table .table-item-animation-reverse {
animation: slide-in-right 3000ms;
}
@keyframes fade-in {
from {
margin-left: 10%;
width: 105%;
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
opacity: 1;
}
}
@keyframes fade-in-reverse {
from {
margin-right: 10%;
width: 105%;
opacity: 0;
}
to {
margin-right: 0;
width: 100%;
opacity: 1;
}
.table .table-item-animation-reverse {
animation: slide-in-left 3000ms;
}
@keyframes slide-in-left {
from {
transform: translateX(-100%);
transform: translateX(-5%);
opacity: 0;
}
to {
@@ -97,17 +116,45 @@
}
@keyframes slide-in-right {
from {
margin-left: 100%;
width: 300%;
transform: translateX(5%);
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
transform: translateX(0%);
opacity: 1;
}
}
.social {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #1d60b5;
color: white;
}
.social p {
font: 700 24px "Montserrat", sans-serif;
}
.social .social-button {
display: inline-block;
height: 44px;
width: auto;
border: 2px solid white;
border-radius: 50%;
}
.social .social-button img {
margin: 10px;
height: 24px;
width: 24px;
}
.social .social-button:hover {
background-color: white;
}
.social .social-button:hover img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
}
#header {
background: #FDFFFF;
padding: 0 150px;
@@ -190,7 +237,7 @@
display: flex;
}
#footer .footer-columns .footer-column {
margin: 20px;
margin: 0 20px 20px 20px;
}
#footer .footer-columns .footer-column h1 {
margin: 0 0 16px 0;
@@ -236,18 +283,23 @@ html, body {
background-color: #364040;
}
.content_spacing {
padding: 0 200px;
.content-spacing {
padding: 100px 200px;
}
@media screen and (max-width: 1100px) {
.content-spacing {
padding: 50px 100px;
}
}
@media screen and (max-width: 850px) {
.content_spacing {
padding: 0 100px;
.content-spacing {
padding: 10px 20px;
}
}
@media screen and (max-width: 600px) {
.content_spacing {
padding: 0 20px;
}
.ignore-vertical {
padding-top: 0;
padding-bottom: 0;
}
#header {