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 == "/" %} {% if page.url == "/" %}
<div id="poster"> <div id="poster">
<!-- Begin Up next --> <!-- Begin Up next -->
{% capture now -%}{{ site.time | date: '%s' }}{%- endcapture %} {% 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 %}
{% for event in site.events %}
{% capture endtime -%}
{{ event.event_data.end_datetime | date: '%s' }}
{%- endcapture %}
{% if now <= endtime %}
<div> <div>
<p>På gång:</p> På gång:
<a href="cloudcannon:collections/{{ event.path }}" class="editor-link cms-editor-link">Redigera Event</a> <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> <h2><a href="{{ event.url }}" class="nodecoration">{{ event.title }}</a></h2>
<p> <p>
{% assign d = event.event_data.start_datetime | date: "%-d" %}{% case d %}{% when '1' or '21' or '31' or '2' or '22' %}{{ d }}:a {% 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 />
{% else %}{{ d }}:e{% endcase %} Typ av konst: {{ event.category }}
{% assign m = event.event_data.start_datetime | date: "%-m" %} <br /><strong>{{ event.description | truncatewords: 10 }}</strong></p>
{% 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>
<p><a class="cta" href="{{ event.url }}" style="padding:10px;"> Läs mer </a></p> <p><a class="cta" href="{{ event.url }}" style="padding:10px;"> Läs mer </a></p>
</div> </div>
{% break %} {% break %} {% endif %} {% endfor %}
{% endif %}
{% endfor %}
<!-- end Up next--> <!-- end Up next-->
</div> </div>
{% else %}{% endif %} {% else %}{% endif %}

23
_includes/past-events.html
View file

@ -1,24 +1,9 @@
<h3>Förflutna events</h3> <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 %}
{% capture now -%} <div id="pastevents" {% if forloop.last == true %}style="border:none"{% endif %}>
{{ 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>
<p>{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}<br /> <p>{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}<br />
<a href="{{ event.url }}"><strong>{{ event.title }}</strong></a> <a href="{{ event.url }}"><strong>{{ event.title }}</strong></a>
</p> </p>
<hr /> </div> {% endif %} {% endfor %}
</div>
{% endif %}
{% endfor %}
<br />
<a href="/events/" class="cta" alt="Events">Mer Events</a> <a href="/events/" class="cta" alt="Events">Mer Events</a>
<br /><br />

12
_layouts/default.html
View file

@ -3,7 +3,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{% include metahead.html %} {% include metahead.html %}
</head> </head>
<body> <body>
@ -11,15 +11,15 @@
<canvas style="display:none" id="canvas3" width="570" height="570"></canvas> <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> <canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas>
{% include rightnow.html %} {% include rightnow.html %}
{% include editor-open-closebutton.html %} {% include editor-open-closebutton.html %}
{% include hero.html %} {% include hero.html %}
<div id="content"> <div id="content">
{{ content }} {{ content }}
</div> </div>
<div id="footer"> <div id="footer">
{% include footer.html %} {% include footer.html %}
</div> </div>

23
_layouts/events.html
View file

@ -10,23 +10,16 @@ layout: default
{{ page.event_data.start_datetime | date: "%R"}}</strong><br /> {{ page.event_data.start_datetime | date: "%R"}}</strong><br />
Och slutar: <strong>{{ page.event_data.end_datetime | date: "%Y-%m-%d"}} klockan Och slutar: <strong>{{ page.event_data.end_datetime | date: "%Y-%m-%d"}} klockan
{{ page.event_data.end_datetime | date: "%R"}}</strong><br /> {{ page.event_data.end_datetime | date: "%R"}}</strong><br />
<p><strong>{{ page.description }}</strong></p>
</div> </div>
{{ content }}
<p><strong>{{ page.description }}</strong></p>
{{ content }}
<img src="{{ site.baseurl}}{{ page.image }}" width="100%" /> <img src="{{ site.baseurl}}{{ page.image }}" width="100%" />
</div>
{% include featured-artists.html %} </div>{% include featured-artists.html %}{% if page.slutet_salskap == true %}
{% 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"> <div class="column">
{% if page.slutet_salskap == true %} {% include hittahit.html %}
<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> </div>
<!-- END events.html --> <!-- END events.html -->

23
_sass/form.scss
View file

@ -21,7 +21,28 @@ input[type=text], input[type=email], textarea, select {
input[type=submit] { input[type=submit] {
width: 200px; 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; color: black;
padding: 14px 20px; padding: 14px 20px;
margin: 8px 0; 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;
}

116
_sass/stylish.scss
View file

@ -39,7 +39,7 @@ h1{
text-transform: uppercase; text-transform: uppercase;
} }
h2{ h2{
font-size: 2em; font-size: 1.8em;
line-height: 1em; line-height: 1em;
text-transform: uppercase; text-transform: uppercase;
@ -70,7 +70,7 @@ a:active {
color: rgb(165, 202, 195); color: rgb(165, 202, 195);
} }
/* /*
* blend4web * Banner/Hero
*/ */
#banner { #banner {
@ -85,7 +85,7 @@ a:active {
flex: 1 1 auto; flex: 1 1 auto;
margin-left:5px; margin-left:5px;
margin-right: 5px; margin-right: 5px;
margin-bottom: 0; margin-bottom: 3px;
padding: 0; padding: 0;
} }
img { 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 * Layout
@ -126,11 +167,11 @@ a:active {
} }
.column { .column {
padding-bottom: 45px;
flex: 1 0 320px; flex: 1 0 320px;
margin-left:5px; margin: 0px 15px 30px 15px;
margin-right: 5px;
z-index: 10; z-index: 10;
border-bottom: 1px solid rgb(165, 202, 195);
img { img {
float: left; float: left;
margin-right: 5px; margin-right: 5px;
@ -152,13 +193,54 @@ a:active {
margin-left: 5px; margin-left: 5px;
} }
.highlight { .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{ 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; color: black;
padding: 14px 20px; padding: 14px 20px;
margin: 8px 0;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@ -170,7 +252,7 @@ a.cta{
transition: background-color 0.2s linear; transition: background-color 0.2s linear;
} }
a.cta:hover { a.cta:hover {
background-color: rgb(84, 241, 210); background-color: #54f1d2;
} }
.square-image { .square-image {
width: 150px; width: 150px;
@ -205,13 +287,13 @@ a.cta:hover {
flex-wrap: wrap; flex-wrap: wrap;
.column2 { .column2 {
flex: 1 0 250px; flex: 1 0 250px;
margin-left:5px; margin: 0 5px 30px 5px;
margin-right: 5px;
z-index: 10; z-index: 10;
img { border-bottom: 1px solid rgb(165, 202, 195);
float: left;
margin-right: 5px;
border-radius: 3px;
}
} }
} }
#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 'animation';
@import 'stylish'; @import 'stylish';
@import 'form'; @import 'form';
@import 'poster';
@import 'cloudcannon' @import 'cloudcannon'

93
events.html
View file

@ -4,82 +4,31 @@ layout: default
description: Kalender för händelser på Kulturföreningen Momangen description: Kalender för händelser på Kulturföreningen Momangen
image: /uploads/stickerwall.jpg image: /uploads/stickerwall.jpg
--- ---
<div class="column"> <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 %} <h3>Kommande event</h3>
{% for event in site.events %} <a href="cloudcannon:collections/{{ event.path }}" class="editor-link cms-editor-link">Redigera Event</a>
{% capture endtime -%} <h2><a href="{{ event.url }}" class="nodecoration" style="border:none;">{{ event.title }}</a></h2>
{{ event.event_data.end_datetime | date: '%s' }} <img src="{{ event.image }}" width="100%" />
{%- endcapture %} <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 />
{% if now <= endtime %} Typ av konst: {{ event.category }}</p>
<h3>{{ event.description | truncatewords: 10 }}</h3>
<h3>Kommande event</h3> <a href="{{ event.url }}" class="cta">Läs mer</a><br /><br /> {% endif %} {% endfor %}
</div>
<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"> <div class="column">
<h3>Förflutna events</h3> <h3>Förflutna events</h3>
<div class="flexitem"> <div class="flexitem">
{% capture now -%} {% 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 %}
{{ site.time | date: '%s' }} <div class="column2" {% if forloop.last == true %}style="border:none"{% endif %}>
{%- 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="cloudcannon:collections/{{ event.path }}" class="editor-link cms-editor-link">Redigera Event</a> <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 }}">
<p>{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}<br /> <div class="flyer" style="background-image:url('{{ event.image }}')"></div>
<a href="{{ event.url }}"><strong>{{ event.title }}</strong></a> </a>
<br />{{ event.description | truncatewords: 10 }} <p>{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}<br />
</p> <a href="{{ event.url }}"><strong>{{ event.title }}</strong></a>
<hr /> <br /><br />{{ event.description | truncatewords: 10 }}
<br /> </p>
<br />
</div> {% endif %} {% endfor %}
</div> </div>
{% endif %}
{% endfor %}
</div>
</div> </div>

3
index.html
View file

@ -17,9 +17,8 @@ layout: default
november 2011 och har sedan dess anv&auml;nts som atelj&eacute; och verkstad av f&ouml;reningens medlemmar. november 2011 och har sedan dess anv&auml;nts som atelj&eacute; och verkstad av f&ouml;reningens medlemmar.
F&ouml;reningen har just nu 13 medlemmar som spiller f&auml;rg, bygger skulpturer, skriver, musicerar, fotar och F&ouml;reningen har just nu 13 medlemmar som spiller f&auml;rg, bygger skulpturer, skriver, musicerar, fotar och
pysslar p&aring; i v&aring;rt alldeles egna vuxendagis.</p><br /> pysslar p&aring; i v&aring;rt alldeles egna vuxendagis.</p><br />
</div> </div>
<a href="/about/" class="cta" alt="About Momangen">Om Momangen</a> <a href="/about/" class="cta" alt="About Momangen">Om Momangen</a>
</div> </div>
<div class="column"> <div class="column">
{% include past-events.html %} {% include past-events.html %}