Start styling

basicpage · Oct 17, 2024 · d1ad771 · d1ad771
1 parent 112c07d
commit d1ad771
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 36 deletions.
diff --git a/pandoc/template.html4 b/pandoc/template.html4
@@ -30,48 +30,30 @@ $endif$
 $endif$
   <!-- Favicon -->
   <link rel="icon" href="img/favicon.svg">
-  $for(author)$
+  $if(author)$
   <h1>$author$</h2>
-  $endfor$
+  $endif$
 </head>
 <body>
   <header>
     <img src="img/profile.png" alt="My picture">
   </header>
   <main>
-$for(include-before)$
-$include-before$
-$endfor$
-$if(title)$
-$if(subtitle)$
-<h1 class="subtitle">$subtitle$</h1>
-$endif$
-$for(author)$
-<h2 class="author">$author$</h2>
-$endfor$
-$if(date)$
-<h3 class="date">$date$</h3>
-$endif$
-$if(abstract)$
-<div class="abstract">
-<div class="abstract-title">$abstract-title$</div>
-$abstract$
-</div>
-$endif$
-</div>
-$endif$
-$if(toc)$
-<div id="$idprefix$TOC">
-$if(toc-title)$
-<h2 id="$idprefix$toc-title">$toc-title$</h2>
-$endif$
-$table-of-contents$
-</div>
-$endif$
-$body$
-$for(include-after)$
-$include-after$
-$endfor$
+    $for(include-before)$
+    $include-before$
+    $endfor$
+    $if(toc)$
+    <div id="$idprefix$TOC">
+    $if(toc-title)$
+    <h2 id="$idprefix$toc-title">$toc-title$</h2>
+    $endif$
+    $table-of-contents$
+    </div>
+    $endif$
+    $body$
+    $for(include-after)$
+    $include-after$
+    $endfor$
   </main>
 </body>
 </html>
diff --git a/website/style.css b/website/style.css
@@ -1 +1,51 @@
-/* TODO */
+:root {
+  --bg: #e3e7ed;
+  --headerbg: #bae5e5;
+}
+
+/*** GENERAL ***/
+
+* {
+  box-sizing: border-box;
+}
+
+body, div, header, footer, main, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 100%;
+}
+
+body {
+  font-family: sans-serif;
+  background: var(--bgcol);
+}
+
+/*** HEADER ***/
+
+header {
+  max-width: 1200px;
+  width: auto;
+  margin: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 30px;
+  background: var(--headerbg);
+}
+
+header img {
+  flex: 1;
+  margin: 10px;
+  max-width: 200px;
+}
+
+header p {
+  flex: 3 300px;
+  padding: 10px;
+  margin: 10px;
+}