version before img-change
This commit is contained in:
silas
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user