From b2438296c9be5820f1cfccb2623a7f66566b82b1 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Thu, 9 Mar 2023 17:18:33 +0100 Subject: Favicon & phone optimization --- about-en.html | 1 + about.html | 1 + images/favicon-AR.ico | Bin 0 -> 8992 bytes index-en.html | 1 + index.html | 1 + sass/abstracts/_mixins.scss | 10 ++++----- sass/base/_base.scss | 4 ++++ sass/components/_text-container.scss | 4 ++++ sass/layout/_main-sections.scss | 30 ++++++++++++++++++++----- sass/layout/_nav.scss | 2 +- style.css | 41 ++++++++++++++++++++++++++++++++--- 11 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 images/favicon-AR.ico 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" /> + Arne Rief - Web Developer 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" /> + Arne Rief - Webentwickler diff --git a/images/favicon-AR.ico b/images/favicon-AR.ico new file mode 100644 index 0000000..0255c2c Binary files /dev/null and b/images/favicon-AR.ico 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" /> + Arne Rief - Web Developer 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" /> + Arne Rief - Webentwickler 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; } -- cgit v1.2.3