From edeb975500c5b9c33c39d2f9ada007a1467ae170 Mon Sep 17 00:00:00 2001 From: Set Sakrecoer Date: Wed, 19 Jun 2019 12:52:22 +0200 Subject: [PATCH] margin, padding and visual delimitation fix --- _includes/hero.html | 37 ++---------- _includes/past-events.html | 23 ++------ _layouts/default.html | 12 ++-- _layouts/events.html | 23 +++----- _sass/form.scss | 23 +++++++- _sass/poster.scss | 41 ------------- _sass/stylish.scss | 116 +++++++++++++++++++++++++++++++------ assets/css/style.scss | 1 - events.html | 93 +++++++---------------------- index.html | 3 +- 10 files changed, 167 insertions(+), 205 deletions(-) delete mode 100644 _sass/poster.scss diff --git a/_includes/hero.html b/_includes/hero.html index 94c266d..4459ce5 100644 --- a/_includes/hero.html +++ b/_includes/hero.html @@ -7,43 +7,18 @@ {% if page.url == "/" %}
- {% 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 %}
-

På gång:

+ På gång: Redigera Event

{{ event.title }}

- {% 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"}}
- Typ av konst: {{ event.category }}

-

{{ event.description | truncatewords: 10 }}

+ {% 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"}}
+ Typ av konst: {{ event.category }} +
{{ event.description | truncatewords: 10 }}

Läs mer

- {% break %} - {% endif %} - {% endfor %} + {% break %} {% endif %} {% endfor %}
{% else %}{% endif %} diff --git a/_includes/past-events.html b/_includes/past-events.html index 7235959..1fb37a0 100644 --- a/_includes/past-events.html +++ b/_includes/past-events.html @@ -1,24 +1,9 @@

Förflutna events

- -{% 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 -%} {{ 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 %} +

{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}
{{ event.title }}

-
-
-{% endif %} -{% endfor %} -
+
{% endif %} {% endfor %} + Mer Events -

\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 15ec761..3b2683e 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,7 +3,7 @@ - {% include metahead.html %} +{% include metahead.html %} @@ -11,15 +11,15 @@ *** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT *** - {% include rightnow.html %} - {% include editor-open-closebutton.html %} - {% include hero.html %} +{% include rightnow.html %} +{% include editor-open-closebutton.html %} +{% include hero.html %}
- {{ content }} +{{ content }}
diff --git a/_layouts/events.html b/_layouts/events.html index e35b2ce..f0ebdaa 100644 --- a/_layouts/events.html +++ b/_layouts/events.html @@ -10,23 +10,16 @@ layout: default {{ page.event_data.start_datetime | date: "%R"}}
Och slutar: {{ page.event_data.end_datetime | date: "%Y-%m-%d"}} klockan {{ page.event_data.end_datetime | date: "%R"}}
+

{{ page.description }}

- -

{{ page.description }}

- {{ content }} - +{{ content }} - -{% include featured-artists.html %} -{% if page.slutet_salskap == true %} + +{% include featured-artists.html %}{% if page.slutet_salskap == true %} +
{% if page.slutet_salskap == true %} +

OBS! Du måste vara stödmedlem!

{% endif %} {% include contact.html %} +
{% endif %}
- {% if page.slutet_salskap == true %} -

OBS! Du måste vara stödmedlem!

- {% endif %} - {% include contact.html %} -
-{% endif %} -
- {% include hittahit.html %} +{% include hittahit.html %}
\ No newline at end of file diff --git a/_sass/form.scss b/_sass/form.scss index 7a15053..ebcf28d 100644 --- a/_sass/form.scss +++ b/_sass/form.scss @@ -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; diff --git a/_sass/poster.scss b/_sass/poster.scss deleted file mode 100644 index ebb8726..0000000 --- a/_sass/poster.scss +++ /dev/null @@ -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; -} diff --git a/_sass/stylish.scss b/_sass/stylish.scss index 4504421..7718b99 100644 --- a/_sass/stylish.scss +++ b/_sass/stylish.scss @@ -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); } \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 68f12b1..28a15c2 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -3,5 +3,4 @@ @import 'animation'; @import 'stylish'; @import 'form'; -@import 'poster'; @import 'cloudcannon' \ No newline at end of file diff --git a/events.html b/events.html index b1f6b33..87fda5f 100644 --- a/events.html +++ b/events.html @@ -4,82 +4,31 @@ layout: default description: Kalender för händelser på Kulturföreningen Momangen image: /uploads/stickerwall.jpg --- -
- - {% 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 %} - -

Kommande event

- - Redigera Event - -

{{ event.title }}

- -

- {% 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"}}
- Typ av konst: {{ event.category }}

-

{{ event.description | truncatewords: 10 }}

- Läs mer

- - - {% endif %} - {% endfor %} -
- + {% 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 %} +

Kommande event

+ Redigera Event +

{{ event.title }}

+ +

{% 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"}}
+ Typ av konst: {{ event.category }}

+

{{ event.description | truncatewords: 10 }}

+ Läs mer

{% endif %} {% endfor %} +
-

Förflutna events

- {% 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 %} - -
+ {% 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 %} +
Redigera Event -
-

{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}
- {{ event.title }} -
{{ event.description | truncatewords: 10 }} -

-
-
- + +
+ +

{{ event.event_data.start_datetime | date: '%Y-%m-%d' }}
+ {{ event.title }} +

{{ event.description | truncatewords: 10 }} +

+
+
{% endif %} {% endfor %}
- - - {% endif %} - {% endfor %} - -
\ No newline at end of file diff --git a/index.html b/index.html index aa6d122..f25dd93 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,8 @@ layout: default november 2011 och har sedan dess använts som ateljé och verkstad av föreningens medlemmar. Föreningen har just nu 13 medlemmar som spiller färg, bygger skulpturer, skriver, musicerar, fotar och pysslar på i vårt alldeles egna vuxendagis.


- + Om Momangen -
{% include past-events.html %}