Momangen/momangen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

margin, padding and visual delimitation fix

Browse source
This commit is contained in:
Set Sakrecoer 2019-06-19 12:52:22 +02:00
parent 66bb745c36
commit edeb975500
10 changed files with 167 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

37
_includes/hero.html
View file

@ -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 %}

23
_includes/past-events.html
View file

@ -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 />

19
_layouts/events.html
View file

@ -10,22 +10,15 @@ 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>
</div>
{{ content }}
<img src="{{ site.baseurl}}{{ page.image }}" width="100%" />
</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>{% 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">
{% include hittahit.html %}
</div>

23
_sass/form.scss
View file

@ -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;

41
_sass/poster.scss
View file

@ -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;
}

114
_sass/stylish.scss
View file

@ -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);
}

1
assets/css/style.scss
View file

@ -3,5 +3,4 @@
@import 'animation';
@import 'stylish';
@import 'form';
@import 'poster';
@import 'cloudcannon'

71
events.html
View file

@ -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 %}
<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>

1
index.html
View file

@ -19,7 +19,6 @@ layout: default
pysslar p&aring; i v&aring;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 %}