redesign for legibility and easier maintenance

6 years ago · 9c1487e4e6
4 changed files with 174 additions and 92 deletions
--- a/pelican/themes/homebrewserver.club/static/css/main.css
+++ b/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;
-		
+    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;
+#menu {
+	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:#6363ff;
-	background-color:#fdfdfd;
-	max-width:80%;
-	min-width:650px;
-	margin: 40px auto;
+	color:#0074D9;
+	background-color:#f6f6f6;
 	font-family:'OrkneyRegular';
 	letter-spacing: 0.05em;
+	margin:0;
 }

-a {
-	color:#fe4a49;
-}
-
-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;
+#index{
+	max-width:80%;
+	margin: auto;
 }

-table tr:nth-child(even) {
-  background: #F8F8F8;
+a {
+	color:#FF4136;
 }


-
 #index{
-        width:100%;
+    width:100%;
+    padding-top:2em;
+    padding-bottom:1em;

 }

@ -88,52 +73,109 @@ 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-weight:bold;
-	margin-top:2em;
+    font-size:3rem;
+    font-weight:bold;
+    line-height: 1.2em;
 }

 .entry-title span{
-        width:100%;
-        display:inline-block;
+    width:100%;
+    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;
+    margin:auto;
+    padding-bottom:1em;
+
 }

+
 .entry-content pre{
-    font-size:20px;
-    padding-left:1em;
-    overflow: auto;
-    background-color: #F8F8F8;
-    line-height:1.2em;
+	font-size: 18px;
+	padding: 0.5em;
+	overflow: auto;
+	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;
 }

 .entry-content img{
-        max-height:100%;
+    max-height:100%;
 }

-.entry-content ul {
-	font-size:20px;
+.entry-content ul{
 	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;
-	text-align:center;
+	/*! font-family:arial,sans-serif; */
+	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);
 	}
 }
+
--- a/pelican/themes/homebrewserver.club/templates/article.html
+++ b/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 %}
-  </footer><!-- /.post-info -->
+  </div><!-- /.post-info -->
+  {% if article.toc %}
+  {{ article.toc }}
+  {% endif %}
  <div class="entry-content">
    {{ article.content }}
  </div><!-- /.entry-content -->
--- a/pelican/themes/homebrewserver.club/templates/base.html
+++ b/pelican/themes/homebrewserver.club/templates/base.html
@ -40,18 +40,13 @@
        {% endblock head %}
 </head>

-<body id="index" class="home">
-        <header id="banner">
-		<pre>
-░█░█░█▀█░█▄█░█▀▀░█▀▄░█▀▄░█▀▀░█░█░█▀▀░█▀▀░█▀▄░█░█░█▀▀░█▀▄░░░░█▀▀░█░░░█░█░█▀▄
-░█▀█░█░█░█░█░█▀▀░█▀▄░█▀▄░█▀▀░█▄█░▀▀█░█▀▀░█▀▄░▀▄▀░█▀▀░█▀▄░░░░█░░░█░░░█░█░█▀▄
-░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀░░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░
-		</pre>
-               	<span id="subtitle">{{ SITESUBTITLE }}</span>
-
-        </header><!-- /#banner -->
-	<span id="forkongithub"><a href="xmpp://hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
-        <nav id="menu">
+<body>
+    <header id="banner">
+        <a href="{{ SITEURL }}" id="sitename">{{ SITENAME }}</a>
+        <span id="subtitle">{{ SITESUBTITLE }}</span>
+        <!-- /#banner -->
+	
+    <nav id="menu">
        {% for title, link in MENUITEMS %}
            <a class="menu-item" href="{{ link }}">{{ title }}</a>
        {% endfor %}
@ -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>
--- a/pelican/themes/homebrewserver.club/templates/index.html
+++ b/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>
-                <footer class="post-info">
+                <header> 
+                	<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 -->
-                <div class="entry-content"> {{ article.content }}<div id="moaaar"><a href="/{{ article.url }}">moaaar</a></div> </div><!-- /.entry-content -->
+<!--                     {% for tag in article.tags %}
+                    <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 -->