dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first responsive adjustments done

Browse Source
This commit is contained in:
dqnid committed 2024-03-24 07:08:50 +01:00
1 parent a45d6208d5
commit f747723770
20 files changed
+317 -72
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/starter/sass/abstracts/_mixins.scss
+43
View File
@@ -12,3 +12,46 @@
left: 50%;
transform: translate(-50%, -50%);
}
// MEDIA QUERY MANAGER
/*
* 0 - 600px : Phone
* 600 - 900px : Tablet portrait
* 900 - 1200px : Tablet landscape
* 1200 - 1800px : Normal desktop
* 1800px + : Big desktop
* $breakpoint argument choices
- phone
- tab-port
- tab-land
- big-desktop
1em = 16px
*/
@mixin respond($breakpoint) {
@if $breakpoint == phone {
@media (max-width: 37.5em) {
//600px
@content;
}
}
@if $breakpoint == tab-port {
@media (max-width: 56.25em) {
//900px
@content;
}
}
@if $breakpoint == tab-land {
@media (max-width: 75em) {
//1200px
@content;
}
}
@if $breakpoint == big-desktop {
@media (min-width: 112.5em) {
//1800px
@content;
}
}
}
Natours/starter/sass/abstracts/_variables.scss
+1
View File
@@ -22,6 +22,7 @@ $color-black: #000;
//Grid Spacing
$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-vertical-small: 6rem;
$gutter-horizontal: 6rem;
//Font sizing
Natours/starter/sass/base/_base.scss
+26 -7
View File
@@ -1,16 +1,35 @@
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: inherit;
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5%
@include respond(big-desktop) {
font-size: 75%;
}
@include respond(tab-land) {
font-size: 56.25%;
}
@include respond(tab-port) {
font-size: 50%; //1rem = 8px
}
// not needes as it would be the same as tab-port
// @include respond(phone) {
// font-size: 50%;
// }
}
body {
padding: 3rem;
box-sizing: border-box;
}
padding: 3rem;
box-sizing: border-box;
@include respond(tab-port) {
padding: 0;
}
}
Natours/starter/sass/base/_typography.scss
+71 -50
View File
@@ -1,70 +1,91 @@
body {
font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
font-weight: 400;
/* font-size: 16px; */
line-height: 1.7;
color: $color-gray-dark;
font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif;
font-weight: 400;
/* font-size: 16px; */
line-height: 1.7;
color: $color-gray-dark;
}
.heading--primary {
color: $color-white;
text-transform: uppercase;
margin-bottom: 6rem;
color: $color-white;
text-transform: uppercase;
margin-bottom: 6rem;
&-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: slideLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
&-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
&-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-name: slideLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
@include respond(phone) {
letter-spacing: 1rem;
font-size: 5rem;
}
}
&-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in;
@include respond(phone) {
letter-spacing: .5rem;
}
}
}
.heading--secondary {
font-size: 3.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 3.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
display: inline-block;
display: inline-block;
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
background-clip: floor($number: 0);
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(
to right,
$color-primary-light,
$color-primary-dark
);
transition: all .2s;
background-clip: floor($number: 0);
-webkit-background-clip: text;
color: transparent;
&:hover {
transform: skewY(2deg) skewX(15deg) scale(1.1);
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
}
transition: all 0.2s;
@include respond(tab-port) {
font-size: 3rem
}
@include respond(phone) {
font-size: 2.5rem;
}
&:hover {
transform: skewY(2deg) skewX(15deg) scale(1.1);
text-shadow: 0.5rem 1rem 2rem rgba($color-black, 0.2);
}
}
.heading--terciary {
font-size: $default-font-size;
font-weight: 700;
text-transform: capitalize;
font-size: $default-font-size;
font-weight: 700;
text-transform: capitalize;
}
.paragraph {
font-size: $default-font-size;
&:not(:last-child) {
margin-bottom: 3rem;
}
}
font-size: $default-font-size;
&:not(:last-child) {
margin-bottom: 3rem;
}
}
Natours/starter/sass/layout/_footer.scss
+18
View File
@@ -4,9 +4,17 @@
font-size: 1.4rem;
color: $color-grey-light-1;
@include respond(tab-port) {
padding: 8rem 0;
}
&__logo-box {
text-align: center;
margin-bottom: 8rem;
@include respond(tab-port) {
margin-bottom: 6rem;
}
}
&__logo {
@@ -18,6 +26,11 @@
border-top: 1px solid $color-gray-dark;
padding-top: 2rem;
display: inline-block;
@include respond(tab-port) {
width: 100%;
text-align: center;
}
}
&__list {
@@ -56,5 +69,10 @@
display: inline-block;
width: 80%;
float: right;
@include respond(tab-port) {
width: 100%;
float: none;
}
}
}
Natours/starter/sass/layout/_grid.scss
+19 -2
View File
@@ -4,6 +4,15 @@
&:not(:last-child) {
margin-bottom: $gutter-vertical;
@include respond(tab-port) {
margin-bottom: $gutter-vertical-small;
}
}
@include respond(tab-port) {
max-width: 50rem;
padding: 0 3rem;
}
@include clearfix;
@@ -13,7 +22,15 @@
float: left;
&:not(:last-child) {
margin-right: $gutter-horizontal;
margin-right: $gutter-horizontal;
@include respond(tab-port) {
margin-right: 0;
margin-bottom: $gutter-vertical-small;
}
}
@include respond(tab-port) {
width: 100% !important;
}
}
@@ -40,4 +57,4 @@
.col-3-of-4 {
width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
}
}
}
Natours/starter/sass/layout/_header.scss
+4
View File
@@ -5,6 +5,10 @@
background-position: top;
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
@include respond(phone) {
clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
}
position: relative;
&__logo-box {
Natours/starter/sass/layout/_navigation.scss
+19 -1
View File
@@ -14,6 +14,16 @@
z-index: 2000;
box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
@include respond(tab-port) {
top: 4rem;
right: 4rem;
}
@include respond(phone) {
top: 2.5rem;
right: 2.5rem;
}
text-align: center;
cursor: pointer;
@@ -33,7 +43,15 @@
z-index: 1000;
transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
// transform: scale(80);
@include respond(tab-port) {
top: 4.5rem;
right: 4.5rem;
}
@include respond(phone) {
top: 3rem;
right: 3rem;
}
}
&__nav {
Natours/starter/sass/pages/_home.scss
+15
View File
@@ -2,6 +2,10 @@
background-color: $color-grey-light-1;
padding: 25rem 0;
margin-top: -20vh;
@include respond(tab-port) {
padding: 20rem 0;
}
}
.section-features {
@@ -20,17 +24,28 @@
& > * {
transform: skewY(7deg);
}
@include respond(tab-port) {
padding: 15rem 0;
}
}
.section-tours {
background-color: $color-grey-light-1;
padding: 25rem 0 15rem 0;
margin-top: -10rem;
@include respond(tab-port) {
padding: 20rem 0 10rem 0;
}
}
.section-stories {
position: relative;
padding: 15rem 0;
@include respond(tab-port) {
padding: 10rem 0;
}
}
.section-book {