Update style

nntrn · Apr 26, 2024 · 79589f6 · 79589f6
1 parent 3c57231
commit 79589f6
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 9 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,3 +1,3 @@
-<header>
+<nav>
   <h1><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
-</header>
+</nav>
diff --git a/_includes/styles/grid.css b/_includes/styles/grid.css
@@ -1,6 +1,6 @@
 header{grid-area:header;padding:1rem;display:none}
-main{grid-area:main;padding:.5rem 1rem}
-aside{padding:.5rem 1rem;grid-area:sidebar}
+main{grid-area:main;padding:.5rem 1rem;padding-right:1.5rem}
+aside{padding:.125rem 1rem;grid-area:sidebar}
 footer{grid-area:footer}
 .container{padding:0 0;display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-areas:"header header header" "sidebar main main" "footer footer footer"}
 .page-content h1,.page-content h2,.page-content h3{margin:1rem 0;font-size:unset}
@@ -12,6 +12,7 @@ td{border:1px solid #ddd}
 @media (max-width:700px){
 nav h1{display:none}
 header{padding:1rem;display:block}
+.sidebar-groups>div{flex:1}
 .sidebar-groups{display:flex;flex-direction:row;gap:2rem;flex-wrap:wrap}
 .container{grid-template-areas:"header header header" "main main main" "sidebar sidebar sidebar" "footer footer footer"}
 }
diff --git a/_includes/styles/index.css b/_includes/styles/index.css
@@ -0,0 +1,16 @@
+.container{grid-template-areas:"header header header" "sidebar sidebar sidebar" "main main main" "footer footer footer"}
+header{display:block}
+.page-content h1{font-size:1.5rem;border-bottom:4px solid #222;line-height:1.4}
+.page-content h2{font-size:1.25rem;margin-top:1.5rem}
+.page-content h3{font-size:1.15rem;border-bottom:1.5px dotted #222}
+.page-content{border:0;margin-bottom:2rem;break-inside:avoid}
+section{column-count:2;column-gap:5rem}
+body>:not(header,footer){width:95%!important;margin:auto}
+li h2,li h3{font-size:unset!important;all:unset}
+aside nav{display:none}
+.sidebar-groups{flex-direction:row;width:100%;margin:0 0;padding:2rem;background:hsla(var(--h),var(--s),var(--l),.2);color:hsl(var(--h),var(--s),20%)}
+.sidebar-groups>div{flex:1;columns:2}
+.sidebar a:hover{text-decoration:2px underline #fff}
+@media (max-width:700px){
+section{column-count:1;column-gap:3rem}
+}
diff --git a/_includes/styles/main.css b/_includes/styles/main.css
@@ -14,7 +14,7 @@
 *{box-sizing:border-box}
 .hidden,[hidden]{display:none!important}
 html{font-size:13px}
-body{padding:0 0;margin:auto;font-family:var(--sans-serif);font-size:inherit;line-height:1.3;overflow-x:hidden}
+body{padding:0 0;margin:auto;font-family:var(--sans-serif);font-size:inherit;line-height:1.3;overflow-x:hidden;min-height:100vh}
 h1{--underline-thickness:3px}
 a,u{text-underline-offset:1px;text-decoration-skip-ink:none;text-decoration-thickness:var(--underline-thickness)}
 u{text-decoration-color:inherit}
@@ -33,7 +33,7 @@ pre{font-size:.9rem;max-width:100%}
 pre code{white-space:pre;display:block;overflow-x:scroll}
 button{position:fixed;z-index:1000;right:0}
 .container{display:flex;gap:1rem;padding:1rem;width:100%}
-.container,main{height:100%;min-height:100vh}
+.container,main{height:100%;}
 .container .sidebar{flex:1}
 .container .content>:first-child{padding:0 0;margin:0 0;margin-bottom:1rem}
 .container .content{flex:3;width:100%;overflow-x:hidden}
@@ -46,6 +46,8 @@ button{position:fixed;z-index:1000;right:0}
 .gap{gap:var(--gap,1rem)}
 .wrap{flex-wrap:wrap}
 .flex-1{display:flex;flex:1}
+.sb{justify-content:space-between}
 .site-title{font-size:2rem;font-weight:300}
 .sidebar-groups{gap:1rem;display:flex;flex-direction:column;padding-bottom:4rem}
-.language-jq{user-select:all}
+.language-jq{user-select:all;background:#222;color:#fff;padding:1rem}
+
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -15,6 +15,7 @@
   {%capture style %}<style>{%- include {{css}} -%}</style>{%endcapture%}
   {{style}}
   {% endfor %}
+
 </head>
 <body class="container">
 <header>
@@ -25,7 +26,10 @@ <h1 class="site-title"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1
   {{ content }}
 </main>
 <footer>
-  <p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></p>
+  <div class="flex sb">
+    <p>Download <a href="https://nntrn.github.io/jq-recipes/recipes.jq">recipes.jq</a></p>
+    <p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></p>
+  </div>
 </footer>
 </body>
 </html>
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -11,3 +11,6 @@ <h2>{{page.title|upcase}}</h2>
 {%- endfor %}
 </section>
 
+<style>
+{% include styles/index.css %}
+</style>
diff --git a/index.md b/index.md
@@ -18,6 +18,6 @@ $ curl --create-dirs -o ~/.jq/recipes.jq https://nntrn.github.io/jq-recipes/reci
 jq 'include "recipes"; <funcname>' <jsonfile>
 ```
 
-<details><summary>View contents</summary>
+<details>
 <pre>{% include_relative recipes.jq %}</pre>
 </details>