Add light theme

10 files changed, 364 insertions, 250 deletions

diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index 6eae99f..d7d8900 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -1,5 +1,5 @@
-<footer class="footer has-background-primary">
-    <div class="has-text-centered">
+<footer class="has-background-dark 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 }}
 	    <a class="footer-url" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en">CC BY-NC-ND</a>
diff --git a/_includes/index.liquid b/_includes/index.liquid
index 1fa5954..2e1d2fc 100644
--- a/_includes/index.liquid
+++ b/_includes/index.liquid
@@ -1,14 +1,16 @@
 <div class="column">
     {% for post in paginator.posts %}
 	<div class="columns">
-	    <div class="column date is-one-third">
-		{% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}
-		{{ site.data[site.active_lang].strings.date[month]}} {{ post.date | date: "%e, %Y" }}
-	    </div>
-	    <div class="column">
-		<a class="index-content" href="{{ site.baseurl }}{{post.url }}">
-		    {{ post.title }}
-		</a>
+	    <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>
 		{{ post.excerpt }}
 	    </div>
 	</div>
diff --git a/_includes/navigation.liquid b/_includes/navigation.liquid
index 2a6c915..2fc9b49 100644
--- a/_includes/navigation.liquid
+++ b/_includes/navigation.liquid
@@ -1,9 +1,4 @@
 <div class="column sidebar">
-    <div class="column">
-	<h1>
-	   {{ site.data[site.active_lang].strings.global.navigation }} 
-	</h1>
-    </div>
     <div class="column sidebar-element">
 	<a href="{{ site.baseurl }}/now">
 	    {{ site.data[site.active_lang].strings.global.now }}
@@ -34,4 +29,9 @@
 	    {{ site.data[site.active_lang].strings.global.source_code }}
 	</a>
     </div>
+    <div class="column sidebar-element">
+	<a href="{{ site.baseurl }}/feed.xml">
+	    <img src="{{ site.baseurl }}/assets/images/rss_feed_icon.svg" width="15" height="15"> RSS
+	</a>
+    </div>
 </div>
diff --git a/_includes/navigation_buttons.liquid b/_includes/navigation_buttons.liquid
index 8a7d96b..5ac3719 100644
--- a/_includes/navigation_buttons.liquid
+++ b/_includes/navigation_buttons.liquid
@@ -1,17 +1,19 @@
-<div class="column mt-2">
-    <div class="flex-container"> 
+<div class="columns mt-2">
+    <div class="column">
 	<div class="navigation-element">
 	    {% if page.next %}
 		<a class="button is-info" rel="next" href="{{ page.next.url | relative_url }}">
 		    {{ site.data[site.active_lang].strings.post.next }}
-	    </a>
+		</a>
 	    {% endif %}
 	</div>
+    </div>
+    <div class="column is-offset-9">
 	<div class="navigation-element end-justified">
 	    {% if page.previous %}
 		<a class="button is-info" rel="prev" href="{{ page.previous.url | relative_url }}">
 		    {{ site.data[site.active_lang].strings.post.previous }}
-	    </a>
+		</a>
 	    {% endif %}
 	</div>
     </div>
diff --git a/_includes/sidenav.liquid b/_includes/sidenav.liquid
index a27bed8..c87091e 100644
--- a/_includes/sidenav.liquid
+++ b/_includes/sidenav.liquid
@@ -1,10 +1,6 @@
-<div class="column mt-6">
+<div class="column mt-2">
+    {% include navigation.liquid %}
     <div class="column">
 	{% include language_select_button.liquid %}
-	<a href="{{ site.baseurl }}/feed.xml">
-	    <img src="{{ site.baseurl }}/assets/images/rss_feed_icon.svg" width="40" height="40">
-	</a>
     </div>
-    {% include navigation.liquid %}
-    {% include recent_posts.liquid %}
 </div>
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index bfeb003..81bba05 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -1,18 +1,20 @@
 {% include header.liquid %}
 
 <body>
-    {% include banner.liquid %}
+    <div id="page-container">
+	{% include banner.liquid %}
 
-    <div class="columns">
-	<div class="column mt-6 is-offset-2 is-6 content">
-	  {{ content }}
+	<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">
+		{{ content }}
+	    </div>
 	</div>
-	<div class="column is-2">
-	    {% include sidenav.liquid %}
+	<div class="columns mt-6 is-gapless">
+	    {% include footer.liquid %}
 	</div>
     </div>
-    
-    <div class="column">
-	{% include footer.liquid %}
-    </div>
 </body>
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
index 016b610..ef61f0d 100644
--- a/_layouts/post.liquid
+++ b/_layouts/post.liquid
@@ -1,30 +1,31 @@
 {% include header.liquid %}
 
 <body>
-    {% include banner.liquid %}
+    <div id="page-container">
+	{% include banner.liquid %}
 
-    <div class="columns">
-	<div class="column mt-6 is-offset-2 is-6">
-	    <div class="column mb-2 content">
-		<h1>
-		    <a href="{{ site.baseurl}}{{ page.url }}">
-			{{ page.title }}
-		    </a>
-		</h1>
-		<h2>
-		    {% capture month%}{{ page.date |  date: "%b" }}{% endcapture %}
-		    {{ site.data[site.active_lang].strings.date[month]}} {{ page.date | date: "%d, %Y" }}
-		</h2>
-		{{ content }}
+	<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">
+		    <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>
+		{% include navigation_buttons.liquid %}
 	    </div>
-	    {% include navigation_buttons.liquid %}
 	</div>
-	<div class="column is-2">
-	    {% include sidenav.liquid %}
+	<div class="columns mt-6 is-gapless">
+	    {% include footer.liquid %}
 	</div>
     </div>
-
-    <div class="column">
-	{% include footer.liquid %}
-    </div>
 </body>
diff --git a/_posts/es/2023-08-31-host_jekyll_apache.md b/_posts/es/2023-08-31-host_jekyll_apache.md
index f512ebd..62eec05 100644
--- a/_posts/es/2023-08-31-host_jekyll_apache.md
+++ b/_posts/es/2023-08-31-host_jekyll_apache.md
@@ -1,10 +1,11 @@
 ---
 layout: post
-title: Cómo hostear tu sitio de Jekyll en Apache2
+title: "Cómo hostear tu sitio de Jekyll en Apache2"
 lang: es
-date: 2023-08-31 17:37:00 +0000
+date: 2023-08-31
 tag: Tutoriales
 ---
+
 Pues finalmente tengo un blog personal justo como lo quiero. No diría que fue tardado (me tomó un par de días) o que mejor hubiera
 usado alguna alternativa más compleja, como WordPress. Pero he de reconocer que no fue tan sencillo cómo lo esperaba. Fuera de las
 personalizaciones que hice al tema que utilizo, creo que el mayor responsable de mi sufrimiento fue apache.
diff --git a/_posts/es/2024-04-30-configuring-dape.md b/_posts/es/2024-04-30-configuring-dape.md
index 3ac8ea4..3e601d9 100644
--- a/_posts/es/2024-04-30-configuring-dape.md
+++ b/_posts/es/2024-04-30-configuring-dape.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: "Configurando Dape: el nuevo cliente DAP para emacs"
-lang: en
+lang: es
 date: 2024-04-30
 tag: Tutoriales
 ---
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 02a94c9..8897de9 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,243 +1,353 @@
-
-@media screen and (min-width: 1280px) {
-    .ml-18 {
-	margin-left: 9rem;
-    }
-
-    .mr-18 {
-	margin-right: 9rem;
-    }
-
-    :not(.sidebar-element) li {
-	font-size: 20px;
-	line-height: 1.5em !important;
-    }
-
-    p {
-	font-size: 20px;
-    }
-}
-
-.flex-container {
-    display: flex;
-    flex-flow: row;
-}
-
-.navigation-element {
-    display: flex;
-    flex: 1 100px;
-}
-
-.end-justified {
-    justify-content: end;
-}
-
-.pagination {
-    font-size: 18px;
-}
-
-@media(prefers-color-scheme: dark) {
-    :root {
-	--bulma-primary-h: 24deg;
-	--bulma-primary-s: 92%;
-	--bulma-primary-l: 47%;
-    }
-    
-    .is-info {
-	background: #e8630a !important;
-	color: #e7eaf6;
-    }
-    
-    .banner {
-	color: #e7eaf6 !important;
-	background: #e8630a;
-    }
-
-    .sidebar {
-	border: 1px solid #3e4a61;
-	border-radius: 4px;
-	background: black;
-	justify-content: space-between;
+/* 
+   @media screen and (min-width: 1280px) {
+   .ml-18 {
+   margin-left: 9rem;
+   }
+
+   .mr-18 {
+   margin-right: 9rem;
+   }
+
+   :not(.sidebar-element) li {
+   font-size: 20px;
+   line-height: 1.5em !important;
+   }
+
+   p {
+   font-size: 20px;
+   }
+   }
+
+   .flex-container {
+   display: flex;
+   flex-flow: row;
+   }
+
+   .navigation-element {
+   display: flex;
+   flex: 1 100px;
+   }
+
+   .end-justified {
+   justify-content: end;
+   }
+
+   .pagination {
+   font-size: 18px;
+   }
+
+   @media(prefers-color-scheme: dark) {
+   :root {
+   --bulma-primary-h: 24deg;
+   --bulma-primary-s: 92%;
+   --bulma-primary-l: 47%;
+   }
+   
+   .is-info {
+   background: #e8630a !important;
+   color: #e7eaf6;
+   }
+   
+   .banner {
+   color: #e7eaf6 !important;
+   background: #e8630a;
+   }
+
+   .sidebar {
+   border: 1px solid #3e4a61;
+   border-radius: 4px;
+   background: black;
+   justify-content: space-between;
+   }
+
+   .sidebar-element {
+   border-bottom: 1px solid #e8630a;
+   color: #ff5722;
+   }
+
+   .content {
+   border: 1px solid #3e4a61;
+   border-radius: 4px;
+   background: black;
+   }
+
+   .date {
+   color: #f5f0f0;
+   text-align: right;
+   font-style: italic;
+   }
+
+   .archive-date {
+   color: #f5f0f0;
+   text-align: left;
+   font-style: italic;
+   font-size: 21px;
+   }
+
+   a {
+   color: #e8630a;
+   }
+
+   h1 {
+   color: #ff5722 !important;
+   }
+
+   h2 {
+   color: #ff895d !important;
+   }
+
+   h3 {
+   color: #ff894c !important;
+   }
+
+   pre {
+   border: 1px #3e4a61 solid;
+   border-radius: 4px;
+   }
+
+   li::marker {
+   color: #dc2f2f;
+   }
+
+   :not(.sidebar-element) li {
+   color: #fafafa;
+   }
+   
+   p {
+   color: #fafafa;
+   }
+   
+   body {
+   background: #101826;
+   font-family: "Inter", sans-serif !important;
+   margin: 0;
+   }
+   }
+
+   @media(prefers-color-scheme: light) {
+   :root {
+   --bulma-primary-h: 216deg;
+   --bulma-primary-s: 43%;
+   --bulma-primary-l: 38%;
+   }
+   
+   .is-info {
+   background: #38598b !important;
+   color: #e7eaf6;
+   }
+   
+   .banner {
+   color: #ffffff !important;
+   }
+
+   .sidebar {
+   border: 1px solid #dadff1;
+   border-radius: 4px;
+   background: white;
+   justify-content: space-between;
+   }
+
+   .content {
+   border: 1px solid #dadff1;
+   border-radius: 4px;
+   background: white;
+   }
+
+   .sidebar-element {
+   border-bottom: 1px solid #38598b;
+   color: #113f67;
+   }
+
+   .date {
+   color: #7b8894;
+   text-align: right;
+   font-style: italic;
+   }
+
+   .archive-date {
+   color: #7b8894;
+   text-align: left;
+   font-style: italic;
+   font-size: 21px;
+   }
+
+   .caption {
+   color: #7b8894;
+   font-style: italic;
+   font-size: 18px;
+   }
+
+   a {
+   color: #38598b;
+   }
+
+   h1 {
+   color: #113f67 !important;
+   }
+
+   h2 {
+   color: #155084 !important;
+   }
+
+   h3 {
+   color: #285f8a !important;
+   }
+
+   pre {
+   border: 1px #dadff1 solid;
+   border-radius: 4px;
+   }
+
+   li::marker {
+   color: #155084;
+   }
+
+   :not(.sidebar-element) li {
+   color: #2a2438;
+   }
+
+   p {
+   color: #2a2438;
+   }
+
+   body {
+   font-family: "Inter", sans-serif !important;
+   margin: 0;
+   background: #f8f8f8;
+   }
+   }
+
+   .footer-content {
+   color: white !important;
+   }
+
+   .footer-url {
+   color: white;
+   font-weight: bold;
+   }
+
+   .pull-left {
+   text-align: left;
+   font-size: 21px;
+   }
+
+   .index-content {
+   font-size: 20px;
+   }
+
+   :not(.sidebar-element) li {
+   list-style-type: disc;
+   margin-top: .7em;
+   line-height: 1em;
+   } */
+@media(prefers-color-scheme: light) {
+    .content {
+	border: 1px solid #dadff1;
+	background: white;
     }
 
     .sidebar-element {
-	border-bottom: 1px solid #e8630a;
-	color: #ff5722;
+	border-bottom: 1px solid #241f314c;
     }
 
-    .content {
-	border: 1px solid #3e4a61;
-	border-radius: 4px;
-	background: black;
+    .sidebar {    
+	border: 1px solid #dadff1;
+	border-radius: 1px;
+	background: white;
+	color: black;
+	justify-content: space-between;
     }
 
     .date {
-	color: #f5f0f0;
-	text-align: right;
-	font-style: italic;
-    }
-
-    .archive-date {
-	color: #f5f0f0;
-	text-align: left;
-	font-style: italic;
-	font-size: 21px;
+	color: #241f31;
     }
 
-    a {
-	color: #e8630a;
+    .sidebar a {
+	color: #241f31;
     }
 
-    h1 {
-	color: #ff5722 !important;
-    }
-
-    h2 {
-	color: #ff895d !important;
+    .sidebar a:hover {
+	color: #ed333b;
     }
 
-    h3 {
-	color: #ff894c !important;
-    }
-
-    pre {
-	border: 1px #3e4a61 solid;
-	border-radius: 4px;
-    }
-
-    li::marker {
-	color: #dc2f2f;
-    }
-
-    :not(.sidebar-element) li {
-	color: #fafafa;
-    }
-    
-    p {
-	color: #fafafa;
-    }
-    
-    body {
-	background: #101826;
-	font-family: "Inter", sans-serif !important;
-	margin: 0;
-    }
-}
-
-@media(prefers-color-scheme: light) {
-    :root {
-	--bulma-primary-h: 216deg;
-	--bulma-primary-s: 43%;
-	--bulma-primary-l: 38%;
-    }
-    
-    .is-info {
-	background: #38598b !important;
-	color: #e7eaf6;
-    }
-    
     .banner {
 	color: #ffffff !important;
     }
 
-    .sidebar {
-	border: 1px solid #dadff1;
-	border-radius: 4px;
-	background: white;
-	justify-content: space-between;
-    }
-
-    .content {
-	border: 1px solid #dadff1;
-	border-radius: 4px;
-	background: white;
-    }
-
-    .sidebar-element {
-	border-bottom: 1px solid #38598b;
-	color: #113f67;
+    .post-summary {
+	border-bottom: solid 1px;
+	color: #e01b244c;
     }
 
-    .date {
-	color: #7b8894;
-	text-align: right;
-	font-style: italic;
+    :root {
+	--bulma-primary-h: 357deg;
+	--bulma-primary-s: 84%;
+	--bulma-primary-l: 56%;
     }
 
-    .archive-date {
-	color: #7b8894;
-	text-align: left;
-	font-style: italic;
-	font-size: 21px;
+    html {
+	background: #f8f8f8;
     }
 
-    .caption {
-	color: #7b8894;
-	font-style: italic;
-	font-size: 18px;
+    p {
+	color: #241f31;
+	font-size: 1.3rem;
     }
 
     a {
-	color: #38598b;
+	color: #C93530;
     }
 
     h1 {
-	color: #113f67 !important;
+	color: #f66151 !important;
     }
 
     h2 {
-	color: #155084 !important;
+	color: #e66100 !important;
     }
 
-    h3 {
-	color: #285f8a !important;
+    strong {
+	color: #e66100;
     }
 
-    pre {
-	border: 1px #dadff1 solid;
-	border-radius: 4px;
+    .footer p {
+	color: white;
     }
 
-    li::marker {
-	color: #155084;
-    }
-
-    :not(.sidebar-element) li {
-	color: #2a2438;
-    }
-
-    p {
-	color: #2a2438;
-    }
-
-    
-    body {
-	font-family: "Inter", sans-serif !important;
-	margin: 0;
-	background: #f3f3f3;
+    .footer a {
+	color: #e66100;
     }
 }
 
-.footer-content {
-    color: white !important;
+.content {
+    border-radius: 1px;
+    height: 100%;
 }
 
-.footer-url {
-    color: white;
-    font-weight: bold;
+.sidebar-column {
+    padding-left: 20px;
 }
 
-.pull-left {
+.date {
     text-align: left;
-    font-size: 21px;
+    font-style: italic;
+    font-size: 1.2rem;
+    padding-bottom: 10px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
+
 }
 
-.index-content {
-    font-size: 20px;
+.content-wrap {
+    padding-bottom: 60px;
 }
 
-:not(.sidebar-element) li {
-    list-style-type: disc;
-    margin-top: .7em;
-    line-height: 1em;
+#page-container {
+    position: relative;
+    min-height: 100vh;
 }