fix: set logo alt on question.html to "AnonymousOverflow home"

fix: remove alt from homepage logo, add "logo" alt to question header
Let title hyphenate to avoid x-overflow on mobile (#113 )
2024-12-06 19:16:43 +01:00 · 2024-05-05 15:22:24 -04:00 · 2024-04-25 05:14:25 +00:00 · 2024-04-25 01:12:43 -04:00 · 2024-04-25 01:11:25 -04:00 · 2024-04-25 01:09:43 -04:00
6 changed files with 177 additions and 253 deletions
@@ -22,7 +22,7 @@ This project is super lightweight by design. The UI is simple and the frontend i
 | [overflow.lunar.icu](https://overflow.lunar.icu)                                          | Germany                      | Operated by [lunar.icu](https://lunar.icu/)                                                      |
 | [overflow.adminforge.de](https://overflow.adminforge.de/)                                 | Germany                      | Operated by [adminForge](https://adminforge.de/)                                                 |
 | [overflow.hostux.net](https://overflow.hostux.net/)                                       | France                       | Operated by [Hostux](https://hostux.net/)                                                        |
-| [overflow.projectsegfau.lt](https://overflow.projectsegfau.lt/)                           | United States, France, India | Operated by [Project Segfault](https://projectsegfau.lt/)                                        |
+| [overflow.projectsegfau.lt](https://overflow.projectsegfau.lt/)                           | United States, Germany, India | Operated by [Project Segfault](https://projectsegfau.lt/)                                        |
 | [code.xbdm.fun](https://code.xbdm.fun)                                                    | Germany                      | Operated by [xbdm.fun](https://xbdm.fun)                                                         |
 | [overflow.fascinated.cc](https://overflow.fascinated.cc/)                                 | Germany                      | Operated by [fascinated.cc](https://fascinated.cc/)                                              |
 | [ao.bloat.cat](https://ao.bloat.cat)                                                      | Romania                      | Operated by [bloat.cat](https://bloat.cat)                                                       |
@@ -32,7 +32,6 @@ This project is super lightweight by design. The UI is simple and the frontend i
 | [overflow.freedit.eu](overflow.freedit.eu)                                                | United States                | Operated by [freedit.eu](https://freedit.eu)                                                     |
 | [ao.ftw.lol](https://ao.ftw.lol)                                                          | Germany                      | Operated by [ftw.lol](https://ftw.lol)                                                           |
 | [anonoverflow.hyperreal.coffee](https://anonoverflow.hyperreal.coffee)                    | United States                | Operated by [hyperreal.coffee](https://hyperreal.coffee)                                         |
-| [a.opnxng.com](a.opnxng.com)                                                              | Singapore                    | Operated by [opnxng.com](https://about.opnxng.com)                                               |
 | [overflow.sudovanilla.com](https://overflow.sudovanilla.com)                              | United States                | Operated by [SudoVanilla](https://sudovanilla.com)                                               |
 | [anonymousoverflow.privacyfucking.rocks](https://anonymousoverflow.privacyfucking.rocks/) | Germany                      | Operated by [privacyfucking.rocks](https://privacyfucking.rocks)                                 |
 | [exchange.seitan-ayoub.lol](https://exchange.seitan-ayoub.lol)                            | Germany                      | Operated by [Seitan Ayoub](https://seitan-ayoub.lol)                                             |
@@ -49,7 +48,7 @@ This project is super lightweight by design. The UI is simple and the frontend i
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------- |
 | [ao.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion](http://ao.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion)              | United States   | Operated by [vern.cc](https://vern.cc)                    |
 | [vernmzgraj6aaoafmehupvtkkynpaa67rxcdj2kinwiy6konn6rq.b32.i2p](http://vernmzgraj6aaoafmehupvtkkynpaa67rxcdj2kinwiy6konn6rq.b32.i2p)                        | United States   | Operated by [vern.cc](https://vern.cc)                    |
-| [overflow.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion](http://overflow.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion/) | Luxembourg      | Operated by [Project Segfault](https://projectsegfau.lt/) |
+| [overflow.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion](http://overflow.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion/) | Germany         | Operated by [Project Segfault](https://projectsegfau.lt/) |
 | [overflow.daturab6drmkhyeia4ch5gvfc2f3wgo6bhjrv3pz6n7kxmvoznlkq4yd.onion](http://overflow.daturab6drmkhyeia4ch5gvfc2f3wgo6bhjrv3pz6n7kxmvoznlkq4yd.onion/) | Germany         | Operated by [datura.network](https://datura.network)      |
 | [ao.pk47sgwhncn5cgidm7bofngmh7lc7ukjdpk5bjwfemmyp27ovl25ikyd.onion](http://ao.pk47sgwhncn5cgidm7bofngmh7lc7ukjdpk5bjwfemmyp27ovl25ikyd.onion/)             | Germany         | Operated by [owo.si](https://owo.si/)                     |
 | [ay7akchgdh76r4lc62hzd52z6xqoh67loototsetvqxo5o7ngo5q.b32.i2p](http://ay7akchgdh76r4lc62hzd52z6xqoh67loototsetvqxo5o7ngo5q.b32.i2p/)                       | Germany         | Operated by [owo.si](https://owo.si/)                     |
@@ -3,21 +3,23 @@
    --text-color: #fff;
    --muted-text-color: #b3b3b3;
    --code-bg: #36383d;
+    --code-fg: #ffffff;
    --input-bg: #2b303b;
    --input-bg-hover: #3b404b;
-    --meta-bg: rgb(82, 82, 98);
+    --meta-bg: #525262;
    --divider-color: #42464e;
    --link-color: #92adff;
 }

 [data-theme='light'] {
-    --main-bg: rgb(219, 219, 219);
+    --main-bg: #dbdbdb;
    --text-color: #000;
    --muted-text-color: #636363;
    --code-bg: #36383d;
-    --input-bg: rgb(188, 188, 188);
-    --input-bg-hover: rgb(168, 168, 168);
-    --meta-bg: rgb(170, 168, 168);
+    --code-fg: #ffffff;
+    --input-bg: #bcbcbc;
+    --input-bg-hover: #a8a8a8;
+    --meta-bg: #aaa8a8;
    --divider-color: #b5b5b5;
    --link-color: #335ad0;
 }
@@ -27,10 +29,23 @@ a {
 }

 html {
+    margin: auto;
+    max-width: 40rem;
+}
+
+@media only screen and (max-width: calc(40rem + 2rem)) {
+    body {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+
+body {
+    background-color: var(--main-bg);
+    color: var(--text-color);
+    font-family: sans-serif;
+
    margin: 0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
 }

 .icon {
@@ -1,21 +1,10 @@
 body {
-    background-color: var(--main-bg);
-    font-family: sans-serif;
-
    display: flex;
-    justify-content: center;
-    align-items: center;
-
    height: 100vh;
-    width: 100vw;
-
-    margin: 0;
-
-    color: var(--text-color);
 }

 .container {
-    width: 40rem;
+    margin: auto;
 }

 .footer {
@@ -44,7 +33,7 @@ body {

 .view-input:focus {
    outline: none;
-    border: 2px solid rgb(168, 168, 168);
+    border: 2px solid #a8a8a8;
 }

 .view-button {
@@ -71,7 +60,7 @@ body {
 }

 .error {
-    background-color: rgb(255, 129, 129);
+    background-color: #ff8181;
 }

 .error,
@@ -104,10 +93,3 @@ body {
    width: 2rem;
    height: 2rem;
 }
-
-@media screen and (max-width: 800px) {
-    body {
-        padding: 1rem;
-        box-sizing: border-box;
-    }
-}
@@ -1,35 +1,5 @@
 body {
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-
-    overflow-x: hidden;
-
-    background-color: var(--main-bg);
-    color: var(--text-color);
-    font-family: sans-serif;
-
-    display: flex;
-    justify-content: center;
-
-    padding-left: 5rem;
-    padding-right: 5rem;
    padding-top: 2rem;
-
-    box-sizing: border-box;
-}
-
-@media (orientation: landscape) {
-    .parent {
-        max-width: 50%;
-        width: fit-content;
-    }
-}
-@media (orientation: portrait) {
-    .parent {
-        max-width: 90%;
-        width: fit-content;
-    }
 }

 .header {
@@ -55,14 +25,14 @@ code {
    background-color: var(--code-bg);
    padding: 0.15rem;
    border-radius: 5px;
-    color: white;
+    color: var(--code-fg);
 }

 pre {
    background-color: var(--code-bg);
    padding: 1rem;
    border-radius: 5px;
-    color: var(--text-color);
+    color: var(--code-fg);
    overflow-x: auto;
    line-height: 1.35;
 }
@@ -162,6 +132,7 @@ img {

 .answers-header {
    display: flex;
+    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
 }
@@ -195,10 +166,3 @@ img {
    justify-content: center;
    align-items: center;
 }
-
-@media only screen and (max-width: 800px) {
-    body {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-}
@@ -1,81 +1,62 @@
 <!DOCTYPE html>
 <html data-theme="{{ .theme }}">
-    <head>
-        <title>AnonymousOverflow - Private frontend for StackOverflow</title>
-        <link rel="stylesheet" href="/static/home.css" />
-        <meta
-            http-equiv="Content-Security-Policy"
-            content="default-src 'none'; style-src 'self'; script-src 'none'; img-src 'self';"
-        />
-        <link rel="icon" href="/static/codecircles.webp" />
-        <meta
-            name="description"
-            content="View StackOverflow threads in privacy and without the clutter."
-        />
-        {{ template "sharedHead.html" }}
-    </head>
-    <body>
-        <div class="container">
-            <div class="title">
-                <img
-                    class="logo"
-                    src="/static/codecircles.webp"
-                    alt="4 circles with alternating colors between green and white"
-                />
-                <h1>AnonymousOverflow</h1>
-            </div>
-            <h2>Get programming help without compromising your privacy.</h2>
-            <p>
-                AnonymousOverflow allows you to view StackOverflow threads
-                without the cluttered interface and exposing your IP address,
-                browsing habits and other browser fingerprint data to
-                StackOverflow.
-            </p>
-            {{ if .successMessage }}
-            <div class="success">
-                <p><b>Success</b>: {{ .successMessage }}</p>
-            </div>
-            {{ else}} {{ if .errorMessage }}
-            <div class="error">
-                <p><b>Error</b>: {{ .errorMessage }}</p>
-            </div>
-            {{end}} {{ end }}
-            <form method="POST" action="/">
-                <div class="view-form">
-                    <input
-                        class="view-input"
-                        type="text"
-                        name="url"
-                        placeholder="https://stackoverflow.com/questions/123456/example-url"
-                    />
-                    <button class="view-button" type="submit">View</button>
-                </div>
-            </form>
-            <div class="options">
-                <div class="icon">
-                    <a href="/options/images">
-                        <img src="/static/icons/image.svg" alt="Toggle theme" />
-                    </a>
-                </div>
-                {{ template "themeSwitcher.html" .}}
-            </div>
-            <p class="footer">
-                Brought to you by
-                <a
-                    href="https://github.com/WhateverLabs"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >Whatever Labs</a
-                >
-                •
-                <a
-                    href="https://github.com/httpjamesm/AnonymousOverflow"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >Source</a
-                >
-                • Version {{ .version }}
-            </p>
+
+<head>
+    <title>AnonymousOverflow - Private frontend for StackOverflow</title>
+    <link rel="stylesheet" href="/static/home.css" />
+    <meta http-equiv="Content-Security-Policy"
+        content="default-src 'none'; style-src 'self'; script-src 'none'; img-src 'self';" />
+    <link rel="icon" href="/static/codecircles.webp" />
+    <meta name="description" content="View StackOverflow threads in privacy and without the clutter." />
+    {{ template "sharedHead.html" }}
+</head>
+
+<body>
+    <div class="container">
+        <div class="title">
+            <img class="logo" src="/static/codecircles.webp" alt="" />
+            <h1>Anonymous&shy;Overflow</h1>
        </div>
-    </body>
-</html>
+        <h2>Get programming help without compromising your privacy.</h2>
+        <p>
+            AnonymousOverflow allows you to view StackOverflow threads
+            without the cluttered interface and exposing your IP address,
+            browsing habits and other browser fingerprint data to
+            StackOverflow.
+        </p>
+        {{ if .successMessage }}
+        <div class="success">
+            <p><b>Success</b>: {{ .successMessage }}</p>
+        </div>
+        {{ else}} {{ if .errorMessage }}
+        <div class="error">
+            <p><b>Error</b>: {{ .errorMessage }}</p>
+        </div>
+        {{end}} {{ end }}
+        <form method="POST" action="/">
+            <div class="view-form">
+                <input class="view-input" type="text" name="url"
+                    placeholder="https://stackoverflow.com/questions/123456/example-url" />
+                <button class="view-button" type="submit">View</button>
+            </div>
+        </form>
+        <div class="options">
+            <div class="icon">
+                <a href="/options/images">
+                    <img src="/static/icons/image.svg" alt="Toggle theme" />
+                </a>
+            </div>
+            {{ template "themeSwitcher.html" .}}
+        </div>
+        <p class="footer">
+            Brought to you by
+            <a href="https://github.com/WhateverLabs" target="_blank" rel="noopener noreferrer">Whatever Labs</a>
+            •
+            <a href="https://github.com/httpjamesm/AnonymousOverflow" target="_blank"
+                rel="noopener noreferrer">Source</a>
+            • Version {{ .version }}
+        </p>
+    </div>
+</body>
+
+</html>
@@ -1,111 +1,94 @@
 <!DOCTYPE html>
 <html data-theme="{{ .theme }}">
-    <head>
-        <title>{{ .question.Title }} | AnonymousOverflow</title>
-        <link rel="stylesheet" href="/static/question.css" />
-        <link rel="stylesheet" href="/static/syntax.css" />
-        <link rel="stylesheet" href="/static/comments.css" />
-        <meta
-            http-equiv="Content-Security-Policy"
-            content="default-src 'none'; style-src 'self'; script-src 'self'; img-src {{ .imagePolicy }}; font-src 'self';"
-        />
-        <meta name="description" content="{{ .question.ShortenedBody }}..." />
-        {{ template "sharedHead.html" }}
-        <link rel="stylesheet" href="/static/katex/katex.min.css">

-        <!-- The loading of KaTeX is deferred to speed up page rendering -->
-        <script defer src="/static/katex/katex.min.js"></script>
+<head>
+    <title>{{ .question.Title }} | AnonymousOverflow</title>
+    <link rel="stylesheet" href="/static/question.css" />
+    <link rel="stylesheet" href="/static/syntax.css" />
+    <link rel="stylesheet" href="/static/comments.css" />
+    <meta http-equiv="Content-Security-Policy"
+        content="default-src 'none'; style-src 'self'; script-src 'self'; img-src {{ .imagePolicy }}; font-src 'self';" />
+    <meta name="description" content="{{ .question.ShortenedBody }}..." />
+    {{ template "sharedHead.html" }}
+    <link rel="stylesheet" href="/static/katex/katex.min.css">

-        <!-- To automatically render math in text elements, include the auto-render extension: -->
-        <script defer src="/static/katex/contrib/auto-render.min.js"></script>
-        <script defer src="/static/question.js" type="text/javascript"></script>
+    <!-- The loading of KaTeX is deferred to speed up page rendering -->
+    <script defer src="/static/katex/katex.min.js"></script>
+
+    <!-- To automatically render math in text elements, include the auto-render extension: -->
+    <script defer src="/static/katex/contrib/auto-render.min.js"></script>
+    <script defer src="/static/question.js" type="text/javascript"></script>
 </head>
-    <body>
-        <div class="parent">
-            <div class="header">
-                <a href="/" class="logo-link">
-                    <img
-                        class="logo"
-                        src="/static/codecircles.webp"
-                        alt="4 circles with alternating colors between green and white"
-                    />
-                </a>
-                {{ template "themeSwitcher.html" . }}
-            </div>
-            <div class="card">
-                <div class="card-header">
-                    <h1>{{ .question.Title }}</h1>
-                    <p class="timestamp">
-                        Asked {{ .question.Timestamp }} by
-                        <a
-                            href="{{ .question.AuthorURL }}"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            >{{ .question.AuthorName }}</a
-                        >.
-                    </p>
-                </div>
-                <div class="card-body">{{ .question.Body }}</div>
-                <div class="card-tags">
-                    {{ range .question.Tags }}
-                        <div class="tag">{{ . }}</div>
-                    {{ end }}
-                </div>
-                {{ if .question.Comments }} {{ template "comments.html"
-                .question }} {{end}}
-            </div>
-            <hr class="post-divider" />
-            <div class="answers-header">
-                <h2>Answers</h2>
-                <div class="sorting">
-                    <form>
-                        <select name="sort_by">
-                            <option disabled value="">Sort answers by...</option>
-                            <option value="votes"{{ if eq .sortValue "votes" }} selected{{ end }}>Votes</option>
-                            <option value="trending"{{ if eq .sortValue "trending" }} selected{{ end }}>Trending</option>
-                            <option value="newest"{{ if eq .sortValue "newest" }} selected{{ end }}>Date modified (newest first)</option>
-                            <option value="oldest"{{ if eq .sortValue "oldest" }} selected{{ end }}>Date created (oldest first)</option>
-                        </select>
-                        <button type="submit">
-                            <img
-                                src="/static/icons/sort.svg"
-                                alt="Sieve icon"
-                            />
-                        </button>
-                    </form>
-                </div>
-            </div>
-            {{ range $answer := .answers }}
-            <div class="answer" id="{{ $answer.ID }}">
-                <div
-                    class="answer-meta{{ if $answer.IsAccepted }} accepted{{end}}"
-                >
-                <p>
-                    {{ if $answer.IsAccepted }} Accepted - {{ end }}
-                    {{$answer.Upvotes}} Votes
-                </p>
-                <a href="#{{ $answer.ID }}" class="answer-link">
-                    <div class="icon">
-                        <img src="/static/icons/link.svg" alt="Paperclip icon" />
-                    </div>
-                </a>
-            </div>
-                {{ $answer.Body }}
-                <div class="answer-author-parent">
-                    <div class="answer-author">
-                        Answered {{ $answer.Timestamp }} by
-                        <a
-                            href="{{ $answer.AuthorURL }}"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            >{{ $answer.AuthorName }}</a
-                        >
-                    </div>
-                </div>
-                {{ if $answer.Comments }} {{ template "comments.html" $answer }}
-                {{end}}
-            </div>
+
+<body>
+    <div class="header">
+        <a href="/" class="logo-link">
+            <img class="logo" src="/static/codecircles.webp" alt="AnonymousOverflow home" />
+        </a>
+        {{ template "themeSwitcher.html" . }}
+    </div>
+    <div class="card">
+        <div class="card-header">
+            <h1>{{ .question.Title }}</h1>
+            <p class="timestamp">
+                Asked {{ .question.Timestamp }} by
+                <a href="{{ .question.AuthorURL }}" target="_blank" rel="noopener noreferrer">{{ .question.AuthorName
+                    }}</a>.
+            </p>
+        </div>
+        <div class="card-body">{{ .question.Body }}</div>
+        <div class="card-tags">
+            {{ range .question.Tags }}
+            <div class="tag">{{ . }}</div>
            {{ end }}
        </div>
-    </body>
-</html>
+        {{ if .question.Comments }} {{ template "comments.html"
+        .question }} {{end}}
+    </div>
+    <hr class="post-divider" />
+    <div class="answers-header">
+        <h2>Answers</h2>
+        <div class="sorting">
+            <form>
+                <select name="sort_by">
+                    <option disabled value="">Sort answers by...</option>
+                    <option value="votes" {{ if eq .sortValue "votes" }} selected{{ end }}>Votes</option>
+                    <option value="trending" {{ if eq .sortValue "trending" }} selected{{ end }}>Trending</option>
+                    <option value="newest" {{ if eq .sortValue "newest" }} selected{{ end }}>Date modified (newest
+                        first)</option>
+                    <option value="oldest" {{ if eq .sortValue "oldest" }} selected{{ end }}>Date created (oldest first)
+                    </option>
+                </select>
+                <button type="submit">
+                    <img src="/static/icons/sort.svg" alt="Sieve icon" />
+                </button>
+            </form>
+        </div>
+    </div>
+    {{ range $answer := .answers }}
+    <div class="answer" id="{{ $answer.ID }}">
+        <div class="answer-meta{{ if $answer.IsAccepted }} accepted{{end}}">
+            <p>
+                {{ if $answer.IsAccepted }} Accepted - {{ end }}
+                {{$answer.Upvotes}} Votes
+            </p>
+            <a href="#{{ $answer.ID }}" class="answer-link">
+                <div class="icon">
+                    <img src="/static/icons/link.svg" alt="Paperclip icon" />
+                </div>
+            </a>
+        </div>
+        {{ $answer.Body }}
+        <div class="answer-author-parent">
+            <div class="answer-author">
+                Answered {{ $answer.Timestamp }} by
+                <a href="{{ $answer.AuthorURL }}" target="_blank" rel="noopener noreferrer">{{ $answer.AuthorName }}</a>
+            </div>
+        </div>
+        {{ if $answer.Comments }} {{ template "comments.html" $answer }}
+        {{end}}
+    </div>
+    {{ end }}
+</body>
+
+</html>
Author	SHA1	Message	Date
httpjamesm	72c2888541	fix: set logo alt on question.html to "AnonymousOverflow home"	2024-05-05 15:22:24 -04:00
httpjamesm	371d149a5b	fix: remove alt from homepage logo, add "logo" alt to question header	2024-04-25 05:14:25 +00:00
McSinyx	b568c52999	Let title hyphenate to avoid x-overflow on mobile (#113 )	2024-04-25 01:12:43 -04:00
McSinyx	84991a6486	Wrap Answers heading on narrow screens (#112 ) Otherwise it would overflow on the x-axis.	2024-04-25 01:11:25 -04:00
McSinyx	e020639a3b	Set maximum width to 40rem across screen sizes (#111 ) * Set maximum width to 40rem across screen sizes Some rules are removed to correct the bounding box size in browser inspector and fix the overflow on the x-axis. * Remove unused div.parent (The diff should be viewed --ignore-all-space)	2024-04-25 01:09:43 -04:00
Patrick Wu	3a508ddbd4	A fix and a small refactor (#114 ) 1. fix code not visible in light theme; 2. use hex code instead of rgb code for all.	2024-04-24 12:49:26 -04:00
Arya K	42b1c93737	Update Location for Project Segfault instances (#109 )	2024-04-22 19:20:53 -04:00
extremelyonline	5a304fb94c	Update README.md (#110 ) Remove a.opnxng.com as it is rate-limited	2024-04-22 19:20:41 -04:00