From a3e590bed63439fc76d56ac7e87e0e2778dd978b Mon Sep 17 00:00:00 2001 From: Michael McVady Date: Fri, 3 Oct 2025 16:33:53 -0500 Subject: WIP --- assets/html_header.html | 1 - assets/search.html | 2 +- assets/static/SMPTE_Color_Bars_16x9.svg | 42 +++++++++ assets/static/css/retro.css | 148 ++++++++++++++++++++++++++++++-- assets/table_footer.html | 2 + assets/table_header.html | 7 +- 6 files changed, 192 insertions(+), 10 deletions(-) create mode 100644 assets/static/SMPTE_Color_Bars_16x9.svg diff --git a/assets/html_header.html b/assets/html_header.html index 0ff3660..73d77b9 100644 --- a/assets/html_header.html +++ b/assets/html_header.html @@ -3,7 +3,6 @@ - bunkergate.org diff --git a/assets/search.html b/assets/search.html index 97e26f2..39bd25f 100644 --- a/assets/search.html +++ b/assets/search.html @@ -1,4 +1,4 @@ -
+
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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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; + } +} diff --git a/assets/table_footer.html b/assets/table_footer.html index 000ca4b..c427bf8 100644 --- a/assets/table_footer.html +++ b/assets/table_footer.html @@ -1 +1,3 @@ + + diff --git a/assets/table_header.html b/assets/table_header.html index c3c2761..6fa7fcf 100644 --- a/assets/table_header.html +++ b/assets/table_header.html @@ -1 +1,6 @@ - +
+
createdupdated
+ + + + -- cgit v1.2.3
createdupdated