redesign for legibility and easier maintenance

pelican/themes/homebrewserver.club/static/css/main.css

@@ -8,7 +8,9 @@ http://roelof.info
 http://randomiser.info/
 http://majesticmoo.se
 */
-
+html {
+	font-size: 20px;
+}
 @font-face {
 	font-family:'OrkneyRegular';
 	src: url('../fonts/Orkney Regular.woff') format('truetype');
@@ -19,67 +21,50 @@ header {
 }
 
 #banner {
-	line-height: 1em;
-	font-size: calc(0.7vh + 0.7vw + 0.25vmin);		
     text-align: center;
+    font-size: 5rem;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    background: #EAEAEA;
+}
 
+#sitename {
+	color:#0074D9;
+	text-decoration:none;
 }
 pre {
 	font-family: 'Mono';
 }
 #menu {
-	font-size:40px;
+	font-size:2.5rem;
+	margin-top:1.2em;
 	font-weight:bold;
-	margin-top: 1em;
 	text-align:center;
 }
-html {
+
-	font-size: 20px;
-}
 body {
 	line-height:1.6em;
-	
+	color:#0074D9;
-	color:#6363ff;
+	background-color:#f6f6f6;
-	background-color:#fdfdfd;
-	max-width:80%;
-	min-width:650px;
-	margin: 40px auto;
 	font-family:'OrkneyRegular';
 	letter-spacing: 0.05em;
+	margin:0;
+}
+
+#index{
+	max-width:80%;
+	margin: auto;
 }
 
 a {
-	color:#fe4a49;
+	color:#FF4136;
 }
 
-table{
-	margin: 0 auto;
-	max-width: 800px;
-	font-size:60%;
-	width: 100%;
-	border-collapse: collapse;
-	text-align: left;
-	border: 1px solid #6363ff;
-}
-
- table td, table th {
-	border: 1px dashed lightgrey;
-	padding-left:1em;
-}
-
-table thead tr {
-	border-bottom: 1px solid #6363ff;
-	background: #F8F8F8;
-}
-
-table tr:nth-child(even) {
-  background: #F8F8F8;
-}
-
-
 
 #index{
     width:100%;
+    padding-top:2em;
+    padding-bottom:1em;
 
 }
 
@@ -88,21 +73,44 @@ table tr:nth-child(even) {
 	margin-top:0px;
 }
 
-ul {
+
-	padding-left:0px;
+h1{
+	font-size:2.5rem;
+    padding: 1em;
+    margin: 0;
+}
+}
+h2{
+	font-size:2rem;
+    padding: 1em;
+    margin: 0;
+}
+}
+h3{
+	font-size:1.5rem;
+	text-decoration: underline;
+    padding: 1em;
+    margin: 0;
+}
 }
 
+.summary p{
+	font-size:0.8rem;
+	text-align: left;
+	margin:0;
+}
 .hentry{
-        margin-top:2em;
 	border-width: 1px;
-	border-color: #444;
+	border-color: #EAEAEA;
 	border-style: hidden hidden dashed hidden;
+	padding-top:2em;
+	padding-bottom:2em;
 }
 
 .entry-title{
-        font-size:36px;
+    font-size:3rem;
     font-weight:bold;
-	margin-top:2em;
+    line-height: 1.2em;
 }
 
 .entry-title span{
@@ -110,16 +118,47 @@ ul {
     display:inline-block;
 }
 
+.toc{
+	font-size: 0.8em;
+	padding: 3em;
+	float: right;
+	line-height: 1.5em;
+	border: 1px solid;
+	margin: 1em;
+}
+
+.toc .toctitle {
+	font-size:1rem;
+}
+
+.toc ul{
+	/*list-style: none;*/
+	margin-top:0px;
+}
 .entry-content{
     margin:auto;
     padding-bottom:1em;
+
 }
 
+
 .entry-content pre{
-    font-size:20px;
+	font-size: 18px;
-    padding-left:1em;
+	padding: 0.5em;
 	overflow: auto;
-    background-color: #F8F8F8;
+	background-color: #EAEAEA;
+	line-height: 1.2em;
+}
+
+.codehilite {
+	max-width: 800px;
+	margin:1em auto;
+}
+
+code {
+	font-size: 18px;
+	padding: 0.5em;
+	background-color: #EAEAEA;
 	line-height: 1.2em;
 }
 
@@ -128,12 +167,15 @@ ul {
 }
 
 .entry-content ul{
-	font-size:20px;
 	line-height:1.5;
 	margin: auto;
 	max-width:800px;
 }
 
+.entry-content pre{
+	margin: auto;
+}
+
 .highlight{
 	margin: auto;
 	max-width:800px;
@@ -143,9 +185,7 @@ blockquote {
 	font-style:italic;
 }
 
-#content{
+
-        margin:auto;
-}
 
 #content p{
     line-height:1.6;
@@ -180,7 +220,8 @@ blockquote {
 	text-align:center;
 
 }
-.simple-footnotes{
+
+.footnote{	
 	font-size:14px;
 	margin:auto;
 	max-width:800px;
@@ -192,27 +233,54 @@ blockquote {
 
 .post-info {
     line-height: 1em;
+    margin-top:1em;
 }
 
+table{
+	margin: 1em auto;
+	max-width: 800px;
+	font-size:0.9em;
+	width: 100%;
+	border-collapse: collapse;
+	text-align: left;
+	border: 1px solid #0074D9;
+}
+
+ table td, table th {
+	border: 1px dashed #EAEAEA;
+	padding-left:1em;
+	padding-top:0.2em;
+}
+
+table thead tr {
+	border-bottom: 1px solid #0074D9;
+	background: #EAEAEA;
+}
+
+table tr:nth-child(even) {
+  background: #EAEAEA;
+}
 
 
 
 /* some good ol' theft from https://codepo8.github.io/css-fork-on-github-ribbon/ */
 #forkongithub a {
-	background:#fe4a49;
+	background:#FF4136;
 	color:#fff;
 	text-decoration:none;
-	font-family:arial,sans-serif;
+	/*! font-family:arial,sans-serif; */
-	text-align:center;
+	text-align:right;
 	font-weight:bold;
 	padding:5px 40px;
 	font-size:1rem;
 	line-height:2rem;
 	position:relative;
-	transition:0.5s;}
+	transition:0.5s;
+	font-size: 14px;
+}
 
 #forkongithub a:hover{
-	background:#6363ff;
+	background:#0074D9;
 	color:#fff;}
 
 #forkongithub a::before,#forkongithub a::after{
@@ -242,9 +310,9 @@ blockquote {
 		z-index:9999;
 	}
 #forkongithub a{
-	width:200px;
+	width:210px;
 	position:absolute;
-	top:60px;
+	top:30px;
 	right:-60px;
 	transform:rotate(45deg);
 	-webkit-transform:rotate(45deg);
@@ -254,3 +322,4 @@ blockquote {
 	box-shadow:4px 4px 10px rgba(0,0,0,0.8);
 	}
 }
+

pelican/themes/homebrewserver.club/templates/article.html

@@ -26,7 +26,8 @@
  {% import 'translations.html' as translations with context %}
  {{ translations.translations_for(article) }}
   </header>
-  <footer class="post-info">
+  <div class="post-info">
+    <!-- <div class='summary'>{{ article.summary }}</div> -->
     <time class="published" datetime="{{ article.date.isoformat() }}">
       {{ article.locale_date }}
     </time>
@@ -41,8 +42,12 @@
           <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
         {% endfor %}
     </address>
+
+    {% endif %}
+  </div><!-- /.post-info -->
+  {% if article.toc %}
+  {{ article.toc }}
   {% endif %}
-  </footer><!-- /.post-info -->
   <div class="entry-content">
     {{ article.content }}
   </div><!-- /.entry-content -->

pelican/themes/homebrewserver.club/templates/base.html

@@ -40,17 +40,12 @@
         {% endblock head %}
 </head>
 
-<body id="index" class="home">
+<body>
     <header id="banner">
-		<pre>
+        <a href="{{ SITEURL }}" id="sitename">{{ SITENAME }}</a>
-░█░█░█▀█░█▄█░█▀▀░█▀▄░█▀▄░█▀▀░█░█░█▀▀░█▀▀░█▀▄░█░█░█▀▀░█▀▄░░░░█▀▀░█░░░█░█░█▀▄
-░█▀█░█░█░█░█░█▀▀░█▀▄░█▀▄░█▀▀░█▄█░▀▀█░█▀▀░█▀▄░▀▄▀░█▀▀░█▀▄░░░░█░░░█░░░█░█░█▀▄
-░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀░░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░
-		</pre>
         <span id="subtitle">{{ SITESUBTITLE }}</span>
+        <!-- /#banner -->
 	
-        </header><!-- /#banner -->
-	<span id="forkongithub"><a href="xmpp://hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
     <nav id="menu">
         {% for title, link in MENUITEMS %}
             <a class="menu-item" href="{{ link }}">{{ title }}</a>
@@ -66,8 +61,12 @@
             {% endfor %}
           {% endif %}
         {% endif %}
-        </ul></nav><!-- /#menu -->
+        </ul></nav>
+    </header><!-- /#menu -->
+    <span id="forkongithub"><a href="xmpp://hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
+    <div id='index' class='home'>
         {% block content %}
         {% endblock %}
+    </div>
 </body>
 </html>

pelican/themes/homebrewserver.club/templates/index.html

@@ -7,11 +7,20 @@
 <ol id="post-list">
 {% for article in articles_page.object_list %}
         <ul><article class="hentry">
-                <header> <span class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></span> </header>
+                <header> 
-                <footer class="post-info">
+                	<div class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></div>
+                </header>
+                <div class="post-info">
                     <time class="published" datetime="{{ article.date.isoformat() }}"> <sup>{{ article.locale_date }}</sup> </time>
-                </footer><!-- /.post-info -->
+<!--                     {% for tag in article.tags %}
-                <div class="entry-content"> {{ article.content }}<div id="moaaar"><a href="/{{ article.url }}">moaaar</a></div> </div><!-- /.entry-content -->
+                    <span itemprop="keywords">
+                        <a href="{{ SITEURL }}/{{ tag.url }}" rel="tag">{{ tag }}</a>
+                    </span>{% endfor %} -->
+
+                </div><!-- /.post-info -->
+                <div class="entry-content"> {{ article.content }}</div>
+                <!-- /.entry-content -->
+                <div id="moaaar"><a href="{{SITEURL}}/{{ article.url }}">moaaar</a></div> 
         </article></ul>
 {% endfor %}
 </ol><!-- /#posts-list -->