summaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/abstracts/_mixins.scss19
-rw-r--r--sass/base/_base.scss5
-rw-r--r--sass/components/_contact-form.scss12
-rw-r--r--sass/components/_project-container.scss2
-rw-r--r--sass/components/_screenshot-container.scss12
-rw-r--r--sass/components/_text-container.scss17
-rw-r--r--sass/layout/_footer.scss40
-rw-r--r--sass/layout/_main-sections.scss39
-rw-r--r--sass/layout/_nav.scss39
9 files changed, 100 insertions, 85 deletions
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 5a05ec3..3495b1b 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -42,3 +42,22 @@
margin: 8rem auto;
width: 80%;
}
+
+// media queries
+@mixin responsive($breakpoint) {
+ @if $breakpoint == phone {
+ @media screen and (max-width: 600px) {
+ @content;
+ }
+ }
+ @if $breakpoint == tablet {
+ @media screen and (max-width: 980px) {
+ @content;
+ }
+ }
+ @if $breakpoint == laptop {
+ @media screen and (max-width: 1400px) {
+ @content;
+ }
+ }
+}
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
index 2211bca..545dce7 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -41,3 +41,8 @@ main {
animation: fade-in 2s ease-out;
}
}
+
+::selection {
+ background-color: $text-main;
+ color: $text-dark;
+}
diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
index 87b79c1..1195ab7 100644
--- a/sass/components/_contact-form.scss
+++ b/sass/components/_contact-form.scss
@@ -5,6 +5,11 @@
gap: 2rem;
width: 50%;
+ // larger tablet to smaller laptop screen size
+ @include responsive(laptop) {
+ width: 100%;
+ }
+
// container for each label & input
div {
display: flex;
@@ -39,13 +44,6 @@
}
}
-// larger tablet to smaller laptop screen size
-@media screen and (max-width: 1380px) {
- .messenger-form {
- width: 100%;
- }
-}
-
// mobile to smaller tablet screen sizes
@media screen and (max-width: 820px) {
.messenger-form {
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index ed5fb0d..0bb8940 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -6,7 +6,7 @@
}
// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
+@media screen and (max-width: 1400px) {
.project-container {
@include flex-column-center;
gap: 5rem;
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
index f3fdf0b..beaa0cd 100644
--- a/sass/components/_screenshot-container.scss
+++ b/sass/components/_screenshot-container.scss
@@ -8,15 +8,13 @@
width: 40%;
transition: transform 0.6s ease;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ width: 80%;
+ }
+
&:hover {
transform: scale(1.2);
z-index: 100;
}
}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
- .project-screenshot {
- width: 80%;
- }
-}
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
index 95d2944..6cd1457 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -8,6 +8,12 @@
transform: skewX(-12deg);
width: 50%;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ transform: skewX(0);
+ width: auto;
+ }
+
// margin between paragraphs but not below the last paragraph
& p:not(:last-child) {
margin-bottom: 1.5rem;
@@ -17,16 +23,9 @@
.text-about {
animation: moveInRight 2s ease-out;
backface-visibility: hidden;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
- .text-container {
- transform: skewX(0);
- width: auto;
- }
- .text-about {
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
animation: moveInRightMobile 2s ease-out;
margin-top: 5rem;
}
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
index 0fa9cc4..a637329 100644
--- a/sass/layout/_footer.scss
+++ b/sass/layout/_footer.scss
@@ -2,14 +2,15 @@
footer {
background-color: $bg-text-container;
- // delete positioning to make grid footer from body work
- // position: absolute;
- // bottom: 0;
- // left: 0;
width: 100vw;
& * {
margin: $margin-main;
+
+ // mobile
+ @include responsive(phone) {
+ margin: $margin-mobile;
+ }
}
dl {
@@ -18,11 +19,23 @@ footer {
align-items: center;
height: 2rem;
+ // mobile
+ @include responsive(phone) {
+ flex-direction: column;
+ height: max-content;
+ }
+
& * {
color: inherit;
font-size: $medium-text;
margin: 0.5rem;
transition: transform 0.3s;
+
+ // mobile
+ @include responsive(phone) {
+ font-size: $medium-text-mobile;
+ margin: 0.3rem;
+ }
}
& dd i:hover {
@@ -38,22 +51,3 @@ footer {
font-size: $big-text;
}
}
-
-// mobile
-@media screen and (max-width: 520px) {
- footer {
- & * {
- margin: $margin-mobile;
- }
-
- dl {
- flex-direction: column;
- height: max-content;
-
- & * {
- font-size: $medium-text-mobile;
- margin: 0.3rem;
- }
- }
- }
-}
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index 7cb2735..aec49e5 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -3,6 +3,12 @@
.about-section {
@include flex-sp-around-center;
@include narrow-container;
+
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ @include flex-column-center;
+ @include mobile-container;
+ }
}
.welcome-section {
@@ -11,6 +17,13 @@
@include narrow-container;
width: 60%;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ @include flex-column-center;
+ gap: 4rem;
+ @include mobile-container;
+ }
+
.welcome-intro {
border-radius: $radius-text-container;
outline: 3px solid $text-special-dark;
@@ -21,6 +34,11 @@
.projects-section {
@include wide-container;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ @include mobile-container;
+ }
+
// less margin between h2 and the 2nd child = first project-container
& > div:not(:nth-child(2)) {
margin-top: 10rem;
@@ -29,26 +47,9 @@
.contact-section {
@include wide-container;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
- .about-section {
- @include flex-column-center;
- @include mobile-container;
- }
-
- .welcome-section {
- @include flex-column-center;
- gap: 4rem;
- @include mobile-container;
- }
-
- .projects-section {
- @include mobile-container;
- }
- .contact-section {
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
@include mobile-container;
}
}
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index 8d03e69..e2d462e 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -6,6 +6,11 @@ nav {
height: 10vh;
width: 100vw;
+ // tablet & mobile
+ @include responsive(tablet) {
+ height: fit-content;
+ }
+
ul {
display: flex;
align-items: center;
@@ -14,12 +19,25 @@ nav {
list-style-type: none;
padding: 0 3rem;
width: 100%;
+
+ // tablet & mobile
+ @include responsive(tablet) {
+ @include flex-column-center;
+ gap: 1rem;
+ padding: 0;
+ }
}
// logo to the left side of navbar
li:first-child {
text-align: left;
margin-right: auto;
+
+ // tablet & mobile
+ @include responsive(tablet) {
+ text-align: center;
+ margin-right: 1.5rem;
+ }
}
li a {
@@ -35,27 +53,10 @@ nav {
&:hover {
@include main-link-hover;
}
- }
-}
-
-// tablet & mobile
-@media screen and (max-width: 980px) {
- nav {
- height: fit-content;
-
- ul {
- @include flex-column-center;
- gap: 1rem;
- padding: 0;
- }
- li a {
+ // tablet & mobile
+ @include responsive(tablet) {
font-size: $big-text;
}
-
- li:first-child {
- text-align: center;
- margin-right: 1.5rem;
- }
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-24 23:47:26 +0000