Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Dennis Dominik Schöpf
cms-2020_dennis_max
Commits
7ad1a230
Commit
7ad1a230
authored
Oct 18, 2020
by
Dennis Dominik Schöpf
Browse files
Finish up responsive design (all but references)
parent
0238d40c
Changes
8
Hide whitespace changes
Inline
Side-by-side
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'
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment