Hauptseite: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

VisuellWikitext

Aktuelle Version vom 22. Oktober 2025, 17:57 Uhr

@@ Zeile 1: / Zeile 1: @@
+<html>
+<style>
+.dpl-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+@media (max-width: 720px) {
+  .dpl-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.dpl-card {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 0.8em;
+  background: #fafafa;
+}
+.dpl-card h3 {
+  margin: .2em 0 .6em 0;
+}
+.dpl-list {
+  margin: 0;
+  padding-left: 1.2em;
+}
+.dpl-list li {
+  margin: .2em 0;
+}
+</style>
+</html>
+<div class="dpl-grid">
+  <div class="dpl-card">
+    <h3>Neueste Seiten</h3>
+    {{#dpl:
+      |category=Arbeit¦Sonstiges
+      |ordermethod=firstedit
+      |order=descending
+      |count=5
+      |addeditdate=true
+      |userdateformat=d.m.Y
+      |mode=userformat
+      |resultsheader=<ul class="dpl-list">
+      |resultsfooter=</ul>
+      |format=,<li>[[%PAGE%|%TITLE%]] <small>(erstellt am %DATE%)</small></li>,
+    }}
+  </div>
+  <div class="dpl-card">
+    <h3>Kürzlich geändert</h3>
+    {{#dpl:
+      |category=Arbeit¦Sonstiges
+      |ordermethod=lastedit
+      |order=descending
+      |count=5
+      |addeditdate=true
+      |userdateformat=d.m.Y
+      |mode=userformat
+      |resultsheader=<ul class="dpl-list">
+      |resultsfooter=</ul>
+      |format=,<li>[[%PAGE%|%TITLE%]] <small>(geändert am %DATE%)</small></li>,
+    }}
+  </div>
+</div>
 <html>
 <head>
 <style>
-.category-grid {
+/* Abschnitt-Layout (untereinander) */
-  display: grid;
+.section {
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
    padding: 20px;
    background: #f5f5f5;
+}
+.section + .section { margin-top: 12px; }
+.section h3 { margin: 0 0 12px 0; }
+/* 2-Spalten-Raster innerhalb jedes Abschnitts */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* genau zwei Spalten */
+  gap: 12px;
 }
-/* Grundlayout für alle Karten */
+/* Grundstil Karte */
 .category-card {
    display: flex;
    align-items: center;
    justify-content: center;
+  text-decoration: none;
+  font-weight: bold;
+  color: #333;
+  /* Hintergrundbild-Grundlage */
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
-   background-size: auto 100%; /* Bildhöhe voll, ggf. weiße Ränder */
-  width: 100%;
+   /* Größe der Karte */
-   height: 200px;
+   height: 200px;               /* sichtbare Höhe; bei Bedarf anpassen */
-  text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
-  font-weight: bold;
-  color: #333;
-  text-decoration: none;
-  transition: transform 0.2s ease;
 }
-/* Optional: kleine Hover-Vergrößerung */
+/* Für Kategorien: Bild füllt alles (kein Rand) */
-.category-card:hover {
+.category-card.cover-image {
-   transform: scale(1.02);
+  background-size: cover !important;
+}
+/* Für Anleitungen: Bild nimmt volle Höhe, Breite automatisch
+   => ggf. weiße Ränder links/rechts */
+.category-card.contain-height {
+   background-size: auto 100% !important;
 }
-/* Spezialklasse für Bilder, die den ganzen Bereich füllen sollen */
+/* Mobil: je Abschnitt auf 1 Spalte umschalten */
-.cover-image {
+@media (max-width: 800px) {
-   background-size: cover !important; /* füllt alles, evtl. Zuschnitt */
+   .cards { grid-template-columns: 1fr; }
 }
 </style>
@@ Zeile 43: / Zeile 122: @@
 <body>
-<!-- ANLEITUNGEN -->
+<!-- SEKTION: KATEGORIEN -->
-<div class="category-grid">
+<div class="section">
+   <h3>Kategorien</h3>
-   <a class="category-card" href="/wiki/Anleitung: Seite erstellen"
+   <div class="cards">
-     style="background-image:url('/wiki/Special:FilePath/Seiterstellen.png');">
+    <a class="category-card cover-image"
-    <span>Seite erstellen</span>
+       href="/wiki/Kategorie:Arbeit"
-   </a>
+       style="background-image:url('/wiki/Special:FilePath/Arbeit_cropped.jpg');">
+      <span>ARBEIT</span>
-  <a class="category-card" href="/wiki/Anleitung: Seite bearbeiten"
+    </a>
-     style="background-image:url('/wiki/Special:FilePath/Seitebearbeiten-2.png');">
-    <span>Seite bearbeiten</span>
-  </a>
+    <a class="category-card cover-image"
+       href="/wiki/Kategorie:Sonstiges"
+       style="background-image:url('/wiki/Special:FilePath/Sonstiges_linkcard.jpg');">
+      <span>SONSTIGES</span>
+    </a>
+  </div>
 </div>
-<!-- KATEGORIEN -->
+<!-- SEKTION: ANLEITUNGEN -->
-<div class="category-grid">
+<div class="section">
+   <h3>Anleitungen</h3>
-   <a class="category-card cover-image" href="/wiki/Kategorie:Arbeit"
+   <div class="cards">
-     style="background-image:url('/wiki/Special:FilePath/Arbeit_cropped.jpg');">
+    <a class="category-card contain-height"
-    <span>ARBEIT</span>
+       href="/wiki/Anleitung: Seite erstellen"
-   </a>
+       style="background-image:url('/wiki/Special:FilePath/Seiterstellen.png');">
+      <span>Seite erstellen</span>
-  <a class="category-card cover-image" href="/wiki/Kategorie:Sonstiges"
+    </a>
-     style="background-image:url('/wiki/Special:FilePath/Sonstiges_linkcard.jpg');">
-    <span>SONSTIGES</span>
-  </a>
+    <a class="category-card contain-height"
+       href="/wiki/Anleitung: Seite bearbeiten"
+       style="background-image:url('/wiki/Special:FilePath/Seitebearbeiten-2.png');">
+      <span>Seite bearbeiten</span>
+    </a>
+  </div>
 </div>
 </body>
 </html>