CSS in eigene Datei bewegt

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;
+  }
+}