From 60843f46a506767fa6edcd8c94a73a557953a3a8 Mon Sep 17 00:00:00 2001 From: timvisee Date: Mon, 1 Jul 2019 16:28:52 +0200 Subject: [PATCH] Build sidebar, improve some styles --- config.toml | 4 +- .../blog/2019-07-01_another_sample_article.md | 4 +- themes/zenn/sass/site.scss | 72 +++++++++++++++---- themes/zenn/templates/index.html | 60 ++++++++++++---- 4 files changed, 108 insertions(+), 32 deletions(-) diff --git a/config.toml b/config.toml index c1efedf..b0ddfc6 100644 --- a/config.toml +++ b/config.toml @@ -32,14 +32,12 @@ zenn_menu = [ {url = "$BASE_URL/about", name = "About"}, {url = "https://timvisee.com", name = "timvisee.com"}, ] +zenn_source = "https://gitlab.com/timvisee/blog.timvisee.com/" after_dark_title = "Tim Visée" after_dark_menu = [ {url = "$BASE_URL", name = "Home"}, {url = "$BASE_URL/projects", name = "Projects"}, {url = "$BASE_URL/blog", name = "Blog"}, - {url = "$BASE_URL/categories", name = "Categories"}, - {url = "$BASE_URL/tags", name = "Tags"}, {url = "$BASE_URL/about", name = "About"}, - {url = "https://timvisee.com", name = "timvisee.com"}, ] diff --git a/content/blog/2019-07-01_another_sample_article.md b/content/blog/2019-07-01_another_sample_article.md index 3f6362e..a552e0a 100644 --- a/content/blog/2019-07-01_another_sample_article.md +++ b/content/blog/2019-07-01_another_sample_article.md @@ -7,13 +7,15 @@ tags = ["test"] categories = ["dev"] +++ -Ut enim ad minim veniam, quis +Ut enim ad minim `veniam`, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ```bash # A random command ffsend upload $file --copy +ffsend upload $file --copy some really long command to see how wrapping/overflowing goes + rm -rf / ``` diff --git a/themes/zenn/sass/site.scss b/themes/zenn/sass/site.scss index 8b36a1b..0b024eb 100644 --- a/themes/zenn/sass/site.scss +++ b/themes/zenn/sass/site.scss @@ -80,6 +80,7 @@ a { display: inline-block; color: $link-color; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; + text-decoration: none; outline: 0; &:hover { @@ -166,7 +167,7 @@ content { content > #{headings(1,6)} { margin: 0; padding-bottom: 0.3em; - border-bottom: 1px solid $background-border; + border-bottom: 1px dashed $background-border; } content pre, @@ -186,10 +187,17 @@ content img { padding: 0.25em; max-width: 100%; } +content code { + padding: 0 0.2em; + display: inline-block; + font-family: $font-monospace; + background-color: $background-darker; + border-radius: 3px; +} sidebar { width: 20em; - padding: 2.5em 1.5em; + padding: 0.5em 1.5em 1.5em 1.5em; box-sizing: border-box; background: $background-darker; } @@ -216,14 +224,38 @@ sidebar #{headings(1,6)} { } sidebar > section { - padding: 1em 0; + padding: 1rem 0; + + ul { + margin: 0 -1.5rem; + padding: 0; + list-style-type: none; + + li { + line-height: 2; + width: 100%; + + a { + display: block; + padding: 0 1.5rem; + font-family: $font-title; + + &:hover, &.active { + background-color: rgba($link-color, 0.1); + } + &:active { + background-color: rgba($link-color-hover, 0.2); + } + } + } + } } article { - padding: 2.5em 0; + padding: 2em 0; font-family: $font-article; text-align: justify; - border-bottom: 1px solid $background-border; + border-bottom: 1px dashed $background-border; // Hack to fix 
 overflow
     width: 100%;
@@ -239,12 +271,26 @@ article > header {
     #{headings(1,6)} {
         margin: 0;
     }
-
-    a {
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
+}
+
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tag {
+    display: inline-block;
+    border: 1px solid $background-border;
+    border-radius: 3px;
+    font-family: $font-title;
+    padding: 0.2em 0.4em;
+    line-height: 1;
+    margin: 0.1em;
+}
+
+content .tag {
+    background-color: $background-darker;
+}
+sidebar .tag {
+    background-color: $background;
 }
diff --git a/themes/zenn/templates/index.html b/themes/zenn/templates/index.html
index 493d583..71c5c8f 100644
--- a/themes/zenn/templates/index.html
+++ b/themes/zenn/templates/index.html
@@ -70,31 +70,61 @@
                 
                     {% if config.extra.zenn_menu %}
                         

-                            
Menu

                             
                         

                     {% endif %}
 
                     

                         
Categories

-                        
...

-                    

-                    

-                        
Tags

-                        
...

+                        

+                            
+                        

                     

 
-                    
+                    

+                        
Tags

+                        

+                            test
+                            test
+                            test
+                            test
+                            test
+                            test
+                            test
+                        

+                    

+
+                    

                         Copyright © {{ config.title }} {{ now() | date(format="%Y") }}
-                    
+                        {% if config.extra.zenn_source %}
+                            
Source
+                        {% endif %}
+                    

                 
             
         {% endblock content %}