status icon eingefügt, felxboxen in mehrere klassen aufgeteilt

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

View file

@ -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>
<div class="flex-box-row">
<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&szlig;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>