version before img-change
This commit is contained in:
silas
parent
1eb4f908a4
commit
f0a46aaae6
6
dist/bundle.js
vendored
6
dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/img/tagesablauf_godi.jpg
vendored
BIN
dist/img/tagesablauf_godi.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
19
dist/index.html
vendored
19
dist/index.html
vendored
@ -11,10 +11,25 @@
|
||||
<title>J & S</title>
|
||||
<link href="main.css" rel="stylesheet"></head>
|
||||
<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="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 class="active" data-site="home" data-img="1"><a>Home</a></li>
|
||||
<li data-site="tagesablauf"><a>Tagesablauf</a></li>
|
||||
|
||||
199
dist/main.css
vendored
199
dist/main.css
vendored
@ -156,7 +156,7 @@ template {
|
||||
display: none; }
|
||||
|
||||
.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 {
|
||||
box-sizing: border-box;
|
||||
@ -548,7 +548,7 @@ h6, .h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
h1, .h1 {
|
||||
font-size: 3rem; }
|
||||
h2, .h2 {
|
||||
@ -695,7 +695,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.text-justify {
|
||||
text-align: justify; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-text-left {
|
||||
text-align: left; }
|
||||
.medium-text-right {
|
||||
@ -782,7 +782,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
max-width: 75rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-container {
|
||||
padding-right: 0.9375rem;
|
||||
padding-left: 0.9375rem; } }
|
||||
@ -792,7 +792,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-container.fluid {
|
||||
padding-right: 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 {
|
||||
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 {
|
||||
flex-basis: auto; } }
|
||||
|
||||
@ -873,7 +873,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-x > .small-12 {
|
||||
width: 100%; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-x > .medium-auto {
|
||||
flex: 1 1 0px;
|
||||
width: auto; }
|
||||
@ -948,7 +948,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-margin-x {
|
||||
margin-left: -0.625rem;
|
||||
margin-right: -0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-x {
|
||||
margin-left: -0.9375rem;
|
||||
margin-right: -0.9375rem; } }
|
||||
@ -956,7 +956,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
width: calc(100% - 1.25rem);
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-x > .cell {
|
||||
width: calc(100% - 1.875rem);
|
||||
margin-left: 0.9375rem;
|
||||
@ -989,7 +989,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
width: calc(91.66667% - 1.25rem); }
|
||||
.grid-margin-x > .small-12 {
|
||||
width: calc(100% - 1.25rem); }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-x > .auto {
|
||||
width: auto; }
|
||||
.grid-margin-x > .shrink {
|
||||
@ -1079,7 +1079,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-padding-x .grid-padding-x {
|
||||
margin-right: -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 {
|
||||
margin-right: -0.9375rem;
|
||||
margin-left: -0.9375rem; } }
|
||||
@ -1087,7 +1087,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-container:not(.full) > .grid-padding-x {
|
||||
margin-right: -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 {
|
||||
margin-right: -0.9375rem;
|
||||
margin-left: -0.9375rem; } }
|
||||
@ -1095,7 +1095,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-padding-x > .cell {
|
||||
padding-right: 0.625rem;
|
||||
padding-left: 0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-padding-x > .cell {
|
||||
padding-right: 0.9375rem;
|
||||
padding-left: 0.9375rem; } }
|
||||
@ -1124,7 +1124,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.small-up-8 > .cell {
|
||||
width: 12.5%; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-up-1 > .cell {
|
||||
width: 100%; }
|
||||
.medium-up-2 > .cell {
|
||||
@ -1184,7 +1184,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-margin-x.small-up-8 > .cell {
|
||||
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 {
|
||||
width: calc(100% - 1.875rem); }
|
||||
.grid-margin-x.small-up-2 > .cell {
|
||||
@ -1266,7 +1266,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
width: 91.66667%; }
|
||||
.small-margin-collapse > .small-12 {
|
||||
width: 100%; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.small-margin-collapse > .medium-1 {
|
||||
width: 8.33333%; }
|
||||
.small-margin-collapse > .medium-2 {
|
||||
@ -1324,7 +1324,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
padding-right: 0;
|
||||
padding-left: 0; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-margin-collapse {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
@ -1332,7 +1332,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
margin-right: 0;
|
||||
margin-left: 0; } }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-margin-collapse > .small-1 {
|
||||
width: 8.33333%; }
|
||||
.medium-margin-collapse > .small-2 {
|
||||
@ -1358,7 +1358,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.medium-margin-collapse > .small-12 {
|
||||
width: 100%; } }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-margin-collapse > .medium-1 {
|
||||
width: 8.33333%; }
|
||||
.medium-margin-collapse > .medium-2 {
|
||||
@ -1410,7 +1410,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.medium-margin-collapse > .large-12 {
|
||||
width: 100%; } }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-padding-collapse {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
@ -1584,7 +1584,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-margin-x > .small-offset-11 {
|
||||
margin-left: calc(91.66667% + 0.625rem); }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-offset-0 {
|
||||
margin-left: 0%; }
|
||||
.grid-margin-x > .medium-offset-0 {
|
||||
@ -1696,7 +1696,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
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 {
|
||||
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 {
|
||||
flex-basis: auto; } }
|
||||
@media print, screen and (min-width: 64em) {
|
||||
@ -1728,7 +1728,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
height: 91.66667%; }
|
||||
.grid-y > .small-12 {
|
||||
height: 100%; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-y > .medium-auto {
|
||||
flex: 1 1 0px;
|
||||
height: auto; }
|
||||
@ -1796,7 +1796,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-padding-y .grid-padding-y {
|
||||
margin-top: -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 {
|
||||
margin-top: -0.9375rem;
|
||||
margin-bottom: -0.9375rem; } }
|
||||
@ -1804,7 +1804,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-padding-y > .cell {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-padding-y > .cell {
|
||||
padding-top: 0.9375rem;
|
||||
padding-bottom: 0.9375rem; } }
|
||||
@ -1812,7 +1812,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-margin-y {
|
||||
margin-top: -0.625rem;
|
||||
margin-bottom: -0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-y {
|
||||
margin-top: -0.9375rem;
|
||||
margin-bottom: -0.9375rem; } }
|
||||
@ -1820,7 +1820,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
height: calc(100% - 1.25rem);
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-y > .cell {
|
||||
height: calc(100% - 1.875rem);
|
||||
margin-top: 0.9375rem;
|
||||
@ -1853,7 +1853,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
height: calc(91.66667% - 1.25rem); }
|
||||
.grid-margin-y > .small-12 {
|
||||
height: calc(100% - 1.25rem); }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-y > .auto {
|
||||
height: auto; }
|
||||
.grid-margin-y > .shrink {
|
||||
@ -1971,7 +1971,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
max-height: 100%;
|
||||
flex-wrap: nowrap; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-grid-frame {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -2035,7 +2035,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
align-items: stretch;
|
||||
height: 100vh; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-y.medium-grid-frame {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
@ -2056,7 +2056,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.cell .grid-y.grid-frame {
|
||||
height: 100%; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.cell .grid-y.medium-grid-frame {
|
||||
height: 100%; } }
|
||||
|
||||
@ -2067,7 +2067,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
.grid-margin-y {
|
||||
margin-top: -0.625rem;
|
||||
margin-bottom: -0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-y {
|
||||
margin-top: -0.9375rem;
|
||||
margin-bottom: -0.9375rem; } }
|
||||
@ -2075,7 +2075,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
height: calc(100% - 1.25rem);
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-y > .cell {
|
||||
height: calc(100% - 1.875rem);
|
||||
margin-top: 0.9375rem;
|
||||
@ -2108,7 +2108,7 @@ ul.no-bullet, ol.no-bullet {
|
||||
height: calc(91.66667% - 1.25rem); }
|
||||
.grid-margin-y > .small-12 {
|
||||
height: calc(100% - 1.25rem); }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-margin-y > .auto {
|
||||
height: auto; }
|
||||
.grid-margin-y > .shrink {
|
||||
@ -2197,14 +2197,14 @@ ul.no-bullet, ol.no-bullet {
|
||||
|
||||
.grid-frame.grid-margin-y {
|
||||
height: calc(100vh + 1.25rem); }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.grid-frame.grid-margin-y {
|
||||
height: calc(100vh + 1.875rem); } }
|
||||
@media print, screen and (min-width: 64em) {
|
||||
.grid-frame.grid-margin-y {
|
||||
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 {
|
||||
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 {
|
||||
flex: 1 1 0px;
|
||||
margin-right: 0; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.button-group.stacked-for-small .button {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 0; } }
|
||||
@ -2525,7 +2525,7 @@ a.button:hover, a.button:focus {
|
||||
.button-group.stacked-for-medium .button {
|
||||
flex: 0 0 auto;
|
||||
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 {
|
||||
display: block; }
|
||||
.button-group.stacked-for-small.expanded .button {
|
||||
@ -3032,7 +3032,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
|
||||
display: none; }
|
||||
.pagination li:last-child, .pagination li:first-child {
|
||||
display: inline-block; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.pagination li {
|
||||
display: inline-block; } }
|
||||
.pagination a,
|
||||
@ -3212,7 +3212,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
|
||||
flex-wrap: nowrap; }
|
||||
.media-object img {
|
||||
max-width: none; }
|
||||
@media print, screen and (max-width: 39.99875em) {
|
||||
@media print, screen and (max-width: 49.99875em) {
|
||||
.media-object.stack-for-small {
|
||||
flex-wrap: wrap; } }
|
||||
|
||||
@ -3224,7 +3224,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
|
||||
padding-left: 1rem; }
|
||||
.media-object-section > :last-child {
|
||||
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 {
|
||||
padding: 0;
|
||||
padding-bottom: 1rem;
|
||||
@ -3446,7 +3446,7 @@ a.thumbnail {
|
||||
margin-left: 1rem; }
|
||||
.menu.simple a {
|
||||
padding: 0; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.menu.medium-horizontal {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row; }
|
||||
@ -3843,7 +3843,7 @@ a.thumbnail {
|
||||
border-left-style: solid;
|
||||
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 {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
@ -4164,7 +4164,7 @@ a.thumbnail {
|
||||
.off-canvas-content .off-canvas.is-open {
|
||||
transform: translate(0, 0); }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.position-left.reveal-for-medium {
|
||||
transform: none;
|
||||
z-index: 12;
|
||||
@ -4272,7 +4272,7 @@ a.thumbnail {
|
||||
.position-bottom.reveal-for-large ~ .off-canvas-content {
|
||||
margin-bottom: 250px; } }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.off-canvas.in-canvas-for-medium {
|
||||
visibility: visible;
|
||||
height: auto;
|
||||
@ -4337,28 +4337,28 @@ html.is-reveal-open {
|
||||
overflow-y: auto; }
|
||||
[data-whatinput='mouse'] .reveal {
|
||||
outline: 0; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.reveal {
|
||||
min-height: 0; } }
|
||||
.reveal .column {
|
||||
min-width: 0; }
|
||||
.reveal > :last-child {
|
||||
margin-bottom: 0; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.reveal {
|
||||
width: 600px;
|
||||
max-width: 75rem; } }
|
||||
.reveal.collapse {
|
||||
padding: 0; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.reveal.tiny {
|
||||
width: 30%;
|
||||
max-width: 75rem; } }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.reveal.small {
|
||||
width: 50%;
|
||||
max-width: 75rem; } }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.reveal.large {
|
||||
width: 90%;
|
||||
max-width: 75rem; } }
|
||||
@ -4374,7 +4374,7 @@ html.is-reveal-open {
|
||||
margin-left: 0;
|
||||
border: 0;
|
||||
border-radius: 0; }
|
||||
@media print, screen and (max-width: 39.99875em) {
|
||||
@media print, screen and (max-width: 49.99875em) {
|
||||
.reveal {
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -4459,7 +4459,7 @@ html.is-reveal-open {
|
||||
.top-bar .top-bar-right {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%; }
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.top-bar {
|
||||
flex-wrap: nowrap; }
|
||||
.top-bar .top-bar-left {
|
||||
@ -4582,7 +4582,7 @@ html.is-reveal-open {
|
||||
.small-order-6 {
|
||||
order: 6; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-order-1 {
|
||||
order: 1; }
|
||||
.medium-order-2 {
|
||||
@ -4634,7 +4634,7 @@ html.is-reveal-open {
|
||||
.flex-dir-column-reverse {
|
||||
flex-direction: column-reverse; }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.medium-flex-container {
|
||||
display: flex; }
|
||||
.medium-flex-child-auto {
|
||||
@ -4676,27 +4676,27 @@ html.is-reveal-open {
|
||||
.invisible {
|
||||
visibility: hidden; }
|
||||
|
||||
@media print, screen and (max-width: 39.99875em) {
|
||||
@media print, screen and (max-width: 49.99875em) {
|
||||
.hide-for-small-only {
|
||||
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 {
|
||||
display: none !important; } }
|
||||
|
||||
@media print, screen and (min-width: 40em) {
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.hide-for-medium {
|
||||
display: none !important; } }
|
||||
|
||||
@media screen and (max-width: 39.99875em) {
|
||||
@media screen and (max-width: 49.99875em) {
|
||||
.show-for-medium {
|
||||
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 {
|
||||
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 {
|
||||
display: none !important; } }
|
||||
|
||||
@ -4771,18 +4771,58 @@ html.is-reveal-open {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
height: 5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-top: 0.9rem;
|
||||
padding-bottom: 0.5rem; }
|
||||
@media print, screen and (min-width: 64em) {
|
||||
.top-bar .menu li {
|
||||
padding-top: 0.5rem; } }
|
||||
.top-bar .menu li a {
|
||||
color: black;
|
||||
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 {
|
||||
background: #d7c9ac; }
|
||||
.top-bar .menu li.active > a {
|
||||
background: #d7c9ac; }
|
||||
.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 {
|
||||
width: 100%;
|
||||
@ -4906,13 +4946,16 @@ body {
|
||||
height: calc(100% - 5rem);
|
||||
position: relative;
|
||||
overflow: auto; }
|
||||
@media print, screen and (max-width: 49.99875em) {
|
||||
body #main-content-container {
|
||||
height: calc(100% - 3rem); } }
|
||||
body #main-content-container #scroll-container {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: #d7c9ac; }
|
||||
body #main-content-container #scroll-container > div {
|
||||
height: 100%; }
|
||||
min-height: 100%; }
|
||||
body #main-content-container #scroll-container > div > .grid-x {
|
||||
height: 100%; }
|
||||
min-height: 100%; }
|
||||
body #main-content-container #scroll-container #main-content {
|
||||
height: 100%;
|
||||
padding: 0; }
|
||||
@ -4930,7 +4973,10 @@ a.hidden-link, a.hidden-link:hover {
|
||||
|
||||
h1 {
|
||||
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 {
|
||||
width: 100%;
|
||||
@ -4941,13 +4987,23 @@ h1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 5rem);
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
bottom: 3rem;
|
||||
left: 0.625rem;
|
||||
color: white;
|
||||
font-size: 8rem;
|
||||
font-size: 2.77rem;
|
||||
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 {
|
||||
display: block;
|
||||
@ -4961,5 +5017,8 @@ img.full-screen-width {
|
||||
display: none; }
|
||||
|
||||
.site-content {
|
||||
padding: 3rem 2rem; }
|
||||
padding: 2rem 0.625rem; }
|
||||
@media print, screen and (min-width: 50em) {
|
||||
.site-content {
|
||||
padding: 3rem 2rem; } }
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
acht gibt.
|
||||
</p></div>
|
||||
<div class="anchor" data-state="spiel">
|
||||
<h1>Spiel & Spaß</h1>
|
||||
<h1>Spiel und Spass</h1>
|
||||
<p>
|
||||
Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr
|
||||
es
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<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">
|
||||
<h1>Unterkunft</h1>
|
||||
<p>
|
||||
@ -31,7 +34,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="height-100">
|
||||
<div class="height-100 hide-for-small-only">
|
||||
<img src="../img/unterkunft.jpg" class="height-100">
|
||||
</div>
|
||||
</div>
|
||||
@ -11,10 +11,25 @@
|
||||
<title>J & S</title>
|
||||
</head>
|
||||
<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="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 class="active" data-site="home" data-img="1"><a>Home</a></li>
|
||||
<li data-site="tagesablauf"><a>Tagesablauf</a></li>
|
||||
|
||||
@ -35,7 +35,7 @@ const callbacks = {
|
||||
|
||||
const navBar = document.querySelector(".top-bar");
|
||||
const anchors = document.querySelectorAll(".anchor");
|
||||
const margin = navBar.clientHeight+50;
|
||||
const margin = navBar.clientHeight + 50;
|
||||
|
||||
const observerDown = new IntersectionObserver(entries => {
|
||||
entries.some(entry => {
|
||||
@ -60,7 +60,7 @@ const callbacks = {
|
||||
|
||||
document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() =>{
|
||||
scrollTimeout = setTimeout(() => {
|
||||
scrollTimeout = null;
|
||||
infoImageContainer.dataset["state"] = state;
|
||||
scrollToView = false;
|
||||
@ -76,6 +76,7 @@ $(document).foundation();
|
||||
$(function () {
|
||||
const container = document.getElementById("main-content");
|
||||
const img = document.getElementById("home-img-container");
|
||||
const navbar = document.getElementById("main-menu");
|
||||
|
||||
let currentSite = "home";
|
||||
|
||||
@ -83,11 +84,11 @@ $(function () {
|
||||
container.innerHTML = templates.home;
|
||||
document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
|
||||
elem.addEventListener("click", () => {
|
||||
const oldActive = document.querySelector(".menu .active");
|
||||
if (oldActive) {
|
||||
oldActive.classList.remove("active");
|
||||
}
|
||||
elem.classList.add("active");
|
||||
const oldActive = document.querySelectorAll(".menu .active");
|
||||
oldActive.forEach(elem => elem.classList.remove("active"));
|
||||
|
||||
const nowActive = document.querySelectorAll(".menu li[data-site='" + elem.dataset["site"] + "']");
|
||||
nowActive.forEach(elem => elem.classList.add("active"));
|
||||
|
||||
container.innerHTML = templates[elem.dataset["site"]];
|
||||
if (elem.dataset["img"] === "1") {
|
||||
|
||||
@ -16,13 +16,20 @@
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
height: 5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-top: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
@include breakpoint(large){
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
font-family: "Bahnschrift", Helvetica, Arial, serif;
|
||||
font-size: 2rem;
|
||||
font-size: 1.4rem;
|
||||
@include breakpoint(large){
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -35,7 +42,52 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -111,14 +111,13 @@ $print-hrefs: true;
|
||||
|
||||
$breakpoints: (
|
||||
small: 0,
|
||||
smedium: 400px,
|
||||
medium: 640px,
|
||||
medium: 800px,
|
||||
large: 1024px,
|
||||
xlarge: 1200px,
|
||||
xxlarge: 1440px,
|
||||
);
|
||||
$print-breakpoint: large;
|
||||
$breakpoint-classes: (small smedium medium large);
|
||||
$breakpoint-classes: (small medium large);
|
||||
|
||||
// 3. The Grid
|
||||
// -----------
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../../../node_modules/foundation-sites/scss/foundation";
|
||||
@import "settings";
|
||||
|
||||
//@import "settings";
|
||||
|
||||
//Importiere zuerst foundation vor anderen Imports, damit foundation-settings überschrieben werden
|
||||
@include foundation-everything;
|
||||
@ -15,11 +15,11 @@
|
||||
src: url("../img/WinterSunrise.ttf");
|
||||
}
|
||||
|
||||
|
||||
.width-100 {
|
||||
width: 100%;
|
||||
}
|
||||
.height-100{
|
||||
|
||||
.height-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ html {
|
||||
letter-spacing: 1.1px;
|
||||
}
|
||||
|
||||
.grow{
|
||||
.grow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -38,24 +38,23 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
nav.top-bar {
|
||||
|
||||
}
|
||||
|
||||
#main-content-container {
|
||||
height: calc(100% - 5rem);
|
||||
@include breakpoint(small only) {
|
||||
height: calc(100% - 3rem);
|
||||
}
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
#scroll-container {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: $background-color;
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
> .grid-x {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +66,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-auto{
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -76,14 +75,17 @@ h1, p, .padding-default {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
a.hidden-link, a.hidden-link:hover{
|
||||
a.hidden-link, a.hidden-link:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: WinterSunrise, serif;
|
||||
font-size: 4.5rem;
|
||||
font-size: 3rem;
|
||||
@include breakpoint(medium) {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#home-img-container {
|
||||
@ -97,18 +99,27 @@ h1 {
|
||||
img {
|
||||
width: 100%;
|
||||
height: calc(100% - 5rem);
|
||||
@include breakpoint(small only) {
|
||||
height: calc(100% - 3rem);
|
||||
}
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#start-text-img-overlay {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
bottom: 3rem;
|
||||
//top: 50%;
|
||||
left: 0.625rem;
|
||||
color: white;
|
||||
//font-family: "WinterSunrise", Arial, serif;
|
||||
font-size: 8rem;
|
||||
font-size: 2.77rem;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
.site-content{
|
||||
padding: 3rem 2rem;
|
||||
|
||||
.site-content {
|
||||
padding: 2rem 0.625rem;
|
||||
@include breakpoint(medium) {
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user