Store-Update

static/store.css

@@ -0,0 +1,261 @@
+/* ---------- Local Web‑Fonts ---------- */
+@font-face {
+    font-family: "Fira Code";
+    src: url("/static/fonts/FiraCode-VariableFont.woff2") format("woff2");
+    font-weight: 400 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Inter";
+    src: url("/static/fonts/Inter-VariableFont.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
+  
+  /* ---------- Farbpalette ---------- */
+  :root {
+    /* Light theme */
+    --bg:            #f5f7fa;
+    --bg-store:      #0b0f1a;
+    --bg-alt:        #ffffff;
+    --card-bg:       #ffffff;
+    --text:          #000000;
+    --text-muted:    #1f2933;
+    --accent:        #2563eb;            /* Indigo‑600  */
+    --accent-light:  #3b82f6;            /* Indigo‑500  */
+    --code-bg:       #f1f5f9;
+    --code-border:   #e2e8f0;
+    --radius:        0.75rem;
+    --gap:           2rem;
+    --shadow:        0 4px 16px rgba(0,0,0,.08);
+    font-size: 16px;
+    font-family: "Inter", system-ui, sans-serif;
+    color-scheme: light;
+  }
+  
+  /* Dark mode (optional) */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg:          #0d1117;
+      --bg-store:    #0b0f1a;
+      --bg-alt:      #161b22;
+      --card-bg:     #161b22;
+      --text:        #ffffff;
+      --text-muted:  #e4e8ec;
+      --accent:      #3b82f6;
+      --accent-light:#60a5fa;
+      --code-bg:     #1e242c;
+      --code-border: #30363d;
+      --shadow:      0 4px 16px rgba(0,0,0,.32);
+    }
+  }
+  
+  /* ---------- Grundlayout ---------- */
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--bg-store);
+    color: var(--text);
+    line-height: 1.65;
+  }
+
+  /* Container für die Produktliste */
+.store-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 40px 20px;
+    gap: 30px;
+  }
+  
+  /* Einzelne Produktkarte */
+  .product-card {
+    background: linear-gradient(145deg, #1a1f2b, #0e121b);
+    border: 1px solid #1f2a3a;
+    border-radius: 12px;
+    width: 280px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  
+  .product-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
+  }
+  
+  /* Produktbild */
+  .product-card img {
+    width: 100%;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+  }
+  
+  /* Produktinformationen */
+  .product-info {
+    padding: 20px;
+  }
+  
+  .product-info h3 {
+    margin: 0 0 10px 0;
+    font-size: 1.2em;
+    color: #00bfff;
+  }
+  
+  .product-info p {
+    margin: 0 0 15px 0;
+    font-size: 0.95em;
+    color: #c0c9d1;
+  }
+  
+  /* Preis und Button */
+  .product-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .price {
+    font-size: 1.1em;
+    color: #ffffff;
+  }
+  
+  .buy-button {
+    background-color: #00bfff;
+    color: #0b0f1a;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .buy-button:hover {
+    background-color: #009acd;
+  }
+
+
+  a {
+    color: var(--accent);
+    text-decoration: underline dotted;
+    transition: color .15s;
+  }
+  a:hover { color: var(--accent-light); }
+  
+  a.no-underline {
+    text-decoration: none;
+  }
+  
+  /* Container in der Mitte */
+  .wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--gap) calc(var(--gap) / 1.5);
+  }
+  
+  img.footer {
+    max-width: 150px;
+    max-height: 60px; /* oder ein anderer fixer Wert, z. B. 500px */
+    width: auto;
+    height: auto;
+  }
+  
+  /* ---------- Kopf & Fuß ---------- */
+  header, footer {
+    background: var(--bg-alt);
+    box-shadow: var(--shadow);
+  }
+  header {
+    position: sticky; top: 0; z-index: 10;
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 10px calc(var(--gap) / 1.2);
+  }
+  header h1 { margin: 0; font-size: 1.4rem; }
+  footer {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: var(--text-muted);
+    font-size: .9rem;
+    margin-top: var(--gap);
+  }
+  
+  /* ---------- Karten‑Grid ---------- */
+  .post-list {
+    display: grid;
+    gap: var(--gap);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .card {
+    display: flex;
+    flex-direction: column;
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    transition: transform .2s ease, box-shadow .2s ease;
+  }
+  .card:hover { transform: translateY(-6px); box-shadow: 0 6px 24px rgba(0,0,0,.1); }
+  .card img {
+    width: 100%; height: 180px; object-fit: cover;
+  }
+  .card-content { padding: 1rem 1.25rem 1.5rem; }
+  .card h2 { margin: .25rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; }
+  .card time { color: var(--text-muted); font-size: .85rem; }
+  
+  /* ---------- Artikel ---------- */
+  .hero {
+    width: 100%; height: 320px; object-fit: cover;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+  }
+  article h1 { font-size: 2.2rem; margin: 1.2rem 0 .3rem; }
+  article time { color: var(--text-muted); font-size: .9rem; }
+  article img:not(.hero), article video {
+    max-width: 100%; height: auto; border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    margin: 1rem 0;
+  }
+  article pre {
+    background: var(--code-bg);
+    border: 1px solid var(--code-border);
+    padding: 1rem 1.2rem;
+    border-radius: var(--radius);
+    overflow: auto;
+    font-family: "Fira Code", Consolas, monospace;
+  }
+  article blockquote {
+    border-left: 4px solid var(--accent);
+    padding: .5rem 1rem; margin: 1rem 0;
+    background: var(--code-bg);
+    color: var(--text-muted);
+  }
+  code {
+    background: var(--code-bg);
+    color: var(--text-muted);
+  }
+  .main-nav ul {
+    display: flex;
+    gap: 1.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .main-nav a {
+    font-weight: 600;
+    color: var(--text);
+  }
+  .main-nav a:hover {
+    color: var(--accent);
+  }
+  
+  /* ---------- Responsive ---------- */
+  @media (max-width: 640px) {
+    :root { font-size: 15px; }
+    .hero { height: 200px; }
+    header { flex-direction: column; gap: .5rem; }
+  }
+