From b8ef5fe023a064d1e609b257786822095d85bb96 Mon Sep 17 00:00:00 2001 From: danix Date: Sun, 12 Feb 2023 17:30:59 +0100 Subject: [PATCH] added bg image to header. Fixed backtotop link and icons in home and footer. --- assets/sass/components/_icons.scss | 45 ++++++++++++++++++++++++ assets/sass/layout/_banner.scss | 6 ++-- assets/sass/layout/_header.scss | 3 +- assets/sass/main.scss | 5 +-- layouts/partials/footer-addition.html | 2 +- layouts/partials/footer.html | 20 ++++++----- layouts/partials/funcs/social-menu.html | 4 +-- layouts/partials/home-social-links.html | 2 +- static/bg/bg2.jpg | Bin 0 -> 376470 bytes static/bg/rose2.jpg | Bin 374288 -> 0 bytes static/js/main.js | 10 ++++++ 11 files changed, 77 insertions(+), 20 deletions(-) create mode 100644 static/bg/bg2.jpg delete mode 100644 static/bg/rose2.jpg diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss index 32e99f9..d8f303b 100644 --- a/assets/sass/components/_icons.scss +++ b/assets/sass/components/_icons.scss @@ -40,6 +40,7 @@ padding-right: 0; } a { + border-bottom: none; text-decoration: none; span.inline-svg { svg { @@ -55,4 +56,48 @@ padding: 0 0.75em 0 0; } } + } + + ul.footer-socials { + cursor: default; + list-style: none; + padding-left: 0; + + li.social-link { + display: inline-block; + padding: 0 1em 0 0; + + &:last-child { + padding-right: 0; + } + a { + border-bottom: none; + text-decoration: none; + span.inline-svg { + svg { + width: 2.5rem; + height: 2.5rem; + } + } + } + } + + @include breakpoint('<=small') { + li { + padding: 0 0.75em 0 0; + } + } + } + + div#backtotop { + @include position(fixed, null 1rem 1rem null); + a { + border-bottom: none; + span.inline-svg { + svg { + width: 2rem; + height: 2rem; + } + } + } } \ No newline at end of file diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss index 65e52d1..64481d7 100644 --- a/assets/sass/layout/_banner.scss +++ b/assets/sass/layout/_banner.scss @@ -8,7 +8,7 @@ #banner { @include vendor('align-items', 'center'); - @include vendor('background-image', 'url("../../images/banner.jpg")'); + @include vendor('background-image', 'url("../bg/bg2.jpg")'); @include vendor('display', 'flex'); @include padding(4em, 0, (2em, 0, 0, 0)); background-attachment: fixed; @@ -18,7 +18,7 @@ border-bottom: 0 !important; cursor: default; height: 60vh; - margin-bottom: -3.25em; + margin-bottom: -5.25em; max-height: 32em; min-height: 22em; position: relative; @@ -33,7 +33,7 @@ display: block; height: 100%; left: 0; - opacity: 0.85; + opacity: 0.7; position: absolute; top: 0; width: 100%; diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index 303bdb2..eb7d7e3 100644 --- a/assets/sass/layout/_header.scss +++ b/assets/sass/layout/_header.scss @@ -13,8 +13,7 @@ #header { @include vendor('display', 'flex'); - background: _palette(bg-alt) url("../bg/rose2.jpg") no-repeat fixed center center; - // background-color:; + background-color: _palette(bg-alt); box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15); cursor: default; font-weight: _font(weight-bold); diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 7567f9a..8abbbb6 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,3 +1,6 @@ +// BOURBON +@import "bourbon/bourbon"; +// HTML5UP @import 'libs/vars'; @import 'libs/functions'; @import 'libs/mixins'; @@ -5,8 +8,6 @@ @import 'libs/vendor'; @import 'libs/breakpoints'; @import 'libs/html-grid'; -// MY COLOR DEFINITIONS -@import "colors"; // GOOGLE FONTS @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap'); diff --git a/layouts/partials/footer-addition.html b/layouts/partials/footer-addition.html index 3bba698..faf4f7d 100644 --- a/layouts/partials/footer-addition.html +++ b/layouts/partials/footer-addition.html @@ -1,5 +1,5 @@ -
+ diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0be512e..421e18d 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,12 +1,14 @@ -