Overhaul

Nieuwe achtergrond Code opgeschoond
Q42 · May 14, 2024 · e5187fa · e5187fa
1 parent 0062bd8
commit e5187fa
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 88 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/bg-stars-hori.png b/bg-stars-hori.png
diff --git a/bg-stars-hori2.png b/bg-stars-hori2.png
diff --git a/bg-stars-hori3.png b/bg-stars-hori3.png
diff --git a/css/.DS_Store b/css/.DS_Store
diff --git a/css/animations.css b/css/animations.css
diff --git a/css/bg-stars-hori.png b/css/bg-stars-hori.png
diff --git a/css/bg-stars-hori2.png b/css/bg-stars-hori2.png
diff --git a/css/bg-stars-hori3.png b/css/bg-stars-hori3.png
diff --git a/css/style.css b/css/style.css
@@ -1,12 +1,13 @@
+html, body {
+  min-height: 100%;
+}
+
  body {
     font: 100% Roboto, Arial, Helvetica, sans-serif;
     margin: 0;
-    background: url(bg-stars-hori.png), url(bg-stars-hori2.png), url(bg-stars-hori3.png);
-    background-color: #000;
-	-webkit-font-smoothing: antialiased;
-    -webkit-animation: stars-horizontal 42s infinite linear;
+    background-color: #0E2545;
   }
-  
+
   h1, h2, h3 {
 	clear: both;
     font-family: Orbitron, Arial, Helvetica, sans-serif;
@@ -18,7 +19,7 @@
   h2, h3 {
     text-shadow: 0 0 15px rgba(209,247,248,.7);
   }
-  
+
   a {
     color: #eef;
   }
@@ -28,56 +29,57 @@
   a:visited {
     color: #aac;
   }
-    
+
   p {
     line-height: 1.4em;
     margin: 1em 0;
     font-weight: bold;
     text-shadow: 0 0 10px rgba(0,0,0,1);
   }
-  
+
   blockquote {
     font-weight: bold;
     margin: 0; padding: 0 2em;
     line-height: 1.4em;
 	}
-    
+
     blockquote span.quote {
       font-family: Orbitron, Arial, Helvetica, sans-serif;
       font-size: 300%; line-height: 80%;
       float: left;
       margin: 0 10px 0 0;
     }
-
-  span.strike { text-decoration: line-through; }
-  span.key {
-    -webkit-animation: keyflash infinite .6s ease-in alternate;
-  }
-
+
   article, section, header, footer, hgroup {
     display: block;
   }
-  
+
   article {
     margin: 0 auto;
     max-width: 800px;
     padding: 5em 0;
   }
-  
+
   section {
     margin: 0 0 3em 0;
     color: #eef;
   }
   section p.intro {
     font-size: 140%;
   }
-  
+
   section figure {
     float: right;
     margin: 0 0 2em 2em;
     width: 200px;
 	}
-
+
+  section figure-dolphin {
+    float: left;
+    margin: 0 0 15em 2em;
+    width: 200px;
+  }
+
     section figure figcaption {
       font-size: 80%;
       margin: 1em 0 0 0;
@@ -86,24 +88,24 @@
       border: solid 4px #fff;
       box-shadow: 0 4px 4px rgba(0,0,0,.4);
     }
-  
+
   footer {
     margin: 0 0 3em 0;
     color: #eef;
     font-size: 80%;
   }
-  
+
   div.col {
     width: 380px;
     float: left;
     padding: 0 10px 3em 0;
   }
-  
+
   #banner {
     margin: 0 0 2em 0;
     position: relative;
     }
-	
+
    #banner h1 {
       font-size: 48px;
       margin: 0;
@@ -117,27 +119,11 @@
       margin: 0;
       display: inline;
     }
-
-    #banner #tweet {
-      position: absolute;
-      top: -4em; right: 0;
-    }
 
-  #lego {
-    float: right;
-    margin: -2em 0 2em 2em;
-  }
-  #lego img {
-    border: solid 5px white;
-    box-shadow: 0 0 10px rgba(0,0,0,.7);
-    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.7);
-    -moz-box-shadow: 0 0 10px rgba(0,0,0,.7);
-  }
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    header#banner h1 {     
+    header#banner h1 {
         font-size: 1.5em;
     }
 
 }
-
diff --git a/douglas_adams_37316_154891.jpg b/douglas_adams_37316_154891.jpg
diff --git a/img/dolphin.png b/img/dolphin.png
diff --git a/img/dolphin2.png b/img/dolphin2.png
diff --git a/css/douglas_adams_37316_154891.jpg → img/douglas_adams.jpg b/css/douglas_adams_37316_154891.jpg → img/douglas_adams.jpg
diff --git a/index.html b/index.html
@@ -5,44 +5,60 @@
     <meta content="IE=edge,chrome=1" />
     <meta name="description" content="Towel Day is een evenement bedoeld als eerbetoon aan schrijver Douglas Adams, bekend van de sciencefictionreeks The Hitchhikers Guide To The Galaxy" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/css/animations.css" />
     <link rel="stylesheet" href="/css/style.css" />
+    <script src="/script/three.min.js"></script>
+    <script src="/script/vanta.waves.min.js"></script>
     <link href="http://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet" type="text/css" />
     <link href="http://fonts.googleapis.com/css?family=Orbitron:regular,bold" rel="stylesheet" type="text/css" />
     <link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
   </head>
-  <body>
-    <article>
-      <header id="banner">
-        <time>25 mei %year%</time>
-        <h1>Q42 wenst iedereen een mooie Towel Day!</h1>
-      </header>
-      <section>
-        <figure>
-          <img src="douglas_adams_37316_154891.jpg?w=180" width="180px" alt="Douglas Adams" />
-          <figcaption>Douglas Adams, schrijver van <em>The Hitchhiker's Guide to the Galaxy</em>, overleed in 2001</figcaption>
-        </figure>
-        <p class="intro">Towel Day is een evenement bedoeld als eerbetoon aan schrijver Douglas Adams, bekend van de sciencefictionreeks The Hitchhiker's Guide To The Galaxy. Het evenement werd door fans van Adams' werken bedacht na diens overlijden op 11 mei 2001, en wordt sindsdien jaarlijks gehouden op 25 mei.</p>
-        <h2 contenteditable="true">Douglas Adams over handdoeken<span class="key">_</span></h2>
-        <blockquote>
-          <span class="quote">"</span>
-        A towel, it says, is about the most massively useful thing an interstellar hitch hiker can have. Partly it has great practical value — you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble‐sanded beaches of Santraginus Ⅴ, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand‐to‐hand‐combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindbogglingly stupid animal, it assumes that if you can't see it, it can't see you — daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough.
-        </blockquote>
-        <p>Ieder jaar sturen we nieuwe relaties een handdoek ter nagedachtenis aan Douglas Adams.</p>
-        <p>Wil je ook zo'n mooie Q42 handdoek? Ga dan naar <a href="http://toweldeia.se">#toweldeia</a> voor de vouwinstructies en tweet je Towel Deia selfie met de hashtag #toweldeia @q42 om kans te maken.</p>
-      </section>
-      <footer>
-      </footer>
-    </article>
+  <body id="body">
+    <div id="content">
+      <div id="waves">
+      <article>
+        <header id="banner">
+          <time>25 mei %year%</time>
+          <h1>Q42 wenst iedereen een mooie Towel Day!</h1>
+        </header>
+        <section>
+          <figure>
+            <img src="/img/douglas_adams.jpg?w=180" width="180px" alt="Douglas Adams" />
+            <figcaption>Douglas Adams, schrijver van <em>The Hitchhiker's Guide to the Galaxy</em>, overleed in 2001</figcaption>
+          </figure>
+          <p class="intro">Towel Day is een evenement bedoeld als eerbetoon aan schrijver Douglas Adams, bekend van de sciencefictionreeks The Hitchhiker's Guide To The Galaxy. Het evenement werd door fans van Adams' werken bedacht na diens overlijden op 11 mei 2001, en wordt sindsdien jaarlijks gehouden op 25 mei.</p>
+        </section>
+        </article>
+        </div>
+        <article>
+        <section>
+
+          <h2 contenteditable="true">Douglas Adams over handdoeken<span class="key">_</span></h2>
+          <figure-dolphin>
+            <img src="/img/dolphin2.png" width="180px" alt="Douglas Adams" />
+          </figure-dolphin>
+          <blockquote>
+            <span class="quote">"</span>
+          A towel, it says, is about the most massively useful thing an interstellar hitch hiker can have. Partly it has great practical value — you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble‐sanded beaches of Santraginus Ⅴ, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand‐to‐hand‐combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindbogglingly stupid animal, it assumes that if you can't see it, it can't see you — daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough.
+          </blockquote>
+          <p>Ieder jaar sturen we nieuwe relaties een handdoek ter nagedachtenis aan Douglas Adams.</p>
+        </section>
+      </article>
+    </div>
     <script>
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-2714808-15']);
-      _gaq.push(['_trackPageview']);
-      (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-      })();
+    VANTA.WAVES({
+      el: "#waves",
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: true,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      scale: 1.00,
+      scaleMobile: 1.00,
+      color: 0x0e2545,
+      shininess: 36.00,
+      waveHeight: 40.00,
+      zoom: 0.65
+    })
     </script>
     <script>
       function fixYear(s) {

diff --git a/script/three.min.js b/script/three.min.js