parent
316c1abbfc
commit
ea2b905364
50
css/app.css
50
css/app.css
|
|
@ -3,13 +3,8 @@
|
|||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Pacifico';
|
||||
src: local('Pacifico Regular'), url(../font/Pacifico-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code';
|
||||
src: local('Source Code Pro'), url(../font/SourceCodePro-Regular.ttf) format('truetype');
|
||||
font-family: 'Minotaur';
|
||||
src: local('Minotaur Phatte'), url(../font/minotaur.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%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 15%;
|
||||
font-family: "Pacifico", cursive;
|
||||
font-size: 50pt;
|
||||
font-size: 70pt;
|
||||
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-size: 50pt;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-family: "Minotaur", monospace;
|
||||
}
|
||||
|
||||
.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-weight: bold;
|
||||
font-family: "Minotaur", monospace;
|
||||
font-weight: normal;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
110
index.html
110
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">
|
||||
$(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
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
</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 -->
|
||||
<!-- Matomo -->
|
||||
<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/";
|
||||
_paq.push(['setTrackerUrl', u + 'piwik.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||
g.type = 'text/javascript';
|
||||
g.async = true;
|
||||
g.defer = true;
|
||||
g.src = u + 'piwik.js';
|
||||
s.parentNode.insertBefore(g, s);
|
||||
(function() {
|
||||
var u="//matomo.sp-codes.de/";
|
||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; 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>
|
||||
<!-- End Piwik Code -->
|
||||
<noscript><p><img src="//matomo.sp-codes.de/piwik.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript>
|
||||
<!-- 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="developer" style="display: none;" href="https://www.sp-codes.de"><h1>Softwareentwickler</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 class="developer">Software Engineer</h1></a>
|
||||
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<h1 class="magician">Zauberkünstler</h1>
|
||||
<a href="https://www.sp-magic.de"><img src="img/sp-magic.png"/></a>
|
||||
<h1 class="magician">Magician</h1>
|
||||
<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>
|
||||
<a href="https://www.sp-codes.de"><img src="img/sp-codes.png"/></a>
|
||||
<h1 class="developer">Software Engineer</h1>
|
||||
<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>
|
||||
|
|
|
|||
79
js/app.js
79
js/app.js
|
|
@ -1,20 +1,63 @@
|
|||
// $(document).ready(function () {
|
||||
// $(document).foundation();
|
||||
// });
|
||||
$(function () {
|
||||
$('#maximage').maximage();
|
||||
$('#maximage').children().on('click', function(){
|
||||
// Retrive our URL (set in data-href attribute on img tags)
|
||||
var url = $(this).data('href');
|
||||
function enableIcon(icon) {
|
||||
icon.css('cursor', 'pointer');
|
||||
icon.find('.back').removeClass('hide');
|
||||
icon.flip({
|
||||
trigger: 'click',
|
||||
speed: 500,
|
||||
reverse: false
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue