Compare commits
13 Commits
7c8868892a
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 ds
|
799bd3bf11 | ||
|
ds
|
51b73c0d58 | ||
|
ds
|
aadf8ef62b | ||
|
ds
|
15b6fb22b6 | ||
|
ds
|
37fc665447 | ||
|
ds
|
a1036e1537 | ||
|
ds
|
455ba0426f | ||
|
ds
|
87bb58e865 | ||
|
ds
|
147dd3c01c | ||
|
ds
|
62a4d6ff66 | ||
|
ds
|
21f9f78b3c | ||
|
ds
|
9b5a7083a7 | ||
|
ds
|
52d132a950 |
+1
-1
@@ -1,2 +1,2 @@
|
||||
build/
|
||||
data/
|
||||
data/*
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
micro info seite
|
||||
@@ -1 +0,0 @@
|
||||
micro startseite
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
+38
-4
@@ -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)
|
||||
println("Server läuft auf http://localhost:8085")
|
||||
//http.HandleFunc("/", handlePage)
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user