minor improvements

matomo updated

css/app.css

@@ -3,13 +3,8 @@
 }
 
 @font-face {
-    font-family: 'Pacifico';
+    font-family: 'Minotaur';
-    src: local('Pacifico Regular'), url(../font/Pacifico-Regular.ttf) format('truetype');
+    src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
-}
-
-@font-face {
-    font-family: 'Source Code';
-    src: local('Source Code Pro'), url(../font/SourceCodePro-Regular.ttf) format('truetype');
 }
 
 body {
@@ -25,12 +20,19 @@ body {
     border: 1px solid #222222;
 }
 
-#icon {
+.icon {
     position: fixed;
-    right: 1rem;
-    bottom: 1rem;
     width: 128px;
     height: 128px;
+    bottom: 1rem;
+}
+
+.icon.right {
+    right: 1rem;
+}
+
+.icon.left {
+    left: 1rem;
 }
 
 .hide {
@@ -54,38 +56,38 @@ body {
     border-radius: 7px;
 }
 
-#magician h1 {
+h1 {
     color: #000000;
     position: fixed;
-    left: 50%;
+    font-size: 70pt;
-    transform: translateX(-50%);
-    bottom: 15%;
-    font-family: "Pacifico", cursive;
-    font-size: 50pt;
     font-weight: normal;
     text-decoration: none;
 }
 
+#magician h1 {
+    color: #000000;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 15%;
+    font-family: "Minotaur", cursive;
+}
+
 #developer h1 {
     color: #ffffff;
-    position: fixed;
     left: 50%;
     transform: translate(-50%);
     top: 50%;
-    font-family: "Source Code", monospace;
+    font-family: "Minotaur", monospace;
-    font-size: 50pt;
-    font-weight: bold;
-    text-decoration: none;
 }
 
 .list .magician {
     color: #ffffff;
-    font-family: "Pacifico", cursive;
+    font-family: "Minotaur", cursive;
     font-weight: normal;
 }
 
 .list .developer {
     color: #ffffff;
-    font-family: "Source Code", monospace;
+    font-family: "Minotaur", monospace;
-    font-weight: bold;
+    font-weight: normal;
 }

index.html

@@ -17,121 +17,51 @@
     <script type="text/javascript" src="js/vendor/supersized.3.2.7.min.js"></script>
     <script type="text/javascript" src="theme/supersized.shutter.js"></script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" src="js/app.js"></script>
-        $(document).ready(function () {
-            $('#prevslide').removeClass('hide');
-            $('#nextslide').removeClass('hide');
-            $.supersized({
-                // Functionality
-                slideshow: 1,			// Slideshow on/off
-                autoplay: 1,			// Slideshow starts playing automatically
-                start_slide: 1,			// Start slide (0 is random)
-                stop_loop: 0,			// Pauses slideshow on last slide
-                random: 0,			// Randomize slide order (Ignores start slide)
-                slide_interval: 5000,		// Length between transitions
-                transition: 1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
-                transition_speed: 1000,		// Speed of transition
-                new_window: 0,			// Image links open in new window/tab
-                pause_hover: 0,			// Pause slideshow on hover
-                keyboard_nav: 1,			// Keyboard navigation on/off
-                performance: 1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
-                image_protect: 1,			// Disables image dragging and right click with Javascript
 
-                min_width: 0,			// Min width allowed (in pixels)
+    <!-- Matomo -->
-                min_height: 0,			// Min height allowed (in pixels)
-                vertical_center: 1,			// Vertically center background
-                horizontal_center: 1,			// Horizontally center background
-                fit_always: 0,			// Image will never exceed browser width or height (Ignores min. dimensions)
-                fit_portrait: 1,			// Portrait images will not exceed browser height
-                fit_landscape: 0,			// Landscape images will not exceed browser width
-
-                // Components
-                slide_links: 'name',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
-                thumb_links: 0,			// Individual thumb links for each slide
-                thumbnail_navigation: 0,			// Thumbnail navigation
-                slides: [			// Slideshow Images
-                    {
-                        image: 'img/sp-magic.png',
-                        title: 'sp-magic',
-                        thumb: 'img/sp-magic.png',
-                        url: 'http://sp-magic.de'
-                    },
-                    {
-                        image: 'img/sp-codes.png',
-                        title: 'sp-codes',
-                        thumb: 'img/sp-codes.png',
-                        url: 'http://sp-codes.de'
-                    }],
-
-                // Theme Options
-                progress_bar: 1,			// Timer for each slide
-                mouse_scrub: 0
-            });
-        });
-    </script>
-    <script>
-        $(document).ready(function () {
-            $('.list').addClass('hide');
-
-            var card = $('#card');
-            card.css('cursor', 'pointer');
-            card.find('.back').removeClass('hide');
-            card.flip({
-                trigger: 'click',
-                speed: 500,
-                reverse: false
-            });
-        });
-    </script>
-
-    <!-- Piwik -->
     <script type="text/javascript">
         var _paq = _paq || [];
-        _paq.push(["setDomains", ["*.samuel-philipp.de"]]);
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
         _paq.push(['trackPageView']);
         _paq.push(['enableLinkTracking']);
         (function() {
-            var u = "//piwik.sp-codes.de/";
+            var u="//matomo.sp-codes.de/";
             _paq.push(['setTrackerUrl', u+'piwik.php']);
-            _paq.push(['setSiteId', '2']);
+            _paq.push(['setSiteId', '1']);
             var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.type = 'text/javascript';
+            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-            g.async = true;
-            g.defer = true;
-            g.src = u + 'piwik.js';
-            s.parentNode.insertBefore(g, s);
         })();
     </script>
-    <noscript><p><img src="//piwik.sp-codes.de/piwik.php?idsite=2" style="border:0;" alt=""/></p></noscript>
+    <noscript><p><img src="//matomo.sp-codes.de/piwik.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript>
-    <!-- End Piwik Code -->
+    <!-- End Matomo Code -->
 </head>
 <body>
 <!--Arrow Navigation-->
 <a id="prevslide" class="load-item hide"></a>
 <a id="nextslide" class="load-item hide"></a>
 
-<a id="magician" style="display: none;" href="https://www.sp-magic.de"><h1>Zauberkünstler</h1></a>
+<a id="magician" style="display: none;" href="https://www.sp-magic.de"><h1 class="magician">Magician</h1></a>
-<a id="developer" style="display: none;" href="https://www.sp-codes.de"><h1>Softwareentwickler</h1></a>
+<a id="developer" style="display: none;" href="https://www.sp-codes.de"><h1 class="developer">Software Engineer</h1></a>
 
 <div class="list">
     <div class="item">
-        <h1 class="magician">Zauberkünstler</h1>
+        <h1 class="magician">Magician</h1>
-        <a href="https://www.sp-magic.de"><img src="img/sp-magic.png"/></a>
+        <a href="https://www.sp-magic.de"><img src="img/sp-magic.png" alt="sp-magic"/></a>
     </div>
     <div class="item">
-        <h1 class="developer">Softwareentwickler</h1>
+        <h1 class="developer">Software Engineer</h1>
-        <a href="https://www.sp-codes.de"><img src="img/sp-codes.png"/></a>
+        <a href="https://www.sp-codes.de"><img src="img/sp-codes.png" alt="sp-codes"/></a>
     </div>
 </div>
 
-<div id="icon">
+<div class="icon right">
     <div id="card">
-
         <div class="front">
-            <img class="logo" src="img/samuel.png">
+            <img class="logo" src="img/samuel.png" alt="samuel">
         </div>
         <div class="back hide">
-            <img class="logo" src="img/samuel.png">
+            <img class="logo" src="img/samuel.png" alt="samuel">
         </div>
     </div>
 </div>

js/app.js

@@ -1,20 +1,63 @@
-// $(document).ready(function () {
+function enableIcon(icon) {
-// 	$(document).foundation();
+    icon.css('cursor', 'pointer');
-// });
+    icon.find('.back').removeClass('hide');
-$(function () {
+    icon.flip({
-	$('#maximage').maximage();
+        trigger: 'click',
-	$('#maximage').children().on('click', function(){
+        speed: 500,
-		// Retrive our URL (set in data-href attribute on img tags)
+        reverse: false
-		var url = $(this).data('href');
+    });
-
-		// If our URL is set, open a new window with that URL
-		//    You can certainly use window.location here too
-		if(url.length > 0){
-			window.open(
-				url, // <- This is what we set with the data-href attribute
-				'_blank' // <- This is what makes it open in a new window.
-			);
 }
-	});
 
+$(document).ready(function () {
+    $('.list').addClass('hide');
+    enableIcon($('#card'));
+
+    $('#prevslide').removeClass('hide');
+    $('#nextslide').removeClass('hide');
+    $.supersized({
+        // Functionality
+        slideshow: 1,			// Slideshow on/off
+        autoplay: 1,			// Slideshow starts playing automatically
+        start_slide: 1,			// Start slide (0 is random)
+        stop_loop: 0,			// Pauses slideshow on last slide
+        random: 0,			// Randomize slide order (Ignores start slide)
+        slide_interval: 5000,		// Length between transitions
+        transition: 1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
+        transition_speed: 1000,		// Speed of transition
+        new_window: 0,			// Image links open in new window/tab
+        pause_hover: 0,			// Pause slideshow on hover
+        keyboard_nav: 1,			// Keyboard navigation on/off
+        performance: 1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
+        image_protect: 1,			// Disables image dragging and right click with Javascript
+
+        min_width: 0,			// Min width allowed (in pixels)
+        min_height: 0,			// Min height allowed (in pixels)
+        vertical_center: 1,			// Vertically center background
+        horizontal_center: 1,			// Horizontally center background
+        fit_always: 0,			// Image will never exceed browser width or height (Ignores min. dimensions)
+        fit_portrait: 1,			// Portrait images will not exceed browser height
+        fit_landscape: 0,			// Landscape images will not exceed browser width
+
+        // Components
+        slide_links: 'name',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
+        thumb_links: 0,			// Individual thumb links for each slide
+        thumbnail_navigation: 0,			// Thumbnail navigation
+        slides: [			// Slideshow Images
+            {
+                image: 'img/sp-magic.png',
+                title: 'sp-magic',
+                thumb: 'img/sp-magic.png',
+                url: 'http://sp-magic.de'
+            },
+            {
+                image: 'img/sp-codes.png',
+                title: 'sp-codes',
+                thumb: 'img/sp-codes.png',
+                url: 'http://sp-codes.de'
+            }],
+
+        // Theme Options
+        progress_bar: 1,			// Timer for each slide
+        mouse_scrub: 0
+    });
 });