Update readme with docker-compose info

Just to make it easier to do development without installing all the jekyll stuff yourself.

All you need is docker+docker-compose and run 'docker-compose up' in the root of the project.

Gemfile

@@ -18,6 +18,7 @@ gem "github-pages", group: :jekyll_plugins
 # If you have any plugins, put them here!
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.6"
+  gem "jekyll-livereload"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

README.md

@@ -0,0 +1,27 @@
+# Jekyll site for ulovliglogning.dk
+
+## To work on the code, either
+
+### Use docker
+You need docker-compose. Simply run
+`docker-compose up` to launch the site in a docker container with livereload support. 
+
+### Or install Jekyll locally
+
+#### Install Jekyll and Bundler gems through RubyGems
+`gem install jekyll bundler`
+
+#### Install dependencies
+`bundle install`
+
+#### Build the site local
+`bundle exec jekyll serve`
+
+You can now see the site at [localhost:4000](http://localhost:4000)
+
+## Deploy
+
+It's **important** that you build the site with `JEKYLL_ENV=production bundle exec jekyll build` before deploying the contents of the `_site` directory. We're doing some debugging stuff when then project is build in the development env.
+
+## Structure
+The contents of the index page is defined in the frontmatter of the file `index.md`

_layouts/default.html

@@ -16,10 +16,5 @@
   <footer>
     Last generated at {{ site.time | date_to_rfc822 }}
   </footer>
-  <script src="{{ site.baseurl }}/assets/js/vendor/ScrollMagic.min.js"></script>
-  <script src="{{ site.baseurl }}/assets/js/vendor/TweenMax.min.js"></script>
-  <script src="{{ site.baseurl }}/assets/js/vendor/animation.gsap.js"></script>
-  <script src="{{ site.baseurl }}/assets/js/vendor/debug.addIndicators.min.js"></script>
-  <script src="{{ site.baseurl }}/assets/js/main.js"></script>
 </body>
 </html>

_posts/2018-01-20-welcome-to-jekyll.markdown

@@ -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/

_scss/base/_variables.scss

@@ -2,6 +2,12 @@
 $body-bg: #2A2A2A;
 $alternate-bg: #ff5800;
 
+$color-mine-shaft: #2A2A2A;
+$color-international-orange: #ff5800;
+
+$background-primary: $color-mine-shaft;
+$background-alternative: $color-international-orange;
+
 /* Size */
 $screen-xs: 600px !default;
 $screen-xs-min: $screen-xs !default;

_scss/module/_camera.scss

@@ -6,19 +6,21 @@
   z-index: 1000;
   pointer-events: none;
   .redLight {
-  	animation: redLigth 1s ease infinite;
+  	animation: redLight 1s ease infinite;
   }
   .glare {
     transform-origin: 80% 80%;
+    transform-box: fill-box;
     animation: glare 4s linear infinite;
   }
   .outerRing {
   	transform-origin: 50% 50%;
+  	transform-box: fill-box;
   	animation: outerRing 4s linear infinite;
   }
 }
 
-@keyframes redLigth {
+@keyframes redLight {
 	0% {
 		fill-opacity: 1;
 	}

_scss/module/_indexpage.scss

@@ -1,33 +1,38 @@
 section {
 	min-height: 100vh;
-	width: 100%;
+	position: relative;
 	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-    align-items: center;
+	align-items: center;
-    justify-content: center;
+	justify-content: center;
-    position: relative;
-    background: $body-bg;
-    /*&:not(:first-child):before*/ &:before {
-	    content: "";
-	    width: 100%;
-	    height: 30px;
-	    position: absolute;
-	    top: -30px;
-	    background: linear-gradient(to left bottom, $alternate-bg 0%,$alternate-bg 49%,$body-bg 50%,$body-bg 100%);
-	    background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%);
-	}
-	&.even {
-		background: $alternate-bg;
-		&:before {
-		    background: linear-gradient(to left bottom, $body-bg 0%,$body-bg 49%,$alternate-bg 50%,$alternate-bg 100%);
-		    background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%);
-		}
-	}
 
+	background-color: $background-primary;
+	background-image: linear-gradient(
+		to left bottom, 
+		$background-primary 49%, 
+		$background-alternative 50%
+	);
+	background-size: 100% 30px;
+	background-repeat: no-repeat;
+	background-position: bottom;
+
+	&:nth-of-type(even) {
+		background-color: $background-alternative;
+		background-image: linear-gradient(
+			to left bottom, 
+			$background-alternative 49%, 
+			$background-primary 50%
+		);
+	}
+	&:last-of-type {
+		background-image: none;
+	}
+}
+
+section {
 	.paragraphs {
 		column-count: 2;
-		margin-bottom: 200px;
+		margin-bottom: 3rem;
-		margin: 1rem;
 		h3, p {
 			max-width: 300px;
 			font-family: 'Roboto', sans-serif;

assets/js/main.js

@@ -1,48 +0,0 @@
-    // var controllerPanes = new ScrollMagic.Controller({
-    //     globalSceneOptions: {
-    //         triggerHook: 'onLeave'
-    //     }
-    // });
-    // var controllerAnimations = new ScrollMagic.Controller({
-    //     globalSceneOptions: {
-    //         //triggerHook: 'onLeave'
-    //     }
-    // });
-
-    // // get all sections
-    // var sections = document.querySelectorAll("section");
-    // var sectionCount = sections.length;
-    // var sectionDurations = [];
-
-    // var wipeAnimation = new TimelineLite()
-    // for (var i = 0; i < sections.length; i++) {
-    // 	sectionDurations.push(sections[i].offsetHeight/300);
-    // 	wipeAnimation = wipeAnimation.fromTo(sections[i], sectionDurations[i], {
-		  //   y: "0",
-		  // }, {
-		  //   y: i == sections.length - 1 ? "0" : "-100%",
-		  // })
-    // }
-
-
-    // // create scene for every slide
-    // //for (var i = 0; i < sections.length - 1; i++) {
-    //     new ScrollMagic.Scene({
-    //             triggerElement: document.getElementsByClassName("container")[0],
-                
-    //             triggerHook: "onLeave",
-    //         })
-    //         .setPin(document.getElementsByClassName("container")[0])
-    //         .setTween(wipeAnimation)
-    //         .addIndicators() // add indicators (requires plugin)
-    //         .addTo(controllerPanes);
-    // //}
-
-    // // for (var i = 0; i < sections.length; i++) {
-    // //     new ScrollMagic.Scene({
-    // //             triggerElement: sections[i]
-    // //         })
-    // //         .setClassToggle(sections[i], "appear")
-    // //         .addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
-    // //         .addTo(controllerAnimations);
-    // // }

docker-compose.yml

@@ -0,0 +1,9 @@
+
+jekyll:
+    image: jekyll/jekyll
+    command: jekyll serve --livereload --reload_port 35729
+    ports:
+        - 4000:4000
+        - 35729:35729
+    volumes:
+        - .:/srv/jekyll