added bg image to header. Fixed backtotop link and icons in home and footer.
authordanix <danix@danix.xyz>
Sun, 12 Feb 2023 16:30:59 +0000 (17:30 +0100)
committerdanix <danix@danix.xyz>
Sun, 12 Feb 2023 16:30:59 +0000 (17:30 +0100)
assets/sass/components/_icons.scss
assets/sass/layout/_banner.scss
assets/sass/layout/_header.scss
assets/sass/main.scss
layouts/partials/footer-addition.html
layouts/partials/footer.html
layouts/partials/funcs/social-menu.html
layouts/partials/home-social-links.html
static/bg/bg2.jpg [new file with mode: 0644]
static/bg/rose2.jpg [deleted file]
static/js/main.js

index 32e99f9..d8f303b 100644 (file)
@@ -40,6 +40,7 @@
                                padding-right: 0;
                        }
                        a {
+                               border-bottom: none;
                                text-decoration: none;
                                span.inline-svg {
                                        svg {
                                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
index 65e52d1..64481d7 100644 (file)
@@ -8,7 +8,7 @@
 \r
        #banner {\r
                @include vendor('align-items', 'center');\r
-               @include vendor('background-image', 'url("../../images/banner.jpg")');\r
+               @include vendor('background-image', 'url("../bg/bg2.jpg")');\r
                @include vendor('display', 'flex');\r
                @include padding(4em, 0, (2em, 0, 0, 0));\r
                background-attachment: fixed;\r
@@ -18,7 +18,7 @@
                border-bottom: 0 !important;\r
                cursor: default;\r
                height: 60vh;\r
-               margin-bottom: -3.25em;\r
+               margin-bottom: -5.25em;\r
                max-height: 32em;\r
                min-height: 22em;\r
                position: relative;\r
@@ -33,7 +33,7 @@
                        display: block;\r
                        height: 100%;\r
                        left: 0;\r
-                       opacity: 0.85;\r
+                       opacity: 0.7;\r
                        position: absolute;\r
                        top: 0;\r
                        width: 100%;\r
index 303bdb2..eb7d7e3 100644 (file)
@@ -13,8 +13,7 @@
 \r
        #header {\r
                @include vendor('display', 'flex');\r
-               background: _palette(bg-alt) url("../bg/rose2.jpg") no-repeat fixed center center;\r
-               // background-color:;\r
+               background-color: _palette(bg-alt);\r
                box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);\r
                cursor: default;\r
                font-weight: _font(weight-bold);\r
index 7567f9a..8abbbb6 100644 (file)
@@ -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');
 
index 3bba698..faf4f7d 100644 (file)
@@ -1,5 +1,5 @@
 <!-- here will appear eventual js code and other additions to the footer -->
-<div id="backtotop">
+<div id="backtotop" class="hidden">
        {{$name := "arrow-up"}}
        <a class="scrolly" href="#main">{{ partial "funcs/svg.html" (dict "context" . "username" $name) }}<span class="screen-reader-text">back to top</span></a>
 </div>
index 0be512e..421e18d 100644 (file)
@@ -1,12 +1,14 @@
-<footer id="colophon" class="site-footer">
-       <div id="footer-content">
+<footer id="footer" class="site-footer">
+       <div class="inner">
                <p>Copyright &copy; {{ partial "funcs/year.html" }} <a href="{{- $.Site.Params.author_url -}}" target="_blank">{{- $.Site.Params.author_name -}}</a></p>
+               <div class="row">
+                       <div class="col-8 col-12-medium">
+                               <ul>
+                                       <li><a href="{{.Site.BaseURL}}sitemap.xml" target="_blank">sitemap</a></li>
+                                       <li><a href="{{ ref . "legal" }}">Privacy Policy</a></li>
+                               </ul>
+                       </div>
+                       {{- partial "funcs/social-menu.html" . -}}
+               </div>
        </div>
-       <div>
-               <ul>
-                       <li><a href="{{.Site.BaseURL}}sitemap.xml" target="_blank">sitemap</a></li>
-                       <li><a href="{{ ref . "legal" }}">Privacy Policy</a></li>
-               </ul>
-       </div>
-       {{- partial "funcs/social-menu.html" . -}}
 </footer>
index b59ad34..84ebaad 100644 (file)
@@ -1,6 +1,6 @@
 {{ with .Site.Social }}
-<div id="social-menu">
-       <ul class="icons">
+<div class="col-4 col-12-medium">
+       <ul class="footer-socials">
                <li class="social-link social-spotify">
                        {{$spotify := "spotify"}}
                        <a href="https://spotify.com/{{ .spotify }}" target="_blank">{{ partial "funcs/svg.html" (dict "context" . "username" $spotify) }}</a>
index 1a46df7..3c9c151 100644 (file)
@@ -2,7 +2,7 @@
        <header class="major">
                <h3 class="screen-reader-text social-links-title">my socials</h3>
        </header>
-       <ul class="social-sites">
+       <ul class="social-sites align-center">
                {{ range site.Data.socials.sites | shuffle }}
                        <li>
                                {{$name := .name}}
diff --git a/static/bg/bg2.jpg b/static/bg/bg2.jpg
new file mode 100644 (file)
index 0000000..2af958b
Binary files /dev/null and b/static/bg/bg2.jpg differ
diff --git a/static/bg/rose2.jpg b/static/bg/rose2.jpg
deleted file mode 100644 (file)
index fcc33eb..0000000
Binary files a/static/bg/rose2.jpg and /dev/null differ
index 1a13dd3..0e03888 100644 (file)
@@ -10,6 +10,7 @@
                $body = $('body'),\r
                $wrapper = $('#wrapper'),\r
                $header = $('#header'),\r
+               $btt = $('#backtotop'),\r
                $banner = $('#banner');\r
 \r
        // Breakpoints.\r
 \r
                        });\r
 \r
+       // backtotop\r
+       $(window).scroll( function(){\r
+           if( $(window).scrollTop() > 150 ){\r
+               $btt.removeClass("hidden");\r
+           } else {\r
+               $btt.addClass("hidden");\r
+           }\r
+       });\r
+\r
 })(jQuery);
\ No newline at end of file