ulovliglogning/ulovliglogning.dk
5
1
Fork 3
Code Issues 9 Pull requests Releases Wiki Activity

ugly resizing fix

Browse source 
¯\_(ツ)_/¯
This commit is contained in:
Jeppe Ernst 2018-01-21 13:56:54 +01:00
parent d338956ec1
commit 39fa3d27e1
4 changed files with 91 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_layouts/default.html
View file

@ -2,13 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0"">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title> <title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/style/main.css?{{ site.time | date: '%s' }}"> <link rel="stylesheet" href="{{ site.baseurl }}/assets/style/main.css?{{ site.time | date: '%s' }}">
<link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.name }}" href="{{ site.baseurl }}/feed.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.name }}" href="{{ site.baseurl }}/feed.xml" />
{% seo %} {% seo %}
</head> </head>
<body> <body data-env="{{ jekyll.environment }}">
{% include security-camera-svgrepo-com.svg %} {% include security-camera-svgrepo-com.svg %}
<div {% if page.containerId %} id="{{ page.containerId }}" {% endif %} class="container"> <div {% if page.containerId %} id="{{ page.containerId }}" {% endif %} class="container">
{{ content }} {{ content }}

25
_posts/2018-01-20-welcome-to-jekyll.markdown
View file

@ -1,25 +0,0 @@
---
layout: post
title: "Welcome to Jekyll!"
date: 2018-01-20 13:10:49 +0100
categories: jekyll update
---
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
Jekyll also offers powerful support for code snippets:
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
[jekyll-docs]: https://jekyllrb.com/docs/home
[jekyll-gh]: https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/

9
_scss/module/_indexpage.scss
View file

@ -1,5 +1,6 @@
#pinContainer { #pinContainer {
height: 100% !important; height: 100% !important;
width: 100% !important;
overflow: hidden; overflow: hidden;
} }
@ -15,9 +16,11 @@ section {
//position: relative; //position: relative;
background: $body-bg; background: $body-bg;
margin-top: 30px; margin-top: 30px;
padding: 0 0 3rem; padding-bottom: 30px;
&:first-child { &:first-child {
top: 0; //top: 0;
margin-top: 0;
padding-bottom: 0;
} }
&:not(:first-child):before { &:not(:first-child):before {
content: ""; content: "";
@ -38,7 +41,7 @@ section {
.paragraphs { .paragraphs {
column-count: 2; column-count: 2;
margin-bottom: 200px; padding: 0 0 3rem;
margin: 1rem; margin: 1rem;
h3, p { h3, p {
max-width: 300px; max-width: 300px;

88
assets/js/main.js
View file

@ -1,3 +1,6 @@
//are we running in dev mode?
var debug = document.body.getAttribute("data-env") === "development" ? true : false;
var controllerPanes = new ScrollMagic.Controller({ var controllerPanes = new ScrollMagic.Controller({
globalSceneOptions: { globalSceneOptions: {
//triggerHook: 'onLeave' //triggerHook: 'onLeave'
@ -9,59 +12,76 @@
} }
}); });
// get all sections
function calculateOffset(){
var containerHeight = document.getElementById("pinContainer").offsetHeight;
var introHeight = document.getElementById("intro").offsetHeight;
var initialOffset = (containerHeight / introHeight * 100);
if (initialOffset > 100) {
return "-100%";
} else {
return "-" + Math.floor(initialOffset) + "%";
}
}
function createTween(section, duration ,index){
if (index === 0) {
var startY = calculateOffset();
} else {
var startY = "-0%";
}
var tween = TweenMax.fromTo(section, duration, {
y: startY,
}, {
y: "-100%",
})
return tween;
}
function createTweenTimeline(){
var sections = document.querySelectorAll("section"); var sections = document.querySelectorAll("section");
var sectionCount = sections.length; var sectionCount = sections.length;
var sectionDurations = []; var sectionDurations = [];
var wipeAnimation = new TimelineLite()
for (var i = 0; i < sections.length; i++) { for (var i = 0; i < sections.length; i++) {
sectionDurations.push(sections[i].offsetHeight/300); sectionDurations.push(sections[i].offsetHeight/300);
// fromY = i == 0 ? "-100%" : "0";
// toY = /*i == sections.length - 1 ? "0" :*/ "-100%";
// wipeAnimation = wipeAnimation.fromTo(sections[i], sectionDurations[i], {
// y: fromY,
// }, {
// y: toY,
// })
} }
var wipeAnimation = new TimelineLite() var tweens = [];
.fromTo(sections[0], sectionDurations[0], { var timeline = new TimelineMax();
y: "-0%", for (var i = 0; i < sections.length; i++) {
}, { tweens.push(createTween(sections[i], sectionDurations[i], i));
y: "-100%", timeline.add(tweens[i]);
}).fromTo(sections[1], sectionDurations[1], { }
y: "-0%", return {
}, { timeline: timeline,
y: "-100%", tweens: tweens
}).fromTo(sections[2], sectionDurations[2], { };
y: "-0%", }
}, {
y: "-100%", wipeAnimation = createTweenTimeline();
}).fromTo(sections[3], sectionDurations[3], {
y: "-0%",
}, {
y: "-100%",
}).fromTo(sections[4], sectionDurations[4], {
y: "-0%",
}, {
y: "-100%",
})
// create scene for every slide // create scene for every slide
//for (var i = 0; i < sections.length - 1; i++) { //for (var i = 0; i < sections.length - 1; i++) {
var triggerElement = document.getElementsByClassName("container")[0]; var triggerElement = document.getElementsByClassName("container")[0];
new ScrollMagic.Scene({ var panelScene = new ScrollMagic.Scene({
triggerElement: triggerElement, triggerElement: triggerElement,
duration: "400%", duration: "400%",
triggerHook: "onLeave" triggerHook: "onLeave"
}) })
.setPin(triggerElement) .setPin(triggerElement)
.setTween(wipeAnimation) .setTween(wipeAnimation.timeline)
.addIndicators() // add indicators (requires plugin)
.addTo(controllerPanes); .addTo(controllerPanes);
if (debug) {
panelScene.addIndicators()
}
window.addEventListener('resize', function(){
wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false)
})
//} //}
// for (var i = 0; i < sections.length; i++) { // for (var i = 0; i < sections.length; i++) {