microblog.go aktualisiert

.gitignore

@@ -1,2 +1,2 @@
 build/
-data/
+data/*

data/articles/devlog/info.md

@@ -1 +0,0 @@
-micro info seite

data/articles/index.md

@@ -1 +0,0 @@
-micro startseite

data/themes/default/main.css

@@ -1,596 +0,0 @@
-/* ==========================================================
-   MODERN CYBERPUNK / GLASS STYLE
-   Inspired by modern tech websites
-   ========================================================== */
-
-:root{
-
-    --bg:#050608;
-    --bg2:#0d1018;
-    --surface:rgba(255,255,255,.04);
-
-    --primary:#7C4DFF;
-    --secondary:#00D5FF;
-    --accent:#A855F7;
-
-    --text:#ffffff;
-    --text-light:#b8bcc9;
-
-    --border:rgba(255,255,255,.08);
-
-    --radius:18px;
-
-    --shadow:
-        0 10px 40px rgba(0,0,0,.35);
-
-    --glow:
-        0 0 20px rgba(124,77,255,.35),
-        0 0 60px rgba(0,213,255,.15);
-
-    --transition:.35s ease;
-}
-
-/* ==========================================================
-   RESET
-   ========================================================== */
-
-*{
-    margin:0;
-    padding:0;
-    box-sizing:border-box;
-}
-
-html{
-    scroll-behavior:smooth;
-}
-
-body{
-
-    font-family:
-    Inter,
-    Segoe UI,
-    sans-serif;
-
-    color:var(--text);
-
-    background:
-    radial-gradient(circle at top right,#1f1245 0%,transparent 35%),
-    radial-gradient(circle at bottom left,#003f56 0%,transparent 30%),
-    linear-gradient(180deg,#050608,#090b12,#050608);
-
-    min-height:100vh;
-
-    overflow-x:hidden;
-}
-
-/* ==========================================================
-   BACKGROUND EFFECT
-   ========================================================== */
-
-body::before{
-
-    content:"";
-
-    position:fixed;
-
-    inset:0;
-
-    background-image:
-
-    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
-    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
-
-    background-size:60px 60px;
-
-    opacity:.15;
-
-    pointer-events:none;
-}
-
-/* ==========================================================
-   TYPOGRAPHY
-   ========================================================== */
-
-h1,h2,h3{
-
-    font-weight:800;
-
-    letter-spacing:-1px;
-}
-
-h1{
-
-    font-size:clamp(3rem,8vw,6rem);
-
-    line-height:1;
-
-    margin-bottom:25px;
-}
-
-h2{
-
-    font-size:clamp(2rem,5vw,3rem);
-
-    margin-bottom:25px;
-}
-
-h3{
-
-    font-size:1.4rem;
-
-    margin-bottom:15px;
-}
-
-p{
-
-    color:var(--text-light);
-
-    line-height:1.8;
-}
-
-/* ==========================================================
-   LAYOUT
-   ========================================================== */
-
-.container{
-
-    width:min(1300px,92%);
-
-    margin:auto;
-}
-
-section{
-
-    padding:120px 0;
-}
-
-/* ==========================================================
-   NAVBAR
-   ========================================================== */
-
-nav{
-
-    position:fixed;
-
-    top:0;
-
-    width:100%;
-
-    z-index:999;
-
-    backdrop-filter:blur(20px);
-
-    background:rgba(5,6,8,.65);
-
-    border-bottom:1px solid var(--border);
-}
-
-nav .container{
-
-    height:80px;
-
-    display:flex;
-
-    justify-content:space-between;
-
-    align-items:center;
-}
-
-nav ul{
-
-    display:flex;
-
-    gap:35px;
-
-    list-style:none;
-}
-
-nav a{
-
-    color:white;
-
-    text-decoration:none;
-
-    transition:var(--transition);
-
-    font-weight:500;
-}
-
-nav a:hover{
-
-    color:var(--secondary);
-}
-
-/* ==========================================================
-   HERO
-   ========================================================== */
-
-.hero{
-
-    min-height:100vh;
-
-    display:flex;
-
-    align-items:center;
-
-    position:relative;
-
-    overflow:hidden;
-}
-
-.hero::before{
-
-    content:"";
-
-    position:absolute;
-
-    width:700px;
-
-    height:700px;
-
-    border-radius:50%;
-
-    background:var(--primary);
-
-    filter:blur(180px);
-
-    opacity:.18;
-
-    right:-250px;
-
-    top:-250px;
-}
-
-.hero::after{
-
-    content:"";
-
-    position:absolute;
-
-    width:450px;
-
-    height:450px;
-
-    background:var(--secondary);
-
-    border-radius:50%;
-
-    filter:blur(170px);
-
-    left:-150px;
-
-    bottom:-150px;
-
-    opacity:.12;
-}
-
-.hero-content{
-
-    position:relative;
-
-    z-index:2;
-
-    max-width:720px;
-}
-
-/* ==========================================================
-   BUTTONS
-   ========================================================== */
-
-.btn{
-
-    display:inline-flex;
-
-    align-items:center;
-
-    justify-content:center;
-
-    padding:16px 34px;
-
-    border-radius:999px;
-
-    text-decoration:none;
-
-    color:white;
-
-    font-weight:600;
-
-    background:
-    linear-gradient(
-    90deg,
-    var(--primary),
-    var(--secondary));
-
-    box-shadow:var(--shadow);
-
-    transition:var(--transition);
-}
-
-.btn:hover{
-
-    transform:translateY(-4px);
-
-    box-shadow:var(--glow);
-}
-
-.btn-outline{
-
-    background:transparent;
-
-    border:1px solid var(--border);
-}
-
-.btn-outline:hover{
-
-    border-color:var(--secondary);
-}
-
-/* ==========================================================
-   GRID
-   ========================================================== */
-
-.grid{
-
-    display:grid;
-
-    gap:35px;
-
-    grid-template-columns:
-    repeat(auto-fit,minmax(320px,1fr));
-}
-
-/* ==========================================================
-   CARDS
-   ========================================================== */
-
-.card{
-
-    background:var(--surface);
-
-    backdrop-filter:blur(18px);
-
-    border:1px solid var(--border);
-
-    border-radius:var(--radius);
-
-    padding:35px;
-
-    transition:var(--transition);
-
-    position:relative;
-
-    overflow:hidden;
-}
-
-.card::before{
-
-    content:"";
-
-    position:absolute;
-
-    inset:-2px;
-
-    background:
-    linear-gradient(135deg,
-    transparent,
-    rgba(255,255,255,.05),
-    transparent);
-
-    opacity:0;
-
-    transition:.5s;
-}
-
-.card:hover{
-
-    transform:translateY(-8px);
-
-    box-shadow:var(--glow);
-}
-
-.card:hover::before{
-
-    opacity:1;
-}
-
-/* ==========================================================
-   IMAGES
-   ========================================================== */
-
-img{
-
-    max-width:100%;
-
-    border-radius:16px;
-}
-
-/* ==========================================================
-   INPUTS
-   ========================================================== */
-
-input,
-textarea{
-
-    width:100%;
-
-    padding:16px;
-
-    border-radius:14px;
-
-    border:1px solid var(--border);
-
-    background:rgba(255,255,255,.03);
-
-    color:white;
-
-    outline:none;
-
-    transition:.3s;
-}
-
-input:focus,
-textarea:focus{
-
-    border-color:var(--secondary);
-
-    box-shadow:0 0 15px rgba(0,213,255,.3);
-}
-
-/* ==========================================================
-   TABLES
-   ========================================================== */
-
-table{
-
-    width:100%;
-
-    border-collapse:collapse;
-}
-
-th,
-td{
-
-    padding:16px;
-
-    border-bottom:1px solid var(--border);
-}
-
-/* ==========================================================
-   FOOTER
-   ========================================================== */
-
-footer{
-
-    border-top:1px solid var(--border);
-
-    padding:70px 0;
-
-    text-align:center;
-
-    color:#9da2b4;
-}
-
-/* ==========================================================
-   SCROLLBAR
-   ========================================================== */
-
-::-webkit-scrollbar{
-
-    width:10px;
-}
-
-::-webkit-scrollbar-thumb{
-
-    background:linear-gradient(
-    var(--primary),
-    var(--secondary));
-
-    border-radius:20px;
-}
-
-::-webkit-scrollbar-track{
-
-    background:#050608;
-}
-
-/* ==========================================================
-   ANIMATIONS
-   ========================================================== */
-
-@keyframes float{
-
-    0%{
-
-        transform:translateY(0px);
-    }
-
-    50%{
-
-        transform:translateY(-12px);
-    }
-
-    100%{
-
-        transform:translateY(0px);
-    }
-}
-
-@keyframes fadeIn{
-
-    from{
-
-        opacity:0;
-
-        transform:translateY(30px);
-    }
-
-    to{
-
-        opacity:1;
-
-        transform:translateY(0);
-    }
-}
-
-.float{
-
-    animation:float 6s ease-in-out infinite;
-}
-
-.fade{
-
-    animation:fadeIn .8s ease both;
-}
-
-/* ==========================================================
-   RESPONSIVE
-   ========================================================== */
-
-@media (max-width:992px){
-
-    section{
-
-        padding:90px 0;
-    }
-
-    nav ul{
-
-        gap:20px;
-    }
-}
-
-@media (max-width:768px){
-
-    nav .container{
-
-        height:70px;
-    }
-
-    h1{
-
-        font-size:3rem;
-    }
-
-    .grid{
-
-        grid-template-columns:1fr;
-    }
-
-    .hero{
-
-        text-align:center;
-    }
-}
-
-@media (max-width:480px){
-
-    h1{
-
-        font-size:2.4rem;
-    }
-
-    .btn{
-
-        width:100%;
-    }
-}

microblog.go

@@ -16,11 +16,38 @@ import (
     "github.com/yuin/goldmark"
 )
 
-const articlesDir = "data/articles"
+const baseDir = "data"
+const articlesDir = baseDir + "/articles"
 
 func main() {
-    http.HandleFunc("/", handlePage)
+    //http.HandleFunc("/", handlePage)
-    println("Server läuft auf http://localhost:8085")
+    println("Server startet http://localhost:8085")
+
+    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+        println("start HandleFunc")
+        path := r.URL.Path
+        ext := filepath.Ext(path)
+
+        switch ext {
+        case ".css":
+            println("css gefunden. path: " + path)
+            w.Header().Set("Content-Type", "text/css")
+        case ".jpg", ".jpeg":
+            w.Header().Set("Content-Type", "image/jpeg")
+        case ".png":
+            w.Header().Set("Content-Type", "image/png")
+        case ".gif":
+            w.Header().Set("Content-Type", "image/gif")
+        default:
+            println("rufe handlePage")
+            handlePage(w,r)
+            return
+        }
+
+        http.ServeFile(w, r, "."+path)
+        return
+    })
+    
     http.ListenAndServe(":8085", nil)
 }
 
@@ -80,7 +107,14 @@ func handlePage(w http.ResponseWriter, r *http.Request) {
     <link type="text/css" rel="stylesheet" href="/data/themes/default/css/main.css">
     </head>
     <body>
-    <h1>{{.Title}}</h1>
+    <header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; flex-wrap: wrap;">
+      <h1 style="margin: 0;">{{.Title}}</h1>
+      <nav style="display: flex; gap: 15px; flex-wrap: wrap;">
+        <a href="/unterseite1.html">Unterseite 1</a>
+        <a href="/unterseite2.html">Unterseite 2</a>
+        <a href="/unterseite3.html">Unterseite 3</a>
+      </nav>
+    </header>
     <div>{{.Content}}</div>
     <p><a href="/">Startseite</a></p>
     </body>