extended logos for sharing and discussion in singular

liquet/css/logos.css

@@ -1,14 +1,23 @@
 #logos {
-    margin: 1.5em 0 0 0;
+    margin-top: 1.5em;
 }
 
-#logos img {
+#logos #title {
+    margin: 2em;
+    text-align: center;
+}
+
+#logos #title img {
+    height: 1.5em;
+}
+
+#logos #list img {
     height: 2em;
     width: 2em;
     margin: 0 .5em;
     transition: var(--animation);
 }
 
-#logos img:hover {
+#logos #list img:hover {
     transform: scale(1.15);
 }

liquet/css/singular.css

@@ -4,8 +4,8 @@
     overflow-wrap: break-word;
 }
 
-#singular #main a {
+#singular #main p a {
-    text-decoration: underline;
+    border-bottom: 2px solid var(--clr-black);
 }
 
 #singular #header {

liquet/logos.php

@@ -2,18 +2,29 @@
 
 $links = [ 'medium', 'github', 'twitter', 'website' ];
 
-function render_links() {
+function render_links( $expanded = false ) {
 	global $links;
 	?>
-    <div class="flex container horizontal middle center" id="logos"><?php
+    <div id="logos">
-	foreach ( $links as $link ) {
+	<?php if ( $expanded ) { ?>
-		$saved = get_option( $link . '_url' );
+        <div id="title" class="alt-font">
-		if ( $saved ) { ?>
+        discuss & share
-            <a href="<?= $saved ?>" target="_blank">
+        <br/>
-                <img src="<?= get_template_directory_uri() . '/vendor/logos/' . $link . '.png' ?>"
+        <img src="<?= get_template_directory_uri() . '/vendor/icons/down.svg' ?>"
-                     alt="<?= $link; ?>"/>
+             alt="arrow down"/>
-            </a>
+        </div>
-		<?php }
+    <?php } ?>
-	}
+    <div class="flex container horizontal middle center" id="list">
-	?></div><?php
+		<?php
+		foreach ( $links as $link ) {
+			$saved = get_option( $link . '_url' );
+			if ( $saved ) { ?>
+                <a href="<?= $saved ?>" target="_blank">
+                    <img src="<?= get_template_directory_uri() . '/vendor/logos/' . $link . '.png' ?>"
+                         alt="<?= $link; ?>"/>
+                </a>
+			<?php }
+		}
+		?></div>
+    </div><?php
 }

liquet/singular.php

@@ -46,8 +46,7 @@ $dates = getDates();
 						<?php the_content(); ?>
                         <br>
 						<?php render_current_tags(); ?>
-                        <hr>
+                        <?php render_links(true); ?>
-						<?php render_links(); ?>
                     </div>
                 </div>
 

liquet/vendor/icons/down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M348.3 295.6c-5-5.1-13.3-5.1-18.4-.1L269 356.2V124.9c0-7.1-5.8-12.9-13-12.9s-13 5.8-13 12.9v231.3l-60.9-60.8c-5.1-5-13.3-4.9-18.4.1-5 5.1-5 13.2.1 18.3l83 82.4c1.2 1.1 2.5 2 4.1 2.7 1.6.7 3.3 1 5 1 3.4 0 6.6-1.3 9.1-3.7l83-82.4c5.2-4.9 5.3-13.1.3-18.2z"/></svg>

liquet/vendor/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M444.7 230.4l-141.1-132c-1.7-1.6-3.3-2.5-5.6-2.4-4.4.2-10 3.3-10 8v66.2c0 2-1.6 3.8-3.6 4.1C144.1 195.8 85 300.8 64.1 409.8c-.8 4.3 5 8.3 7.7 4.9 51.2-64.5 113.5-106.6 212-107.4 2.2 0 4.2 2.6 4.2 4.8v65c0 7 9.3 10.1 14.5 5.3l142.1-134.3c2.6-2.4 3.4-5.2 3.5-8.4-.1-3.2-.9-6.9-3.4-9.3z"/></svg>