event page

_includes/hero.html

@@ -3,7 +3,7 @@
 
   <div>
     <a href="{{ site.baseurl }}/" class="nodecoration"><img
-        src="{{ site.baseurl }}/assets/img/logo%20galleri%20momangen.svg" alt="{{ site.title }}" /></a>
+        src="{{ site.baseurl }}/assets/img/logo%20galleri%20momangen.svg" alt="{{ site.title }}" title="{{ site.title }}" /></a>
     {% if page.url == "/" %}
     <div id="poster">
       <!-- Begin Up next -->
@@ -38,8 +38,8 @@
           {{ event.event_data.start_datetime | date: "%Y" }}
           kl. {{ event.event_data.start_datetime | date: "%R"}}<br />
           Typ av konst: {{ event.category }}</p>
-        <h3>{{ event.event_data.description | truncatewords: 10 }} <span><a href="{{ event.url }}">Läs mer</a></span>
+        <h3>{{ event.description | truncatewords: 10 }} </h3>
-        </h3>
+        <p><a class="cta" href="{{ event.url }}">Läs mer</a></p>
       </div>
       {% break %}
       {% endif %}

_includes/past-events.html

@@ -3,7 +3,7 @@
 {{ site.time | date: '%s' }}
 {%- endcapture %}
 {% assign events = site.events | reverse %}
-{% for event in events %}
+{% for event in events | limit: 7 %}
 
 {% capture endtime -%}
 {{ event.event_data.end_datetime | date: '%s' }}
@@ -18,5 +18,9 @@
 
   <br />
 </div>
+
+
 {% endif %}
-{% endfor %}
+{% endfor %}
+<a href="/events/" class="cta">Mer Events</a>
+<br /><br />

_sass/form.scss

@@ -22,16 +22,17 @@ input[type=text], input[type=email], textarea, select {
 input[type=submit] {
   width: 200px;
   background: linear-gradient(97deg, rgb(84, 241, 210), rgb(165, 202, 195));
-  color: white;
+  color: black;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
+  font-family: avantB, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 input[type=submit]:hover {
-  background: linear-gradient(97deg, rgb(84, 241, 210), rgb(165, 202, 195));
+  background: linear-gradient(97deg, rgb(165, 202, 195), rgb(84, 241, 210));
 
 }
 /* CSS Created by CSS CHECKBOX */

_sass/stylish.scss

@@ -119,6 +119,7 @@ a:active {
 
 }
 .column {
+  
   flex: 1 0 320px;
   margin-left:5px;
   margin-right: 5px;
@@ -146,14 +147,18 @@ a:active {
 .highlight {
   background-image: url('/images/tile.png');
 }
-.cta{
+a.cta{
   background: linear-gradient(97deg, rgb(84, 241, 210), rgb(165, 202, 195));
-  color: white;
+  color: black;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
+  font-family: avantB, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+a.cta:hover {
+  background: linear-gradient(97deg, rgb(165, 202, 195), rgb(84, 241, 210));
 }
 .square-image {
   width: 150px;
@@ -181,4 +186,19 @@ a:active {
   background-position: center;
   width: 150px;
   height: 150px;
+}
+.flexitem {
+  display: flex;
+  flex-wrap: wrap;
+  .column2 {  
+    flex: 0 0 250px;
+    margin-left:5px;
+    margin-right: 5px;
+    z-index: 10;
+    img {
+      float: left;
+      margin-right: 5px;
+      border-radius: 3px;
+    }
+  }
 }

events.html

@@ -0,0 +1,81 @@
+---
+title: Events & Utställningar Kalender
+layout: default
+description: Kalender för händelser på Kulturföreningen Momangen 
+---
+<div class="column">
+
+    {% capture now -%}{{ site.time | date: '%s' }}{%- endcapture %}
+    {% for event in site.events %}
+    {% capture endtime -%}
+    {{ event.event_data.end_datetime | date: '%s' }}
+    {%- endcapture %}
+    {% if now <= endtime %}
+
+      <h3>Kommande event</h3>
+      
+      <a href="cloudcannon:collections/{{ event.path }}" class="editor-link cms-editor-link">Redigera Event</a>
+      
+      <h2><a href="{{ event.url }}" class="nodecoration" style="border:none;">{{ event.title }}</a></h2>
+      <img src="{{ event.image }}" width="100%" />
+      <p>
+        {% assign d = event.event_data.start_datetime | date: "%-d"  %}{% case d %}{% when '1' or '21' or '31' or '2' or '22' %}{{ d }}:a
+        {% else %}{{ d }}:e{% endcase %}
+        {% assign m = event.event_data.start_datetime | date: "%-m" %}
+        {% case m %}
+        {% when '1' %}Januar
+        {% when '2' %}Februar
+        {% when '3' %}Mars
+        {% when '4' %}April
+        {% when '5' %}Maj
+        {% when '6' %}Juni
+        {% when '7' %}Juli
+        {% when '8' %}Augusti
+        {% when '9' %}September
+        {% when '10' %}October
+        {% when '11' %}November
+        {% when '12' %}December
+        {% endcase %}
+        {{ event.event_data.start_datetime | date: "%Y" }}
+        kl. {{ event.event_data.start_datetime | date: "%R"}}<br />
+        Typ av konst: {{ event.category }}</p>
+      <h3>{{ event.description | truncatewords: 10 }}</h3>
+      <a href="{{ event.url }}" class="cta">Läs mer</a><br /><br />
+   
+
+    {% endif %}
+    {% endfor %}
+  </div>
+
+<div class="column">
+  
+  <h3>Förflutna events</h3>
+  <div class="flexitem">
+  {% capture now -%}
+  {{ site.time | date: '%s' }}
+  {%- endcapture %}
+  {% assign events = site.events | reverse %}
+  {% for event in events %}
+
+  {% capture endtime -%}
+  {{ event.event_data.end_datetime | date: '%s' }}
+  {%- endcapture %}
+
+  {% if now >= endtime %}
+
+  <div class="column2">
+      <a href="{{ event.url }}"><div class="flyer" style="background-image:url('{{ event.image }}')"></div></a>
+    <p>{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}<br />
+      <a href="{{ event.url }}"><strong>{{ event.title }}</strong></a>
+      <br />{{ event.description | truncatewords: 10 }} 
+    </p>
+
+    <br />
+  </div>
+
+
+  {% endif %}
+  {% endfor %}
+ 
+</div>
+</div>

index.html

@@ -7,14 +7,13 @@ layout: default
 <div class="column">
   <h1>{{ page.title }} - {{ site.title }}</h1>
   <p>{{ site.description }}</p>
-  <h4><a href="/about/" class="cta" alt="About Momangen">Om oss</a></h4>
+  <a href="/about/" class="cta" alt="About Momangen">Om oss</a>
   {% include hittahit.html %}
 </div>
-
-<div class="column">
-  {% include contact.html %}
-</div>
 <div class="column">
   {% include past-events.html %}
 </div>
+<div class="column">
+    {% include contact.html %}
+</div>
 <!-- END   /index.html -->