initial outline of page structure

2019-06-23 23:52:54 +02:00 · 2019-06-23 23:52:54 +02:00 · 692982da00
parent a00724b609
commit 692982da00
7 changed files with 104 additions and 0 deletions
--- a/4
+++ b/4
@ -0,0 +1,4 @@
+all: draft/res/c3d2.css
+
+draft/res/c3d2.css: draft/res/main.scss draft/res/*.scss
+	sassc -t compressed -I draft/res $< $@
--- a/README.md
+++ b/README.md
@ -2,6 +2,15 @@

 In diesem Repo sammle ich Gedanken und Entwürfe für ein Redesign der [C3D2-Webseite](https://c3d2.de/).

+## Howto
+
+^^^
+$ make
+$ ( cd draft && python -m http.server 8080 )
+^^^
+
+-> http://localhost:8080
+
 ## Hierarchie aktuell

 * Startseite: Kurzkalender und Kacheln
--- a/draft/index.html
+++ b/draft/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Chaos Computer Club Dresden</title>
+    <link rel="stylesheet" type="text/css" href="/res/c3d2.css" />
+</head>
+<body>
+    <nav>
+        <p>Navigation</p>
+    </nav>
+    <main>
+        <p>Main matter</p>
+    </main>
+    <footer>
+        <p>Footer</p>
+    <footer>
+</body>
+</html>
--- a/draft/res/.gitignore
+++ b/draft/res/.gitignore
@ -0,0 +1,2 @@
+# build artifact
+c3d2.css
--- a/draft/res/main.scss
+++ b/draft/res/main.scss
@ -0,0 +1,42 @@
+@import 'reset.scss';
+
+body {
+  /* if you don't have any idea what's going on here, read
+   * <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>
+   */
+  display: grid;
+  min-height: 100vh;
+  grid-template:
+    "nav main" 1fr
+    "nav footer" min-content
+      / minmax(min-content, 20vw) 1fr;
+  grid-gap: 0;
+  grid-auto-rows: auto;
+
+  & > nav {
+    grid-area: nav;
+    max-width: 40ch;
+    /* everything else about <nav> is in navbar.scss */
+  }
+
+  & > main {
+    grid-area: main;
+    /* everything else about <nav> is in content.scss */
+  }
+
+  & > footer {
+    grid-area: footer;
+    /* everything else about <nav> is in footer.scss */
+  }
+}
+
+@import 'navbar.scss';
+// TODO @import 'content.scss';
+// TODO @import 'footer.scss';
+
+// stub, TODO remove
+main, footer {
+  p {
+    margin: 1rem;
+  }
+}
--- a/draft/res/navbar.scss
+++ b/draft/res/navbar.scss
@ -0,0 +1,4 @@
+body > nav {
+  background: black;
+  color: white;
+}
--- a/draft/res/reset.scss
+++ b/draft/res/reset.scss
@ -0,0 +1,22 @@
+/* universal box-sizing with inheritance */
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/* establish root-em, select font stack */
+html {
+  font-size: 18px;
+  /* this font stack is what github.com uses as of 2019-06-23; I trust them to
+   * have put more thought into this than most others */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+/* kill all predefined margins */
+* {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}