troogs/dd-weekend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling and navigation logic

Browse Source
This commit is contained in:
Andre Beging
2020-02-12 10:58:09 +01:00
parent fe926d1898
commit 7c15a64ddb
19 changed files with 283 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
content/anmeldung.md
View File

@@ -1,10 +1,8 @@
---
title: Kontakt & Anfahrt
date: '2014-04-09'
date: '2020-02-12'
---
<p><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1491.2070126276749!2d8.019840114042237!3d50.87386025123275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bc1c92617567e9%3A0xf8194b5a7311fcf8!2sMartinikirche!5e1!3m2!1sde!2sde!4v1463569599015" width="100%" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Anmeldeformular kommt
**Martinikirche**\
Grabenstraße 22\
57072 Siegen
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBLKLXulGQOIXj123Q6vQL2a-w5qPV342561C9GE0O_6FDcg/viewform?embedded=true" width="100%" height="1491" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

84
content/info.md Normal file
View File

@@ -0,0 +1,84 @@
---
title: Infos
date: '2020-02-12'
---
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2545.2760388898882!2d7.947020516297274!3d50.36140710165712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bdd25d282463d9%3A0x3b67bdeed2db34d8!2sVerein%20f%C3%BCr%20Sozialwesen%20und%20%C3%96kologie%20G%C3%BClle-M%C3%BChle!5e0!3m2!1sen!2sde!4v1581491224203!5m2!1sen!2sde" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="true"></iframe>
**Verein für Sozialwesen und Ökologie Gülle Mühle e.V.**\
Daubachtal 1\
65558 Langenscheid\
[www.guelle-muehle.de](https://www.guelle-muehle.de/)
<section class="cards">
<article class="card">
<div class="card-header">
Das Haus<strong></strong><br />
Mit Parkplätzen
</div>
<div class="card-body text-center">
<a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
<img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/LWmnVRfX4P.jpg" />
</a>
</div>
</article>
<article class="card">
<div class="card-header">
<strong>Lagerfeuer</strong><br />
Kinder bitte wegdenken
</div>
<div class="card-body text-center">
<a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
<img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/gO6sg4fY6I.jpg" />
</a>
</div>
</article>
<article class="card">
<div class="card-header">
<strong>Terrasse</strong><br />
Eingehend geprüfte Flunkyballeignung
</div>
<div class="card-body text-center">
<a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
<img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ZovtdYV7q3.jpg" />
</a>
</div>
</article>
<article class="card">
<div class="card-header">
<strong>Aufenthaltsraum</strong><br />
Von innen viel größer
</div>
<div class="card-body text-center">
<a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
<img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ECE1Bdcflr.jpg" />
</a>
</div>
</article>
<article class="card">
<div class="card-header">
<strong>Küche</strong><br />
Gulasch? Gulasch!
</div>
<div class="card-body text-center">
<a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
<img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/Stdx7GzUbz.jpg" />
</a>
</div>
</article>
<article class="card">
<div class="card-header">
<strong>Bach</strong><br />
Morgens ein paar Bahnen schwimmen
</div>
<div class="card-body text-center">
<a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
<img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/G9yH4Oy3eu.jpg" />
</a>
</div>
</article>
</section>

1
layouts/_default/single.html
View File

@@ -7,6 +7,7 @@
{{ partial "hero.html" . }}
{{ end }}
<div id="content">
<h1>{{ .Title }}</h1>
{{ .Content }}
</div>
{{ partial "footer.html" . }}

13
layouts/partials/footer.html
View File

@@ -2,23 +2,18 @@
<div class="footer-row">
<div class="column">
<p>
<strong>Nacht der Wissenschaft Siegen</strong>
<strong>Codename DDWE</strong>
</p>
<p>
Eine Veranstaltung der Studentischen Initiative für
Wissenschaftskommunikation.<br />Kurz: WissKomm
Eine Schnapsidee des &lt;DD&gt;-Chapter Siegen: Name folgt...
</p>
<p>
<a href="http://www.wisskomm.org" target="_blank">www.wisskomm.org</a>
</p>
<p>
<a href='{{ "legal" | absURL }}'>Impressum</a> | <a href='{{ "privacy" | absURL }}'>Datenschutzerklärung</a>
<a href='http://durstiger-donnerstag.de/index.php?page=kontakt_impressum' target="_blank">Impressum</a> | <a href='http://durstiger-donnerstag.de/index.php?page=datenschutz' target="_blank">Datenschutzerklärung</a>
</p>
</div>
<div class="column">
<p>
<a href="https://www.facebook.com/ndwsiegen/" target="_blank"><img src='{{ "img/facebook_g.png" | absURL }}' width="50px" /></a>
<a href="https://www.instagram.com/nacht_der_wissenschaft_siegen/" target="_blank"><img src='{{ "img/instagram_g.png" | absURL }}' width="50px" /></a>
<img src='{{ "assets/D5_Logo.svg" | absURL }}' >
</p>
</div>
</div>

6
layouts/partials/hero.html
View File

@@ -1,9 +1,7 @@
<div id="hero">
<div>
<h1>Das erste alljährliche*<br /><img src="assets/dd_white.png" style="height: 3.1rem; display: inline-block;">-Wochenende</DD></h1>
<div style="padding: 5vh 0;">
<h1>Das erste alljährliche<small>*</small><br /><img src="assets/dd_white.png">-Wochenende</DD></h1>
<h2>28.08 - 30.08.2020</h2>
</div>
<h3><a href="" class="btn btn-light btn-lg">Jetzt anmelden!</a></h3>
<h3><a href='{{ "anmeldung/" | absURL }}' class="btn btn-light btn-lg">INFOS</a> <a href='{{ "anmeldung/" | absURL }}' class="btn btn-light btn-lg">JETZT ANMELDEN!</a></h3>
</div>
</div>

14
layouts/partials/navigation.html
View File

@@ -1,15 +1,21 @@
<div class="nav">
<nav>
<div class="nav-left">
{{ $classString := "" }}
<a href='{{ "" | absURL }}' class="header-logo">
<img src='{{ "assets/dd_white.png" | absURL }}' />
</a>
<ul class="nav-links">
<a href='{{ "anmeldung" | absURL }}'>
<li>Anmeldung</li>
{{ if (eq .Permalink (string ("anmeldung/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
<a href='{{ "anmeldung/" | absURL }}'>
<li {{$classString | safeHTMLAttr}}>Anmeldung</li>
</a>
<a href='{{ "asd" | absURL }}'>
<li>Anmeldung</li>
{{ if (eq .Permalink (string ("info/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
<a href='{{ "info/" | absURL }}'>
<li {{$classString | safeHTMLAttr}}>Infos</li>
</a>
</ul>
</div>

5
src/style/_cards.scss
View File

@@ -12,6 +12,8 @@
margin: 1rem .25em;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
> a {
color: unset;
@@ -21,9 +23,10 @@
.card-header {
background-color: red;
padding: .75rem 1.25rem;
background-color: rgba(0,0,0,.03);
border: 0px solid rgba(0,0,0,.125);
border-bottom-width: 1px;
background-color: $primary-color;
color: #fff;
@media screen and (max-width: $breakpoint-xs) {
border-width: 1px;

1
src/style/_footer.scss
View File

@@ -42,6 +42,7 @@ footer {
img {
display: inline-block;
margin: 0px 10px;
max-width: 250px;
}
}
}

5
src/style/_navigation.scss
View File

@@ -7,6 +7,8 @@
top: 0;
width: 100%;
z-index: 1000;
font-family: "SFMoviePoster", system-ui, sans-serif;
font-size: 2.8rem;
nav {
padding: 0 20px;
@@ -17,6 +19,7 @@
.header-logo img {
height: 35px;
display: inline-block;
}
.nav-links {
@@ -36,7 +39,7 @@
&:hover,
&.active {
border-color: inherit;
padding: 5px 0px;
padding: 0px 0px;
}
}
}

2
src/style/_variables.scss
View File

@@ -6,6 +6,6 @@ $breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$primary-color: #09003d;
$primary-color: #09003d18;
$primary-color: rgb(128, 0, 0);
$hero-color: #fff;
$footer-color: #898f9c;

77
src/style/combined.scss
View File

@@ -7,6 +7,20 @@
@import "_footer.scss";
@import "_cards.scss";
@font-face {
font-family: "SFMoviePoster";
src: url("../font/SFMoviePoster.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "SFMoviePoster";
src: url("../font/SFMoviePosterBold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "FiraSans";
src: url("../font/FiraSans-Regular.ttf") format("truetype");
@@ -47,6 +61,15 @@ body {
position: absolute;
top: 80px;
width: 100%;
min-height: calc(100vh - 80px);
}
h1,h2,h3,h4,h5,h6 {
font-family: "SFMoviePoster", system-ui, sans-serif;
}
h1 {
font-size: 4rem;
}
h2,h3 {
@@ -63,9 +86,7 @@ p {
max-width: 1440px;
margin: auto;
@media screen and (max-width: $breakpoint-xs) {
padding: 20px;
}
padding-bottom: 300px;
}
@@ -147,18 +168,42 @@ body.hero {
justify-content: center;
text-align: center;
> div > div {
border: 1px solid red;
padding: 0;
}
h1,h2,h3,h4 {
img {
vertical-align: middle;
display: inline-block;
}
small {
font-size: .5em;
vertical-align: text-top;
}
}
h1 {
font-size: 7vw;
font-size: 15vw;
font-weight: normal;
line-height: 15vw;
img {
width: 18vw;
height: auto;
}
}
h2 {
font-size: 4vw;
font-weight: lighter;
font-size: 8vw;
line-height: 8vw;
}
h3 {
font-size: 2vw;
font-size: 3vw;
font-weight: lighter;
}
@@ -172,13 +217,23 @@ body.hero {
opacity: 0.3;
}
@media only screen and (max-width: $breakpoint-xs) {
h2 {
font-size: 6vw;
@media only screen and (max-width: $breakpoint-xl) {
h1 {font-size: 20vw; line-height: 17vw; img{width: 28vw;}}
h2 {font-size: 12vw; line-height: 12vw;}
h3 {font-size: 4vw;}
}
h3 {
font-size: 4vw;
@media only screen and (max-width: $breakpoint-lg) {
h1 img{width: 34vw;}
h3 { font-size: 5vw; }
}
@media only screen and (max-width: $breakpoint-sm) {
}
@media only screen and (max-width: $breakpoint-xs) {
h1 {font-size: 22vw; line-height: 20vw;}
h2 {font-size: 16vw; line-height: 16vw;}
h3 {font-size: 9vw;}
}
}

3
static/assets/D5_Logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

108
static/css/ndws.css
View File

@@ -5947,6 +5947,8 @@ select {
top: 0;
width: 100%;
z-index: 1000;
font-family: 'SFMoviePoster', system-ui, sans-serif;
font-size: 2.8rem;
}
.nav nav {
padding: 0 20px;
@@ -5957,6 +5959,7 @@ select {
}
.nav nav .header-logo img {
height: 35px;
display: inline-block;
}
.nav nav .nav-links {
list-style: none;
@@ -5975,7 +5978,7 @@ select {
.nav nav .nav-links a li:hover,
.nav nav .nav-links a li.active {
border-color: inherit;
padding: 5px 0px;
padding: 0px 0px;
}
.nav nav .nav-left {
display: flex;
@@ -6048,6 +6051,7 @@ footer .footer-row a {
footer .footer-row img {
display: inline-block;
margin: 0px 10px;
max-width: 250px;
}
.cards {
@@ -6065,6 +6069,9 @@ footer .footer-row img {
margin: 1rem 0.25em;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.cards .card > a {
color: unset;
@@ -6073,9 +6080,10 @@ footer .footer-row img {
.cards .card .card-header {
background-color: red;
padding: 0.75rem 1.25rem;
background-color: rgba(0, 0, 0, 0.03);
border: 0px solid rgba(0, 0, 0, 0.125);
border-bottom-width: 1px;
background-color: maroon;
color: #fff;
}
@media screen and (max-width: 576px) {
.cards .card .card-header {
@@ -6104,6 +6112,20 @@ footer .footer-row img {
display: inline;
}
@font-face {
font-family: 'SFMoviePoster';
src: url('../font/SFMoviePoster.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SFMoviePoster';
src: url('../font/SFMoviePosterBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'FiraSans';
src: url('../font/FiraSans-Regular.ttf') format('truetype');
@@ -6144,6 +6166,20 @@ body {
position: absolute;
top: 80px;
width: 100%;
min-height: calc(100vh - 80px);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'SFMoviePoster', system-ui, sans-serif;
}
h1 {
font-size: 4rem;
}
h2,
@@ -6162,11 +6198,6 @@ p {
margin: auto;
padding-bottom: 300px;
}
@media screen and (max-width: 576px) {
#content {
padding: 20px;
}
}
.text-center {
text-align: center;
@@ -6252,16 +6283,40 @@ body.hero {
justify-content: center;
text-align: center;
}
#hero > div > div {
border: 1px solid red;
padding: 0;
}
#hero h1 img,
#hero h2 img,
#hero h3 img,
#hero h4 img {
vertical-align: middle;
display: inline-block;
}
#hero h1 small,
#hero h2 small,
#hero h3 small,
#hero h4 small {
font-size: 0.5em;
vertical-align: text-top;
}
#hero h1 {
font-size: 7vw;
font-size: 15vw;
font-weight: normal;
line-height: 15vw;
}
#hero h1 img {
width: 18vw;
height: auto;
}
#hero h2 {
font-size: 4vw;
font-weight: lighter;
font-size: 8vw;
line-height: 8vw;
}
#hero h3 {
font-size: 2vw;
font-size: 3vw;
font-weight: lighter;
}
#hero a {
@@ -6272,11 +6327,40 @@ body.hero {
width: 20%;
opacity: 0.3;
}
@media only screen and (max-width: 576px) {
@media only screen and (max-width: 1200px) {
#hero h1 {
font-size: 20vw;
line-height: 17vw;
}
#hero h1 img {
width: 28vw;
}
#hero h2 {
font-size: 6vw;
font-size: 12vw;
line-height: 12vw;
}
#hero h3 {
font-size: 4vw;
}
}
@media only screen and (max-width: 992px) {
#hero h1 img {
width: 34vw;
}
#hero h3 {
font-size: 5vw;
}
}
@media only screen and (max-width: 576px) {
#hero h1 {
font-size: 22vw;
line-height: 20vw;
}
#hero h2 {
font-size: 16vw;
line-height: 16vw;
}
#hero h3 {
font-size: 9vw;
}
}

2
static/css/ndws.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
static/font/FiraSans-Light.ttf Normal file
View File

Binary file not shown.

BIN
static/font/FiraSans-Medium.ttf Normal file
View File

Binary file not shown.

BIN
static/font/FiraSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
static/font/SFMoviePoster.ttf Normal file
View File

Binary file not shown.

BIN
static/font/SFMoviePosterBold.ttf Normal file
View File

Binary file not shown.