WIP: paralax pandac template
This commit is contained in:
marko
@@ -7,6 +7,9 @@ mdFiles = $(wildcard src/md/*.md)
|
||||
phpFiles = $(patsubst src/md/%.md, build/materialize/%.php, $(mdFiles))
|
||||
ampFiles = $(patsubst src/md/%.md, build/amp/%.php, $(mdFiles))
|
||||
phpLibFiles = $(wildcard phpLib/cwsvJudo/*.php) phpLib/phpcount/phpcount.php
|
||||
wallpapersSrc = $(wildcard graphiken/wallpapers/*.*)
|
||||
wallpapers = $(patsubst graphiken/wallpapers/%, build/graphiken/wallpapers/%, $(wallpapersSrc))
|
||||
|
||||
configFiles = $(wildcard config/*.php)
|
||||
|
||||
LN = ln -f
|
||||
@@ -17,9 +20,17 @@ all: build/css/cwsvJudo.css pages images
|
||||
make -j graphiken
|
||||
make build/css/cwsvJudo.css
|
||||
|
||||
# minimizing wallpaper sizes
|
||||
build/graphiken/wallpapers/%.jpg: graphiken/wallpapers/%.jpg
|
||||
guetzli $^ $@
|
||||
build/graphiken/wallpapers/%.svg: graphiken/wallpapers/%.svg
|
||||
cp $^ $@
|
||||
|
||||
.PHONY: images
|
||||
images:
|
||||
cp -r graphiken/wallpapers build/graphiken
|
||||
images: $(wallpapers)
|
||||
echo $(wallpapersSrc)
|
||||
echo $(wallpapers)
|
||||
|
||||
|
||||
.PHONY: clean
|
||||
clean:
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# Config settings
|
||||
|
||||
|
||||
# which pandoc template to use
|
||||
pandocTemplate = pandocTemplate/materialize-parallax.pandocTemplate
|
||||
|
||||
# versions (git branches) to use
|
||||
VERSION_MATERIALIZE = v2.1.1
|
||||
# version of google material icons to use
|
||||
@@ -7,9 +11,6 @@ VERSION_GOOGLE_MATERIAL_ICONS = 4.0.0
|
||||
|
||||
# where to put the distribution
|
||||
distDir = ./build/dist/heliohost
|
||||
# which pandoc template to use
|
||||
pandocTemplate = pandocTemplate/materialize-parallax.html
|
||||
|
||||
|
||||
# css optimizer to use
|
||||
CSSO = node_modules/csso-cli/bin/csso
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<!--Import Google Icon Font-->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<!--Import materialize.css-->
|
||||
<link type="text/css" rel="stylesheet" href="ressourcen/css/materialize.min.css" media="screen,projection" />
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="parallax-container">
|
||||
<div class="parallax"><img style="width:100%" src="/ressourcen/graphiken/wallpapers/judo-4454835.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
Lorem Ipsum
|
||||
</div>
|
||||
|
||||
<div class="parallax-container">
|
||||
<div class="parallax"><img style="width:100%" src="/ressourcen/graphiken/wallpapers/judo-4454836.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
Lorem Ipsum
|
||||
</div>
|
||||
|
||||
<div class="parallax-container">
|
||||
<div class="parallax"><img style="width:100%" src="/ressourcen/graphiken/wallpapers/youth-864663.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
Lorem Ipsum
|
||||
</div>
|
||||
|
||||
<!--JavaScript at end of body for optimized loading-->
|
||||
<script type="text/javascript" src="ressourcen/js/materialize.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elems = document.querySelectorAll('.parallax');
|
||||
const instances = M.Parallax.init(elems, {
|
||||
// specify options here
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="ressourcen/css/cwsvJudo.css">
|
||||
<!--Import materialize.css-->
|
||||
<link type="text/css" rel="stylesheet" href="ressourcen/css/materialize.min.css" media="screen,projection" />
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="nav-extended">
|
||||
<div class="nav-wrapper" style="font-family: 'Orbitron-Medium', Impact, Charcoal, sans-serif;">
|
||||
<!-- <img style="height:100%;width:auto;" width="128" height="104" title="Judo im Chemnitzer WSV"
|
||||
alt="Judo im Chemnitzer WSV - Logo" src="/ressourcen/graphiken/logos/cwsvJudoLogoWappen.128w.png"
|
||||
srcset="/ressourcen/graphiken/logos/cwsvJudoLogoWappen.256w.png 2x"> -->
|
||||
<a href="/" class="brand-logo">
|
||||
<span>cwsvJudo</span>
|
||||
</a>
|
||||
$if(mainNav)$
|
||||
<ul id="nav-mobile" class="right">
|
||||
$for(mainNav)$
|
||||
<li>
|
||||
<a href="$mainNav.url$" $if(mainNav.caption)$title="$mainNav.caption$" $endif$
|
||||
$if(mainNav.active)$class="active" $endif$>
|
||||
$if(mainNav.caption)$<span>$mainNav.caption$</span>$endif$
|
||||
</a>
|
||||
</li>
|
||||
$endfor$
|
||||
</ul>
|
||||
$endif$
|
||||
</div>
|
||||
<div class="nav-content">
|
||||
$if(subNav)$
|
||||
<ul class="tabs tabs-transparent">
|
||||
$for(subNav)$
|
||||
<li class="tab">
|
||||
<a href="$subNav.url$" $if(subNav.caption)$title="$subNav.caption$" $endif$
|
||||
$if(subNav.active)$class="activeNav" $endif$>
|
||||
<!-- $if(subNav.icon)$
|
||||
<img src="$if(subNav.icon.src)$$subNav.icon.src$$else$$subNav.icon$$endif$"
|
||||
$if(subNav.caption)$ alt="$subNav.caption$" $else$ $if(subNav.icon.alt)$
|
||||
alt="$subNav.icon.alt$" $endif$ $endif$ $if(subNav.icon.width)$
|
||||
width="$subNav.icon.width$" $endif$ $if(subNav.icon.height)$
|
||||
height="$subNav.icon.height$" $endif$ $if(subNav.icon.title)$
|
||||
title="$subNav.icon.title$" $endif$ $if(subNav.icon.srcset)$
|
||||
srcset="$subNav.icon.srcset$" $endif$>
|
||||
$endif$ -->
|
||||
$if(subNav.caption)$<span>$subNav.caption$</span>$endif$
|
||||
</a>
|
||||
</li>
|
||||
$endfor$
|
||||
</ul>
|
||||
$endif$
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="parallax-container">
|
||||
<div class="parallax">
|
||||
<img src="/ressourcen/graphiken/wallpapers/judo-4454835.jpg">
|
||||
<!-- <img src="/ressourcen/graphiken/wallpapers/osae-komi.svg"
|
||||
data-src="/ressourcen/graphiken/wallpapers/judo-4454835.jpg"
|
||||
onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');"> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
Lorem Ipsum
|
||||
</div>
|
||||
|
||||
<div class="parallax-container">
|
||||
<div class="parallax"><img src="/ressourcen/graphiken/wallpapers/judo-4454836.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
Lorem Ipsum
|
||||
</div>
|
||||
|
||||
<div class="parallax-container">
|
||||
<div class="parallax"><img src="/ressourcen/graphiken/wallpapers/youth-864663.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
Lorem Ipsum
|
||||
</div>
|
||||
|
||||
<!--JavaScript at end of body for optimized loading-->
|
||||
<script type="text/javascript" src="ressourcen/js/materialize.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elems = document.querySelectorAll('.parallax');
|
||||
const instances = M.Parallax.init(elems, {
|
||||
// specify options here
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -3,3 +3,25 @@
|
||||
font-display: fallback;
|
||||
src: url(/ressourcen/fonts/Orbitron-Medium.otf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/ressourcen/fonts/MaterialIcons-Regular.ttf);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
14
homepage/cwsvJudo/src/css/materialize/parallax.css
Normal file
14
homepage/cwsvJudo/src/css/materialize/parallax.css
Normal file
@@ -0,0 +1,14 @@
|
||||
.parallax-container {
|
||||
height: 50vw;
|
||||
}
|
||||
|
||||
.parallax-container > .parallax > img{
|
||||
/*
|
||||
prevent scaling that screws the ratio while still "filling" the parallax element
|
||||
- @todo What would be the conditions to the resolution (ratio?) of the wallpaper to work well with it?
|
||||
*/
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
min-height: 150%;
|
||||
max-height: 300%;
|
||||
}
|
||||
Reference in New Issue
Block a user