diff --git a/index.html b/index.html index 0eea9a5..46b04da 100644 --- a/index.html +++ b/index.html @@ -6,16 +6,28 @@ freibier.cc - + -
-
+
+
+ + + +
+
+

frei gebraut – frei verfügbar – frei verkäuflich

Impressum Datenschutzerklärung

+
diff --git a/style/freibier.css b/style/freibier.css index aede331..3ecc653 100644 --- a/style/freibier.css +++ b/style/freibier.css @@ -1,4 +1,4 @@ -body {background: grey; +body {background: white; font-family: 'HKGroteskRegular'; font-weight: normal; font-style: normal; @@ -24,10 +24,10 @@ h3 {color: white; font-weight: bold; font-style: normal; font-size: 110%; } -a:link { text-decoration: underline; color: white; } -a:visited { text-decoration: underline; color: white; } +a:link { text-decoration: underline; color: fuchsia; } +a:visited { text-decoration: underline; color: purple; } a:hover { text-decoration: underline; color: navy; } -a:active { text-decoration: underline; color: fuchsia; } +a:active { text-decoration: underline; color: navy; } td {color: white; font-family: 'HKGroteskRegular'; font-weight: normal; @@ -54,14 +54,158 @@ pre {color: grey; padding-left: 1.5em; padding-right: 1.5em; display: block; } -.center {display: block; - margin-left: auto; +#center {display: block; + margin: 0 auto; + margin-left: auto; margin-right: auto; width: 70%;} -.footer {position: fixed; +.footer {position: absolute; left: 0; bottom: 0; - width: 100%; - background-color: grey; + background-color: grey; + width: inherit; color: white; - text-align: center;} + text-align: center;} + +.logo { + background-color: grey; +} +/* header */ + +.header { + background-color: #fff; + box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); + position: absolute; + z-index: 3; + width: inherit; + color: black; + font-family: 'HKGroteskRegular'; + font-weight: normal; + font-style: normal; + font-size: 100%;} + + +.header ul { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + background-color: #fff; +} + +.header li a { + display: block; + padding: 20px 20px; + border-right: 1px solid #f4f4f4; + text-decoration: none; +} + + +.header li a:hover, +.header .menu-btn:hover { + background-color: #f4f4f4; + text-decoration: underline; color: navy; +} + +.header .logo { + display: block; + float: left; + font-size: 2em; + padding: 10px 20px; + text-decoration: none; +} + +/* menu */ + +.header .menu { + clear: both; + max-height: 0; + transition: max-height .2s ease-out; +} + +/* menu icon */ + +.header .menu-icon { + cursor: pointer; + display: inline-block; + float: right; + padding: 28px 20px; + position: relative; + user-select: none; +} + +.header .menu-icon .navicon { + background: #333; + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px; +} + +.header .menu-icon .navicon:before, +.header .menu-icon .navicon:after { + background: #333; + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all .2s ease-out; + width: 100%; +} + +.header .menu-icon .navicon:before { + top: 5px; +} + +.header .menu-icon .navicon:after { + top: -5px; +} + +/* menu btn */ + +.header .menu-btn { + display: none; +} + +.header .menu-btn:checked ~ .menu { + max-height: 240px; +} + +.header .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; +} + +.header .menu-btn:checked ~ .menu-icon .navicon:before { + transform: rotate(-45deg); +} + +.header .menu-btn:checked ~ .menu-icon .navicon:after { + transform: rotate(45deg); +} + +.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, +.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { + top: 0; +} + +/* 48em = 768px */ + +@media (min-width: 48em) { + .header li { + float: left; + } + .header li a { + color: black; + padding: 20px 30px; + } + .header .menu { + clear: none; + float: right; + max-height: none; + } + .header .menu-icon { + display: none; + } +} +