Commit 7ad1a230 authored by Dennis Dominik Schöpf's avatar Dennis Dominik Schöpf
Browse files

Finish up responsive design (all but references)

parent 0238d40c
......@@ -14,13 +14,18 @@
<header>
<nav>
<h1>Alex Mayer</h1>
<ul>
<ul id="menu">
<li><a class="active" href="/">Start</a></li>
<li><a href="/">Leistungen</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">Über Mich</a></li>
<li><a href="/">Kontakt</a></li>
</ul>
<button id="menu-trigger">
<span class="menu-bar"></span>
<span class="menu-bar"></span>
<span class="menu-bar"></span>
</button>
</nav>
<section id="hero">
<article>
......@@ -123,7 +128,7 @@
</nav>
<article>
<p>
Demo-Wordpress-Seite im Rahmen der LV Content Mangagement Systeme an
Demo-Wordpress-Seite im Rahmen der LV "Content Mangagement Systeme" an
der FH Salzburg von Dennis Schöpf und Maximilian Schmitt
</p>
<p>Alle Inhalte frei erfunden</p>
......@@ -158,5 +163,6 @@
<p>Freepik (http://www.freepik.com) / www.flaticon.com</p>
</article>
</footer>
<script src="./scripts/main.js"></script>
</body>
</html>
/* Current state */
let menuOpen = true;
/* Store interactive elements */
const menu = document.querySelector('#menu');
const menuTrigger = document.querySelector('#menu-trigger');
/* Register event listeners */
menuTrigger.addEventListener('click', handleMenuButtonClick);
/* Functions */
function handleMenuButtonClick() {
if (menuOpen === false) {
menuOpen = true;
openMenu();
} else {
menuOpen = false;
closeMenu();
}
}
function openMenu() {
menu.classList.add('open');
menuTrigger.classList.add('open');
}
function closeMenu() {
menu.classList.remove('open');
menuTrigger.classList.remove('open');
}
.maxwidthcontainer {
max-width: 128rem;
margin: 0 auto;
padding: 1.5rem;
}
@mixin breakpoint($min, $max: 0) {
@if $max == 0 {
@media (min-width: $min) {
@content;
}
} @else {
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
}
@mixin hidden {
display: none;
visibility: hidden;
}
html {
font-family: $font-reg;
font-size: 10px;
......@@ -18,6 +41,10 @@ h5 {
h1 {
font-size: $font-size-xxl;
@include breakpoint(0, 560px) {
font-size: $font-size-xl;
}
}
h2 {
......@@ -57,6 +84,10 @@ cite {
font-size: 2.2rem;
}
img {
max-width: 100%;
}
.bg-accent-bright {
background-color: $accent-color-bright;
}
......@@ -68,26 +99,3 @@ cite {
.bg-accent-dark {
background-color: $accent-color-dark;
}
.maxwidthcontainer {
max-width: 128rem;
margin: 0 auto;
padding: 1.5rem;
}
@mixin breakpoint($min, $max: 0) {
@if $max == 0 {
@media (min-width: $min) {
@content;
}
} @else {
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
}
@mixin hidden {
display: none;
visibility: hidden;
}
footer {
background-color: $primary-color;
color: $bright-color;
padding: 1.5rem 1.5rem 35rem 1.5rem;
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0 3.5rem 0;
ul {
display: flex;
justify-content: flex-end;
li {
a {
text-decoration: none;
color: $bright-color;
}
&:first-child::after {
content: '|';
margin: 0 0.6rem;
}
}
}
background-color: $primary-color;
color: $bright-color;
padding: 1.5rem 1.5rem 35rem 1.5rem;
word-break: break-all;
nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 1.5rem 0 0 0;
margin-bottom: 3.5rem;
@include breakpoint(0, 610px) {
small {
display: block;
width: 100%;
text-align: center;
margin-bottom: 1.5rem;
}
ul {
width: 100%;
text-align: center;
justify-content: center;
}
}
@include breakpoint(611px) {
ul {
justify-content: flex-end;
}
}
article {
p {
width: 50%;
margin-bottom: 2.5rem;
ul {
display: flex;
li {
a {
text-decoration: none;
color: $bright-color;
}
ul {
list-style-type: disc;
padding: 0 2rem;
line-height: $line-height-m;
margin-bottom: 2rem;
&:first-child::after {
content: '|';
margin: 0 0.6rem;
}
}
}
}
article {
p {
width: 50%;
margin-bottom: 2.5rem;
word-break: normal;
@include breakpoint(0, 610px) {
width: 100%;
}
}
ul {
list-style-type: disc;
padding: 0 2rem;
line-height: $line-height-m;
margin-bottom: 2rem;
}
}
}
......@@ -3,6 +3,11 @@ header {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 8rem;
@include breakpoint(0, 800px) {
align-items: center;
}
h1 {
padding: 1rem;
......@@ -12,15 +17,43 @@ header {
display: flex;
margin: 0 1rem 2rem 0;
@include breakpoint(0, 800px) {
display: none;
margin: 0;
&.open {
display: block;
position: absolute;
top: 8rem;
left: 0;
right: 0;
}
}
li {
&:not(:last-child) {
margin-right: 2rem;
@include breakpoint(0, 800px) {
margin: 0;
}
}
a {
text-decoration: none;
color: $dark-color;
@include breakpoint(0, 800px) {
display: block;
margin: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
padding: 2rem 0;
border-top: 1px solid $accent-color-reg;
}
&.active {
border-bottom: 1px solid $primary-color;
color: $primary-color;
......@@ -28,6 +61,14 @@ header {
}
}
}
button {
display: none;
@include breakpoint(0, 800px) {
display: block;
}
}
}
section#hero {
......@@ -45,7 +86,7 @@ header {
@include breakpoint(0, 915px) {
width: 100%;
padding-left: 2.5rem;
padding: 0 1.5rem;
}
h2 {
......@@ -53,6 +94,11 @@ header {
line-height: $line-height-xxl;
margin: 0 0 1.5rem 1rem;
@include breakpoint(0, 500px) {
font-size: 4.2rem;
line-height: 6.6rem;
}
span {
padding: 0.2rem 0;
background-color: $bright-color;
......@@ -70,6 +116,10 @@ header {
border: 0;
outline: 0;
border-radius: $border-radius;
@include breakpoint(0, 560px) {
font-size: $font-size-l;
}
}
}
}
......
#menu-trigger {
height: 2.8rem;
width: 3.6rem;
border: 0;
outline: 0;
padding: 0;
background-color: transparent;
position: relative;
margin-right: 1.5rem;
.menu-bar {
position: absolute;
display: block;
width: 100%;
height: 0.3rem;
background-color: $primary-color;
&:nth-child(1) {
top: 0;
}
&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
&:nth-child(3) {
bottom: 0;
}
}
&.open {
.menu-bar:nth-child(1) {
transform: rotate(45deg);
transform-origin: 0;
}
.menu-bar:nth-child(2) {
display: none;
}
.menu-bar:nth-child(3) {
transform: rotate(-45deg);
transform-origin: 0;
}
}
}
section#news {
ul {
background-color: $accent-color-important;
border-radius: $border-radius;
padding: 1.5rem 1rem;
ul {
background-color: $accent-color-important;
border-radius: $border-radius;
padding: 1.5rem 1rem;
li {
font-size: $font-size-l;
li {
font-size: $font-size-l;
line-height: 3.2rem;
&:not(:last-child) {
margin-bottom: 1.5rem;
}
&:not(:last-child) {
margin-bottom: 1.5rem;
}
a {
text-decoration: none;
color: $primary-color;
}
}
a {
text-decoration: none;
color: $primary-color;
}
}
}
}
@import './reset';
@import './variables';
@import './globals';
@import './includes/menu';
@import './includes/header';
@import './includes/services';
@import './includes/news';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment