cambios

asociaciondag · Sep 8, 2023 · 497031a · 497031a
1 parent d9f43e1
commit 497031a
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 32 deletions.
diff --git a/_includes/layout.vto b/_includes/layout.vto
@@ -13,15 +13,30 @@
       <a href="https://dag.gal" class="page-logo" title="Asociación Galega de Deseño">
           <img src="/img/dag.svg" inline>
       </a>
+
+      <ul class="menu">
+        <li><a href="#relatoras">Relatoras</a></li>
+        <li><a href="#programa">Programa</a></li>
+        <li><a href="#entradas">Entradas</a></li>
+      </ul>
+
+      <div class="share">
+        <a href="https://twitter.com/asociaciondag">
+          <img src="/img/x.svg" inline>
+        </a>
+        <a href="https://www.instagram.com/asociaciondag/">
+          <img src="/img/instagram.svg" inline>
+        </a>
+      </div>
   </nav>
   <!-- /HEADER -->
 
   <header class="header">
-    <div class="logo-feed is-square">
-      <img src="/img/feed/f.svg">
-      <img src="/img/feed/e.svg">
-      <img src="/img/feed/e2.svg">
-      <img src="/img/feed/d.svg">
+    <div class="logo-feed">
+      <picture>
+        <source srcset="/img/feed/rectangular.svg" media="(max-width: 599px)">
+        <img src="/img/feed/cadrado.svg">
+      </picture>
     </div>
 
     <div class="header-content">
@@ -37,7 +52,7 @@
     </div>
   </section>
 
-  <section class="timetable">
+  <section class="timetable" id="programa">
     <h2>{{ timetable.title }}</h2>
 
     {{ for day of timetable.days }}
@@ -53,14 +68,14 @@
     {{ /for }}
   </section>
 
-  <section class="tickets">
+  <section class="tickets" id="entradas">
     <div>
       <a href="{{ tickets.cta.url }}" class="button">{{ tickets.cta.text }}</a>
       {{ tickets.text |> md }}
     </div>
   </section>
 
-  <section class="speakers">
+  <section class="speakers" id="relatoras">
     <h2>{{ speakers.title }}</h2>
 
     <ul class="speakers-people">
@@ -119,12 +134,16 @@
         <address>
           {{ location.conferences.address |> md }}
         </address>
+
+        <a href="{{ location.conferences.map }}" class="location-map">{{ "Ver mapa >" |> escape}}</a>
       </div>
       <div>
         <h3>{{ location.workshops.title }}</h3>
         <address>
           {{ location.workshops.address |> md }}
         </address>
+
+        <a href="{{ location.conferences.map }}" target="_blank" class="location-map">{{ "Ver mapa >" |> escape}}</a>
       </div>
     </div>
   </section>
@@ -137,7 +156,9 @@
       <ul>
         {{ for logo of group.items }}
         <li>
-          <img src="{{ logo.img }}" alt="{{ logo.alt }}">
+          <a href="{{ logo.url }}" title="{{ logo.alt }}">
+            <img src="{{ logo.img }}" alt="{{ logo.alt }}">
+          </a>
         </li>
         {{ /for }}
       </ul>

diff --git a/img/instagram.svg b/img/instagram.svg
diff --git a/img/logos/agadic.svg b/img/logos/agadic.svg
diff --git a/img/x.svg b/img/x.svg
diff --git a/index.yml b/index.yml
@@ -246,37 +246,46 @@ location:
   title: Como chegar
   conferences:
     title: Conferencias
+    map: https://goo.gl/maps/SXHg73qnQ4ePgVyq5
     address: |
       CGAC  
       Rúa Valle Inclán, 2  
       Santiago de Compostela
   workshops:
     title: Obradoiros e Exposición
+    map: https://goo.gl/maps/oT1XHtzs9Ny1rF9b8
     address: |
       Fundación DIDAC  
       Rúa Pérez Constanti, 12  
       Santiago de Compostela
 
 logos:
-  - title: Organiza
-    items:
-      - alt: DAG
-        img: /img/logos/dag.svg
+  # - title: Organiza
+  #   items:
+  #     - alt: DAG
+  #       img: /img/logos/dag.svg
   - title: Patrocina
     items:
       - alt: Agadic
-        img: /img/logos/agadic.png
+        img: /img/logos/agadic.svg
+        url: https://industriasculturais.xunta.gal/
   - title: Colabora
     items:
       - alt: AC/Española
         img: /img/logos/ace.svg
+        url: https://www.accioncultural.es/
       - alt: CGAC
         img: /img/logos/cgac.svg
+        url: https://cgac.xunta.gal/
       - alt: Didac
         img: /img/logos/didac.svg
+        url: http://didac.gal/
       - alt: Axeitos
         img: /img/logos/axeitos.svg
+        url: https://axeitos.com
       - alt: Anduriña
         img: /img/logos/andurina.svg
+        url: https://www.andurina.com/
       - alt: Serilua
         img: /img/logos/serilua.svg
+        url: https://www.serilua.com
diff --git a/styles.css b/styles.css
@@ -20,6 +20,8 @@ html {
   animation-iteration-count: infinite;
   animation-timing-function: steps(5);
   animation-fill-mode: both;
+	scroll-behavior: smooth;
+	scroll-padding-top: 54px;
 }
 
 /**
@@ -41,6 +43,7 @@ html {
 	justify-content: space-between;
 	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 	z-index: 2;
+	column-gap: 2rem;
 
 	& .page-logo {
 		display: flex;
@@ -72,17 +75,49 @@ html {
 			}
 		}
 	}
-}
 
+	.menu {
+		list-style: none;
+		margin: 0 0 0 auto;
+		padding: 0;
+		display: flex;
+
+		& a {
+			display: block;
+			padding: .5em 1em;
+			color: currentColor;
+			text-decoration: none;
+			font-size: 1rem;
+			text-transform: uppercase;
+			font-weight: bold;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+
+		@media (max-width: 666px) {
+			display: none;
+		}
+	}
 
+	.share {
+		display: flex;
+		column-gap: 1rem;
 
-.logo-feed {
-  display: grid;
+		& a {
+			display: block;
 
-  &.is-square {
-    grid-template-columns: 1fr 1fr;
-		aspect-ratio: 1;
-  }
+			&:hover {
+				opacity: 0.5;
+			}
+		}
+		& svg {
+			fill: white;
+			width: 24px;
+			height: 24px;
+		}
+	}
 }
 
 /* Cabeceira */
@@ -97,13 +132,6 @@ html {
 	padding: 5vw;
 	grid-template-columns: 1fr;
 
-	@media (max-width: 599px) {
-		.logo-feed.is-square {
-			grid-template-columns: repeat(4, 1fr);
-			aspect-ratio: 4 / 1;
-		}
-	}
-
 	@media (min-width: 600px) {
 		grid-template-columns: 1fr 1fr;
 		.header-content {
@@ -444,6 +472,19 @@ html {
 	}
 }
 
+.location-map {
+	color: currentColor;
+	text-decoration: none;
+	text-transform: uppercase;
+	float: right;
+	font-size: 14px;
+	font-weight: bold;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
 .footer {
 	background: var(--color-main);
 	color: white;
@@ -465,18 +506,24 @@ html {
 		list-style: none;
 		padding: 0;
 		display: flex;
-		gap: 2rem;
+		gap: 35px;
 		flex-wrap: wrap;
 	}
 
 	& img {
-		height: 40px;
+		height: 35px;
+	}
+	& a {
+		display: block;
+		&:hover {
+			opacity:0.5;
+		}
 	}
 
 	.Organiza img {
-		height: 50px;
+		height: 40px;
 	}
 	.Patrocina img {
-		height: 50px;
+		height: 40px;
 	}
 }