style/layout changes; gitignore

9 files changed, 88 insertions, 18 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..364fdec
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+public/
diff --git a/content/weblog/2018-07-21_first-post/index.md b/content/weblog/2018-07-21_first-post/index.md
index 3904e53..365204c 100644
--- a/content/weblog/2018-07-21_first-post/index.md
+++ b/content/weblog/2018-07-21_first-post/index.md
@@ -1,6 +1,6 @@
 +++
 title = "A weblog by Yaroslav de la Peña Smirnov"
-date = 2018-07-21T09:06:00Z
+date = 2018-07-21T20:06:00Z
 +++
 
 Hello, and welcome to my weblog. As you may have read in my home page, I will be
diff --git a/static/css/yaroslavps.css b/static/css/yaroslavps.css
index f4f722f..21e70a6 100644
--- a/static/css/yaroslavps.css
+++ b/static/css/yaroslavps.css
@@ -3,7 +3,10 @@
 html, body {
   width: 100%;
   min-height: 100vh;
-  background-color: #1b1e25;
+  background-color: #000;
+  background-image: url("/svg/background.svg");
+  background-size: 45px 45px;
+  background-repeat: repeat;
   margin: 0;
   padding: 0;
   font-size: 18px;
@@ -32,12 +35,12 @@ p {
 }
 
 a, a:visited {
-  color: #3f6e90;
+  color: #7fac96;
   text-decoration: none;
 }
 
 a:hover {
-  color: #81acc1;
+  color: #5b8277;
 }
 
 h1,
@@ -53,24 +56,65 @@ h4 > a,
 h5 > a,
 h6 > a {
   font-family: "IBM Plex Serif", Georgia, serif;
+  font-weight: 300;
+}
+
+hr {
+  border-style: solid;
+  border-color: #dedede;
+  border-width: 1px 0 0 0;
 }
 
 span.icon {
   font-family: "IBM Plex Mono";
+  font-size: 2em;
+  margin: auto 0.5em;
+}
+
+.publish-date {
+  color: #a1a6b2;
+  font-family: "IBM Plex Sans";
+  font-weight: 300;
+  font-style: italic;
+}
+
+h2 > span.publish-date {
+  font-size: 0.8em;
 }
 
 .main-container {
   display: grid;
-  grid-template-columns: 3fr 1fr;
-  max-width: 62em;
+  grid-template-columns: 5fr 2fr;
+  grid-template-rows: min-content auto;
+  max-width: 1080px;
   margin: 0 auto;
+  min-height: 100vh;
+  background-color: #000;
+}
+
+.landing-page-container {
+  grid-column-start: 1;
+  grid-column-end: 3;
 }
 
 .header-container {
   grid-column-start: 1;
   grid-column-end: 3;
+  text-align: center;
+  padding: 0 1em;
 }
 
 .sidebar-container {
   padding: 1em;
 }
+
+.links-container {
+  text-align: center;
+}
+
+.content-container {
+}
+
+.post-container {
+  padding: 2em;
+}
diff --git a/static/svg/background.svg b/static/svg/background.svg
new file mode 100644
index 0000000..d178423
--- /dev/null
+++ b/static/svg/background.svg
@@ -0,0 +1,4 @@
+<svg viewbox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
+  <line x1="0" x2="45" y1="45" y2="45" stroke="#a1a6b2" stroke-dasharray="1 2" />
+  <line x1="45" x2="45" y1="0" y2="45" stroke="#a1a6b2" stroke-dasharray="1 2" />
+</svg>
diff --git a/templates/archive.html b/templates/archive.html
index 68daf65..c3eb817 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -1,12 +1,13 @@
 {% extends "base.html" %}
 {% block content %}
 {% set section = get_section(path="weblog/_index.md") %}
-<div class="posts-list">
+<div class="post-container">
+  <h2>Archive</h2>
   {% for year, posts in section.pages | group_by(attribute="year") %}
-  <h2>{{ year }}</h2>
+  <h3>{{ year }}</h3>
   <ul>
     {% for post in posts %}
-    <li>{{ post.date }} - <a href="{{ post.permalink }}">{{ post.title }}</a></li>
+    <li><span class="publish-date">{{ post.date | date }}</span> - <a href="{{ post.permalink }}">{{ post.title }}</a></li>
     {% endfor %}
   </ul>
   {% endfor %}
diff --git a/templates/base.html b/templates/base.html
index f689bf3..43b0b77 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,6 +14,7 @@
     <div class="main-container">
       <div class="header-container">
         <h1><a href="/">Yaroslav de la Peña Smirnov</a></h1>
+        <hr>
       </div>
       {% block page %}
         <div class="content-container">
@@ -21,8 +22,23 @@
           {% endblock %}
         </div>
         <div class="sidebar-container">
-          <p>Hello, my name is Yaroslav de la Peña Smirnov. Welcome to my weblog.</p>
-          <a href="/weblog/archive">Archive</a>
+          <p>Hello, my name is Yaroslav de la Peña Smirnov, welcome to my
+          weblog. Sometimes I write software, sometimes I might write my mind
+          here. </p>
+          <div class="links-container">
+            <a href="https://github.com/Yaroslav-95" title="GitHub"><span class="icon"></span></a>
+            <a href="https://git.yaroslavps.com/yaroslav" title="Git server"><span class="icon"></span></a>
+            <a href="/rss.xml" title="RSS feed"><span class="icon"></span></a>
+          </div>
+          <h3>Navigation</h3>
+          <ul class="navigation-list">
+            <li><a href="/">Landing page</a></li>
+            <li><a href="/weblog/">Weblog ~</a></li>
+            <li><a href="/weblog/archive">Weblog archive</a></li>
+          </ul>
+          <h3>Contact</h3>
+          <p>If you want to tell me something, you can contact me by email at:</p>
+          <a href="mailto:contact@yaroslavps.com">contact@yaroslavps.com</a>
         </div>
       {% endblock %}
     </div>
diff --git a/templates/index.html b/templates/index.html
index 4e009e3..64bea0c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 {% block page %}
-  <h2>Welcome to my site!</h2>
-  <a href="/weblog">Go to weblog</a>
+  <div class="landing-page-container">
+    <h2>Welcome to my site!</h2>
+    <a href="/weblog">Go to weblog</a>
+  </div>
 {% endblock %}
diff --git a/templates/page.html b/templates/page.html
index 66faa93..4a3c86c 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,10 +1,9 @@
 {% extends "base.html" %}
 {% block content %}
 {% set post = page %}
-<div class="post-page">
+<div class="post-container">
   <h2>{{ post.title }}</h2>
-  <p class="publish-date">{{ post.date }}</p>
-  <hr>
+  <p class="publish-date">Published on: {{ post.date | date(format="%b %d, %Y %H:%M Zulu") }}</p>
   {{ post.content | safe }}
 </div>
 {% endblock %}
diff --git a/templates/weblog.html b/templates/weblog.html
index a20f356..88abf61 100644
--- a/templates/weblog.html
+++ b/templates/weblog.html
@@ -2,8 +2,11 @@
 {% block content %}
 <div class="posts-list">
   {% for post in paginator.pages %}
-    <div class="post-preview">
-      <h2><a href="{{ post.permalink }}">{{ post.title }}</a></h2>
+    <div class="post-container">
+      <h2>
+        <a href="{{ post.permalink }}">{{ post.title }}</a>
+        <span class="publish-date">{{ post.date | date }}</span>
+      </h2>
       {% if post.summary %}
         {{ post.summary | safe }}
       {% endif %}