status icon eingefügt, felxboxen in mehrere klassen aufgeteilt
This commit is contained in:
example
parent
68a6da3f9d
commit
6b2c8c674a
2 changed files with 65 additions and 27 deletions
36
index.html
36
index.html
|
|
@ -27,25 +27,35 @@
|
|||
|
||||
<body>
|
||||
|
||||
<a href="#space"
|
||||
class="hidden"
|
||||
title="Springe zum Inhalt">Springe zum Inhalt</a>
|
||||
|
||||
<!-- head with banner and navigation ---------------------------------->
|
||||
|
||||
<header>
|
||||
<div class="center-content max-width">
|
||||
<div id="headline" class="flex-box-row">
|
||||
<div>
|
||||
<p>
|
||||
<div id="headline" class="flex-box row">
|
||||
<div id="header-left" class="flex-box row center">
|
||||
<div id="status-icon" class="icon">
|
||||
<img class="icon-img" src="./images/user-times.svg" />
|
||||
</div>
|
||||
<div id="banner-div" class="flex-box column">
|
||||
<a id="banner" href="#"
|
||||
role="banner"
|
||||
title="Zum Seitenanfang">kraut.space</a></p>
|
||||
title="Zum Seitenanfang"><h1>kraut.space</h1></a>
|
||||
</div>
|
||||
<div class="flex-box-row">
|
||||
</div>
|
||||
<div id="header-right" class="flex-box row">
|
||||
<p>
|
||||
<a id="open-menu"
|
||||
title="Menu öffnen"
|
||||
href="#menu">Menu</a>
|
||||
</p>
|
||||
<nav id="menu" class="flex-box-column">
|
||||
<nav id="menu" class="flex-box column">
|
||||
<p>
|
||||
<a id="close-menu"
|
||||
title="Menu schliessen"
|
||||
href="#open-menu">Close</a>
|
||||
</p>
|
||||
<ul role="menu">
|
||||
|
|
@ -93,10 +103,7 @@
|
|||
<!-- main area with content ------------------------------------------>
|
||||
|
||||
<main role="main">
|
||||
|
||||
|
||||
<div class="wrapper center-content max-width">
|
||||
|
||||
<div id="space" class="panel-wrapper content-overlay">
|
||||
|
||||
<h2>Krautspace</h2>
|
||||
|
|
@ -136,7 +143,7 @@
|
|||
Matrix. Du kannst dort gern Kontakt zu uns aufnehmen.
|
||||
</p>
|
||||
|
||||
<div class="flex-box-column with-aside">
|
||||
<div class="flex-box column with-aside">
|
||||
<div>
|
||||
<h3>Termine</h3>
|
||||
<ul>
|
||||
|
|
@ -271,7 +278,7 @@
|
|||
Das sind die Straßenbahnen der Linie 16, sowie die Busse der
|
||||
Linie 5.
|
||||
</p>
|
||||
<div id="map-box" class="flex-box-column with-aside">
|
||||
<div id="map-box" class="flex-box column with-aside">
|
||||
<div id="map">
|
||||
<a class="extern"
|
||||
href="http://www.openstreetmap.org/node/1875593753">
|
||||
|
|
@ -300,14 +307,13 @@
|
|||
</div>
|
||||
</section>
|
||||
</div> <!-- end class panel-wrapper content-overlay -->
|
||||
|
||||
</main>
|
||||
<hr/>
|
||||
|
||||
<!-- footer ---------------------------------------------------------->
|
||||
|
||||
<footer>
|
||||
<div id="footer" class="flex-box-row center-content max-width">
|
||||
<div id="footer" class="flex-box row center-content max-width">
|
||||
<div class="sub-panel">
|
||||
<h4>Kontakt</h4>
|
||||
<ul>
|
||||
|
|
@ -348,11 +354,11 @@
|
|||
|
||||
<!-- go-to-top ------------------------------------------------------->
|
||||
|
||||
<div id="go-to-top" class="max-width">
|
||||
<div id="go-to-top" class="icon">
|
||||
<a href="#start-image-container"
|
||||
alt="Springe zum Seitenanfang"
|
||||
title="Springe zum Seitenanfang">
|
||||
<img id="to-top"
|
||||
<img class="icon-img"
|
||||
alt="Pfeil nach oben"
|
||||
src="./images/arrow-up.svg" />
|
||||
</a>
|
||||
|
|
|
|||
56
style.css
56
style.css
|
|
@ -48,6 +48,11 @@ a:hover, a:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 130%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -56,18 +61,38 @@ a:hover, a:focus {
|
|||
max-width: 72em;
|
||||
}
|
||||
|
||||
.flex-box-row {
|
||||
.flex-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-box-column {
|
||||
display: flex;
|
||||
.column {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 0.5em;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*** head with navigation menu ***/
|
||||
|
||||
|
|
@ -86,6 +111,15 @@ div#headline {
|
|||
padding: 0 1em 0 1em;
|
||||
}
|
||||
|
||||
div#status-div {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
div#status-div:hover {
|
||||
width: 10em;
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
a#banner:hover,
|
||||
a#banner:focus {
|
||||
text-decoration: none;
|
||||
|
|
@ -164,7 +198,7 @@ main {
|
|||
|
||||
.content-overlay {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
.panel-wrapper {
|
||||
|
|
@ -231,12 +265,6 @@ div#go-to-top {
|
|||
position: fixed;
|
||||
right: 2%;
|
||||
bottom: 2%;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 0.5em;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
@ -272,6 +300,10 @@ img#to-top {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
nav#menu li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
div.with-aside {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
|
|
|||
Loading…
Reference in a new issue