From debfd5696e3126eef7a0d3c478f18d4cb235d53d Mon Sep 17 00:00:00 2001 From: c0mmando Date: Sun, 27 Apr 2025 05:05:37 +0000 Subject: [PATCH] improve accessibility, update img tags --- index.html | 21 +- search.html | 34 +-- static/css/page.css | 520 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 533 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 57fa41934..d4309c207 100644 --- a/index.html +++ b/index.html @@ -36,25 +36,12 @@ @@ -81,7 +68,7 @@
- illuminati all seeing eye + illuminati all seeing eye

/v/Conspiracy diff --git a/search.html b/search.html index 1c049ee7c..cdde9f034 100644 --- a/search.html +++ b/search.html @@ -20,34 +20,20 @@
- illuminati all seeing eye + illuminati all seeing eye

@@ -60,12 +46,12 @@

- Mirror 1 - Mirror 2 - Mirror 3 - Mirror 4 - Mirror 5 - Mirror 6 + Mirror 1 + Mirror 2 + Mirror 3 + Mirror 4 + Mirror 5 + Mirror 6

diff --git a/static/css/page.css b/static/css/page.css index 46d22b082..8767e67e2 100644 --- a/static/css/page.css +++ b/static/css/page.css @@ -1 +1,519 @@ -html{font-size:16px}body{background:#000000;color:#FFFFFF;margin:0;padding:0;font-family:sans-serif;line-height:1.5}a{color:#00FF90;text-decoration:none}a:focus,a:hover{color:#00FFFF;cursor:pointer;outline:3px solid #00FFFF;outline-offset:2px}img{display:block;margin:10px auto;border:2px solid #00FF90;max-width:100%;height:auto}.container-fluid{max-width:1200px;margin:0 auto;padding:1.25rem}header{background-color:#111111;border-bottom:1px solid #666666;margin-bottom:1rem}.navbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0.5rem 1.25rem}.navbar-brand{color:#FFFFFF;font-size:1.5rem;font-weight:bold}.navbar-toggle{display:none;background:none;border:none;font-size:1.25rem;color:#FFFFFF}.navbar-collapse{display:flex;flex-grow:1;justify-content:flex-end}.navbar-nav{list-style:none;margin:0;padding:0;display:flex;align-items:center}.navbar-nav li{margin:0 0.5rem}.navbar-nav li a{display:block;padding:0.5rem 1rem;color:#FFFFFF;text-transform:uppercase;font-weight:bold;font-size:1rem}.navbar-nav li a:focus,.navbar-nav li a:hover{background-color:rgba(255, 255, 255, 0.15);border-radius:4px;color:#FFFFFF;outline:3px solid #00FFFF;outline-offset:2px}.link{border-bottom:1px solid #666666;padding-bottom:1rem;margin-bottom:1rem;overflow:hidden}.link-container{display:flex;align-items:flex-start;gap:1rem}.link a.thumbnail{float:left;width:150px;margin-right:1rem;margin-bottom:0.5rem}.link a.thumbnail img{width:100%;height:auto;display:block}.link .entry{flex:1}.link .entry h5.title.mb-0{margin-bottom:0.5rem}.link .entry small.text-muted{margin-top:0.25rem;color:#BBBBBB}.link .title{font-size:1.25rem;margin-bottom:0.5rem}.link .title a{color:#00FF90;font-weight:bold;text-decoration:none}.link .title a:focus,.link .title a:hover{color:#00FFFF;outline:3px solid #00FFFF;outline-offset:2px}.link small{color:#BBBBBB}.link small a{color:#00FF90;text-decoration:none}.link small a:focus,.link small a:hover{color:#00FFFF;outline:3px solid #00FFFF;outline-offset:2px}.quote{background:#000000;padding:1rem 1.5rem;margin:1.5rem auto;color:#FFFFFF;font-style:italic;font-weight:bold;width:300px;height:150px;overflow-y:auto;display:flex;align-items:center;justify-content:center;text-align:center}.quote blockquote{margin:0;padding:0}.quote p{margin:0}.pagination{display:flex;justify-content:center;padding-left:0;list-style:none;margin:1rem 0}.pagination .page-item{margin:0 0.25rem}.pagination .page-link{display:block;padding:0.5rem 0.75rem;color:#00FF90;background-color:#111111;border:1px solid #666666;text-decoration:none}.pagination .page-link:focus,.pagination .page-link:hover{background-color:#222222;color:#00FFFF;outline:3px solid #00FFFF;outline-offset:2px}.pagination .page-item.active .page-link{background-color:#00FF90;border-color:#00FF90;color:#000000}.pagination .page-item.disabled .page-link{color:#777777;background-color:#333333;border-color:#666666;pointer-events:none;opacity:1}footer{margin-top:2rem;padding:1rem 0;border-top:1px solid #666666;text-align:center;font-size:0.875rem;color:#AAAAAA}@media (max-width: 768px){html{font-size:15px}.navbar{flex-direction:column;align-items:flex-start}.navbar-collapse{width:100%;justify-content:flex-start}.navbar-nav{flex-direction:column;width:100%}.navbar-nav li{width:100%;margin:0.25rem 0}.navbar-nav li a{width:100%;padding:0.5rem 1rem}.link-container{display:block}.link a.thumbnail{width:100%;margin:0 auto 1rem}.entry .title a.title{font-size:1.125rem}#container > div:first-of-type{font-size:1rem}table.sortable,table.sortable td,table.sortable th{font-size:0.875rem}}@media (max-width: 480px){html{font-size:14px}.pagination .page-link{font-size:0.875rem;padding:0.5rem}.download-buttons a{padding:0.75rem 1rem;font-size:0.875rem}ul.flat-list li{font-size:0.7rem}}.dark a{color:#00FF90;text-decoration:none}.dark a:focus,.dark a:hover{color:#00FFFF;cursor:pointer;outline:3px solid #00FFFF;outline-offset:2px}.dark img{display:block;margin:10px auto;border:2px solid #00FF90;max-width:100%;height:auto}#container{width:90%;max-width:1024px;margin:0 auto;padding:1.25rem}#container > div:first-of-type{margin-bottom:1.25rem;text-align:center;font-size:1.125rem;color:#00FF90}.submission,div.submission{border:4px solid #0000FF;padding:1.25rem;margin-bottom:1.25rem;overflow:hidden}.submission a.thumbnail{float:left;margin:0 1.25rem 1.25rem 0}.entry{overflow:auto;margin-bottom:0.625rem}.entry .title a.title{font-size:1.25rem;color:#00FF90;font-weight:bold}.entry .tagline{font-size:0.75rem;color:#BBBBBB;margin-bottom:0.5rem}table.sortable{width:100%;margin-bottom:1.25rem;border-spacing:0;border:1px solid #1A1A1A;border-collapse:collapse}table.sortable td,table.sortable th{padding:0.375rem 0.5rem;text-align:left;border:1px solid #666666}table.sortable th{background-color:#2B2B2B;color:#00FF90;font-weight:bold}table.sortable tr.odd td{background-color:#1E1E1E}table.sortable tr.even td{background-color:#151515}table.sortable tr:hover td{background-color:#222222}.commentarea{margin-top:2.5rem}.comment{padding:0.225rem;margin:0.5rem 0;border:1px solid #00FF90;background-color:#111111}.comment.collapsed .noncollapsed > :not(.tagline){display:none !important}.comment.collapsed > .child{display:none !important}.comment .tagline{font-size:0.75rem;color:#BBBBBB;margin-bottom:0.25rem}.comment .noncollapsed{margin-left:1.25rem}ul.flat-list{list-style:none;padding:0;margin:0.25rem 0 0}ul.flat-list li{display:inline;margin-right:0.625rem}ul.flat-list li a{color:#00FF90;font-size:0.75rem;text-decoration:none}ul.flat-list li a:focus,ul.flat-list li a:hover{color:#00FFFF;outline:3px solid #00FFFF;outline-offset:2px}.footer-container{margin-top:2.5rem;text-align:center;font-size:0.75rem;color:#AAAAAA;padding:1.25rem 0;border-top:1px solid #666666}.download-buttons{text-align:center;margin:1.5rem 0}.download-buttons a{display:inline-block;margin:0.5rem;padding:0.8rem 1.5rem;background-color:#00FF90;color:#000000;text-decoration:none;border-radius:4px;transition:background-color 0.3s ease}.download-buttons a:focus,.download-buttons a:hover{background-color:#00FFFF;color:#000000;outline:3px solid #00FFFF;outline-offset:2px} \ No newline at end of file +html { + font-size: 16px; +} + +body { + background: #000000; + color: #FFFFFF; + margin: 0; + padding: 0; + font-family: sans-serif; + line-height: 1.5; +} + +/* Links now have a very subtle underscore effect using + a low-opacity bottom border that intensifies on hover/focus */ +a { + color: #00FF90; + text-decoration: none; + border-bottom: 1px solid rgba(0, 255, 144, 0.4); +} + +a:focus, +a:hover { + color: #00FFFF; + cursor: pointer; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +img { + display: block; + margin: 10px auto; + max-width: 100%; + height: auto; +} + +.container-fluid { + max-width: 1200px; + margin: 0 auto; + padding: 1.25rem; +} + +header { + background-color: #111111; + border-bottom: 1px solid #666666; + margin-bottom: 1rem; +} + +.navbar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.5rem 1.25rem; +} + +.navbar-brand { + color: #FFFFFF; + font-size: 1.5rem; + font-weight: bold; + border-bottom: 1px solid white; +} + +.navbar-toggle { + display: none; + background: none; + border: none; + font-size: 1.25rem; + color: #FFFFFF; +} + +.navbar-collapse { + display: flex; + flex-grow: 1; + justify-content: flex-end; +} + +.navbar-nav { + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; +} + +.navbar-nav li { + margin: 0 0.5rem; +} + +.navbar-nav li a { + display: block; + padding: 0.1rem 0.5rem; + color: #FFFFFF; + text-transform: uppercase; + font-weight: bold; + font-size: 1rem; + border-bottom: 1px solid white; +} + +.navbar-nav li a:focus, +.navbar-nav li a:hover { + background-color: rgba(255, 255, 255, 0.15); + border-radius: 4px; + color: #FFFFFF; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +.link { + border-bottom: 1px solid #666666; + padding-bottom: 1rem; + margin-bottom: 1rem; + overflow: hidden; +} + +.link-container { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.link a.thumbnail { + float: left; + width: 150px; + margin-right: 1rem; + margin-bottom: 0.5rem; +} + +a.thumbnail.may-blank { + border-bottom: none; +} + + +.link a.thumbnail img { + width: 100%; + height: auto; + display: block; +} + +.link .entry { + flex: 1; +} + +.link .entry h5.title.mb-0 { + margin-bottom: 0.5rem; +} + +.link .entry small.text-muted { + margin-top: 0.25rem; + color: #BBBBBB; +} + +.link .title { + font-size: 1.25rem; + margin-bottom: 0.5rem; +} + +.link .title a { + color: #00FF90; + font-weight: bold; + text-decoration: none; + border-bottom: 0.0px solid rgba(0, 255, 144, 0.4); +} + +.link .title a:focus, +.link .title a:hover { + color: #00FFFF; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +.link small { + color: #BBBBBB; +} + +.link small a { + color: #00FF90; + text-decoration: none; + border-bottom: 1px solid rgba(0, 255, 144, 0.4); +} + +.link small a:focus, +.link small a:hover { + color: #00FFFF; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +.quote { + background: #000000; + padding: 1rem 1.5rem; + margin: 1.5rem auto; + color: #FFFFFF; + font-style: italic; + font-weight: bold; + width: 300px; + height: 150px; + overflow-y: auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.quote blockquote { + margin: 0; + padding: 0; +} + +.quote p { + margin: 0; +} + +.pagination { + display: flex; + justify-content: center; + padding-left: 0; + list-style: none; + margin: 1rem 0; +} + +.pagination .page-item { + margin: 0 0.25rem; +} + +.pagination .page-link { + display: block; + padding: 0.5rem 0.75rem; + color: #00FF90; + background-color: #111111; + border: 1px solid #666666; + text-decoration: none; + border-bottom: 1px solid rgba(0, 255, 144, 0.4); +} + +.pagination .page-link:focus, +.pagination .page-link:hover { + background-color: #222222; + color: #00FFFF; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +.pagination .page-item.active .page-link { + background-color: #00FF90; + border-color: #00FF90; + color: #000000; +} + +.pagination .page-item.disabled .page-link { + color: #777777; + background-color: #333333; + border-color: #666666; + pointer-events: none; + opacity: 1; +} + +footer { + margin-top: 2rem; + padding: 1rem 0; + border-top: 1px solid #666666; + text-align: center; + font-size: 0.875rem; + color: #FFFFFF; +} + +@media (max-width: 768px) { + html { + font-size: 15px; + } + .navbar { + flex-direction: column; + align-items: flex-start; + } + .navbar-collapse { + width: 100%; + justify-content: flex-start; + } + .navbar-nav { + flex-direction: column; + width: 100%; + } + .navbar-nav li { + width: 100%; + margin: 0.25rem 0; + } + .navbar-nav li a { + width: 100%; + padding: 0.5rem 1rem; + } + .link-container { + display: block; + } + .link a.thumbnail { + width: 100%; + margin: 0 auto 1rem; + } + .entry .title a.title { + font-size: 1.125rem; + } + #container > div:first-of-type { + font-size: 1rem; + } + table.sortable, + table.sortable td, + table.sortable th { + font-size: 0.875rem; + } +} + +@media (max-width: 480px) { + html { + font-size: 14px; + } + .pagination .page-link { + font-size: 0.875rem; + padding: 0.5rem; + } + .download-buttons a { + padding: 0.75rem 1rem; + font-size: 0.875rem; + } + ul.flat-list li { + font-size: 0.7rem; + } +} + +.dark a { + color: #00FF90; + text-decoration: none; + border-bottom: 1px solid rgba(0, 255, 144, 0.4); +} + +.dark a:focus, +.dark a:hover { + color: #00FFFF; + cursor: pointer; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +.dark img { + display: block; + margin: 10px auto; + max-width: 100%; + height: auto; +} + +#container { + width: 90%; + max-width: 1024px; + margin: 0 auto; + padding: 1.25rem; +} + +#container > div:first-of-type { + margin-bottom: 1.25rem; + text-align: center; + font-size: 1.125rem; + color: #00FF90; +} + +.submission, +div.submission { + border: 4px solid #0000FF; + padding: 1.25rem; + margin-bottom: 1.25rem; + overflow: hidden; +} + +.submission a.thumbnail { + float: left; + margin: 0 1.25rem 1.25rem 0; +} + +.entry { + overflow: auto; + margin-bottom: 0.625rem; +} + +.entry .title a.title { + font-size: 1.25rem; + color: #00FF90; + font-weight: bold; + border-bottom: 1px solid rgba(0, 255, 144, 0.4); +} + +.entry .tagline { + font-size: 0.75rem; + color: #BBBBBB; + margin-bottom: 0.5rem; +} + +table.sortable { + width: 100%; + margin-bottom: 1.25rem; + border-spacing: 0; + border: 1px solid #1A1A1A; + border-collapse: collapse; +} + +table.sortable td, +table.sortable th { + padding: 0.375rem 0.5rem; + text-align: left; + border: 1px solid #666666; +} + +table.sortable th { + background-color: #2B2B2B; + color: #00FF90; + font-weight: bold; +} + +table.sortable tr.odd td { + background-color: #1E1E1E; +} + +table.sortable tr.even td { + background-color: #151515; +} + +table.sortable tr:hover td { + background-color: #222222; +} + +.commentarea { + margin-top: 2.5rem; +} + +.comment { + padding: 0.225rem; + margin: 0.5rem 0; + border: 1px solid #00FF90; + background-color: #111111; +} + +.comment.collapsed .noncollapsed > :not(.tagline) { + display: none !important; +} + +.comment.collapsed > .child { + display: none !important; +} + +.comment .tagline { + font-size: 0.75rem; + color: #BBBBBB; + margin-bottom: 0.25rem; +} + +.comment .noncollapsed { + margin-left: 1.25rem; +} + +ul.flat-list { + list-style: none; + padding: 0; + margin: 0.25rem 0 0; +} + +ul.flat-list li { + display: inline; + margin-right: 0.625rem; +} + +ul.flat-list li a { + color: #00FF90; + font-size: 0.75rem; + text-decoration: none; + border-bottom: 1px solid rgba(0, 255, 144, 0.4); +} + +ul.flat-list li a:focus, +ul.flat-list li a:hover { + color: #00FFFF; + outline: 3px solid #00FFFF; + outline-offset: 2px; + border-bottom-color: rgba(0, 255, 144, 0.8); +} + +.footer-container { + margin-top: 2.5rem; + text-align: center; + font-size: 0.75rem; + color: #AAAAAA; + padding: 1.25rem 0; + border-top: 1px solid #666666; +} + +.download-buttons { + text-align: center; + margin: 1.5rem 0; +} + +.download-buttons a { + display: inline-block; + margin: 0.5rem; + padding: 0.8rem 1.5rem; + background-color: #00FF90; + color: #000000; + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +.download-buttons a:focus, +.download-buttons a:hover { + background-color: #00FFFF; + color: #000000; + outline: 3px solid #00FFFF; + outline-offset: 2px; +}