Add dark mode logos (PR #27)

Author: iglosiggio

_config.yml

@@ -26,9 +26,6 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://comcom.dc.uba.ar" # the base hostname & protocol for your site, e.g. http://example.com
 
-logo: "static/img/logo.svg"
-logo-horizontal: "static/img/logo-horizontal.svg"
-
 instagram_username: comcom.exactas.uba
 github_username:  comcomUBA
 

_includes/headerDefault.html

@@ -2,8 +2,8 @@
 {%- assign default_paths = site.pages | map: "path" -%}
 {%- assign page_paths = site.header_pages | default: default_paths -%}
 
-<a class="site-title" rel="author" href="{{ "/" | relative_url }}">
-    <img src="/static/img/logo-horizontal.min.svg" height="50px" />
+  <a class="site-title" rel="author" href="{{ "/" | relative_url }}">
+    <div class="site-header-logo"></div>
   </a>
 
   {%- if page_paths -%}

_includes/headerTaller.html

@@ -1,8 +1,8 @@
 <a class="site-title" rel="author" href="{{ "/" | relative_url }}">
-    <img src="/static/img/logo.min.svg" height="50px" />
-  </a>
+  <div class="taller-header-logo"></div>
+</a>
 <a class="taller-title" rel="author" href="{{ "/talleres/" | relative_url | append: page.tallerid }}/index">
-<img src="/static/img/{{page.tallerid}}/full-logo.min.svg" height="50px" />
+  <img src="/static/img/{{page.tallerid}}/full-logo.min.svg" height="50px" />
 </a>
 
 <nav class="site-nav taller-nav">
@@ -20,4 +20,4 @@
         <a class="page-link" href="{{ site.feedback_url }}">¡Danos tu opinión!</a>
       {% endif %}
     </div>
-  </nav>
+  </nav>

_talleres/linux/index.md

@@ -2,10 +2,9 @@
 layout: default
 title: Taller de Linux
 permalink: /talleres/linux/index
-logo: taller-linux.min.svg
 edicion: "2019-1c"
 tallerid: linux
 tags: index
 ---
 
-Esta página está en construcción
+Esta página está en construcción

css/main.css

@@ -1,34 +1,35 @@
 :root{
-  
   --shadow-color: var(--background-color2);
   --border-color: var(--background-color2);
 }
 
-
-
 /* Colores en variables + dark mode */
 html { 
-    --light-text-color: rgb(72, 72, 74);
-    --link-color: rgb(0, 112, 201);
-    --background-color: rgb(255, 255, 255);
-    --main-text-color: rgb(51, 51, 51);
-    --background-color2: rgb(255, 255, 255);
-    --background-color3 : #fff;
-    --logo: #231f20;
+  --light-text-color: rgb(72, 72, 74);
+  --link-color: rgb(0, 112, 201);
+  --background-color: rgb(255, 255, 255);
+  --main-text-color: rgb(51, 51, 51);
+  --background-color2: rgb(255, 255, 255);
+  --background-color3 : #fff;
+  --logo: #231f20;
+  --site-logo-url: url("/static/img/comcom/logo-horizontal.min.svg");
+  --taller-logo-url: url("/static/img/comcom/logo.min.svg");
 }
 
 
 
 @media (prefers-color-scheme: dark) {
-	html {
-      --light-text-color: rgb(199, 199, 204);
-      --link-color: rgb(100, 210, 255);
-      --background-color: rgb(28, 28, 30);
-      --background-color2: rgb(15, 15, 20);
-      --main-text-color: rgb(229, 229, 234);
-      --background-color3: #b4b4b4;
-      --logo: #b4b4b4;
-	}
+  html {
+    --light-text-color: rgb(199, 199, 204);
+    --link-color: rgb(100, 210, 255);
+    --background-color: rgb(28, 28, 30);
+    --background-color2: rgb(15, 15, 20);
+    --main-text-color: rgb(229, 229, 234);
+    --background-color3: #b4b4b4;
+    --logo: #b4b4b4;
+    --site-logo-url: url("/static/img/mocmoc/logo-horizontal.min.svg");
+    --taller-logo-url: url("/static/img/mocmoc/logo.min.svg");
+  }
 }
 
 /** Reset some basic elements */
@@ -324,3 +325,23 @@ footer {
 .gallery a:hover {
   box-shadow: 2px 2px 2px 0 var(--shadow-color);
 }
+
+.site-header-logo {
+  background-image: var(--site-logo-url);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  display: inline-block;
+  width: 270px;
+  height: 50px;
+}
+
+.taller-header-logo {
+  background-image: var(--taller-logo-url);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  display: inline-block;
+  width: 70px;
+  height: 50px;
+}