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,37 +1,26 @@
<!-- BEGIN hero.html -->
<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>
<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 == "/" %}
<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 %}
<div>
<p>På gång:</p>
<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 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
@ -47,21 +36,15 @@
{% 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.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>
{% break %}
{% endif %}
{% endfor %}
<!-- end Up next-->
<!-- end Up next-->
</div>
{% else %}{% endif %}
</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>
<html>
<head>
{% include metahead.html %}
{% include metahead.html %}
</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>
{% include editor-open-closebutton.html %}
{% include hero.html %}
<div id="footer">
{% include footer.html %}
</div>
<!-- <div id="navigation"> </div> -->
<div id="content">
{{ content }}
</div>
<div id="footer">
{% include footer.html %}
</div>
</body>
</html>

View file

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

View file

@ -72,7 +72,7 @@ a:active {
width: 100%;
height: 100vh;
background-color: rgba(201, 246, 236, 0.3);
z-index: -10;
div {
align-self: flex-end ;
flex: 1 1 auto;
@ -114,13 +114,15 @@ a:active {
display: flex;
flex-wrap: wrap;
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 {
flex: 1 0 320px;
margin-left:5px;
margin-right: 5px;
z-index: 10;
img {
float: left;
margin-right: 5px;
@ -158,3 +160,18 @@ a:active {
border-radius: 46%;
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');
}