Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 75 deletions
index.html
View file @ 7ad1a230
......@@ -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>
scripts/main.js 0 → 100644
View file @ 7ad1a230
/* 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');
}
styles/globals.scss
View file @ 7ad1a230
.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;
}
styles/includes/footer.scss
View file @ 7ad1a230
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;
}
}
}
styles/includes/header.scss
View file @ 7ad1a230
......@@ -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;
}
}
}
}
......
styles/includes/menu.scss 0 → 100644
View file @ 7ad1a230
#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;
}
}
}
styles/includes/news.scss
View file @ 7ad1a230
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;
}
}
}
}
styles/main.scss
View file @ 7ad1a230
@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