u2ui 1.0.1 → 1.4.6

package/css/classless/simple.css

@@ -1,103 +1,314 @@
-body {
-    max-width:var(--width);
-    padding:1rem;
-
-    display: grid; /* center content. Margins will not collapse :/ */
-    place-content: center stretch;
-}
-body > * {
-    min-width:0; /* gap makes min-width = content-width, in some cases it will overflow */
-}
-section,
-body > footer,
-body > header {
-    padding-block: 2rem;
-}
-body > footer {
-    border-block-start: .1em solid var(--color);
-    text-align:center;
-}
-
-body > header {
-    border-block-end: .1em solid var(--color);
-}
-
-
-table {
-    font-size: max(.8rem, 14px);
-}
-tr:not(:last-child) {
-    border-style:solid; /* new: not on td/th any problems? */
-    border-color:var(--color-line);
-    border-block-width: 0 var(--line-width);
-    border-inline-width: 0;
-}
-
-
-blockquote {
-    margin: 0;
-    padding: .5rem;
-    
-    padding-inline-start: 1rem;
-    border-inline-start: .3rem solid var(--color);
-
-    background-color: var(--color-light);
-    font-size: .8em;
-}
-
-pre {
-    background-color: var(--color-light);
-    padding: 1rem;
-    overflow-x: auto;
-    border-radius: var(--radius);
-    font-size: .8em;
-}
-code {
-    font-size: .9em;
-    padding-inline: .3em;
-    padding-block: .1em;
-    background-color: var(--color-light);
-    white-space: pre-wrap;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone;
-    line-height: var(--line-height);
-    --line-height: 1;
-}
-
-/* figure */
-figure {
-    padding:0;
-    margin-block: 1rem;
-    margin-inline: auto;
-    box-shadow: var(--shadow);
-    border-radius: var(--radius);
-    overflow:auto;
-    /*
-    font-size: 1.2rem;
-    display:flex;
-    flex-direction:column;
-    align-items:center;
-    */
-}
-figure > img {
-    border-radius: var(--radius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-figcaption {
-    opacity: .7;
-    font-size: .9rem;
-    font-style: italic;
-    text-align: center;
-}
-p, dd, li {
-    max-inline-size: 80ch;
-}
-
-
-/* button:has(*) {
-    display:flex;
-    gap:.5em;
-    align-items:center;
-    text-align:left;
-} */
+body {
+    --border: var(--line-width) solid var(--color-line);
+
+    max-width:var(--width);
+    padding:var(--gap);
+
+    display: grid; /* center content. Margins will not collapse :/ */
+
+    grid-template-areas: 
+        "header"
+        "content"
+        "footer";
+
+    place-content: start stretch;
+}
+
+body:has(> aside) {
+    display: grid;
+
+    grid-template-columns: minmax(15rem, 25%) 1fr;
+
+    gap: var(--gap);
+    align-items: start;
+
+    grid-template-columns: 15rem minmax(var(--gap), 1fr) minmax(20rem, var(--width)) minmax(var(--gap), 1fr);
+    grid-template-areas: 
+        "header header header header"
+        "nav . content ."
+        "footer footer footer footer";
+    gap: 0;
+    max-width:none;
+
+
+    & > aside {
+        grid-area:nav;
+        position:sticky;
+        width:auto;
+        margin:0;
+        top:var(--gap);
+    }
+    & > * {
+        grid-column:3;
+    }
+
+}
+
+
+body > * {
+    min-width:0; /* gap makes min-width = content-width, in some cases it will overflow */
+}
+
+body > footer,
+body > header {
+    padding-block: var(--gap);
+}
+body > header { grid-area: header; margin-bottom: var(--gap); }
+body > footer { grid-column:1 / -1 }
+
+:is(body > header, [role="banner"]) {
+    border-block-end: var(--border);
+
+    & nav {
+        white-space: nowrap;
+        > ul {
+            display: flex;
+            gap: var(--gap);
+        }
+        li { position: relative; }
+        a { display:block; }
+        ul ul a {
+            padding-inline: var(--gap);
+            padding-block: calc(var(--gap) / 2);
+        }
+        li > ul {
+            position: absolute;
+            opacity: 0;
+            visibility: hidden;
+            transition: .2s;
+            padding:0;
+            background-color: var(--color-light);
+        }
+        ul ul ul {
+            left: 100%;
+            top: 0;
+        }
+        li:is(:hover,:focus-within) > ul {
+            opacity: 1;
+            visibility: visible;
+        }    
+    }
+}
+
+:is(body > footer, [role="contentinfo"]) {
+    border-block-start: var(--border);
+    text-align:center;
+}
+
+section {
+    padding-block: 2rem;
+
+    /* grid layout */
+    &[role="group"] {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+        gap: var(--gap);
+
+        & > :is(h1,h2,h3,h4) {
+            grid-column: 1 / -1; /* gesamte Breite */
+        }
+        & > :not(:is(h1,h2,h3,h4)) {
+            margin:0;
+        }
+    }
+
+}
+
+
+table, article, blockquote, dialog, figure, pre, aside {
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: var(--gap);
+    background-color: var(--color-light);
+}
+
+
+table {
+    font-size: max(.85rem, 14px);
+    background-color: var(--color-bg);
+    overflow:hidden;
+}
+thead, tfoot {
+    background-color: var(--color-dark);
+    color: var(--color-bg); 
+}
+tbody > tr {
+    border-style:solid; /* new: not on td/th any problems? */
+    border-color: color-mix(in srgb, var(--color-line), transparent 80%);
+    border-block-width: 0 var(--line-width);
+    border-inline-width: 0;
+    &:hover {
+        background-color: var(--color-lighter);
+    }
+}
+tbody > tr:last-child {
+    border-block-end: 0;
+}
+
+label {
+    display:block;
+    margin-block:.3rem;
+}
+input, textarea, select {
+    width: 100%;
+    width: -webkit-fill-available;
+    width: stretch;
+}
+/* button, .btn { margin-block:.3rem; }*/
+
+blockquote {
+    margin: var(--gap) 0;
+    padding: var(--gap);
+    
+    padding-inline-start: var(--gap);
+    border-inline-start: var(--line-width) solid var(--color);
+
+    font-size: .85em;
+    & > footer {
+        font-style:italic;
+    }
+}
+
+pre {
+    overflow-x: auto;
+    font-size: .8em;
+}
+code {
+    font-size: .9em;
+    padding-inline: .3em;
+    padding-block: .1em;
+    background-color: var(--color-light);
+    white-space: pre-wrap;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    line-height: var(--line-height);
+    --line-height: 1;
+}
+
+/* figure */
+figure {
+    padding:0;
+    margin-block: var(--gap);
+    margin-inline: auto;
+    overflow:auto;
+}
+figure > img {
+    border-radius: var(--radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+figcaption {
+    opacity: .7;
+    font-size: .9rem;
+    font-style: italic;
+    text-align: center;
+}
+p, dd, li {
+    max-inline-size: 80ch;
+}
+
+article, dialog {
+    flex-direction: column;
+    padding:0;
+
+    & > * {
+        padding: 0 var(--gap);
+        margin:0;
+    }    
+    & > :first-child { padding-top:var(--gap); border-start-start-radius: inherit; border-start-end-radius: inherit; }
+    & > :last-child { padding-bottom:var(--gap); border-end-start-radius: inherit; border-end-end-radius: inherit; }    
+
+    & header, & footer {
+        padding:var(--gap);
+    }
+    & header { padding-bottom:var(--gap); }
+    & footer {
+        padding-top:auto;
+        font-size: 0.9rem;
+    }
+}
+dialog:modal {
+    display:flex;
+}
+
+article {
+    display:flex;
+    margin-block:var(--gap);
+    background-color: var(--color-light);
+}
+
+
+aside {
+    margin-block: var(--gap);
+    font-size:.8rem;
+
+    float: right;
+    width: max(15rem, 25%);
+    max-width:100%;
+    margin-left: var(--gap)
+}
+
+aside[popover] {
+    position:fixed;
+    inset: 0 0 0 auto;
+    width:fit-content;
+    height:auto;
+    margin:0;
+    border:0;
+    padding: 2rem;
+    border-radius:0;
+    box-shadow: var(--shadow);
+    background-color: var(--color-bg);
+    transition-duration: .3s;
+    transition-property:transform, opacity, display, overlay;
+
+    transform:translateX(0);
+    &:not(:popover-open) {
+       transform:translateX(100%);
+    }
+    @starting-style {
+        transform:translateX(100%);
+    }
+    &::backdrop {
+        background-color:#0002;
+    }
+}
+
+
+dialog {
+    transition: .2s ease-out;
+    background: var(--color-bg);
+    border:0;
+}
+dialog[open]:not(:modal) {
+    position:static;
+}
+
+
+dl {
+  display: grid;
+  grid-template-columns: minmax(auto, max-content) auto;
+  gap: calc(var(--gap) / 2);
+}
+dt {
+  font-weight: 600;
+  text-align: right;
+}
+dd {
+  margin: 0;
+  grid-column: 2;
+}
+
+
+
+/*
+sticky footer plugin
+main {
+  background-color:var(--color-bg);
+}
+[role=contentinfo] {
+  position:sticky;
+  z-index:-1;
+  inset: auto 0 0 0;
+}
+*/

package/css/classless/snippeds/a/icons.css

@@ -1,12 +1,66 @@
-
-a[download], a[target] {
-    text-decoration: none;
-}
-a[target]::after {
-    content: '🠆';
-    margin-left: .2em;
-}
-a[download]::after {
-    content: ' 🠇'; /* 🠇⤵↓ */
-    margin-left: .2em;
-}
+a::after, a::before {
+    text-decoration: none;
+    display:inline-block;
+    font-variant-emoji: text;
+}
+a::after { margin-left: .1em; }
+a::before { margin-right: .1em; }
+a[target]::after {
+    content: '↗'; /* ⇗ ⤴ ⎋ ⧉ ⇱ */
+}
+a[download]::after {
+    content: '🠇'; /* ↓ ⇓ ⬇ ⇩ ↡ ⤓ */
+}
+a[href^="mailto:"]::before {
+    content: '✉'; /* ✉️ 📧 ✉ ✆ ⚑ @ */
+}
+a[href^="tel:"]::before {
+    content: '🕿'; /* ☎ ☏ ✆ */
+}
+a[href^="#"]::before {
+    content: '#'; /* § ¶ ◊ ⚓ */
+}
+a[href*="youtube.com"]::after,
+a[href*="vimeo.com"]::after,
+a[href*="youtu.be"]::after { 
+    content: '⏵'; /* ▶️ ▷ ► ⯈ ▸ ⏵ */
+    margin-left: .2em;
+}
+a[href*="/search"]::before,
+a[href*="?q="]::before { 
+    content: '🔍'; /* ⌕ ⚲ ◎ ⊙ 🔍 */
+}
+a[rel="prev"]::before { 
+    content: '←'; /* ⇐ ⬅ ◀ ⇦ ◂ */
+}
+a[rel="next"]::after { 
+    content: ' →'; /* ⇒ ⮕ ▶ ⇨ ▸ */
+}
+a[rel="author"]::before { 
+    content: '@'; /* @ 🚶 웃 👨 👤 ✎ ✍ ✏ ⚲ ◈ */
+}
+a[rel="license"]::before { 
+    content: '©'; /* ⓒ Ⓒ ℗ ® */
+}
+a[rel="help"]::before { 
+    content: '❓'; /* 🛈 ? ⍰ ⓘ ℹ ❓ ⁇ */
+}
+a[rel="search"]::before { 
+    content: '⌕'; /* ⚲ ◎ ⊙ 🔍 */
+}
+a[rel="privacy-policy"]::before,
+a[rel="terms-of-service"]::before { 
+    content: '§'; /* ¶ ⁋ ℘ ※ */
+}
+a[rel="tag"]::before { 
+    content: '#'; /* ⚐ ⚑ ※ ⌗ */
+}
+a[rel="bookmark"]::before { 
+    content: '⚑'; /* ⚐ ◆ ★ ☆ ⚘ */
+}
+a[rel="alternate"]::before { 
+    content: '⇄'; /* ⇌ ⇋ ⇆ ↔ ⟷ */
+}
+a[rel="external"]::after { 
+    content: '↗'; /* ⇗ ⤴ ⎋ ⧉ ⇱ */
+}

package/css/classless/snippeds/a/tests.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>test</title>
+    <meta name="viewport" content="width=device-width">
+
+
+    <script src="../../../js/init.js" type=module crossorigin></script>
+
+    <link href="../../full.css" rel=stylesheet>
+    <link href="../../simple.css" rel=stylesheet>
+    <link href="./icons.css" rel=stylesheet>
+
+<body>
+
+<h1>Link Icon Test</h1>
+
+<h2>Attribute</h2>
+<div class="test-group">
+  <a href="https://example.com" target="_blank">Externer Link (target)</a><br>
+  <a href="file.pdf" download>Download Link</a><br>
+  <a href="mailto:test@example.com">E-Mail Link</a><br>
+  <a href="tel:+41123456789">Telefon Link</a><br>
+  <a href="#abschnitt">Anker Link</a>
+</div>
+
+<h2>Video-Plattformen</h2>
+<div class="test-group">
+  <a href="https://youtube.com/watch?v=123">YouTube</a><br>
+  <a href="https://vimeo.com/123456">Vimeo</a><br>
+  <a href="https://youtu.be/abc123">YouTube Short</a>
+</div>
+
+<h2>Suche</h2>
+<div class="test-group">
+  <a href="/search?q=test">Suche mit ?q=</a><br>
+  <a href="/search">Suche mit /search</a>
+</div>
+
+<h2>rel-Werte (Navigation)</h2>
+<div class="test-group">
+  <a href="#prev" rel="prev">Vorherige Seite</a><br>
+  <a href="#next" rel="next">Nächste Seite</a>
+</div>
+
+<h2>rel-Werte (Metadaten)</h2>
+<div class="test-group">
+  <a href="#author" rel="author">Autor</a><br>
+  <a href="#license" rel="license">Lizenz</a><br>
+  <a href="#help" rel="help">Hilfe</a><br>
+  <a href="#search" rel="search">Suche (rel)</a><br>
+  <a href="#tag" rel="tag">Tag</a><br>
+  <a href="#bookmark" rel="bookmark">Lesezeichen</a><br>
+  <a href="#alt" rel="alternate">Alternative</a>
+</div>
+
+<h2>rel-Werte (Legal)</h2>
+<div class="test-group">
+  <a href="#privacy" rel="privacy-policy">Datenschutz</a><br>
+  <a href="#terms" rel="terms-of-service">AGB</a>
+</div>
+
+<h2>rel-Werte (Annotation)</h2>
+<div class="test-group">
+  <a href="https://external.com" rel="external">Externe Seite (rel)</a>
+</div>
+
+<h2>Kombinationen</h2>
+<div class="test-group">
+  <a href="https://youtube.com" target="_blank">YouTube extern</a><br>
+  <a href="mailto:help@example.com" rel="help">Hilfe per E-Mail</a><br>
+  <a href="#top" rel="bookmark">Anker-Lesezeichen</a>
+</div>
+
+<h2>Fliesstext-Beispiele</h2>
+<div class="test-group">
+  <p>
+    Willkommen auf unserer Website! Wenn Sie Fragen haben, können Sie uns jederzeit unter 
+    <a href="mailto:info@beispiel.ch">info@beispiel.ch</a> erreichen oder direkt 
+    <a href="tel:+41441234567">anrufen</a>. Weitere Informationen finden Sie in unserer 
+    <a href="dokumentation.pdf" download>Dokumentation</a> oder in der 
+    <a href="https://wikipedia.org/wiki/Example" target="_blank">Wikipedia</a>.
+  </p>
+  
+  <p>
+    Dieser Artikel wurde von <a href="#maria-mueller" rel="author">Maria Müller</a> verfasst und steht unter 
+    <a href="#cc-by" rel="license">Creative Commons Lizenz</a>. Für weitere Themen siehe 
+    <a href="#webentwicklung" rel="tag">Webentwicklung</a> und 
+    <a href="#design" rel="tag">Design</a>. Den vorherigen Artikel finden Sie 
+    <a href="artikel-2.html" rel="prev">hier</a>, den nächsten Teil 
+    <a href="artikel-4.html" rel="next">dort</a>.
+  </p>
+  
+  <p>
+    In unserem <a href="https://youtube.com/watch?v=tutorial123" target="_blank">Video-Tutorial</a> 
+    erklären wir die Grundlagen. Alternativ können Sie auch das 
+    <a href="https://vimeo.com/987654" target="_blank">Vimeo-Video</a> anschauen. 
+    Nutzen Sie unsere <a href="/search?q=css">Suchfunktion</a>, um mehr Artikel zu finden, 
+    oder springen Sie direkt zu <a href="#zusammenfassung">Zusammenfassung</a>.
+  </p>
+  
+  <p>
+    Wichtige Links: Lesen Sie unsere <a href="datenschutz.html" rel="privacy-policy">Datenschutzerklärung</a> 
+    und <a href="agb.html" rel="terms-of-service">Nutzungsbedingungen</a>. Bei Problemen besuchen Sie 
+    unser <a href="hilfe.html" rel="help">Hilfe-Center</a> oder setzen Sie ein 
+    <a href="#wichtig" rel="bookmark">Lesezeichen</a> für diese Seite. Eine 
+    <a href="mobile.html" rel="alternate">mobile Version</a> ist ebenfalls verfügbar.
+  </p>
+  
+  <p>
+    Externe Ressourcen: Besuchen Sie die offizielle 
+    <a href="https://developer.mozilla.org" rel="external">MDN Dokumentation</a> oder laden Sie 
+    <a href="cheatsheet.pdf" download>unser Cheat Sheet</a> herunter. Kontaktieren Sie den Support unter 
+    <a href="mailto:support@beispiel.ch" rel="help">support@beispiel.ch</a> oder per 
+    <a href="tel:+41800123456">Hotline</a>. Weitere Videos auf 
+    <a href="https://youtu.be/abc123">YouTube</a>.
+  </p>

package/css/classless/snippeds/blockquote/big-quotes.css

@@ -0,0 +1,36 @@
+blockquote {
+    font-size: 1.4rem;
+    font-style: italic;
+    margin: 2rem;
+    padding: 2rem;
+    border:0;
+    background-color: var(--color-area, #f8f8f8);
+    position: relative;
+    text-align:center;
+    text-wrap: balance;
+    max-width: 20em;
+    margin-inline:auto;
+}
+
+blockquote::before, blockquote::after {
+    content: open-quote;
+    font-size: 4em;
+    font-weight: 900;
+    line-height: .8;
+    font-style: normal;
+    opacity:.2;
+    position: absolute;
+    inset:-.3em auto auto -.3em;
+}
+
+blockquote::after {
+    content: close-quote;
+    inset:auto -.3em -.3em auto;
+}
+
+blockquote footer {
+    font-weight: 700;
+    text-align:right;
+    font-size:1rem;
+    font-style:normal;
+}