Gitlab Upgrade von 13 auf 14.1 erfolgreich erledigt. Morgen, Donnerstag, kommt noch der upgrade auf 14.2.

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