Differences

This shows you the differences between two versions of the page.

--- snippets:html [2025-06-25 23:57] – Snippets für robots.txt, sitemap.xml und humans.txt hinzugefügt malte70
+++ snippets:html [2025-10-05 15:11] (current) – Abschnitt „Styling“ hinzugefügt malte70
@@ Line 209: / Line 209: @@
   * ''.well-known/security.txt'': \\ [[https://www.rfc-editor.org/rfc/rfc9116.html|Hinweise zum Umgang mit entdeckten Sicherheitslücken]] \\ E-Mail-Kontakt, GnuPG-Schlüssel und mehr in maschinenlesbarem Format, damit Sicherheitsforscher gefundene Lücken einfach und sicher melden können
+===== Styling =====
+==== CSS-Variablen ====
+Werte wie Farben werden oft mehrfach in einem Stylesheet benutzt, und können durch Variablen bzw. Custom Properties an einer zentralen Stelle definiert werden. Dadurch sind Anpassungen am Design auch ohne Präprozessor wie SCSS schnell gemacht.
+Variablen werden meist in der Pseudo-Klasse '':root'' definiert und gelten global, können aber auch auf ein Element beschränkt werden. Mit der Funktion ''var()'' kann dann auf den Wert zugegriffen werden:
+<code css>
+:root {
+	--color-text: #333333;
+	--color-highlight: #990100;
+	--color-background: #F6F6F6;
+}
+body {
+	color: var(--color-text);
+	background: var(--color-background);
+}
+a:link, a:visited {
+	color: var(--color-highlight);
+}
+</code>
+==== <blockquote> ====
+Das ''cite''-Attribut des ''<blockquote>''-Elements verweist auf die URL von der zitiert wird. Mithilfe der CSS-Funktion [[https://developer.mozilla.org/en-US/docs/Web/CSS/attr|attr]] kann diese in einer ''content''-Eigenschaft in CSS verwendet werden:
+<code html>
+<blockquote cite="https://malte70.de/blog/windows-system-ordner-ausblenden-linux-dot-hidden/">
+	GUI-Dateimanager, die <a href="https://docs.gtk.org/gio/">gio</a> für den Dateizugriff nutzen, wie z.B. Nautilus (GNOME), Caja (MATE) & Thunar (Xfce), unterstützen die Datei <pre>.hidden</pre>, um Dateien und Ordner zu verstecken, selbst wenn sie nicht der Linux-Konvention folgend mit einem Punkt beginnen.
+</blockquote>
+</code>
+<code css>
+blockquote {
+	margin: 1em 0;
+}
+blockquote::after {
+	display: block;
+	content: " (Quelle: " attr(cite) ") ";
+	color: GrayText;
+}
+</code>