Many many updates & I'm too lazy to comment
This commit is contained in:
Ferit Yiğit BALABAN
@@ -13,6 +13,14 @@ html, body {
|
||||
|
||||
.content_spacing {
|
||||
padding: 0 variables.$px_contentPadding;
|
||||
|
||||
@include mixins.mx_content_fix {
|
||||
padding: 0 variables.$px_contentPadding2;
|
||||
}
|
||||
|
||||
@include mixins.mx_content_fix2 {
|
||||
padding: 0 variables.$px_contentPadding3;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
@@ -35,12 +43,17 @@ html, body {
|
||||
|
||||
#content {
|
||||
background: whitesmoke;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
@@ -6,6 +6,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin footer_overflow2 {
|
||||
@media screen and (max-width: variables.$footer_overflow2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header_overflow {
|
||||
@media screen and (max-width: variables.$header_overflow) {
|
||||
@content;
|
||||
@@ -18,8 +24,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin footer_overflow2 {
|
||||
@media screen and (max-width: variables.$footer_overflow2) {
|
||||
@mixin mx_content_fix {
|
||||
@media screen and (max-width: variables.$content_fix) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_content_fix2 {
|
||||
@media screen and (max-width: variables.$content_fix2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -2,95 +2,66 @@
|
||||
@use "../mixins.scss";
|
||||
|
||||
#footer {
|
||||
background: variables.$clr_footer;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: variables.$px_headerPadding;
|
||||
justify-content: space-between;
|
||||
background-color: variables.$clr_footerBackground;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
padding: 50px variables.$px_contentPadding;
|
||||
|
||||
.footer-column {
|
||||
color: variables.$clr_footer_sleep;
|
||||
#small-logo {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 20px 0 0;
|
||||
|
||||
h2 {
|
||||
font: variables.$sz_l_footer_h "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
.footer-column {
|
||||
margin: variables.$px_contentPadding / 10;
|
||||
|
||||
@include mixins.footer_overflow {
|
||||
font-size: variables.$sz_m_footer_h;
|
||||
h1 {
|
||||
margin: 0 0 16px 0;
|
||||
font: 700 18px "Montserrat", sans-serif;
|
||||
color: variables.$clr_footerSleepHigh;
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow2 {
|
||||
font-size: variables.$sz_s_footer_h;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: variables.$clr_footerSleepLow;
|
||||
|
||||
hr {
|
||||
margin: 0 0 10px 0;
|
||||
border: 1px dotted white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
margin: 0 0 5px 0;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: variables.$clr_footer_active;
|
||||
&:hover {
|
||||
font-size: 17px;
|
||||
color: variables.$clr_footerActive;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow {
|
||||
font-size: variables.$sz_m_footer_p;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow2 {
|
||||
font-size: variables.$sz_s_footer_p;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: variables.$clr_footer_active;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
|
||||
@include mixins.footer_overflow {
|
||||
font-size: variables.$sz_m_footer_p;
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow2 {
|
||||
font-size: variables.$sz_s_footer_p;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
$mobileS: 360px;
|
||||
$header_overflow: 1200px;
|
||||
$header_overflow2: 850px;
|
||||
$content_fix: 850px;
|
||||
$content_fix2: 600px;
|
||||
$footer_overflow2: 880px;
|
||||
$footer_overflow: 1110px;
|
||||
$main: 1700px;
|
||||
$fourK: 2560px;
|
||||
|
||||
$px_headerPadding: 150px;
|
||||
$px_headerPadding2: 50px;
|
||||
$px_contentPadding: 200px;
|
||||
$px_contentPadding2: 100px;
|
||||
$px_contentPadding3: 20px;
|
||||
|
||||
$sz_l_footer_h: 22px;
|
||||
$sz_m_footer_h: 18px;
|
||||
@@ -20,14 +20,17 @@ $sz_s_footer_p: 8px;
|
||||
|
||||
$clr_dark: #01003B;
|
||||
|
||||
$clr_brand: #1d60b5;
|
||||
|
||||
$clr_logo: #FDFFFF;
|
||||
$clr_header: #FDFFFF;
|
||||
$clr_nav_sleep: #706fff;
|
||||
$clr_nav_active: #01003B;
|
||||
|
||||
$clr_footer: #000000;
|
||||
$clr_footer_sleep: #DFE8E8;
|
||||
$clr_footer_active: #F5FFFF;
|
||||
$clr_footerBackground: #000000;
|
||||
$clr_footerSleepLow: #abb3b3;
|
||||
$clr_footerSleepHigh: #f5ffff;
|
||||
$clr_footerActive: #b3d1ff;
|
||||
|
||||
$clr_sides: #364040;
|
||||
|
||||
|
||||
@@ -97,93 +97,58 @@
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: #000000;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 150px;
|
||||
justify-content: space-between;
|
||||
background-color: #000000;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
padding: 50px 200px;
|
||||
}
|
||||
#footer .footer-column {
|
||||
color: #DFE8E8;
|
||||
#footer #small-logo {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
#footer .footer-columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
#footer .footer-column h2 {
|
||||
font: 22px "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
#footer .footer-columns .footer-column {
|
||||
margin: 20px;
|
||||
}
|
||||
@media screen and (max-width: 1110px) {
|
||||
#footer .footer-column h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#footer .footer-columns .footer-column h1 {
|
||||
margin: 0 0 16px 0;
|
||||
font: 700 18px "Montserrat", sans-serif;
|
||||
color: #f5ffff;
|
||||
}
|
||||
@media screen and (max-width: 880px) {
|
||||
#footer .footer-column h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
#footer .footer-column hr {
|
||||
margin: 0 0 10px 0;
|
||||
border: 1px dotted white;
|
||||
}
|
||||
#footer .footer-column a {
|
||||
color: inherit;
|
||||
#footer .footer-columns .footer-column a {
|
||||
text-decoration: none;
|
||||
margin: 0 0 5px 0;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
color: #abb3b3;
|
||||
}
|
||||
#footer .footer-column a:hover {
|
||||
color: #F5FFFF;
|
||||
#footer .footer-columns .footer-column a:hover {
|
||||
font-size: 17px;
|
||||
color: #b3d1ff;
|
||||
}
|
||||
@media screen and (max-width: 1110px) {
|
||||
#footer .footer-column a {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 880px) {
|
||||
#footer .footer-column a {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
#footer .footer-column .footer-social {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#footer .footer-column .footer-social img {
|
||||
border-radius: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
#footer .footer-column .footer-social:hover {
|
||||
background: #F5FFFF;
|
||||
color: black;
|
||||
}
|
||||
#footer .footer-column p {
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
#footer .footer-columns .footer-column ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
@media screen and (max-width: 1110px) {
|
||||
#footer .footer-column p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #1d60b5;
|
||||
color: white;
|
||||
font: 14px "Montserrat", sans-serif;
|
||||
}
|
||||
@media screen and (max-width: 880px) {
|
||||
#footer .footer-column p {
|
||||
font-size: 8px;
|
||||
}
|
||||
#footer-stateless a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
#footer .footer-column:last-of-type {
|
||||
margin: 0;
|
||||
#footer-stateless a:hover {
|
||||
font-style: italic;
|
||||
}
|
||||
#footer-stateless .smaller {
|
||||
font-weight: 200;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@@ -195,6 +160,16 @@ html, body {
|
||||
.content_spacing {
|
||||
padding: 0 200px;
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.content_spacing {
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.content_spacing {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 10vh;
|
||||
@@ -216,8 +191,8 @@ html, body {
|
||||
|
||||
#content {
|
||||
background: whitesmoke;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -226,4 +201,9 @@ html, body {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
||||
Reference in New Issue
Block a user