commit: f3849c601ca122913df872259b0b8a140edcd3e0
parent: 01f541cb569e28b51dd75c8ceade10c97a44b40e
author: Chris Noxz <chris@noxz.tech>
date: Thu, 9 Sep 2021 19:32:52 +0200
make design somewhat responsive for narrower width
2 files changed, 61 insertions(+), 29 deletions(-)
diff --git a/config/main.html b/config/main.html
@@ -6,6 +6,7 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
+ <meta name="viewport" content="width=device-width, initial-scale=0.6">
<title>{:title:}</title>
<link rel="icon" type="image/png" href="{:favicon:}"/>
<link rel="stylesheet" type="text/css" href="{:stylesheet:}">
@@ -21,9 +22,13 @@
<div id="content">
<table>
<tr>
- <td id="nav" valign="top" style="width:200px;">
- {:menu:}
- {:menu_extra:}
+ <td id="nav" valign="top">
+ <input type="checkbox" id="hamburger">
+ <label for="hamburger"></label>
+ <div id="burger-wrapper">
+ {:menu:}
+ {:menu_extra:}
+ </div>
</td>
<td id="main" valign="top">
{:content:}
diff --git a/noxz.tech/pub/style.css b/noxz.tech/pub/style.css
@@ -2,7 +2,7 @@ body {
background-color: #eee;
color : #222;
font-family : monospace, sans-serif;
- font-size : 1em;
+ font-size : 1rem;
line-height : 2em;
padding : 0;
margin : 0;
@@ -24,14 +24,13 @@ hr.hidden-ruler {
#header {
clear : both;
color : #ffffff;
- font-size : 1.35em;
border-bottom : solid 2px #526587;
background : #333a56;
background : linear-gradient(to right, #000000, #333a56);
height : 2.75em;
font-size : 1.3em;
line-height : 2.75em;
- padding : 0 1.35ex;
+ padding : 0 1em;
}
#header-logo img {
@@ -64,47 +63,45 @@ h1 {
border-bottom : 1px solid #cacaca;
margin : 1em 0 1em 0;
padding : 0 0 0.75em 0;
- font-size : 1.4em;
+ font-size : 1.4rem;
}
h2 {
- margin : 1em 0 0.5ex 0;
- font-size : 1.3em;
+ margin : 1em 0 0.25em 0;
+ font-size : 1.3rem;
}
h3 {
- margin : 1em 0 0.5ex 0;
- font-size : 1.0em;
+ margin : 1em 0 0.25em 0;
+ font-size : 1.0rem;
}
h4 {
- margin : 1em 0 0.5ex 0;
- font-size : 0.9em;
+ margin : 1em 0 0.25em 0;
+ font-size : 0.9rem;
}
p, li {
color : #444;
- /*line-height : 2em;*/
}
code {
font-family : monospace;
- line-height : 2em;
+ font-size : 1rem;
+ line-height : 2rem;
background-color: #efefef;
padding : 0.3em;
}
pre {
- font-family : monospace;
- font-size : 1em;
- line-height : 1.6em;
background-color: #efefef;
padding : 1em;
overflow : auto;
}
pre code {
- line-height : 1.6em;
+ font-size : 0.9rem;
+ line-height : 1.8rem;
background-color: none;
padding : 0;
}
@@ -124,7 +121,7 @@ pre code {
padding : 1em 0;
line-height : 1.5em;
border-right : 1px dotted #ccc;
- width : 200px;
+ width : 15em;
}
#nav ul {
@@ -138,14 +135,14 @@ pre code {
margin : 0;
}
-#nav>ul:first-child li>a:before {
+#nav>div>ul:first-child li>a:before {
content : "\203A";
display : inline-block;
margin-left : -1em;
width : 1em;
}
-#nav>ul:first-child li.active>a:before {
+#nav>div>ul:first-child li.active>a:before {
content : "\00BB";
}
@@ -153,8 +150,8 @@ pre code {
#nav li a {
display : block;
margin : 0;
- padding : 0.8ex 2em 0.8ex 2em;
- line-height : 3ex;
+ padding : 0.5em 2em;
+ line-height : 1.65em;
}
/* keep link hover over full width, first level */
@@ -192,7 +189,8 @@ pre code {
clear : both;
color : #666;
border-top : 1px solid #ccc;
- font-size : 84%;
+ font-size : 0.85em;
+ line-height : 1.7em;
padding : 1em;
margin : 0 0 1.5em 0;
}
@@ -257,10 +255,10 @@ p.right {
margin : 0;
}
-a.rss,a.twtxt {
+a.rss, a.twtxt {
display : block;
- background : none no-repeat 0.9em center;
- padding : 0.8ex 0 0.8ex 2.2em !important;
+ background : none no-repeat 0.7em center;
+ padding : 0.5em 0 0.5em 2em !important;
margin : 0;
}
@@ -281,7 +279,7 @@ ul.repo-log {
ul.repo-log li {
font-family : monospace;
- font-size : 84%;
+ font-size : 0.7em;
}
ul.repo-log li .log-date {
@@ -353,3 +351,32 @@ dl {
dl>dt {
text-indent : -2em;
}
+
+#hamburger { display: none; }
+#hamburger ~ label { display: none; }
+@media screen and (max-width: 768px) {
+ #burger-wrapper { display: none; }
+ #nav {
+ width : auto;
+ max-width : 15em;
+ }
+ #hamburger ~ label {
+ display : block;
+ color : black;
+ background : white;
+ font-style : normal;
+ text-align : center;
+ font-size : 1.2em;
+ padding : 10px;
+ user-select : none;
+ cursor : pointer;
+ }
+
+ #hamburger ~ label:before { content: "\2630" }
+ #hamburger:checked ~ label:before { content: "\2A09" }
+ #hamburger:checked ~ #burger-wrapper { display: block; }
+ #hamburger:checked ~ label {
+ color : white;
+ background : black;
+ }
+}
