Improve page

14 files changed, 138 insertions, 150 deletions

diff --git a/_data/en/strings.yml b/_data/en/strings.yml
index b0c05af..fc233f9 100644
--- a/_data/en/strings.yml
+++ b/_data/en/strings.yml
@@ -20,6 +20,7 @@ index:
 post:
   next: Next
   previous: Previous
+  read: Read
 errors:
   not_found: The page you were looking for couldn't be found
 date:
diff --git a/_data/es/strings.yml b/_data/es/strings.yml
index 92619f6..e36acf5 100644
--- a/_data/es/strings.yml
+++ b/_data/es/strings.yml
@@ -20,6 +20,7 @@ index:
 post:
   next: Siguiente
   previous: Anterior
+  read: Leer
 errors:
   not_found: No se encontró la página que buscabas
 date:
diff --git a/_includes/archived_post.liquid b/_includes/archived_post.liquid
new file mode 100644
index 0000000..d0d2b07
--- /dev/null
+++ b/_includes/archived_post.liquid
@@ -0,0 +1,15 @@
+<div class="columns">
+    <div class="archive-post-date column is-narrow">
+	<p class="archive-post-date">
+	    <svg class="svg-icon-body" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-event-fill" viewBox="0 0 16 16">
+		-			<path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/>
+		-		    </svg>
+	    {% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}{{ post.date | date: "%d-%m-%Y" }}
+	</p>
+    </div>
+    <div class="column">
+	<a class="archive-post-title" href="{{ site.baseurl }}{{post.url }}">
+	    {{ post.title }}
+	</a>
+    </div>
+</div>
diff --git a/_includes/banner.liquid b/_includes/banner.liquid
index 084b3ba..58285d2 100644
--- a/_includes/banner.liquid
+++ b/_includes/banner.liquid
@@ -1,6 +1,6 @@
-<div class="my-4 column top-bar">
+<div class="my-4 column">
     <div class="mb-5 columns is-vcentered">
-	<div class="column is-one-quarter">
+	<div class="column is-narrow">
 	    {% if site.lang != "es" %}
 		<a class="page-title" href="/{{ site.lang }}">
 		    {{ site.title }}
diff --git a/_includes/header.liquid b/_includes/header.liquid
index e3a1a23..a8ccc5e 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -7,7 +7,6 @@
   <meta charset="UTF-8">
   <meta http-equiv="Content-Language" content="{{site.active_lang}}">
   <title>{{ site.name }}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="{{ site.baseurl }}/assets/css/bulma.min.css" rel="stylesheet" type="text/css">
   <link href="{{ site.baseurl }}/assets/css/styles.css" rel="stylesheet" type="text/css">
   <link href="{{ site.baseurl }}/assets/css/syntax_light.css" rel="stylesheet" type="text/css">
diff --git a/_includes/navigation.liquid b/_includes/navigation.liquid
index 03714c0..e705112 100644
--- a/_includes/navigation.liquid
+++ b/_includes/navigation.liquid
@@ -1,27 +1,29 @@
-<div class="columns">
-    <div class="column is-one-fifth">
-	<a href="{{ site.baseurl }}/about" class="navigation">
-	    {{ site.data[site.active_lang].strings.global.about }}
-	</a>
-    </div>
-    <div class="column is-one-fifth">
-	<a href="{{ site.baseurl }}/about_me" class="navigation">
-	    {{ site.data[site.active_lang].strings.global.about_me }}
-	</a>
-    </div>
-    <div class="column is-one-fifth">
-	<a href="{{ site.baseurl }}/archive" class="navigation">
-	    {{ site.data[site.active_lang].strings.global.archive }}
-	</a>
-    </div>
-    <div class="column is-one-fifth">
-	<a href="{{ site.baseurl }}/tags" class="navigation">
-	    {{ site.data[site.active_lang].strings.global.tags }}
-	</a>
-    </div>
-    <div class="column is-one-fifth">
-	<a href="https://git.silosneeded.com/cgit/blog.git" class="navigation">
-	    {{ site.data[site.active_lang].strings.global.source_code }}
-	</a>
-    </div>
+<div class="tabs is-boxed is-full mb-4">
+    <ul>
+	<li>
+	    <a href="{{ site.baseurl }}/about" class="navigation">
+		{{ site.data[site.active_lang].strings.global.about }}
+	    </a>
+	</li>
+	<li>
+	    <a href="{{ site.baseurl }}/about_me" class="navigation">
+		{{ site.data[site.active_lang].strings.global.about_me }}
+	    </a>
+	</li>
+	<li>
+	    <a href="{{ site.baseurl }}/archive" class="navigation">
+		{{ site.data[site.active_lang].strings.global.archive }}
+	    </a>
+	</li>
+	<li>
+	    <a href="{{ site.baseurl }}/tags" class="navigation">
+		{{ site.data[site.active_lang].strings.global.tags }}
+	    </a>
+	</li>
+	<li>
+	    <a href="https://git.silosneeded.com/cgit/blog.git" class="navigation">
+		{{ site.data[site.active_lang].strings.global.source_code }}
+	    </a>
+	</li>
+    </ul>
 </div>
diff --git a/_includes/post_summary.liquid b/_includes/post_summary.liquid
index a23344f..f3f7678 100644
--- a/_includes/post_summary.liquid
+++ b/_includes/post_summary.liquid
@@ -1,6 +1,6 @@
 <div class="column">
     <div class="column">
-	<a class="index-post-title" href="{{ site.baseurl }}{{include.post.url }}">
+	<a class="index-post-title" href="{{include.post.url }}">
 	    {{ include.post.title }}
 	</a>
     </div>
@@ -25,4 +25,9 @@
     <div class="column">
 	{{ include.post.excerpt }}
     </div>
+    <div class="column">
+	<a class="button is-info has-text-white" href="{{include.post.url }}">
+	    {{ site.data[site.active_lang].strings.post.read }}
+	</a>
+    </div>
 </div>
diff --git a/_includes/tags.liquid b/_includes/tags.liquid
index 4f7de89..d77da16 100644
--- a/_includes/tags.liquid
+++ b/_includes/tags.liquid
@@ -14,4 +14,4 @@
 	</svg>
     </div>
 </div>
-</div>
+
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index 63bc1d2..d91d73c 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -1,14 +1,17 @@
-{% include header.liquid %}
+<!DOCTYPE html>
+<html>
+    {% include header.liquid %}
 
-<body>
-    <div id="page-container" class="columns">
-	<div class="column is-offset-one-fifth is-three-fifths">
-	    <div class="columns is-three-fifths">
-		{% include banner.liquid %}
-	    </div>
-	    <div class="columns is-three-fifths">
-		{{ content }}
+    <body>
+	<div class="columns">
+	    <div class="column page-container">
+		<div class="columns">
+		    {% include banner.liquid %}
+		</div>
+		<div class="columns">
+		    {{ content }}
+		</div>
 	    </div>
 	</div>
-    </div>
-</body>
+    </body>
+</html>
diff --git a/_layouts/page.liquid b/_layouts/page.liquid
index 80680f5..30f54a9 100644
--- a/_layouts/page.liquid
+++ b/_layouts/page.liquid
@@ -1,21 +1,10 @@
-{% include header.liquid %}
+---
+layout: default
+---
 
-<body>
-    <div id="page-container" class="columns">
-	<div class="column is-three-fifths is-offset-one-fifth">
-	    <div class="columns is-three-fifths">
-		{% include banner.liquid %}
-	    </div>
-
-	    <div class="columns is-three-fifths mt-2 is-desktop">
-		<div class="column">
-		    <div class="column mb-4">
-			{% include page_header.liquid %}
-			<div class="column content">
-			    {{ content }}
-			</div>
-		    </div>
-		</div>
-	    </div>
-	</div>
-</body>
+<div class="column mb-4">
+    {% include page_header.liquid %}
+    <div class="column content">
+	{{ content }}
+    </div>
+</div>
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
index aacce19..115b32f 100644
--- a/_layouts/post.liquid
+++ b/_layouts/post.liquid
@@ -1,25 +1,14 @@
-{% include header.liquid %}
+---
+layout: default
+---
 
-<body>
-    <div id="page-container" class="columns">
-	<div class="column is-three-fifths is-offset-one-fifth">
-	    <div class="columns is-three-fifths">
-		{% include banner.liquid %}
-	    </div>
-
-	    <div class="columns is-three-fifths mt-2 is-desktop">
-		<div class="column">
-		    <div class="column mb-4">
-			{% include page_header.liquid %}
-			{% include tags.liquid date=page.date tags=page.tags %}
-		    <div class="column content">
-			{{ content }}
-		    </div>
-		    <div class="column">
-			{% include navigation_buttons.liquid %}
-		    </div>
-		</div>
-	    </div>
-	</div>
+<div class="column mb-4">
+    {% include page_header.liquid %}
+    {% include tags.liquid date=page.date tags=page.tags %}
+    <div class="column content">
+	{{ content }}
+    </div>
+    <div class="column">
+	{% include navigation_buttons.liquid %}
     </div>
-</body>
+</div>
diff --git a/_layouts/tag_archive.liquid b/_layouts/tag_archive.liquid
index 1c90057..7411fb7 100644
--- a/_layouts/tag_archive.liquid
+++ b/_layouts/tag_archive.liquid
@@ -1,23 +1,11 @@
-{% include header.liquid %}
+---
+layout: page
+---
 
-<body>
-    <div id="page-container" class="columns">
-	<div class="column is-offset-one-fifth is-three-fifths">
-	    <div class="columns is-three-fifths">
-		{% include banner.liquid %}
-	    </div>
-	    <div>
-		<h1>
-		    {{ page.title }}
-		</h1>
-	    </div>
-	    <div class="columns is-three-fifths">
-		<div class="column">
-		    {% for post in page.posts %}
-			{% include post_summary.liquid post=post %}
-		    {% endfor %}
-		</div>
-	    </div>
-	</div>
+<div class="columns is-three-fifths">
+    <div class="column">
+	{% for post in page.posts %}
+	    {% include post_summary.liquid post=post %}
+	{% endfor %}
     </div>
-</body>
+</div>
diff --git a/archive.liquid b/archive.liquid
index ef2ff34..3e50bbf 100644
--- a/archive.liquid
+++ b/archive.liquid
@@ -1,40 +1,22 @@
 ---
-layout: default
+layout: page
 permalink: /archive.html
 ---
 
-<div class="column">
-    <h1>
-	{{ site.data[site.active_lang].strings.global.archive }}
-    </h1>
-    {% for post in site.posts %}
-	<div class="column">
-	    {% unless post.next %}
+<h1>
+    {{ site.data[site.active_lang].strings.global.archive }}
+</h1>
+{% for post in site.posts %}
+    <div class="column">
+	{% unless post.next %}
+	    <h2>{{ post.date | date: '%Y' }}</h2>
+{% else %}
+	    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
+	    {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
+	    {% if year != nyear %}
 		<h2>{{ post.date | date: '%Y' }}</h2>
-    {% else %}
-		{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
-		{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
-		{% if year != nyear %}
-		    <h2>{{ post.date | date: '%Y' }}</h2>
-		{% endif %}
-	    {% endunless %}	
-	    <div class="columns">
-		<div class="archive-post-date column is-2">
-		    <p class="archive-post-date">
-			<svg class="svg-icon-body" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-event-fill" viewBox="0 0 16 16">
-			    -			<path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/>
-			    -		    </svg>
-			{% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}{{ post.date | date: "%d-%m-%Y" }}
-		    </p>
-		</div>
-		<div class="column">
-		    <a class="archive-post-title" href="{{ site.baseurl }}{{post.url }}">
-			{{ post.title }}
-		    </a>
-		</div>
-	    </div>
-	</div>
-    {% endfor %}
-</div>
-
-
+	    {% endif %}
+	{% endunless %}	
+	{% include archived_post.liquid %}
+    </div>
+{% endfor %}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 2e8b9be..c2338c2 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -156,10 +156,7 @@
 	--bulma-info-s: 30%;
 	--bulma-info-l: 55%;
 	--bulma-body-color: #FBF9FF;
-    }
-
-    body {
-	background: #2F2F37;
+	--bulma-body-background-color: #2F2F37;
     }
 
     .page-title {
@@ -254,6 +251,12 @@
 	color: #668eb0;
     }
 
+    .tabs {
+	--bulma-tabs-border-bottom-color: #4D9DE0;
+	--bulma-tabs-link-color: #4D9DE0;
+	--bulma-tabs-boxed-link-hover-background-color: #668eb0;
+    }
+
     a.footer-url {
 	color: #F4FAFF;
     }
@@ -304,6 +307,22 @@
     }
 }
 
+@media (width <= 1000px) {
+    .page-container {
+	flex: none;
+	width: 100%;
+	margin-left: 1rem !important;
+    }
+}
+
+@media (width > 1000px) {
+    .page-container {
+	flex: none;
+	width: 60%;
+	margin-inline-start: 20%;
+    }
+}
+
 .sr-only {
     clip: rect(0,0,0,0);
     border-width:0;
@@ -343,11 +362,6 @@ p.archive-post-date {
     margin-bottom: 0rem;
 }
 
-#page-container {
-    position: relative;
-    min-height: 100vh;
-}
-
 h1 {
     font-size: 2rem;
 }