fixing scrolling macaron

This commit is contained in:
Set Sakrecoer 2019-06-18 11:59:16 +02:00
parent a10fbf402b
commit b375fa3784
5 changed files with 77 additions and 57 deletions

View file

@ -1,67 +1,50 @@
<!-- BEGIN hero.html --> <!-- BEGIN hero.html -->
<div id="banner" style={% if page.url == "/" %}"height:100%"{% else %}"height:30%"{% endif %}> <div id="banner" style={% if page.url == "/" %}"height:100%"{% else %}"height:30%"{% endif %}>
<canvas style="display:none" id="canvas" width="285" height="285"></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>
<div> <div>
<a href="{{ site.baseurl }}/" class="nodecoration"><img src="{{ site.baseurl }}/assets/img/logo%20galleri%20momangen.svg" alt="{{ site.title }}" /></a> <a href="{{ site.baseurl }}/" class="nodecoration"><img
src="{{ site.baseurl }}/assets/img/logo%20galleri%20momangen.svg" alt="{{ site.title }}" /></a>
{% 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 %} {% for event in site.events %}
{% capture endtime -%}
{% capture endtime -%}
{{ event.event_data.end_datetime | date: '%s' }} {{ event.event_data.end_datetime | date: '%s' }}
{%- endcapture %} {%- endcapture %}
{% if now <= endtime %} {% if now <= endtime %}
<div> <div>
<p>På gång:</p> <p>På gång:</p>
<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 {% else %}{{ d }}:e{% endcase %} {% 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" %} {% assign m = event.event_data.start_datetime | date: "%-m" %}
{% case m %} {% case m %}
{% when '1' %}Januar {% when '1' %}Januar
{% when '2' %}Februar {% when '2' %}Februar
{% when '3' %}Mars {% when '3' %}Mars
{% when '4' %}April {% when '4' %}April
{% when '5' %}Maj {% when '5' %}Maj
{% when '6' %}Juni {% when '6' %}Juni
{% when '7' %}Juli {% when '7' %}Juli
{% when '8' %}Augusti {% when '8' %}Augusti
{% when '9' %}September {% when '9' %}September
{% when '10' %}October {% when '10' %}October
{% when '11' %}November {% when '11' %}November
{% when '12' %}December {% when '12' %}December
{% endcase %} {% endcase %}
{{ event.event_data.start_datetime | date: "%Y" }} {{ event.event_data.start_datetime | date: "%Y" }}
kl. {{ event.event_data.start_datetime | date: "%R"}}<br />
kl. {{ event.event_data.start_datetime | date: "%R"}}<br />
Typ av konst: {{ event.category }}</p> Typ av konst: {{ event.category }}</p>
<h3>{{ event.event_data.description | truncatewords: 10 }} <span><a href="{{ event.url }}">Läs mer</a></span></h3> <h3>{{ event.event_data.description | truncatewords: 10 }} <span><a href="{{ event.url }}">Läs mer</a></span>
</h3>
</div> </div>
{% break %} {% break %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<!-- end Up next-->
<!-- end Up next-->
</div> </div>
{% else %}{% endif %} {% else %}{% endif %}
</div> </div>

18
_includes/rightnow.html Normal file
View file

@ -0,0 +1,18 @@
<div id="rightnow">
{% if site.data.open.open == true %}
<h4>Just Nu:</h4>
<h3>Öppet<br />för almänheten!</h3>
<p>Kom hit!</p>
{% else %}
<h4>Just Nu:</h4>
<h3>Produktion <br />på gång! </h3>
<p>kom tillbaka snart!
<br /><a href="{{ site.baseurl }}/privacy-policy/">Bli stödmedlem</a></p>
{% endif %}
</div>
<script type="text/javascript">
$(window).scroll(function(){
$("#rightnow").css("opacity", 1 - $(window).scrollTop() / 650);
});
</script>

View file

@ -1,22 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{% include metahead.html %} {% include metahead.html %}
</head> </head>
<body id=>
<canvas style="display:none" id="canvas" width="285" height="285"></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>
{% include rightnow.html %}
{% include editor-open-closebutton.html %}
{% include hero.html %}
<div id="content">
{{ content }}
</div>
<body> <div id="footer">
{% include editor-open-closebutton.html %} {% include footer.html %}
{% include hero.html %} </div>
<!-- <div id="navigation"> </div> -->
<div id="content">
{{ content }}
</div>
<div id="footer">
{% include footer.html %}
</div>
</body> </body>
</html>
</html>

View file

@ -2,6 +2,7 @@
// POSTER // POSTER
///////// /////////
#poster { #poster {
width: 90vw; width: 90vw;
margin-right: auto !important; margin-right: auto !important;
display: flex; display: flex;
@ -36,5 +37,5 @@ canvas {
left:0; left:0;
height:100%; height:100%;
width:100%; width:100%;
z-index: -1; z-index: -3;
} }

View file

@ -72,7 +72,7 @@ a:active {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: rgba(201, 246, 236, 0.3); background-color: rgba(201, 246, 236, 0.3);
z-index: -10;
div { div {
align-self: flex-end ; align-self: flex-end ;
flex: 1 1 auto; flex: 1 1 auto;
@ -114,13 +114,15 @@ a:active {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow-x: hidden; overflow-x: hidden;
background: rgba(255, 255, 255, 0.1) url('/assets/img/bg.png'); background: rgba(255, 255, 255, 0.5) url('/assets/img/bg.png');
z-index: 10;
} }
.column { .column {
flex: 1 0 320px; flex: 1 0 320px;
margin-left:5px; margin-left:5px;
margin-right: 5px; margin-right: 5px;
z-index: 10;
img { img {
float: left; float: left;
margin-right: 5px; margin-right: 5px;
@ -157,4 +159,19 @@ a:active {
height: 150px; height: 150px;
border-radius: 46%; border-radius: 46%;
background-position: center; background-position: center;
}
#rightnow {
position: fixed;
top: 10px;
right: 10px;
width: 200px;
height: 200px;
border-radius: 47%;
z-index: 0;
transform: rotate(-23deg);
text-align: center;
line-height: 18px;
opacity: 1;
background: rgba(255, 255, 255, 0.5) url('/assets/img/bg.png');
} }