diff options
Diffstat (limited to 'assets/static')
| -rw-r--r-- | assets/static/SMPTE_Color_Bars_16x9.svg | 42 | ||||
| -rw-r--r-- | assets/static/css/retro.css | 148 |
2 files changed, 183 insertions, 7 deletions
diff --git a/assets/static/SMPTE_Color_Bars_16x9.svg b/assets/static/SMPTE_Color_Bars_16x9.svg new file mode 100644 index 0000000..4de3ebf --- /dev/null +++ b/assets/static/SMPTE_Color_Bars_16x9.svg @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg4163" width="1920" height="1080" x="0" y="0" version="1.1"> + <style> + .st0{fill:#666}.st1{fill:#bfbfbf}.st15{fill:#262626}.st16{fill:#fff} + </style> + <g id="layer2"> + <path id="rect3394" d="M0 0h1920v1080H0z"/> + <path id="rect4808" d="M0 0h240v630H0z" class="st0"/> + <path id="rect4811" d="M240 0h205v630H240z" class="st1"/> + <path id="rect4839" fill="#bfbf00" d="M445 0h206v630H445z"/> + <path id="rect4841" fill="#00bfbf" d="M651 0h206v630H651z"/> + <path id="rect4843" fill="#00bf00" d="M857 0h206v630H857z"/> + <path id="rect4845" fill="#bf00bf" d="M1063 0h206v630h-206z"/> + <path id="rect4847" fill="#bf0000" d="M1269 0h206v630h-206z"/> + <path id="rect4849" fill="#0000bf" d="M1475 0h205v630h-205z"/> + <path id="rect4851" d="M1680 0h240v630h-240z" class="st0"/> + <path id="rect4180" fill="#0ff" d="M0 630h240v90H0z"/> + <path id="rect4182" fill="#003f69" d="M240 630h205v90H240z"/> + <path id="rect4232" d="M445 630h1235v90H445z" class="st1"/> + <path id="rect4234" fill="#00f" d="M1680 630h240v90h-240z"/> + <path id="rect4236" fill="#ff0" d="M0 720h240v90H0z"/> + <path id="rect4238" fill="#410077" d="M240 720h205v90H240z"/> + <linearGradient id="rect4240_00000078752745385694933880000004285230885311537562_" x1="437.331604" x2="1466.7346191" y1="16067" y2="16067" gradientTransform="matrix(1.00058 0 0 1 7.4147592 -15302)" gradientUnits="userSpaceOnUse"> + <stop offset="0"/> + <stop offset="1" stop-color="#fff"/> + </linearGradient> + <path id="rect4240" fill="url(#rect4240_00000078752745385694933880000004285230885311537562_)" d="M445 720h1030v90H445z"/> + <path id="rect4250" fill="red" d="M1680 720h240v90h-240z"/> + <path id="rect4254" d="M0 810h240v270H0z" class="st15"/> + <path id="rect4256" d="M240 810h309v270H240z"/> + <path id="rect4258" d="M549 810h411v270H549z" class="st16"/> + <path id="rect4260" d="M960 810h171v270H960z"/> + <path id="rect4262" d="M1131 810h69v270h-69z"/> + <path id="rect4196" d="M1200 810h68v270h-68z"/> + <path id="rect4198" fill="#050505" d="M1268 810h69v270h-69z"/> + <path id="rect4200" d="M1337 810h68v270h-68z"/> + <path id="rect4202" fill="#0a0a0a" d="M1405 810h69v270h-69z"/> + <path id="rect4204" d="M1474 810h206v270h-206z"/> + <path id="rect4206" d="M1680 810h240v270h-240z" class="st15"/> + </g> + <path id="rect4250_00000025417549005041931040000018246960240555599293_" d="M1475 720h205v90h-205z" class="st16"/> +</svg>
\ No newline at end of file diff --git a/assets/static/css/retro.css b/assets/static/css/retro.css index 49487a2..c288ff9 100644 --- a/assets/static/css/retro.css +++ b/assets/static/css/retro.css @@ -6,7 +6,7 @@ code { pre { padding: .5rem; line-height: 1.25; - overflow-x: scroll; + overflow-x: auto; } @media print { @@ -130,6 +130,14 @@ h1, color: #01ff70; } +/* Mobile-friendly heading */ +@media screen and (max-width: 48rem) { + h1, + .retro-h1 { + font-size: 2rem; + } +} + h2, .retro-h2 { font-size: 2.827rem; @@ -191,6 +199,14 @@ body { padding: .25rem; } +/* Mobile-friendly body padding */ +@media screen and (max-width: 48rem) { + body { + margin: 1rem auto 1rem; + padding: 1rem; + } +} + pre { color: #01ff70; background-color: #333; @@ -201,20 +217,138 @@ blockquote { padding-left: 1rem; } -table :is(td, th) { +/* Mobile-friendly search form */ +.search-form { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.search-form input[type="search"] { + flex: 1; + min-width: 200px; + padding: 0.5rem; + background-color: #333; + color: #fafafa; + border: 1px solid #01ff70; + font-family: "Courier New"; +} + +.search-form button { + padding: 0.5rem 1rem; + background-color: #01ff70; + color: #222; + border: none; + font-family: "Courier New"; + cursor: pointer; + font-weight: bold; +} + +.search-form button:hover { + background-color: #2ecc40; +} + +@media screen and (max-width: 48rem) { + .search-form { + flex-direction: column; + } + + .search-form input[type="search"], + .search-form button { + width: 100%; + } +} + +/* Mobile-friendly table */ +.entries-container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +table.entries-table { width: 100%; + border-collapse: collapse; +} + +table.entries-table :is(td, th) { border: 1px solid #999; - padding: 0.3em; + padding: 0.5rem; + text-align: left; } -tr { - white-space: nowrap; +table.entries-table th { + background-color: #333; + font-weight: bold; + position: sticky; + top: 0; } -tr:nth-child(even) { +table.entries-table tr { + white-space: normal; +} + +table.entries-table tr:nth-child(even) { background-color: #222; } -tr:nth-child(odd) { +table.entries-table tr:nth-child(odd) { background-color: #333; } + +/* Mobile: stack table vertically */ +@media screen and (max-width: 48rem) { + table.entries-table thead { + display: none; + } + + table.entries-table, + table.entries-table tbody, + table.entries-table tr, + table.entries-table td { + display: block; + width: 100%; + } + + table.entries-table tr { + margin-bottom: 1rem; + border: 1px solid #01ff70; + padding: 0.5rem; + } + + table.entries-table td { + border: none; + padding: 0.25rem 0; + position: relative; + } + + table.entries-table td:first-child { + font-weight: bold; + font-size: 1.1rem; + margin-bottom: 0.5rem; + } + + table.entries-table td:not(:first-child)::before { + content: attr(data-label); + font-weight: bold; + display: inline-block; + margin-right: 0.5rem; + color: #01ff70; + } + + table.entries-table td:nth-child(2)::before { + content: "Created: "; + } + + table.entries-table td:nth-child(3)::before { + content: "Updated: "; + } +} + +/* Ensure links wrap on mobile */ +@media screen and (max-width: 48rem) { + a { + word-break: break-word; + overflow-wrap: break-word; + } +} |
