bobidle/webseite-krautspace
1
0
Fork 0
forked from Krautspace/webseite-krautspace
Code Pull requests Activity

status icon eingefügt, felxboxen in mehrere klassen aufgeteilt

Browse source
This commit is contained in:
example 2022-02-08 12:34:40 +01:00
parent 68a6da3f9d
commit 6b2c8c674a
2 changed files with 65 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
index.html
View file

@ -27,25 +27,35 @@
<body> <body>
<a href="#space"
class="hidden"
title="Springe zum Inhalt">Springe zum Inhalt</a>
<!-- head with banner and navigation ----------------------------------> <!-- head with banner and navigation ---------------------------------->
<header> <header>
<div class="center-content max-width"> <div class="center-content max-width">
<div id="headline" class="flex-box-row"> <div id="headline" class="flex-box row">
<div> <div id="header-left" class="flex-box row center">
<p> <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="#" <a id="banner" href="#"
role="banner" role="banner"
title="Zum Seitenanfang">kraut.space</a></p> title="Zum Seitenanfang"><h1>kraut.space</h1></a>
</div>
</div> </div>
<div class="flex-box-row"> <div id="header-right" class="flex-box row">
<p> <p>
<a id="open-menu" <a id="open-menu"
title="Menu öffnen"
href="#menu">Menu</a> href="#menu">Menu</a>
</p> </p>
<nav id="menu" class="flex-box-column"> <nav id="menu" class="flex-box column">
<p> <p>
<a id="close-menu" <a id="close-menu"
title="Menu schliessen"
href="#open-menu">Close</a> href="#open-menu">Close</a>
</p> </p>
<ul role="menu"> <ul role="menu">
@ -93,10 +103,7 @@
<!-- main area with content ------------------------------------------> <!-- main area with content ------------------------------------------>
<main role="main"> <main role="main">
<div class="wrapper center-content max-width"> <div class="wrapper center-content max-width">
<div id="space" class="panel-wrapper content-overlay"> <div id="space" class="panel-wrapper content-overlay">
<h2>Krautspace</h2> <h2>Krautspace</h2>
@ -136,7 +143,7 @@
Matrix. Du kannst dort gern Kontakt zu uns aufnehmen. Matrix. Du kannst dort gern Kontakt zu uns aufnehmen.
</p> </p>
<div class="flex-box-column with-aside"> <div class="flex-box column with-aside">
<div> <div>
<h3>Termine</h3> <h3>Termine</h3>
<ul> <ul>
@ -271,7 +278,7 @@
Das sind die Stra&szlig;enbahnen der Linie 16, sowie die Busse der Das sind die Stra&szlig;enbahnen der Linie 16, sowie die Busse der
Linie 5. Linie 5.
</p> </p>
<div id="map-box" class="flex-box-column with-aside"> <div id="map-box" class="flex-box column with-aside">
<div id="map"> <div id="map">
<a class="extern" <a class="extern"
href="http://www.openstreetmap.org/node/1875593753"> href="http://www.openstreetmap.org/node/1875593753">
@ -300,14 +307,13 @@
</div> </div>
</section> </section>
</div> <!-- end class panel-wrapper content-overlay --> </div> <!-- end class panel-wrapper content-overlay -->
</main> </main>
<hr/> <hr/>
<!-- footer ----------------------------------------------------------> <!-- footer ---------------------------------------------------------->
<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"> <div class="sub-panel">
<h4>Kontakt</h4> <h4>Kontakt</h4>
<ul> <ul>
@ -348,11 +354,11 @@
<!-- go-to-top -------------------------------------------------------> <!-- go-to-top ------------------------------------------------------->
<div id="go-to-top" class="max-width"> <div id="go-to-top" class="icon">
<a href="#start-image-container" <a href="#start-image-container"
alt="Springe zum Seitenanfang" alt="Springe zum Seitenanfang"
title="Springe zum Seitenanfang"> title="Springe zum Seitenanfang">
<img id="to-top" <img class="icon-img"
alt="Pfeil nach oben" alt="Pfeil nach oben"
src="./images/arrow-up.svg" /> src="./images/arrow-up.svg" />
</a> </a>

56
style.css
View file

@ -48,6 +48,11 @@ a:hover, a:focus {
display: none; display: none;
} }
h1 {
font-size: 130%;
padding-left: 1em;
}
.center-content { .center-content {
margin: 0 auto; margin: 0 auto;
} }
@ -56,18 +61,38 @@ a:hover, a:focus {
max-width: 72em; max-width: 72em;
} }
.flex-box-row { .flex-box {
display: flex; display: flex;
justify-content: space-between;
}
.row {
flex-direction: row; flex-direction: row;
justify-content: space-between;
} }
.flex-box-column { .column {
display: flex;
flex-direction: 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 ***/ /*** head with navigation menu ***/
@ -86,6 +111,15 @@ div#headline {
padding: 0 1em 0 1em; padding: 0 1em 0 1em;
} }
div#status-div {
width: 2em;
}
div#status-div:hover {
width: 10em;
z-index: 150;
}
a#banner:hover, a#banner:hover,
a#banner:focus { a#banner:focus {
text-decoration: none; text-decoration: none;
@ -164,7 +198,7 @@ main {
.content-overlay { .content-overlay {
position: relative; position: relative;
top: -40px; top: -50px;
} }
.panel-wrapper { .panel-wrapper {
@ -231,12 +265,6 @@ div#go-to-top {
position: fixed; position: fixed;
right: 2%; right: 2%;
bottom: 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; z-index: 10;
} }
@ -272,6 +300,10 @@ img#to-top {
display: flex; display: flex;
} }
nav#menu li {
border: none;
}
div.with-aside { div.with-aside {
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;