margin, padding and visual delimitation fix
This commit is contained in:
Set Sakrecoer
parent
66bb745c36
commit
edeb975500
10 changed files with 167 additions and 205 deletions
|
|
@ -7,43 +7,18 @@
|
|||
{% if page.url == "/" %}
|
||||
<div id="poster">
|
||||
<!-- Begin Up next -->
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
<div>
|
||||
<p>På gång:</p>
|
||||
På gång:
|
||||
<a href="cloudcannon:collections/{{ event.path }}" class="editor-link cms-editor-link">Redigera Event</a>
|
||||
<h2><a href="{{ event.url }}" class="nodecoration">{{ event.title }}</a></h2>
|
||||
<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>
|
||||
<p><strong>{{ event.description | truncatewords: 10 }}</strong></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' %}Februari {% 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 }}
|
||||
<br /><strong>{{ event.description | truncatewords: 10 }}</strong></p>
|
||||
<p><a class="cta" href="{{ event.url }}" style="padding:10px;"> Läs mer </a></p>
|
||||
</div>
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% break %} {% endif %} {% endfor %}
|
||||
<!-- end Up next-->
|
||||
</div>
|
||||
{% else %}{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,9 @@
|
|||
<h3>Förflutna events</h3>
|
||||
|
||||
{% capture now -%}
|
||||
{{ site.time | date: '%s' }}
|
||||
{%- endcapture %}
|
||||
{% assign events = site.events | reverse %}
|
||||
{% for event in events | limit: 8 %}
|
||||
|
||||
{% capture endtime -%}
|
||||
{{ event.event_data.end_datetime | date: '%s' }}
|
||||
{%- endcapture %}
|
||||
|
||||
{% if now >= endtime %}
|
||||
<div>
|
||||
{% capture now -%} {{ site.time | date: '%s' }} {%- endcapture %} {% assign events = site.events | reverse %} {% for event in events | limit: 8 %} {% capture endtime -%} {{ event.event_data.end_datetime | date: '%s' }} {%- endcapture %} {% if now >= endtime %}
|
||||
<div id="pastevents" {% if forloop.last == true %}style="border:none"{% endif %}>
|
||||
<p>{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}<br />
|
||||
<a href="{{ event.url }}"><strong>{{ event.title }}</strong></a>
|
||||
</p>
|
||||
<hr />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<br />
|
||||
</div> {% endif %} {% endfor %}
|
||||
|
||||
<a href="/events/" class="cta" alt="Events">Mer Events</a>
|
||||
<br /><br />
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
{% include metahead.html %}
|
||||
{% include metahead.html %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -11,15 +11,15 @@
|
|||
<canvas style="display:none" id="canvas3" width="570" height="570"></canvas>
|
||||
<canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas>
|
||||
|
||||
{% include rightnow.html %}
|
||||
{% include editor-open-closebutton.html %}
|
||||
{% include hero.html %}
|
||||
{% include rightnow.html %}
|
||||
{% include editor-open-closebutton.html %}
|
||||
{% include hero.html %}
|
||||
<div id="content">
|
||||
{{ content }}
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
{% include footer.html %}
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,23 +10,16 @@ layout: default
|
|||
{{ page.event_data.start_datetime | date: "%R"}}</strong><br />
|
||||
Och slutar: <strong>{{ page.event_data.end_datetime | date: "%Y-%m-%d"}} klockan
|
||||
{{ page.event_data.end_datetime | date: "%R"}}</strong><br />
|
||||
</div>
|
||||
|
||||
<p><strong>{{ page.description }}</strong></p>
|
||||
{{ content }}
|
||||
|
||||
</div>
|
||||
{{ content }}
|
||||
<img src="{{ site.baseurl}}{{ page.image }}" width="100%" />
|
||||
</div>
|
||||
{% include featured-artists.html %}
|
||||
{% if page.slutet_salskap == true %}
|
||||
|
||||
</div>{% include featured-artists.html %}{% if page.slutet_salskap == true %}
|
||||
<div class="column">{% if page.slutet_salskap == true %}
|
||||
<h2 style="color: #b62a33;">OBS! Du måste vara stödmedlem!</h2>{% endif %} {% include contact.html %}
|
||||
</div>{% endif %}
|
||||
<div class="column">
|
||||
{% if page.slutet_salskap == true %}
|
||||
<h2 style="color: #b62a33;">OBS! Du måste vara stödmedlem!</h2>
|
||||
{% endif %}
|
||||
{% include contact.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="column">
|
||||
{% include hittahit.html %}
|
||||
{% include hittahit.html %}
|
||||
</div>
|
||||
<!-- END events.html -->
|
||||
|
|
@ -21,7 +21,28 @@ input[type=text], input[type=email], textarea, select {
|
|||
|
||||
input[type=submit] {
|
||||
width: 200px;
|
||||
background-color: rgb(165, 202, 195);
|
||||
background: linear-gradient(242deg, #829e99, #93fce7);
|
||||
background-size: 400% 400%;
|
||||
|
||||
-webkit-animation: AnimationName 3s ease infinite;
|
||||
-moz-animation: AnimationName 3s ease infinite;
|
||||
animation: AnimationName 3s ease infinite;
|
||||
|
||||
@-webkit-keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
@-moz-keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
color: black;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
/////////
|
||||
// POSTER
|
||||
/////////
|
||||
#poster {
|
||||
|
||||
width: 90vw;
|
||||
margin-right: auto !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
div {
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
a {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#poster img {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius-topright: 9px;
|
||||
-moz-border-radius-bottomright: 9px;
|
||||
-webkit-border-top-right-radius: 9px;
|
||||
-webkit-border-bottom-right-radius: 9px;
|
||||
float: left;
|
||||
padding-right: 5px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
|
||||
}
|
||||
|
||||
canvas {
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index: -3;
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ h1{
|
|||
text-transform: uppercase;
|
||||
}
|
||||
h2{
|
||||
font-size: 2em;
|
||||
font-size: 1.8em;
|
||||
line-height: 1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ a:active {
|
|||
color: rgb(165, 202, 195);
|
||||
}
|
||||
/*
|
||||
* blend4web
|
||||
* Banner/Hero
|
||||
*/
|
||||
|
||||
#banner {
|
||||
|
|
@ -85,7 +85,7 @@ a:active {
|
|||
flex: 1 1 auto;
|
||||
margin-left:5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
|
|
@ -102,6 +102,47 @@ a:active {
|
|||
}
|
||||
}
|
||||
|
||||
#poster {
|
||||
|
||||
width: 90vw;
|
||||
margin-right: auto !important;
|
||||
margin-bottom: 150px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
div {
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#poster img {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius-topright: 9px;
|
||||
-moz-border-radius-bottomright: 9px;
|
||||
-webkit-border-top-right-radius: 9px;
|
||||
-webkit-border-bottom-right-radius: 9px;
|
||||
float: left;
|
||||
padding-right: 5px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
|
||||
}
|
||||
|
||||
canvas {
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Layout
|
||||
|
|
@ -126,11 +167,11 @@ a:active {
|
|||
|
||||
}
|
||||
.column {
|
||||
|
||||
padding-bottom: 45px;
|
||||
flex: 1 0 320px;
|
||||
margin-left:5px;
|
||||
margin-right: 5px;
|
||||
margin: 0px 15px 30px 15px;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid rgb(165, 202, 195);
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
|
|
@ -152,13 +193,54 @@ a:active {
|
|||
margin-left: 5px;
|
||||
}
|
||||
.highlight {
|
||||
background-image: url('/images/tile.png');
|
||||
background: linear-gradient(242deg, #829e99, #93fce7);
|
||||
background-size: 400% 400%;
|
||||
|
||||
-webkit-animation: AnimationName 3s ease infinite;
|
||||
-moz-animation: AnimationName 3s ease infinite;
|
||||
animation: AnimationName 3s ease infinite;
|
||||
|
||||
@-webkit-keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
@-moz-keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
}
|
||||
a.cta{
|
||||
background-color: rgb(165, 202, 195);
|
||||
background: linear-gradient(242deg, #829e99, #93fce7);
|
||||
background-size: 400% 400%;
|
||||
|
||||
-webkit-animation: AnimationName 3s ease infinite;
|
||||
-moz-animation: AnimationName 3s ease infinite;
|
||||
animation: AnimationName 3s ease infinite;
|
||||
|
||||
@-webkit-keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
@-moz-keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 73%}
|
||||
50%{background-position:100% 28%}
|
||||
100%{background-position:0% 73%}
|
||||
}
|
||||
color: black;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -170,7 +252,7 @@ a.cta{
|
|||
transition: background-color 0.2s linear;
|
||||
}
|
||||
a.cta:hover {
|
||||
background-color: rgb(84, 241, 210);
|
||||
background-color: #54f1d2;
|
||||
}
|
||||
.square-image {
|
||||
width: 150px;
|
||||
|
|
@ -205,13 +287,13 @@ a.cta:hover {
|
|||
flex-wrap: wrap;
|
||||
.column2 {
|
||||
flex: 1 0 250px;
|
||||
margin-left:5px;
|
||||
margin-right: 5px;
|
||||
margin: 0 5px 30px 5px;
|
||||
z-index: 10;
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
border-bottom: 1px solid rgb(165, 202, 195);
|
||||
|
||||
}
|
||||
}
|
||||
#pastevents {
|
||||
margin: 0px 0px 30px 0px;
|
||||
border-bottom: 1px solid rgb(165, 202, 195);
|
||||
}
|
||||
|
|
@ -3,5 +3,4 @@
|
|||
@import 'animation';
|
||||
@import 'stylish';
|
||||
@import 'form';
|
||||
@import 'poster';
|
||||
@import 'cloudcannon'
|
||||
73
events.html
73
events.html
|
|
@ -4,82 +4,31 @@ layout: default
|
|||
description: Kalender för händelser på Kulturföreningen Momangen
|
||||
image: /uploads/stickerwall.jpg
|
||||
---
|
||||
|
||||
<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 %}
|
||||
|
||||
{% 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 />
|
||||
<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' %}Januari {% when '2' %}Februari {% when '3' %}Mars {% when '4' %}April {% when '5' %}Maj {% when '6' %}Juni {% when '7' %}Juli {% when '8' %}Augusti {% when '9' %}September {% when '10' %}Oktober {% 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>
|
||||
|
||||
<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">
|
||||
{% 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" {% if forloop.last == true %}style="border:none"{% endif %}>
|
||||
<a href="cloudcannon:collections/{{ event.path }}" class="editor-link cms-editor-link">Redigera Event</a>
|
||||
<a href="{{ event.url }}"><div class="flyer" style="background-image:url('{{ event.image }}')"></div></a>
|
||||
<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 }}
|
||||
<br /><br />{{ event.description | truncatewords: 10 }}
|
||||
</p>
|
||||
<hr />
|
||||
<br />
|
||||
|
||||
</div> {% endif %} {% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,7 +19,6 @@ layout: default
|
|||
pysslar på i vårt alldeles egna vuxendagis.</p><br />
|
||||
</div>
|
||||
<a href="/about/" class="cta" alt="About Momangen">Om Momangen</a>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
{% include past-events.html %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue