summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--about-en.html1
-rw-r--r--about.html1
-rw-r--r--images/favicon-AR.icobin0 -> 8992 bytes
-rw-r--r--index-en.html1
-rw-r--r--index.html1
-rw-r--r--sass/abstracts/_mixins.scss10
-rw-r--r--sass/base/_base.scss4
-rw-r--r--sass/components/_text-container.scss4
-rw-r--r--sass/layout/_main-sections.scss30
-rw-r--r--sass/layout/_nav.scss2
-rw-r--r--style.css41
11 files changed, 80 insertions, 15 deletions
diff --git a/about-en.html b/about-en.html
index 94a2e26..98eda1b 100644
--- a/about-en.html
+++ b/about-en.html
@@ -24,6 +24,7 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
rel="stylesheet"
/>
+ <link rel="icon" href="images/favicon-AR.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" />
<title>Arne Rief - Web Developer</title>
diff --git a/about.html b/about.html
index 3f32d93..ef28df5 100644
--- a/about.html
+++ b/about.html
@@ -24,6 +24,7 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
rel="stylesheet"
/>
+ <link rel="icon" href="images/favicon-AR.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" />
<title>Arne Rief - Webentwickler</title>
diff --git a/images/favicon-AR.ico b/images/favicon-AR.ico
new file mode 100644
index 0000000..0255c2c
--- /dev/null
+++ b/images/favicon-AR.ico
Binary files differ
diff --git a/index-en.html b/index-en.html
index 5fbd3ee..aed786b 100644
--- a/index-en.html
+++ b/index-en.html
@@ -24,6 +24,7 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
rel="stylesheet"
/>
+ <link rel="icon" href="images/favicon-AR.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" />
<title>Arne Rief - Web Developer</title>
diff --git a/index.html b/index.html
index bb844c2..8a3f4b1 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
rel="stylesheet"
/>
+ <link rel="icon" href="images/favicon-AR.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" />
<title>Arne Rief - Webentwickler</title>
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 3495b1b..f50cc17 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -25,10 +25,6 @@
justify-content: center;
}
-@mixin narrow-container {
- margin: 3rem auto;
-}
-
@mixin wide-container {
margin: 10rem auto;
width: 80%;
@@ -38,11 +34,15 @@
}
}
-@mixin mobile-container {
+@mixin medium-container {
margin: 8rem auto;
width: 80%;
}
+@mixin mobile-container {
+ margin: 3rem auto;
+}
+
// media queries
@mixin responsive($breakpoint) {
@if $breakpoint == phone {
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
index 545dce7..608f7c2 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -40,6 +40,10 @@ main {
& * {
animation: fade-in 2s ease-out;
}
+
+ @include responsive(phone) {
+ margin: 2rem 0.5rem;
+ }
}
::selection {
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
index 6cd1457..ea3a2fc 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -14,6 +14,10 @@
width: auto;
}
+ @include responsive(phone) {
+ padding: 1rem;
+ }
+
// margin between paragraphs but not below the last paragraph
& p:not(:last-child) {
margin-bottom: 1.5rem;
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index aec49e5..190d020 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -2,11 +2,15 @@
.about-section {
@include flex-sp-around-center;
- @include narrow-container;
+ @include mobile-container;
// mobile to smaller laptop screen sizes
@include responsive(laptop) {
@include flex-column-center;
+ @include medium-container;
+ }
+
+ @include responsive(phone) {
@include mobile-container;
}
}
@@ -14,13 +18,17 @@
.welcome-section {
@include standard-grid;
gap: 8rem;
- @include narrow-container;
+ @include mobile-container;
width: 60%;
// mobile to smaller laptop screen sizes
@include responsive(laptop) {
@include flex-column-center;
gap: 4rem;
+ @include medium-container;
+ }
+
+ @include responsive(phone) {
@include mobile-container;
}
@@ -34,14 +42,20 @@
.projects-section {
@include wide-container;
+ // less margin between h2 and the 2nd child = first project-container
+ & > div:not(:nth-child(2)) {
+ margin-top: 10rem;
+ }
+
// mobile to smaller laptop screen sizes
@include responsive(laptop) {
- @include mobile-container;
+ @include medium-container;
}
- // less margin between h2 and the 2nd child = first project-container
- & > div:not(:nth-child(2)) {
- margin-top: 10rem;
+ @include responsive(phone) {
+ @include flex-column-center;
+ margin: 8rem 0;
+ width: 100%;
}
}
@@ -50,6 +64,10 @@
// mobile to smaller laptop screen sizes
@include responsive(laptop) {
+ @include medium-container;
+ }
+
+ @include responsive(phone) {
@include mobile-container;
}
}
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index e2d462e..88fc320 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -24,7 +24,7 @@ nav {
@include responsive(tablet) {
@include flex-column-center;
gap: 1rem;
- padding: 0;
+ padding: 1.5rem 0;
}
}
diff --git a/style.css b/style.css
index 2dbe1fe..520ecfa 100644
--- a/style.css
+++ b/style.css
@@ -75,6 +75,11 @@ main {
main * {
animation: fade-in 2s ease-out;
}
+@media screen and (max-width: 600px) {
+ main {
+ margin: 2rem 0.5rem;
+ }
+}
::selection {
background-color: #ececec;
@@ -145,7 +150,7 @@ nav ul {
align-items: center;
justify-content: center;
gap: 1rem;
- padding: 0;
+ padding: 1.5rem 0;
}
}
nav li:first-child {
@@ -194,6 +199,11 @@ nav li a:hover {
width: 80%;
}
}
+@media screen and (max-width: 600px) {
+ .about-section {
+ margin: 3rem auto;
+ }
+}
.welcome-section {
display: grid;
@@ -215,6 +225,11 @@ nav li a:hover {
width: 80%;
}
}
+@media screen and (max-width: 600px) {
+ .welcome-section {
+ margin: 3rem auto;
+ }
+}
.welcome-section .welcome-intro {
border-radius: 10px;
outline: 3px solid #e79759;
@@ -228,14 +243,24 @@ nav li a:hover {
.projects-section h2 {
margin-bottom: 5rem;
}
+.projects-section > div:not(:nth-child(2)) {
+ margin-top: 10rem;
+}
@media screen and (max-width: 1400px) {
.projects-section {
margin: 8rem auto;
width: 80%;
}
}
-.projects-section > div:not(:nth-child(2)) {
- margin-top: 10rem;
+@media screen and (max-width: 600px) {
+ .projects-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 8rem 0;
+ width: 100%;
+ }
}
.contact-section {
@@ -251,6 +276,11 @@ nav li a:hover {
width: 80%;
}
}
+@media screen and (max-width: 600px) {
+ .contact-section {
+ margin: 3rem auto;
+ }
+}
footer {
background-color: #173d5a;
@@ -313,6 +343,11 @@ footer .big-icon {
width: auto;
}
}
+@media screen and (max-width: 600px) {
+ .text-container {
+ padding: 1rem;
+ }
+}
.text-container p:not(:last-child) {
margin-bottom: 1.5rem;
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-24 21:30:33 +0000