aboutsummaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/html/index.html203
-rw-r--r--www/html/style.css200
2 files changed, 201 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">
diff --git a/www/html/style.css b/www/html/style.css
new file mode 100644
index 0000000..cce30b5
--- /dev/null
+++ b/www/html/style.css
@@ -0,0 +1,200 @@
+: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;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-13 21:30:33 +0000