tags list for phone, top bar and small fixes

liquet/css/home.css

@@ -1,7 +1,7 @@
 #home #header {
     text-align: center;
-    margin-top: 8vw;
-    margin-bottom: 8vw;
+    margin-top: 8vmin;
+    margin-bottom: 16vmin;
     padding: 0 2em;
 }
 
@@ -27,19 +27,15 @@
 }
 
 #home #list-container {
-    /*background: var(--clr-primary);*/
 }
 
 #home #list-header {
-    /*background: var(--clr-primary);*/
-    /*box-shadow: 0 0 1em -0.5em hsla(0, 0%, 0%, 0.1);*/
 }
 
 #home #list {
     text-align: left;
     width: 100%;
     padding: 0 2em;
-    margin-bottom: 16vh;
 }
 
 @media only screen and (min-width: 40em) {

liquet/css/singular.css

@@ -1,3 +1,21 @@
+#singular #top img {
+    margin: .25em .25em;
+    vertical-align: middle;
+    transition: var(--animation);
+}
+
+#singular #top img:hover {
+    transform: scale(1.5);
+}
+
+#singular #top #left img {
+    width: 1.5em;
+}
+
+#singular #top #right img {
+    width: 1em;
+}
+
 #singular #main {
     padding-top: 8vw;
     overflow-y: auto;
@@ -93,13 +111,17 @@
     line-height: 1em;
 }
 
+#singular .links > div:hover {
+    transform: rotate(180deg) scale(1.5);
+}
+
 @media only screen and (min-width: 40em) {
     #singular .links > div {
         padding: 1em;
         width: 3em;
     }
-}
 
-#singular .links > div:hover {
-    transform: rotate(180deg) scale(1.5);
+    #singular #top img {
+        margin: .25em 1em;
+    }
 }

liquet/logos.php

@@ -20,7 +20,7 @@ function render_links( $expanded = false ) {
 			if ( $saved ) { ?>
                 <a href="<?= $saved ?>" target="_blank">
                     <img src="<?= get_template_directory_uri() . '/vendor/logos/' . $link . '.png' ?>"
-                         alt="<?= $link; ?>"/>
+                         alt="<?= $link; ?>" rel="noopener"/>
                 </a>
 			<?php }
 		}

liquet/singular.php

@@ -11,11 +11,29 @@ $dates = getDates();
 
 ?>
     <div class="flex container vertical fill" id="singular">
-        <div class="flex item shrink gohome">
+        <div class="flex item shrink" id="top">
+            <div class="flex container horizontal middle">
+                <div class="flex item grow text-align-left" id="left">
+                    <a href="<?= get_bloginfo( 'wpurl' ); ?>">
+                        <img src="<?= get_template_directory_uri() . '/vendor/icons/left.svg' ?>" alt="arrow back"/>
+                    </a>
+                </div>
+                <div class="flex item shrink gohome" id="center">
                     <a href="<?= get_bloginfo( 'wpurl' ); ?>">
                         <span class="alt-font"><?= get_bloginfo( 'name' ); ?></span>
                     </a>
                 </div>
+                <div class="flex item grow text-align-right" id="right">
+					<?php
+					$saved = get_option( 'website_url' );
+					if ( $saved ) : ?>
+                        <a href="<?= $saved; ?>" target="_blank">
+                            <img src="<?= get_template_directory_uri() . '/vendor/logos/website.png' ?>" alt="website"/>
+                        </a>
+					<?php endif; ?>
+                </div>
+            </div>
+        </div>
         <div class="flex item grow">
             <div class="flex container horizontal fill">
                 <a class="flex item shrink links" href="<?= getNextURL( false ) ?>">
@@ -64,6 +82,8 @@ $dates = getDates();
                                 <br>
 								<?php render_current_tags(); ?>
                                 <br>
+                                <br>
+                                <br>
                             </div>
 						<?php endif; ?>
 

liquet/style.css

@@ -2,7 +2,7 @@
 Theme Name: Liquet
 Author: Niccolo Borgioli
 Description: Minimalistic clean theme
-Version: 0.7
+Version: 0.8
 License: MIT
 Tags: minimal, simple, typography, clean
 Author URI: https://nicco.io
@@ -89,6 +89,31 @@ hr {
     margin-top: -.25em;
 }
 
+
+@media only screen and (max-width: 40em) {
+    .tags::-webkit-scrollbar {
+        width: 2px;
+        background: transparent;
+        height: 2px;
+    }
+
+    .tags::-webkit-scrollbar-thumb {
+        background: var(--clr-dark);
+        border-radius: 2px;
+    }
+
+    .tags {
+        display: flex;
+        flex-direction: row;
+        overflow: auto;
+    }
+
+    .tags > a.tag {
+        margin: .25em;
+        flex: 1 0 auto;
+    }
+}
+
 .tags > a.tag {
     padding: .25em;
     background: #eee;

liquet/vendor/fonts/import.css

@@ -2,6 +2,7 @@
     font-family: 'Raleway';
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
     src: url('./Raleway/Raleway-Regular.woff2') format('woff2')
 }
 
@@ -9,6 +10,7 @@
     font-family: 'Raleway';
     font-style: italic;
     font-weight: normal;
+    font-display: swap;
     src: url('./Raleway/Raleway-Italic.woff2') format('woff2')
 }
 
@@ -16,6 +18,7 @@
     font-family: 'Raleway';
     font-style: normal;
     font-weight: bold;
+    font-display: swap;
     src: url('./Raleway/Raleway-Bold.woff2') format('woff2')
 }
 
@@ -23,6 +26,7 @@
     font-family: 'Raleway';
     font-style: italic;
     font-weight: bold;
+    font-display: swap;
     src: url('./Raleway/Raleway-BoldItalic.woff2') format('woff2')
 }
 
@@ -30,5 +34,6 @@
     font-family: 'Abril Fatface';
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
     src: url('./Abril/AbrilFatface-Regular.woff2') format('woff2')
 }

liquet/vendor/icons/contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm127.3 335.3c-34 34-79.2 52.7-127.3 52.7V76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3z"/></svg>

liquet/vendor/icons/left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M216.4 163.7c5.1 5 5.1 13.3.1 18.4L155.8 243h231.3c7.1 0 12.9 5.8 12.9 13s-5.8 13-12.9 13H155.8l60.8 60.9c5 5.1 4.9 13.3-.1 18.4-5.1 5-13.2 5-18.3-.1l-82.4-83c-1.1-1.2-2-2.5-2.7-4.1-.7-1.6-1-3.3-1-5 0-3.4 1.3-6.6 3.7-9.1l82.4-83c4.9-5.2 13.1-5.3 18.2-.3z"/></svg>