Improve theme

6 files changed, 379 insertions, 156 deletions

diff --git a/_includes/banner.liquid b/_includes/banner.liquid
index 64a5346..9964039 100644
--- a/_includes/banner.liquid
+++ b/_includes/banner.liquid
@@ -1,9 +1,43 @@
-<section class="hero is-small  third-color">
-    <div class="hero-body has-background-primary">
-	{% if site.lang != "es" %}
-	<a class="title banner" href="/{{ site.lang }}">{{ site.title }}</a>
-	{% else %}
-	<a class="title banner" href="/">{{ site.title }}</a>
-	{% endif %}
+<nav class="navbar has-background-primary">
+    <div class="container">
+	<div id="navMenu" class="navbar-menu">
+	    <div class="navbar-start">
+		{% if site.lang != "es" %}
+		    <a class="navigation page-title" href="/{{ site.lang }}">{{ site.title }}</a>
+		{% else %}
+		    <a class="navigation page-title" href="/">{{ site.title }}</a>
+		{% endif %}
+		<a href="{{ site.baseurl }}/now" class="navigation">
+		    {{ site.data[site.active_lang].strings.global.now }}
+		</a>
+		<a href="{{ site.baseurl }}/about" class="navigation">
+		    {{ site.data[site.active_lang].strings.global.about }}
+		</a>
+		<a href="{{ site.baseurl }}/about_me" class="navigation">
+		    {{ site.data[site.active_lang].strings.global.about_me }}
+		</a>
+		<a href="{{ site.baseurl }}/archive" class="navigation">
+		    {{ site.data[site.active_lang].strings.global.archive }}
+		</a>
+		<a href="{{ site.baseurl }}/categories" class="navigation">
+		    {{ site.data[site.active_lang].strings.global.categories }}
+		</a>
+	    </div>
+
+	    <div class="navbar-end">
+		<div class="navbar-item">
+		    <a href="{{ site.base_url }}/feed.xml">
+			<span class="sr-only">Subscribe</span>
+			<svg class="svg-icon mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			    <title>RSS</title>
+			    <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
+			</svg>
+		    </a>
+		    <a href="https://git.silosneeded.com/cgit/blog.git" class="button is-link">
+			{{ site.data[site.active_lang].strings.global.source_code }}
+		    </a>
+		</div>
+	    </div>
+	</div>
     </div>
-</section>
+</nav>
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index d7d8900..a676e26 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -1,4 +1,4 @@
-<footer class="has-background-dark footer column">
+<footer class="footer column">
     <div class="pt-3 has-text-centered">
 	<p class="footer-content">
 	    <b>{{ site.title }}</b> {{ site.data[site.active_lang].strings.global.under }}
diff --git a/_includes/index.liquid b/_includes/index.liquid
index 2e1d2fc..45bb7ac 100644
--- a/_includes/index.liquid
+++ b/_includes/index.liquid
@@ -1,16 +1,30 @@
 <div class="column">
     {% for post in paginator.posts %}
-	<div class="columns">
-	    <div class="column post-summary">
-		<h2>
-		    <a class="index-content" href="{{ site.baseurl }}{{post.url }}">
-			{{ post.title }}
-		    </a>
-		</h2>
-		<div class="date">
-		    {% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}
-		    {{ site.data[site.active_lang].strings.date[month]}} {{ post.date | date: "%e, %Y" }}
+	<div class="column post-summary">
+	    <div class="column">
+		<a class="index-post-title" href="{{ site.baseurl }}{{post.url }}">
+		    {{ post.title }}
+		</a>
+	    </div>
+	    <div class="column">
+		<div class="columns">
+		    <div class="column is-one-fifth">
+			{% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}{{ post.date | date: "%d-%m-%Y" }}
+			<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>
+		    </div>
+		    <div class="column">
+			{% for tag in post.tags %}
+			    {{ tag }}{% unless forloop.last %},{% endunless %}
+			{% endfor %}
+			<svg class="svg-icon-body" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tag-fill" viewBox="0 0 16 16">
+			    <path d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+			</svg>
+		    </div>
 		</div>
+	    </div>
+	    <div class="column">
 		{{ post.excerpt }}
 	    </div>
 	</div>
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index 81bba05..99c27d4 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -4,12 +4,8 @@
     <div id="page-container">
 	{% include banner.liquid %}
 
-	<div class="columns content-wrap">
-	    <div class="column is-2 mt-4 sidebar-column">
-		{% include sidenav.liquid %}
-	    </div>
-
-	    <div class="column mt-6 is-8 content">
+	<div class="columns mt-2 is-mobile">
+	    <div class="column is-three-fifths is-offset-one-fifth">
 		{{ content }}
 	    </div>
 	</div>
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
index ef61f0d..c006e72 100644
--- a/_layouts/post.liquid
+++ b/_layouts/post.liquid
@@ -4,24 +4,37 @@
     <div id="page-container">
 	{% include banner.liquid %}
 
-	<div class="columns content-wrap">
-	    <div class="column is-2 mt-4 sidebar-column">
-		{% include sidenav.liquid %}
-	    </div>
-	    <div class="column mt-6 is-8 content">
-		<div class="column mb-2">
+	<div class="columns mt-2 is-mobile">
+	    <div class="column is-three-fifths is-offset-one-fifth">
+		<div class="column">
 		    <h1>
 			<a href="{{ site.baseurl}}{{ page.url }}">
 			    {{ page.title }}
 			</a>
 		    </h1>
-		    <p class="date">
-			{% capture month%}{{ page.date |  date: "%b" }}{% endcapture %}
-			{{ site.data[site.active_lang].strings.date[month]}} {{ page.date | date: "%d, %Y" }}
-			<p>
-			    {{ content }}
+		    <div class="columns">
+			<div class="column is-one-fifth">
+			    {% capture month%}{{ page.date |  date: "%b" }}{% endcapture %}{{ page.date | date: "%d-%m-%Y" }}
+			    <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>
+			</div>
+			<div class="column">
+			    {% for tag in page.tags %}
+				{{ tag }}{% unless forloop.last %},{% endunless %}
+			    {% endfor %}
+			    <svg class="svg-icon-body" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tag-fill" viewBox="0 0 16 16">
+				<path d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+			    </svg>
+			</div>
+		    </div>
+		</div>
+		<div class="column content">
+		    {{ content }}
+		</div>
+		<div class="column">
+		    {% include navigation_buttons.liquid %}
 		</div>
-		{% include navigation_buttons.liquid %}
 	    </div>
 	</div>
 	<div class="columns mt-6 is-gapless">
diff --git a/assets/css/styles.css b/assets/css/styles.css
index a7c9f07..e0b9237 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -171,11 +171,7 @@
    font-size: 21px;
    }
 
-   .caption {
-   color: #7b8894;
-   font-style: italic;
-   font-size: 18px;
-   }
+   
 
    a {
    color: #38598b;
@@ -240,181 +236,329 @@
    margin-top: .7em;
    line-height: 1em;
    } */
-@media(prefers-color-scheme: dark) {
-    .content {
-	border: 1px solid #5e5c64;
-	background: black;
-    }
+/* @media(prefers-color-scheme: dark) {
+   .content {
+   border: 1px solid #5e5c64;
+   background: black;
+   }
 
-    .sidebar-element {
-	border-bottom: 1px solid #fcf6f6;
-    }
+   .sidebar-element {
+   border-bottom: 1px solid #fcf6f6;
+   }
 
-    .sidebar {    
-	border: 1px solid #5e5c64;
-	border-radius: 1px;
-	background: black;
-	color: white;
-	justify-content: space-between;
-    }
+   .sidebar {    
+   border: 1px solid #5e5c64;
+   border-radius: 1px;
+   background: black;
+   color: white;
+   justify-content: space-between;
+   }
 
-    .date {
-	color: #f6f5f4;
-    }
+   .date {
+   color: #f6f5f4;
+   }
 
-    .sidebar a {
-	color: #f6f5f4;
-    }
+   .sidebar a {
+   color: #f6f5f4;
+   }
 
-    .sidebar a:hover {
-	color: #1c71d8;
-    }
+   .sidebar a:hover {
+   color: #1c71d8;
+   }
 
-    .banner {
-	color: #ffffff !important;
-    }
+   .banner {
+   color: #ffffff !important;
+   }
 
-    .post-summary {
-	border-bottom: solid 1px;
-	color: #1760cd;
-    }
+   .post-summary {
+   border-bottom: solid 1px;
+   color: #1760cd;
+   }
 
-    :root {
-	--bulma-primary-h: 219deg;
-	--bulma-primary-l: 50%;
-	--bulma-info-h: 253deg;
-	--bulma-info-s: 79%;
-	--bulma-info-l: 56%;
-    }
+   :root {
+   --bulma-primary-h: 219deg;
+   --bulma-primary-l: 50%;
+   --bulma-info-h: 253deg;
+   --bulma-info-s: 79%;
+   --bulma-info-l: 56%;
+   }
 
-    html {
-	background: #1f1e24;
-    }
+   html {
+   background: #1f1e24;
+   }
 
-    p {
-	color: #fcf6f6;
-	font-size: 1.5rem;
+   p {
+   color: #fcf6f6;
+   font-size: 1.5rem;
+   }
+
+   a {
+   color: #2685e6;
+   }
+
+   h1 {
+   color: #3c8aff !important;
+   }
+
+   h2 {
+   color: #3833d4 !important;
+   }
+
+   strong {
+   color: #3833d4;
+   }
+
+   .footer p {
+   color: white;
+   }
+
+   .footer a {
+   color: #3833d4;
+   }
+   }
+
+   @media(prefers-color-scheme: light) {
+   .content {
+   border: 1px solid #dadff1;
+   background: white;
+   }
+
+   .sidebar-element {
+   border-bottom: 1px solid #241f314c;
+   }
+
+   .sidebar {    
+   border: 1px solid #dadff1;
+   border-radius: 1px;
+   background: white;
+   color: black;
+   justify-content: space-between;
+   }
+
+   .date {
+   color: #241f31;
+   }
+
+   .sidebar a {
+   color: #241f31;
+   }
+
+   .sidebar a:hover {
+   color: #ed333b;
+   }
+
+   .banner {
+   color: #ffffff !important;
+   }
+
+   .post-summary {
+   border-bottom: solid 1px;
+   color: #e01b244c;
+   }
+
+   :root {
+   --bulma-primary-h: 357deg;
+   --bulma-primary-s: 84%;
+   --bulma-primary-l: 56%;
+   --bulma-info-h: 5deg;
+   }
+
+   html {
+   background: #f8f8f8;
+   }
+
+   p {
+   color: #241f31;
+   font-size: 1.5rem;
+   }
+
+   a {
+   color: #C93530;
+   }
+
+   h1 {
+   color: #f66151 !important;
+   }
+
+   h2 {
+   color: #e66100 !important;
+   }
+
+   strong {
+   color: #e66100;
+   }
+
+   .footer p {
+   color: white;
+   }
+
+   .footer a {
+   color: #e66100;
+   }
+   }
+
+   .content {
+   border-radius: 1px;
+   height: 100%;
+   }
+
+   .sidebar-column {
+   padding-left: 20px;
+   }
+
+   .date {
+   text-align: left;
+   font-style: italic;
+   font-size: 1.2rem;
+   padding-bottom: 10px;
+   }
+
+   .footer {
+   position: absolute;
+   bottom: 0;
+   width: 100%;
+   height: 60px;
+
+   }
+
+   .content-wrap {
+   padding-bottom: 60px;
+   }
+ */
+@media(prefers-color-scheme: light) {
+    :root {
+	--bulma-primary-h: 213deg;
+	--bulma-primary-s: 17%;
+	--bulma-info-h: 286deg;
+	--bulma-info-s: 66%;
+	--bulma-info-l: 35%;
     }
 
-    a {
-	color: #2685e6;
+    body {
+	background: #F4FAFF;
     }
 
-    h1 {
-	color: #3c8aff !important;
+    .navigation {
+	align-items: center;
+	display: flex;
+	flex-grow: 0;
+	flex-shrink: 0;
+	line-height: 1.5;
+	padding: .5rem .75rem;
+	position: relative;
+	color: #F4FAFF;
     }
 
-    h2 {
-	color: #3833d4 !important;
+    .navigation:hover {
+	color: #43AA8B;
     }
 
-    strong {
-	color: #3833d4;
+    .svg-icon:hover {
+	fill: #43AA8B;
     }
 
-    .footer p {
-	color: white;
+    .is-info-button {
+	color: #F4FAFF;
     }
 
-    .footer a {
-	color: #3833d4;
+    a.svg {
+	position: relative;
+	display: inline-block; 
+    }
+    
+    a.svg:after {
+	content: ""; 
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left:0;
     }
-}
 
-@media(prefers-color-scheme: light) {
-    .content {
-	border: 1px solid #dadff1;
-	background: white;
+    .rss-icon {
+	width: 100%;
+	max-width: 8rem;
+	height: auto;
     }
 
-    .sidebar-element {
-	border-bottom: 1px solid #241f314c;
+    .svg-icon-body {
+	width: .8rem;
+	height: .8rem;
+	fill: #56667A;
     }
 
-    .sidebar {    
-	border: 1px solid #dadff1;
-	border-radius: 1px;
-	background: white;
-	color: black;
-	justify-content: space-between;
+    .post-summary {
+	border-bottom: 1px solid #56667A;
     }
 
-    .date {
-	color: #241f31;
+    .footer-content {
+	color: #F4FAFF !important;
     }
 
-    .sidebar a {
-	color: #241f31;
+    .caption {
+	color: #56667A;
     }
 
-    .sidebar a:hover {
-	color: #ed333b;
+    a.footer-url {
+	color: #F4FAFF;
     }
 
-    .banner {
-	color: #ffffff !important;
+    a.footer-url:hover {
+	color: #43AA8B;
     }
 
-    .post-summary {
-	border-bottom: solid 1px;
-	color: #e01b244c;
+    a.index-post-title {
+	color: #080708;
     }
 
-    :root {
-	--bulma-primary-h: 357deg;
-	--bulma-primary-s: 84%;
-	--bulma-primary-l: 56%;
-	--bulma-info-h: 5deg;
+    a.index-post-title:hover {
+	color: #791E94;
     }
 
-    html {
-	background: #f8f8f8;
+    footer {
+	background: #56667A !important;
     }
 
     p {
-	color: #241f31;
-	font-size: 1.5rem;
+	color: #080708;
     }
 
     a {
-	color: #C93530;
+	color: #791E94;
     }
 
     h1 {
-	color: #f66151 !important;
+	color: #791E94 !important;
     }
 
     h2 {
-	color: #e66100 !important;
+	color: #43AAB8 !important;
     }
 
-    strong {
-	color: #e66100;
+    li {
+	color: #080708;
+	font-size: 1.2rem;
     }
 
-    .footer p {
-	color: white;
+    li::marker {
+	color: #43AA8B;
     }
-
-    .footer a {
-	color: #e66100;
-    }
-}
-
-.content {
-    border-radius: 1px;
-    height: 100%;
 }
 
-.sidebar-column {
-    padding-left: 20px;
+.page-title {
+    font-size: var(--bulma-size-3);
 }
 
-.date {
-    text-align: left;
-    font-style: italic;
-    font-size: 1.2rem;
-    padding-bottom: 10px;
+.sr-only {
+    clip:rect(0,0,0,0);
+    border-width:0;
+    height:1px;
+    margin:-1px;
+    overflow:hidden;
+    padding:0;
+    position:absolute;
+    white-space:nowrap;
+    width:1px
 }
 
 .footer {
@@ -422,14 +566,36 @@
     bottom: 0;
     width: 100%;
     height: 60px;
+}
 
+.svg-icon {
+    width:1.5rem;
+    height: 1.5rem;
+    fill: #F4FAFF;
 }
 
-.content-wrap {
-    padding-bottom: 60px;
+.caption {
+    font-style: italic;
+    font-size: 18px;
+}
+
+a.index-post-title {
+    font-size: 2rem;
 }
 
 #page-container {
     position: relative;
     min-height: 100vh;
 }
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.8rem;
+}
+
+p {
+    font-size: 1.2rem;
+}