diff options
Diffstat (limited to 'www/html/index.html')
| -rw-r--r-- | www/html/index.html | 203 |
1 files changed, 1 insertions, 202 deletions
diff --git a/www/html/index.html b/www/html/index.html index 3ca2205..5cabb39 100644 --- a/www/html/index.html +++ b/www/html/index.html @@ -8,208 +8,7 @@ <meta name="keywords" content="Heimfeld, Stadtteil, Stadtteilbeirat, Beirat, Stadtteilfest, Treffpunkthaus"> <title>Stadtteilbeirat Heimfeld</title> <link rel="shortcut icon" type="image/x-icon" href="/img/Kraniche-dreh-klein.gif"> - <style> - :root { - --primary: #330033; - --background-primary: #77cc77; - --background-secondary: #99ee99; - --background-highlight: #ffcc00; - --highlight: #ff0000; - --big-font: 1.5rem; - } - body { - font-family: sans-serif; - color: var(--primary); - background-color: var(--background-primary); - margin: 1rem; - } - body::before { - content: ''; - position: fixed; - background-image: url("img/Kraniche-oval-4a.png"); - top: calc(615px/2 + 2rem); - left: 50%; - transform: translate(-50%, -50%); - width: 465px; - height: 615px; - background-size: contain; - background-repeat: no-repeat; - mix-blend-mode: multiply; - pointer-events: none; - z-index: -1; - } - a { - color: var(--primary); - } - a:hover, a:focus-visible { - background-color: var(--background-primary); - } - td > table { - text-align: center; - background-color: var(--background-secondary); - border-color: var(--highlight); - } - td { - border-color: var(--highlight); - } - th { - color: var(--highlight); - background-color: var(--background-highlight); - height: var(--big-font); - font-size: var(--big-font); - } - footer { - text-align: center; - } - footer nav ul { - display: flex; - flex-wrap: wrap; - gap: 2rem; - padding: 0; - justify-content: center; - list-style: none; - } - footer nav a { - background-color: var(--background-secondary); - padding: 0.5rem; - display: block; - } - div.table { - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 1rem; - } - div.column, section { - margin: 2pt; - padding: 1.5pt; - border: 1pt outset red; - flex-basis: 25%; - background-color: var(--background-secondary); - display: flex; - flex-direction: column; - gap: 1.5pt; - } - div.row { - padding: 1rem 0.5rem; - border: 1pt inset red; - text-align: center; - } - div.row:last-child { - flex-grow: 1; - } - div.row h1, section h1 { - color: var(--highlight); - font-size: var(--big-font); - background-color: var(--background-highlight); - padding: 0.5rem; - margin: -1rem -0.5rem; - } - section h1 { - border: 1pt inset red; - margin: 0; - margin-bottom: -1.5pt; - } - div.welcome { - background-color: initial; - border: initial; - flex-basis: 50%; - align-self: center; - } - div.welcome h1 { - background-color: initial; - font-variant: small-caps; - font-size: 2rem; - color: #ff9900; - } - .highlight { - color: var(--highlight); - } - .big, .news { - font-size: var(--big-font); - font-weight: bold; - margin: 0; - } - .news { - color: white; - } - section { - background-color: var(--background-secondary); - max-width: 50rem; - margin: 1em auto; - } - section dd, section dt { - text-align: left; - } - section > dl { - margin: 0; - } - section > dl > dt { - font-size: var(--big-font); - font-weight: bold; - margin-top: 1.5pt; - border: 1pt inset red; - border-bottom: none; - padding: 1rem; - padding-bottom: 0; - } - section > dl > dd { - margin: 0; - border: 1pt inset red; - border-top: none; - padding: 1rem; - padding-left: 2rem; - } - section > dl > dt a { - text-decoration: none; - } - section > dl > dd dt { - display: inline; - } - section > dl > dd dt:before { - content: ""; - display: block; - margin-top: 1rem; - } - section > dl > dd dd { - display: inline; - margin: 0; - } - section > dl > dd dd + dd::before { - content: ", "; - } - section > dl > dd dt:after { - content: ":"; - } - details { - margin: 1rem 0; - } - @media (width < 50rem) { - body { - margin: 0 0.5rem; - } - div.table { - flex-wrap: wrap; - } - div.column { - flex-basis: 100%; - }; - section h1 { - text-align: center; - } - } - @media (width > 50rem) { - div.column { - order: 3; - } - div.column:nth-child(2) { - order: 1; - } - div.column.welcome { - order: 2; - } - } - </style> + <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="table"> |
