Ainias/hochzeit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

version before img-change

Browse Source
This commit is contained in:
silas 2020-12-04 15:08:50 +01:00
parent 1eb4f908a4
commit f0a46aaae6
11 changed files with 271 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/img/tagesablauf_godi.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 MiB

19
dist/index.html vendored
View File

@ -11,10 +11,25 @@
<title>J & S</title> <title>J & S</title>
<link href="main.css" rel="stylesheet"></head> <link href="main.css" rel="stylesheet"></head>
<body> <body>
<nav class="top-bar">
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<img class="logo-img" src="/img/logo.png" alt="J&S">
<button class="menu-icon" type="button" data-toggle="main-menu"></button>
<!-- <div class="title-bar-title">Menu</div>-->
</div>
<nav class="top-bar" id="main-menu" data-responsive-toggle="main-menu">
<div class="grid-container width-100"> <div class="grid-container width-100">
<div class="top-bar-left"> <div class="top-bar-left">
<ul class="menu align-center-middle"> <ul class="menu align-center-middle vertical responsive-menu hide-for-medium" data-toggle="main-menu">
<span class="menu-closer"></span>
<li class="active" data-site="home" data-img="1"><a>Home</a></li>
<li data-site="tagesablauf"><a>Tagesablauf</a></li>
<li data-site="unterkunft"><a>Unterkunft</a></li>
<li data-site="geschenke"><a>Geschenke</a></li>
<!-- <li><a href="#">Galerie</a></li>-->
</ul>
<ul class="menu align-center-middle medium-horizontal hide-for-small-only">
<li><img class="logo-img" src="/img/logo.png" alt="J&S"></li> <li><img class="logo-img" src="/img/logo.png" alt="J&S"></li>
<li class="active" data-site="home" data-img="1"><a>Home</a></li> <li class="active" data-site="home" data-img="1"><a>Home</a></li>
<li data-site="tagesablauf"><a>Tagesablauf</a></li> <li data-site="tagesablauf"><a>Tagesablauf</a></li>

199
dist/main.css vendored
View File

@ -156,7 +156,7 @@ template {
display: none; } display: none; }
.foundation-mq { .foundation-mq {
font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; } font-family: "small=0em&medium=50em&large=64em&xlarge=75em&xxlarge=90em"; }
html { html {
box-sizing: border-box; box-sizing: border-box;
@ -548,7 +548,7 @@ h6, .h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; } margin-bottom: 0.5rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
h1, .h1 { h1, .h1 {
font-size: 3rem; } font-size: 3rem; }
h2, .h2 { h2, .h2 {
@ -695,7 +695,7 @@ ul.no-bullet, ol.no-bullet {
.text-justify { .text-justify {
text-align: justify; } text-align: justify; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-text-left { .medium-text-left {
text-align: left; } text-align: left; }
.medium-text-right { .medium-text-right {
@ -782,7 +782,7 @@ ul.no-bullet, ol.no-bullet {
max-width: 75rem; max-width: 75rem;
margin-left: auto; margin-left: auto;
margin-right: auto; } margin-right: auto; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-container { .grid-container {
padding-right: 0.9375rem; padding-right: 0.9375rem;
padding-left: 0.9375rem; } } padding-left: 0.9375rem; } }
@ -792,7 +792,7 @@ ul.no-bullet, ol.no-bullet {
max-width: 100%; max-width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; } margin-right: auto; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-container.fluid { .grid-container.fluid {
padding-right: 0.9375rem; padding-right: 0.9375rem;
padding-left: 0.9375rem; } } padding-left: 0.9375rem; } }
@ -826,7 +826,7 @@ ul.no-bullet, ol.no-bullet {
.grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 { .grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
flex-basis: auto; } flex-basis: auto; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 { .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
flex-basis: auto; } } flex-basis: auto; } }
@ -873,7 +873,7 @@ ul.no-bullet, ol.no-bullet {
.grid-x > .small-12 { .grid-x > .small-12 {
width: 100%; } width: 100%; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-x > .medium-auto { .grid-x > .medium-auto {
flex: 1 1 0px; flex: 1 1 0px;
width: auto; } width: auto; }
@ -948,7 +948,7 @@ ul.no-bullet, ol.no-bullet {
.grid-margin-x { .grid-margin-x {
margin-left: -0.625rem; margin-left: -0.625rem;
margin-right: -0.625rem; } margin-right: -0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-x { .grid-margin-x {
margin-left: -0.9375rem; margin-left: -0.9375rem;
margin-right: -0.9375rem; } } margin-right: -0.9375rem; } }
@ -956,7 +956,7 @@ ul.no-bullet, ol.no-bullet {
width: calc(100% - 1.25rem); width: calc(100% - 1.25rem);
margin-left: 0.625rem; margin-left: 0.625rem;
margin-right: 0.625rem; } margin-right: 0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-x > .cell { .grid-margin-x > .cell {
width: calc(100% - 1.875rem); width: calc(100% - 1.875rem);
margin-left: 0.9375rem; margin-left: 0.9375rem;
@ -989,7 +989,7 @@ ul.no-bullet, ol.no-bullet {
width: calc(91.66667% - 1.25rem); } width: calc(91.66667% - 1.25rem); }
.grid-margin-x > .small-12 { .grid-margin-x > .small-12 {
width: calc(100% - 1.25rem); } width: calc(100% - 1.25rem); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-x > .auto { .grid-margin-x > .auto {
width: auto; } width: auto; }
.grid-margin-x > .shrink { .grid-margin-x > .shrink {
@ -1079,7 +1079,7 @@ ul.no-bullet, ol.no-bullet {
.grid-padding-x .grid-padding-x { .grid-padding-x .grid-padding-x {
margin-right: -0.625rem; margin-right: -0.625rem;
margin-left: -0.625rem; } margin-left: -0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-padding-x .grid-padding-x { .grid-padding-x .grid-padding-x {
margin-right: -0.9375rem; margin-right: -0.9375rem;
margin-left: -0.9375rem; } } margin-left: -0.9375rem; } }
@ -1087,7 +1087,7 @@ ul.no-bullet, ol.no-bullet {
.grid-container:not(.full) > .grid-padding-x { .grid-container:not(.full) > .grid-padding-x {
margin-right: -0.625rem; margin-right: -0.625rem;
margin-left: -0.625rem; } margin-left: -0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-container:not(.full) > .grid-padding-x { .grid-container:not(.full) > .grid-padding-x {
margin-right: -0.9375rem; margin-right: -0.9375rem;
margin-left: -0.9375rem; } } margin-left: -0.9375rem; } }
@ -1095,7 +1095,7 @@ ul.no-bullet, ol.no-bullet {
.grid-padding-x > .cell { .grid-padding-x > .cell {
padding-right: 0.625rem; padding-right: 0.625rem;
padding-left: 0.625rem; } padding-left: 0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-padding-x > .cell { .grid-padding-x > .cell {
padding-right: 0.9375rem; padding-right: 0.9375rem;
padding-left: 0.9375rem; } } padding-left: 0.9375rem; } }
@ -1124,7 +1124,7 @@ ul.no-bullet, ol.no-bullet {
.small-up-8 > .cell { .small-up-8 > .cell {
width: 12.5%; } width: 12.5%; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-up-1 > .cell { .medium-up-1 > .cell {
width: 100%; } width: 100%; }
.medium-up-2 > .cell { .medium-up-2 > .cell {
@ -1184,7 +1184,7 @@ ul.no-bullet, ol.no-bullet {
.grid-margin-x.small-up-8 > .cell { .grid-margin-x.small-up-8 > .cell {
width: calc(12.5% - 1.25rem); } width: calc(12.5% - 1.25rem); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-x.small-up-1 > .cell { .grid-margin-x.small-up-1 > .cell {
width: calc(100% - 1.875rem); } width: calc(100% - 1.875rem); }
.grid-margin-x.small-up-2 > .cell { .grid-margin-x.small-up-2 > .cell {
@ -1266,7 +1266,7 @@ ul.no-bullet, ol.no-bullet {
width: 91.66667%; } width: 91.66667%; }
.small-margin-collapse > .small-12 { .small-margin-collapse > .small-12 {
width: 100%; } width: 100%; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.small-margin-collapse > .medium-1 { .small-margin-collapse > .medium-1 {
width: 8.33333%; } width: 8.33333%; }
.small-margin-collapse > .medium-2 { .small-margin-collapse > .medium-2 {
@ -1324,7 +1324,7 @@ ul.no-bullet, ol.no-bullet {
padding-right: 0; padding-right: 0;
padding-left: 0; } padding-left: 0; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-margin-collapse { .medium-margin-collapse {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
@ -1332,7 +1332,7 @@ ul.no-bullet, ol.no-bullet {
margin-right: 0; margin-right: 0;
margin-left: 0; } } margin-left: 0; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-margin-collapse > .small-1 { .medium-margin-collapse > .small-1 {
width: 8.33333%; } width: 8.33333%; }
.medium-margin-collapse > .small-2 { .medium-margin-collapse > .small-2 {
@ -1358,7 +1358,7 @@ ul.no-bullet, ol.no-bullet {
.medium-margin-collapse > .small-12 { .medium-margin-collapse > .small-12 {
width: 100%; } } width: 100%; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-margin-collapse > .medium-1 { .medium-margin-collapse > .medium-1 {
width: 8.33333%; } width: 8.33333%; }
.medium-margin-collapse > .medium-2 { .medium-margin-collapse > .medium-2 {
@ -1410,7 +1410,7 @@ ul.no-bullet, ol.no-bullet {
.medium-margin-collapse > .large-12 { .medium-margin-collapse > .large-12 {
width: 100%; } } width: 100%; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-padding-collapse { .medium-padding-collapse {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
@ -1584,7 +1584,7 @@ ul.no-bullet, ol.no-bullet {
.grid-margin-x > .small-offset-11 { .grid-margin-x > .small-offset-11 {
margin-left: calc(91.66667% + 0.625rem); } margin-left: calc(91.66667% + 0.625rem); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-offset-0 { .medium-offset-0 {
margin-left: 0%; } margin-left: 0%; }
.grid-margin-x > .medium-offset-0 { .grid-margin-x > .medium-offset-0 {
@ -1696,7 +1696,7 @@ ul.no-bullet, ol.no-bullet {
height: auto; } height: auto; }
.grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 { .grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
flex-basis: auto; } flex-basis: auto; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 { .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
flex-basis: auto; } } flex-basis: auto; } }
@media print, screen and (min-width: 64em) { @media print, screen and (min-width: 64em) {
@ -1728,7 +1728,7 @@ ul.no-bullet, ol.no-bullet {
height: 91.66667%; } height: 91.66667%; }
.grid-y > .small-12 { .grid-y > .small-12 {
height: 100%; } height: 100%; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-y > .medium-auto { .grid-y > .medium-auto {
flex: 1 1 0px; flex: 1 1 0px;
height: auto; } height: auto; }
@ -1796,7 +1796,7 @@ ul.no-bullet, ol.no-bullet {
.grid-padding-y .grid-padding-y { .grid-padding-y .grid-padding-y {
margin-top: -0.625rem; margin-top: -0.625rem;
margin-bottom: -0.625rem; } margin-bottom: -0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-padding-y .grid-padding-y { .grid-padding-y .grid-padding-y {
margin-top: -0.9375rem; margin-top: -0.9375rem;
margin-bottom: -0.9375rem; } } margin-bottom: -0.9375rem; } }
@ -1804,7 +1804,7 @@ ul.no-bullet, ol.no-bullet {
.grid-padding-y > .cell { .grid-padding-y > .cell {
padding-top: 0.625rem; padding-top: 0.625rem;
padding-bottom: 0.625rem; } padding-bottom: 0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-padding-y > .cell { .grid-padding-y > .cell {
padding-top: 0.9375rem; padding-top: 0.9375rem;
padding-bottom: 0.9375rem; } } padding-bottom: 0.9375rem; } }
@ -1812,7 +1812,7 @@ ul.no-bullet, ol.no-bullet {
.grid-margin-y { .grid-margin-y {
margin-top: -0.625rem; margin-top: -0.625rem;
margin-bottom: -0.625rem; } margin-bottom: -0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y { .grid-margin-y {
margin-top: -0.9375rem; margin-top: -0.9375rem;
margin-bottom: -0.9375rem; } } margin-bottom: -0.9375rem; } }
@ -1820,7 +1820,7 @@ ul.no-bullet, ol.no-bullet {
height: calc(100% - 1.25rem); height: calc(100% - 1.25rem);
margin-top: 0.625rem; margin-top: 0.625rem;
margin-bottom: 0.625rem; } margin-bottom: 0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y > .cell { .grid-margin-y > .cell {
height: calc(100% - 1.875rem); height: calc(100% - 1.875rem);
margin-top: 0.9375rem; margin-top: 0.9375rem;
@ -1853,7 +1853,7 @@ ul.no-bullet, ol.no-bullet {
height: calc(91.66667% - 1.25rem); } height: calc(91.66667% - 1.25rem); }
.grid-margin-y > .small-12 { .grid-margin-y > .small-12 {
height: calc(100% - 1.25rem); } height: calc(100% - 1.25rem); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y > .auto { .grid-margin-y > .auto {
height: auto; } height: auto; }
.grid-margin-y > .shrink { .grid-margin-y > .shrink {
@ -1971,7 +1971,7 @@ ul.no-bullet, ol.no-bullet {
max-height: 100%; max-height: 100%;
flex-wrap: nowrap; } flex-wrap: nowrap; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-grid-frame { .medium-grid-frame {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -2035,7 +2035,7 @@ ul.no-bullet, ol.no-bullet {
align-items: stretch; align-items: stretch;
height: 100vh; } height: 100vh; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-y.medium-grid-frame { .grid-y.medium-grid-frame {
width: auto; width: auto;
overflow: hidden; overflow: hidden;
@ -2056,7 +2056,7 @@ ul.no-bullet, ol.no-bullet {
.cell .grid-y.grid-frame { .cell .grid-y.grid-frame {
height: 100%; } height: 100%; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.cell .grid-y.medium-grid-frame { .cell .grid-y.medium-grid-frame {
height: 100%; } } height: 100%; } }
@ -2067,7 +2067,7 @@ ul.no-bullet, ol.no-bullet {
.grid-margin-y { .grid-margin-y {
margin-top: -0.625rem; margin-top: -0.625rem;
margin-bottom: -0.625rem; } margin-bottom: -0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y { .grid-margin-y {
margin-top: -0.9375rem; margin-top: -0.9375rem;
margin-bottom: -0.9375rem; } } margin-bottom: -0.9375rem; } }
@ -2075,7 +2075,7 @@ ul.no-bullet, ol.no-bullet {
height: calc(100% - 1.25rem); height: calc(100% - 1.25rem);
margin-top: 0.625rem; margin-top: 0.625rem;
margin-bottom: 0.625rem; } margin-bottom: 0.625rem; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y > .cell { .grid-margin-y > .cell {
height: calc(100% - 1.875rem); height: calc(100% - 1.875rem);
margin-top: 0.9375rem; margin-top: 0.9375rem;
@ -2108,7 +2108,7 @@ ul.no-bullet, ol.no-bullet {
height: calc(91.66667% - 1.25rem); } height: calc(91.66667% - 1.25rem); }
.grid-margin-y > .small-12 { .grid-margin-y > .small-12 {
height: calc(100% - 1.25rem); } height: calc(100% - 1.25rem); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y > .auto { .grid-margin-y > .auto {
height: auto; } height: auto; }
.grid-margin-y > .shrink { .grid-margin-y > .shrink {
@ -2197,14 +2197,14 @@ ul.no-bullet, ol.no-bullet {
.grid-frame.grid-margin-y { .grid-frame.grid-margin-y {
height: calc(100vh + 1.25rem); } height: calc(100vh + 1.25rem); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-frame.grid-margin-y { .grid-frame.grid-margin-y {
height: calc(100vh + 1.875rem); } } height: calc(100vh + 1.875rem); } }
@media print, screen and (min-width: 64em) { @media print, screen and (min-width: 64em) {
.grid-frame.grid-margin-y { .grid-frame.grid-margin-y {
height: calc(100vh + 1.875rem); } } height: calc(100vh + 1.875rem); } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.grid-margin-y.medium-grid-frame { .grid-margin-y.medium-grid-frame {
height: calc(100vh + 1.875rem); } } height: calc(100vh + 1.875rem); } }
@ -2517,7 +2517,7 @@ a.button:hover, a.button:focus {
.button-group.stacked.expanded .button, .button-group.stacked-for-small.expanded .button, .button-group.stacked-for-medium.expanded .button { .button-group.stacked.expanded .button, .button-group.stacked-for-small.expanded .button, .button-group.stacked-for-medium.expanded .button {
flex: 1 1 0px; flex: 1 1 0px;
margin-right: 0; } margin-right: 0; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.button-group.stacked-for-small .button { .button-group.stacked-for-small .button {
flex: 0 0 auto; flex: 0 0 auto;
margin-bottom: 0; } } margin-bottom: 0; } }
@ -2525,7 +2525,7 @@ a.button:hover, a.button:focus {
.button-group.stacked-for-medium .button { .button-group.stacked-for-medium .button {
flex: 0 0 auto; flex: 0 0 auto;
margin-bottom: 0; } } margin-bottom: 0; } }
@media print, screen and (max-width: 39.99875em) { @media print, screen and (max-width: 49.99875em) {
.button-group.stacked-for-small.expanded { .button-group.stacked-for-small.expanded {
display: block; } display: block; }
.button-group.stacked-for-small.expanded .button { .button-group.stacked-for-small.expanded .button {
@ -3032,7 +3032,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
display: none; } display: none; }
.pagination li:last-child, .pagination li:first-child { .pagination li:last-child, .pagination li:first-child {
display: inline-block; } display: inline-block; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.pagination li { .pagination li {
display: inline-block; } } display: inline-block; } }
.pagination a, .pagination a,
@ -3212,7 +3212,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
flex-wrap: nowrap; } flex-wrap: nowrap; }
.media-object img { .media-object img {
max-width: none; } max-width: none; }
@media print, screen and (max-width: 39.99875em) { @media print, screen and (max-width: 49.99875em) {
.media-object.stack-for-small { .media-object.stack-for-small {
flex-wrap: wrap; } } flex-wrap: wrap; } }
@ -3224,7 +3224,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
padding-left: 1rem; } padding-left: 1rem; }
.media-object-section > :last-child { .media-object-section > :last-child {
margin-bottom: 0; } margin-bottom: 0; }
@media print, screen and (max-width: 39.99875em) { @media print, screen and (max-width: 49.99875em) {
.stack-for-small .media-object-section { .stack-for-small .media-object-section {
padding: 0; padding: 0;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -3446,7 +3446,7 @@ a.thumbnail {
margin-left: 1rem; } margin-left: 1rem; }
.menu.simple a { .menu.simple a {
padding: 0; } padding: 0; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.menu.medium-horizontal { .menu.medium-horizontal {
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; } flex-direction: row; }
@ -3843,7 +3843,7 @@ a.thumbnail {
border-left-style: solid; border-left-style: solid;
border-color: transparent transparent transparent #1779ba; } border-color: transparent transparent transparent #1779ba; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu { .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
top: 100%; top: 100%;
right: 0; right: 0;
@ -4164,7 +4164,7 @@ a.thumbnail {
.off-canvas-content .off-canvas.is-open { .off-canvas-content .off-canvas.is-open {
transform: translate(0, 0); } transform: translate(0, 0); }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.position-left.reveal-for-medium { .position-left.reveal-for-medium {
transform: none; transform: none;
z-index: 12; z-index: 12;
@ -4272,7 +4272,7 @@ a.thumbnail {
.position-bottom.reveal-for-large ~ .off-canvas-content { .position-bottom.reveal-for-large ~ .off-canvas-content {
margin-bottom: 250px; } } margin-bottom: 250px; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.off-canvas.in-canvas-for-medium { .off-canvas.in-canvas-for-medium {
visibility: visible; visibility: visible;
height: auto; height: auto;
@ -4337,28 +4337,28 @@ html.is-reveal-open {
overflow-y: auto; } overflow-y: auto; }
[data-whatinput='mouse'] .reveal { [data-whatinput='mouse'] .reveal {
outline: 0; } outline: 0; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.reveal { .reveal {
min-height: 0; } } min-height: 0; } }
.reveal .column { .reveal .column {
min-width: 0; } min-width: 0; }
.reveal > :last-child { .reveal > :last-child {
margin-bottom: 0; } margin-bottom: 0; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.reveal { .reveal {
width: 600px; width: 600px;
max-width: 75rem; } } max-width: 75rem; } }
.reveal.collapse { .reveal.collapse {
padding: 0; } padding: 0; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.reveal.tiny { .reveal.tiny {
width: 30%; width: 30%;
max-width: 75rem; } } max-width: 75rem; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.reveal.small { .reveal.small {
width: 50%; width: 50%;
max-width: 75rem; } } max-width: 75rem; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.reveal.large { .reveal.large {
width: 90%; width: 90%;
max-width: 75rem; } } max-width: 75rem; } }
@ -4374,7 +4374,7 @@ html.is-reveal-open {
margin-left: 0; margin-left: 0;
border: 0; border: 0;
border-radius: 0; } border-radius: 0; }
@media print, screen and (max-width: 39.99875em) { @media print, screen and (max-width: 49.99875em) {
.reveal { .reveal {
top: 0; top: 0;
right: 0; right: 0;
@ -4459,7 +4459,7 @@ html.is-reveal-open {
.top-bar .top-bar-right { .top-bar .top-bar-right {
flex: 0 0 100%; flex: 0 0 100%;
max-width: 100%; } max-width: 100%; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.top-bar { .top-bar {
flex-wrap: nowrap; } flex-wrap: nowrap; }
.top-bar .top-bar-left { .top-bar .top-bar-left {
@ -4582,7 +4582,7 @@ html.is-reveal-open {
.small-order-6 { .small-order-6 {
order: 6; } order: 6; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-order-1 { .medium-order-1 {
order: 1; } order: 1; }
.medium-order-2 { .medium-order-2 {
@ -4634,7 +4634,7 @@ html.is-reveal-open {
.flex-dir-column-reverse { .flex-dir-column-reverse {
flex-direction: column-reverse; } flex-direction: column-reverse; }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.medium-flex-container { .medium-flex-container {
display: flex; } display: flex; }
.medium-flex-child-auto { .medium-flex-child-auto {
@ -4676,27 +4676,27 @@ html.is-reveal-open {
.invisible { .invisible {
visibility: hidden; } visibility: hidden; }
@media print, screen and (max-width: 39.99875em) { @media print, screen and (max-width: 49.99875em) {
.hide-for-small-only { .hide-for-small-only {
display: none !important; } } display: none !important; } }
@media screen and (max-width: 0em), screen and (min-width: 40em) { @media screen and (max-width: 0em), screen and (min-width: 50em) {
.show-for-small-only { .show-for-small-only {
display: none !important; } } display: none !important; } }
@media print, screen and (min-width: 40em) { @media print, screen and (min-width: 50em) {
.hide-for-medium { .hide-for-medium {
display: none !important; } } display: none !important; } }
@media screen and (max-width: 39.99875em) { @media screen and (max-width: 49.99875em) {
.show-for-medium { .show-for-medium {
display: none !important; } } display: none !important; } }
@media print, screen and (min-width: 40em) and (max-width: 63.99875em) { @media print, screen and (min-width: 50em) and (max-width: 63.99875em) {
.hide-for-medium-only { .hide-for-medium-only {
display: none !important; } } display: none !important; } }
@media screen and (max-width: 39.99875em), screen and (min-width: 64em) { @media screen and (max-width: 49.99875em), screen and (min-width: 64em) {
.show-for-medium-only { .show-for-medium-only {
display: none !important; } } display: none !important; } }
@ -4771,18 +4771,58 @@ html.is-reveal-open {
flex: 1; flex: 1;
text-align: center; text-align: center;
height: 5rem; height: 5rem;
padding-top: 0.5rem; padding-top: 0.9rem;
padding-bottom: 0.5rem; } padding-bottom: 0.5rem; }
@media print, screen and (min-width: 64em) {
.top-bar .menu li {
padding-top: 0.5rem; } }
.top-bar .menu li a { .top-bar .menu li a {
color: black; color: black;
font-family: "Bahnschrift", Helvetica, Arial, serif; font-family: "Bahnschrift", Helvetica, Arial, serif;
font-size: 2rem; } font-size: 1.4rem; }
@media print, screen and (min-width: 64em) {
.top-bar .menu li a {
font-size: 2rem; } }
.top-bar .menu li.active { .top-bar .menu li.active {
background: #d7c9ac; } background: #d7c9ac; }
.top-bar .menu li.active > a { .top-bar .menu li.active > a {
background: #d7c9ac; } background: #d7c9ac; }
.top-bar .menu .logo-img { .top-bar .menu .logo-img {
height: 4rem; } height: 3rem; }
@media print, screen and (min-width: 64em) {
.top-bar .menu .logo-img {
height: 4rem; } }
.top-bar .menu.responsive-menu {
position: absolute;
right: 0;
z-index: 1;
box-shadow: 0 0 5px #d7c9ac; }
.top-bar .menu.responsive-menu .menu-closer {
z-index: -1;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.top-bar .menu.responsive-menu li {
width: 100%; }
.title-bar {
background: #d7c9ac;
text-align: right;
display: block; }
.title-bar .menu-icon {
width: 2rem;
height: 2rem;
outline: none; }
.title-bar .menu-icon::after {
background: #fefefe;
height: 0.22222rem;
box-shadow: 0 0.66667rem 0 #fefefe, 0 1.33333rem 0 #fefefe; }
.title-bar .logo-img {
float: left;
height: 2rem; }
#map_unterkunft { #map_unterkunft {
width: 100%; width: 100%;
@ -4906,13 +4946,16 @@ body {
height: calc(100% - 5rem); height: calc(100% - 5rem);
position: relative; position: relative;
overflow: auto; } overflow: auto; }
@media print, screen and (max-width: 49.99875em) {
body #main-content-container {
height: calc(100% - 3rem); } }
body #main-content-container #scroll-container { body #main-content-container #scroll-container {
height: 100%; min-height: 100%;
background: #d7c9ac; } background: #d7c9ac; }
body #main-content-container #scroll-container > div { body #main-content-container #scroll-container > div {
height: 100%; } min-height: 100%; }
body #main-content-container #scroll-container > div > .grid-x { body #main-content-container #scroll-container > div > .grid-x {
height: 100%; } min-height: 100%; }
body #main-content-container #scroll-container #main-content { body #main-content-container #scroll-container #main-content {
height: 100%; height: 100%;
padding: 0; } padding: 0; }
@ -4930,7 +4973,10 @@ a.hidden-link, a.hidden-link:hover {
h1 { h1 {
font-family: WinterSunrise, serif; font-family: WinterSunrise, serif;
font-size: 4.5rem; } font-size: 3rem; }
@media print, screen and (min-width: 50em) {
h1 {
font-size: 4.5rem; } }
#home-img-container #home-img { #home-img-container #home-img {
width: 100%; width: 100%;
@ -4941,13 +4987,23 @@ h1 {
width: 100%; width: 100%;
height: calc(100% - 5rem); height: calc(100% - 5rem);
object-fit: cover; } object-fit: cover; }
@media print, screen and (max-width: 49.99875em) {
#home-img-container #home-img img {
height: calc(100% - 3rem); } }
#home-img-container #home-img #start-text-img-overlay { #home-img-container #home-img #start-text-img-overlay {
position: absolute; position: absolute;
left: 2rem;
bottom: 3rem; bottom: 3rem;
left: 0.625rem;
color: white; color: white;
font-size: 8rem; font-size: 2.77rem;
line-height: 1.2; } line-height: 1.2; }
@media print, screen and (min-width: 50em) {
#home-img-container #home-img #start-text-img-overlay {
font-size: 6rem;
left: 2rem; } }
@media print, screen and (min-width: 64em) {
#home-img-container #home-img #start-text-img-overlay {
font-size: 8rem; } }
#home-img-container #img-spacer { #home-img-container #img-spacer {
display: block; display: block;
@ -4961,5 +5017,8 @@ img.full-screen-width {
display: none; } display: none; }
.site-content { .site-content {
padding: 3rem 2rem; } padding: 2rem 0.625rem; }
@media print, screen and (min-width: 50em) {
.site-content {
padding: 3rem 2rem; } }

2
src/client/html/tagesablauf.html
View File

@ -48,7 +48,7 @@
acht gibt. acht gibt.
</p></div> </p></div>
<div class="anchor" data-state="spiel"> <div class="anchor" data-state="spiel">
<h1>Spiel & Spaß</h1> <h1>Spiel und Spass</h1>
<p> <p>
Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr
es es

5
src/client/html/unterkunft.html
View File

@ -1,4 +1,7 @@
<div class="flex-container height-100"> <div class="flex-container height-100">
<!-- <div class="height-100 show-for-small-only">-->
<!-- <img src="../img/unterkunft.jpg">-->
<!-- </div>-->
<div class="grow height-100 overflow-auto site-content"> <div class="grow height-100 overflow-auto site-content">
<h1>Unterkunft</h1> <h1>Unterkunft</h1>
<p> <p>
@ -31,7 +34,7 @@
</div> </div>
</div> </div>
<div class="height-100"> <div class="height-100 hide-for-small-only">
<img src="../img/unterkunft.jpg" class="height-100"> <img src="../img/unterkunft.jpg" class="height-100">
</div> </div>
</div> </div>

19
src/client/index.html
View File

@ -11,10 +11,25 @@
<title>J & S</title> <title>J & S</title>
</head> </head>
<body> <body>
<nav class="top-bar">
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<img class="logo-img" src="img/logo.png" alt="J&S">
<button class="menu-icon" type="button" data-toggle="main-menu"></button>
<!-- <div class="title-bar-title">Menu</div>-->
</div>
<nav class="top-bar" id="main-menu" data-responsive-toggle="main-menu">
<div class="grid-container width-100"> <div class="grid-container width-100">
<div class="top-bar-left"> <div class="top-bar-left">
<ul class="menu align-center-middle"> <ul class="menu align-center-middle vertical responsive-menu hide-for-medium" data-toggle="main-menu">
<span class="menu-closer"></span>
<li class="active" data-site="home" data-img="1"><a>Home</a></li>
<li data-site="tagesablauf"><a>Tagesablauf</a></li>
<li data-site="unterkunft"><a>Unterkunft</a></li>
<li data-site="geschenke"><a>Geschenke</a></li>
<!-- <li><a href="#">Galerie</a></li>-->
</ul>
<ul class="menu align-center-middle medium-horizontal hide-for-small-only">
<li><img class="logo-img" src="img/logo.png" alt="J&S"></li> <li><img class="logo-img" src="img/logo.png" alt="J&S"></li>
<li class="active" data-site="home" data-img="1"><a>Home</a></li> <li class="active" data-site="home" data-img="1"><a>Home</a></li>
<li data-site="tagesablauf"><a>Tagesablauf</a></li> <li data-site="tagesablauf"><a>Tagesablauf</a></li>

15
src/client/js/index.ts
View File

@ -35,7 +35,7 @@ const callbacks = {
const navBar = document.querySelector(".top-bar"); const navBar = document.querySelector(".top-bar");
const anchors = document.querySelectorAll(".anchor"); const anchors = document.querySelectorAll(".anchor");
const margin = navBar.clientHeight+50; const margin = navBar.clientHeight + 50;
const observerDown = new IntersectionObserver(entries => { const observerDown = new IntersectionObserver(entries => {
entries.some(entry => { entries.some(entry => {
@ -60,7 +60,7 @@ const callbacks = {
document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => { document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => {
clearTimeout(scrollTimeout); clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() =>{ scrollTimeout = setTimeout(() => {
scrollTimeout = null; scrollTimeout = null;
infoImageContainer.dataset["state"] = state; infoImageContainer.dataset["state"] = state;
scrollToView = false; scrollToView = false;
@ -76,6 +76,7 @@ $(document).foundation();
$(function () { $(function () {
const container = document.getElementById("main-content"); const container = document.getElementById("main-content");
const img = document.getElementById("home-img-container"); const img = document.getElementById("home-img-container");
const navbar = document.getElementById("main-menu");
let currentSite = "home"; let currentSite = "home";
@ -83,11 +84,11 @@ $(function () {
container.innerHTML = templates.home; container.innerHTML = templates.home;
document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => { document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
elem.addEventListener("click", () => { elem.addEventListener("click", () => {
const oldActive = document.querySelector(".menu .active"); const oldActive = document.querySelectorAll(".menu .active");
if (oldActive) { oldActive.forEach(elem => elem.classList.remove("active"));
oldActive.classList.remove("active");
} const nowActive = document.querySelectorAll(".menu li[data-site='" + elem.dataset["site"] + "']");
elem.classList.add("active"); nowActive.forEach(elem => elem.classList.add("active"));
container.innerHTML = templates[elem.dataset["site"]]; container.innerHTML = templates[elem.dataset["site"]];
if (elem.dataset["img"] === "1") { if (elem.dataset["img"] === "1") {

58
src/client/sass/_navbar.scss
View File

@ -16,13 +16,20 @@
flex: 1; flex: 1;
text-align: center; text-align: center;
height: 5rem; height: 5rem;
padding-top: 0.5rem; padding-top: 0.9rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@include breakpoint(large){
padding-top: 0.5rem;
}
a { a {
color: black; color: black;
font-family: "Bahnschrift", Helvetica, Arial, serif; font-family: "Bahnschrift", Helvetica, Arial, serif;
font-size: 2rem; font-size: 1.4rem;
@include breakpoint(large){
font-size: 2rem;
}
} }
&.active { &.active {
@ -35,7 +42,52 @@
} }
.logo-img { .logo-img {
height: 4rem; height: 3rem;
@include breakpoint(large){
height: 4rem;
}
}
&.responsive-menu{
position: absolute;
right:0;
z-index: 1;
box-shadow: 0 0 5px $background-color;
.menu-closer{
z-index: -1;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
li {
width: 100%;
}
} }
} }
} }
$menuIconHeight : 2rem;
.title-bar{
background: $background-color;
text-align: right;
//justify-content: flex-end;
display: block;
.menu-icon{
width: $menuIconHeight;
height: $menuIconHeight;
outline: none;
&::after{
background: #fefefe;
height: #{($menuIconHeight/9)};
box-shadow: 0 #{($menuIconHeight/3)} 0 #fefefe, 0 #{($menuIconHeight*2/3)} 0 #fefefe;
}
}
.logo-img{
float: left;
height: $menuIconHeight;
}
}

5
src/client/sass/_settings.scss
View File

@ -111,14 +111,13 @@ $print-hrefs: true;
$breakpoints: ( $breakpoints: (
small: 0, small: 0,
smedium: 400px, medium: 800px,
medium: 640px,
large: 1024px, large: 1024px,
xlarge: 1200px, xlarge: 1200px,
xxlarge: 1440px, xxlarge: 1440px,
); );
$print-breakpoint: large; $print-breakpoint: large;
$breakpoint-classes: (small smedium medium large); $breakpoint-classes: (small medium large);
// 3. The Grid // 3. The Grid
// ----------- // -----------

55
src/client/sass/index.scss
View File

@ -1,6 +1,6 @@
@import "../../../node_modules/foundation-sites/scss/foundation"; @import "../../../node_modules/foundation-sites/scss/foundation";
@import "settings";
//@import "settings";
//Importiere zuerst foundation vor anderen Imports, damit foundation-settings überschrieben werden //Importiere zuerst foundation vor anderen Imports, damit foundation-settings überschrieben werden
@include foundation-everything; @include foundation-everything;
@ -15,11 +15,11 @@
src: url("../img/WinterSunrise.ttf"); src: url("../img/WinterSunrise.ttf");
} }
.width-100 { .width-100 {
width: 100%; width: 100%;
} }
.height-100{
.height-100 {
height: 100%; height: 100%;
} }
@ -29,7 +29,7 @@ html {
letter-spacing: 1.1px; letter-spacing: 1.1px;
} }
.grow{ .grow {
flex: 1; flex: 1;
} }
@ -38,24 +38,23 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
nav.top-bar {
}
#main-content-container { #main-content-container {
height: calc(100% - 5rem); height: calc(100% - 5rem);
@include breakpoint(small only) {
height: calc(100% - 3rem);
}
position: relative; position: relative;
overflow: auto; overflow: auto;
#scroll-container { #scroll-container {
height: 100%; min-height: 100%;
background: $background-color; background: $background-color;
> div { > div {
height: 100%; min-height: 100%;
> .grid-x { > .grid-x {
height: 100%; min-height: 100%;
} }
} }
@ -67,7 +66,7 @@ body {
} }
} }
.overflow-auto{ .overflow-auto {
overflow: auto; overflow: auto;
} }
@ -76,14 +75,17 @@ h1, p, .padding-default {
padding-right: 1rem; padding-right: 1rem;
} }
a.hidden-link, a.hidden-link:hover{ a.hidden-link, a.hidden-link:hover {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
h1 { h1 {
font-family: WinterSunrise, serif; font-family: WinterSunrise, serif;
font-size: 4.5rem; font-size: 3rem;
@include breakpoint(medium) {
font-size: 4.5rem;
}
} }
#home-img-container { #home-img-container {
@ -97,18 +99,27 @@ h1 {
img { img {
width: 100%; width: 100%;
height: calc(100% - 5rem); height: calc(100% - 5rem);
@include breakpoint(small only) {
height: calc(100% - 3rem);
}
object-fit: cover; object-fit: cover;
} }
#start-text-img-overlay { #start-text-img-overlay {
position: absolute; position: absolute;
left: 2rem;
bottom: 3rem; bottom: 3rem;
//top: 50%; left: 0.625rem;
color: white; color: white;
//font-family: "WinterSunrise", Arial, serif; font-size: 2.77rem;
font-size: 8rem;
line-height: 1.2; line-height: 1.2;
@include breakpoint(medium) {
font-size: 6rem;
left: 2rem;
}
@include breakpoint(large) {
font-size: 8rem;
}
} }
} }
@ -126,6 +137,10 @@ img.full-screen-width {
.hidden { .hidden {
display: none; display: none;
} }
.site-content{
padding: 3rem 2rem; .site-content {
padding: 2rem 0.625rem;
@include breakpoint(medium) {
padding: 3rem 2rem;
}
} }