Browse Source

feat: underline links in definitions for better accessibility

Zubarev Grigoriy 7 months ago
parent
commit
c21ab45470
2 changed files with 41 additions and 24 deletions
  1. 37 22
      src/rural_dict/static/css/main.css
  2. 4 2
      src/rural_dict/templates/index.html

+ 37 - 22
src/rural_dict/static/css/main.css

@@ -1,34 +1,49 @@
 body {
-	font-family: DejaVu Sans Mono, monospace;
-	margin:20px auto;
-	max-width:800px;
-	line-height:1.5em;
-	font-size:1.1em;
-	background-color:#282c34;
-	color:#bbc2cf;
-	padding:0 10px;
-	hyphens:auto;
+    font-family: DejaVu Sans Mono, monospace;
+    margin: 20px auto;
+    max-width: 800px;
+    line-height: 1.5em;
+    font-size: 1.1em;
+    background-color: #282c34;
+    color: #bbc2cf;
+    padding: 0 10px;
+    hyphens: auto;
 }
 
 img {
-	max-width:80vw;
+    max-width: 80vw;
+}
+
+a {
+    color: #ff6c6b;
+    text-decoration: none;
+}
+a:hover {
+    color: #ff6c6b;
+    text-decoration: underline;
+}
+.underline-links a {
+    text-decoration: underline;
 }
 
-a { color:#ff6c6b; text-decoration:none; }
-a:hover { color:#ff6c6b; text-decoration:underline; }
 h2 {
-	display:inline;
-	line-height:1.2;
-	color:#51afef;
-	font-size:1.2em;
+    display: inline;
+    line-height: 1.2;
+    color: #51afef;
+    font-size: 1.2em;
 }
-input { background-color: #282c34; color: #bbc2cf; }
+
+input {
+    background-color: #282c34;
+    color: #bbc2cf;
+}
+
 .pagination {
-	margin-right: 1ch;
-	text-align: center;
+    margin-right: 1ch;
+    text-align: center;
 }
 .pagination ul > li {
-	list-style: none;
-	display: inline-block;
-	padding-left: 1ch;
+    list-style: none;
+    display: inline-block;
+    padding-left: 1ch;
 }

+ 4 - 2
src/rural_dict/templates/index.html

@@ -34,8 +34,10 @@
       <a href="/define.php?term={{ word }}">
         <h2>{{ word }}</h2>
       </a>
-      <p>{{ meaning|safe }}</p>
-      <p><i>{{ example|safe }}</i></p>
+      <div class="underline-links">
+        <p>{{ meaning|safe }}</p>
+        <p><i>{{ example|safe }}</i></p>
+      </div>
       <div>{{ contributor|safe }}</div>
       {% if thumbs_up and thumbs_down %}
       <p>