Modern release, complete design overhaul

lxndio · Jul 25, 2016 · a4ec151 · a4ec151
1 parent 91acb0d
commit a4ec151
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 47 deletions.
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -1,45 +1,48 @@
-@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
+/*@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);*/
+@import 'https://fonts.googleapis.com/css?family=Lato:300,400';
 
 @font-face {
     font-family: CFJacquesCartier;
     src: url(../fonts/CFJacquesCartier-Regular.ttf);
 }
 
 .page-title {
-    font-family: CFJacquesCartier;
+    font-family: 'Lato', Sans-Serif;
+    font-weight: 300;
     font-size: 60px;
     margin-bottom: 20px;
 }
 
 .page-description {
-    font-family: 'Droid Serif', serif;
+    font-family: 'Lato', Sans-Serif;
+    font-weight: 300;
     font-size: 20px;
 }
 
 hr {
-    height: 1px;
-    width: 40%;
+    height: 0.8px;
+    width: 100%;
     border: none;
-    color: #000000;
-    background-color: #000000;
+    color: #dfdfdf;
+    background-color: #dfdfdf;
 }
 
 @media (max-width: 767px) {
     .content {
-        padding-left: 10%;
-        padding-right: 10%;
+        padding-left: 8%;
+        padding-right: 8%;
     }
 }
 @media (min-width: 768px) and (max-width: 1279px) {
     .content {
-        padding-left: 20%;
-        padding-right: 20%;
+        padding-left: 18%;
+        padding-right: 18%;
     }
 }
 @media (min-width: 1280px) {
     .content {
-        padding-left: 30%;
-        padding-right: 30%;
+        padding-left: 28%;
+        padding-right: 28%;
     }
 }
 
@@ -49,80 +52,111 @@ hr {
 }
 
 .list-title {
-    font-family: 'Droid Serif', serif;
+    font-family: 'Lato', Sans-Serif;
     font-size: 32px;
-    font-weight: 700;
+    font-weight: 400;
     text-indent: -2px;
     letter-spacing: -1px;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
 }
 
 a {
     text-decoration: none;
     text-underline: none;
-    color: #000000;
+    color: #1ab09c;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
+.page-title-link {
+    color: #000000;
+}
+
+.list-title-link {
+    color: #000000;
+}
+
+.footer-link {
+    color: #000000;
+}
+
 .list-article {
-    font-family: 'Droid Serif', serif;
-    font-size: 18px;
+    font-family: 'Lato', Sans-Serif;
+    font-size: 19px;
+    font-weight: 300;
     text-align: justify;
     line-height: 28px;
-    margin-bottom: 10px;
 }
 
 .date-and-tags {
-    font-family: 'Droid Serif', serif;
-    font-size: 15px;
+    font-family: 'Lato', Sans-Serif;
+    font-weight: 300;
+    font-size: 18px;
+    margin-bottom: 20px;
+    color: #afafaf;
+}
+
+.tag {
+    color: #afafaf;
 }
 
 .article {
     margin-bottom: 25px;
 }
 
 .site-footer {
-    font-family: 'Droid Serif', serif;
-    font-size: 12px;
+    font-family: 'Lato', Sans-Serif;
+    font-size: 13px;
+    font-weight: 300;
     margin-top: 50px;
     text-align: center;
 }
 
 .post-title {
-    font-family: 'Droid Serif', serif;
+    font-family: 'Lato', Sans-Serif;
     font-size: 42px;
-    font-weight: 700;
+    font-weight: 300;
     text-indent: -2px;
-    letter-spacing: -1px;
-    margin-top: 20px;
 }
 
 .post-header {
     text-align: center;
 }
 
 .post-date {
-    font-family: 'Droid Serif', serif;
-    font-size: 15px;
+    font-family: 'Lato', Sans-Serif;
+    font-size: 18px;
+    font-weight: 300;
+    margin-top: -35px;
+    color: #afafaf;
 }
 
 .post-content {
-    font-family: 'Droid Serif', serif;
-    font-size: 18px;
-    text-align: justify;
+    font-family: 'Lato', Sans-Serif;
+    font-weight: 300;
+    font-size: 19px;
+    /*text-align: justify;*/
     margin-bottom: 25px;
 }
 
 .share-title {
-    font-family: 'Droid Serif', serif;
-    font-size: 15px;
-    font-weight: 700;
+    font-family: 'Lato', Sans-Serif;
+    font-size: 18px;
+    font-weight: 300;
+    margin-bottom: 10px;
 }
 
 .share {
-    font-family: 'Droid Serif', serif;
-    font-size: 15px;
+    font-family: 'Lato', Sans-Serif;
+    font-size: 16px;
+    font-weight: 300;
+}
+
+.pagination {
+    font-family: 'Lato', Sans-Serif;
+    font-weight: 300;
+    font-size: 19px;
+    text-align: center;
 }
diff --git a/assets/fonts/CFJacquesCartier-Regular.ttf b/assets/fonts/CFJacquesCartier-Regular.ttf
diff --git a/default.hbs b/default.hbs
@@ -19,6 +19,7 @@
 
     {{! Ghost outputs important style and meta data with this tag }}
     {{ghost_head}}
+
 </head>
 <body class="{{body_class}}">
 
@@ -27,9 +28,9 @@
 
     <footer class="site-footer">
         <hr>
-        <section class="copyright">Copyright &copy; {{date format="YYYY"}} <a href="{{@blog.url}}">{{@blog.title}}</a></section>
-        <section class="poweredby"><a href="https://github.com/lxndio/Aquila">Aquila</a> theme by <a href="http://www.lxnd.me/">lxndio</a>. Proudly published with <a href="https://ghost.org">Ghost</a></section>
-        <section class="rss"><a href="{{@blog.url}}/rss/">RSS Feed</a></section>
+        <section class="copyright">Copyright &copy; {{date format="YYYY"}} <a href="{{@blog.url}}" class="footer-link">{{@blog.title}}</a></section>
+        <section class="poweredby">Proudly published with <a href="https://ghost.org" class="footer-link">Ghost</a></section>
+        <section class="rss"><a href="{{@blog.url}}/rss/" class="footer-link">RSS Feed</a> - <a href="{{@blog.url}}/imprint/" class="footer-link">Imprint</a></section>
     </footer>
 
     {{! Ghost outputs important scripts and data with this tag }}

diff --git a/index.hbs b/index.hbs
@@ -2,18 +2,22 @@
 
 <header class="main-header">
     {{#if @blog.logo}}<a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{else}}
-    <p class="page-title">{{@blog.title}}{{/if}}</p>
+    <p class="page-title"><a href="{{@blog.url}}" class="page-title-link">{{@blog.title}}</a>{{/if}}</p>
     <p class="page-description">{{@blog.description}}</p>
     <hr>
 </header>
 
 <main id="content" class="content" role="main">
     {{#foreach posts}}
         <div class="article">
-            <div class="list-title"><a href="{{url}}">{{title}}</a></div>
+            <div class="list-title"><a href="{{url}}" class="list-title-link">{{title}}</a></div>
+            <div class="date-and-tags">{{date published_at format="MMMM DD, YYYY"}} {{#if tags}}&nbsp;
+                {{#foreach tags}}
+                    <a href="{{url}}" title="{{name}}" class="tag">{{name}}</a>&nbsp;&nbsp;
+                {{/foreach}}
+            {{/if}}</div>
             <div class="list-article">{{excerpt characters="200"}}...</div>
-            <div class="date-and-tags">{{date published_at format="MMMM DD, YYYY"}} {{#if tags}}in {{tags}}{{/if}}</div>
         </div>
     {{/foreach}}
-    {{pagination}}
+    <div class="pagination">{{pagination}}</div>
 </main>
diff --git a/post.hbs b/post.hbs
@@ -4,7 +4,7 @@
 
 <header class="main-header">
     {{#if @blog.logo}}<a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{else}}
-    <p class="page-title">{{@blog.title}}{{/if}}</p>
+    <p class="page-title"><a href="{{@blog.url}}" class="page-title-link">{{@blog.title}}</a>{{/if}}</p>
     <p class="page-description">{{@blog.description}}</p>
     <hr>
 </header>
@@ -14,8 +14,12 @@
     <article class="{{post_class}}">
 
         <header class="post-header">
-            <p class="post-date">{{date format="DD MMMM YYYY"}} in {{tags}}</p>
             <p class="post-title">{{title}}</p>
+            <p class="post-date">{{date published_at format="MMMM DD, YYYY"}} {{#if tags}}&nbsp;
+                {{#foreach tags}}
+                    <a href="{{url}}" title="{{name}}" class="tag">{{name}}</a>&nbsp;&nbsp;
+                {{/foreach}}
+            {{/if}}</p>
         </header>
 
         <section class="post-content">