Fixes to accessbility and responsive styles.

knadh · Dec 5, 2023 · 1296818 · 1296818
1 parent 61471af
commit 1296818
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 29 deletions.
diff --git a/site/base.html b/site/base.html
@@ -45,15 +45,17 @@ <h3 class="intro">
             {{ range $d := .Dicts }}
               {{ $from := index $d 0}}
               {{ $to := index $d 1}}
-                <input type="radio" name="dict" value="{{ $from.ID }}/{{ $to.ID }}" id="tab-{{ $from.ID }}-{{ $to.ID }}" />
-                <label class="tab" for="tab-{{ $from.ID }}-{{ $to.ID }}">
-                  {{ $from.Name }} - {{ $to.Name }}
-                </label>
+                <div class="group">
+                  <input type="radio" name="dict" value="{{ $from.ID }}/{{ $to.ID }}" id="tab-{{ $from.ID }}-{{ $to.ID }}" aria-label="{{ $from.Name }} - {{ $to.Name }}" />
+                  <label class="tab" for="tab-{{ $from.ID }}-{{ $to.ID }}">
+                    {{ $from.Name }} - {{ $to.Name }}
+                  </label>
+                </div>
             {{ end }}
           </div>
           <form class="search-form" method="get" action="">
             <div>
-              <input autofocus autocomplete="off" required placeholder=""
+              <input autofocus autocomplete="off" required placeholder="" aria-label="Search keyword"
                 type="text" id="q" name="q" value="{{ if .Data.Query }}{{ .Data.Query.Query }}{{ end }}" />
               <button type="submit"><img src="{{ .Consts.RootURL }}/static/search.svg?v={{ .AssetVer }}" alt="{{- .L.T "global.btnSearch" -}}" /></button>
             </div>

diff --git a/site/results.html b/site/results.html
@@ -7,7 +7,7 @@
                 <li class="entry" data-guid="{{ $r.GUID }}">
                     <header class="head">
                         {{ if $.Consts.EnableSubmissions }}
-                            <a href="" data-from="{{ $r.GUID }}" class="edit" title="{{ $.L.Ts "public.suggestEdit" "word" $r.Content }}">✏️</a>
+                            <a href="#" data-from="{{ $r.GUID }}" class="edit" title="{{ $.L.Ts "public.suggestEdit" "word" $r.Content }}">✏️</a>
                         {{ end }}
                         <h3 class="title">{{ $r.Content }}</h3>
 
@@ -23,20 +23,22 @@ <h3 class="title">{{ $r.Content }}</h3>
                             {{ if ne $lastType $types }}
                                 {{- if $lastType -}}</ol>{{- end }}
                                 <ol class="defs">
-                                    <div class="types">
+                                    <li class="types">
                                         :{{- range $t := $d.RelationTypes -}}
                                             {{ index (index $.Langs $d.Lang).Types $t }} -
                                             {{ index (index $.Langs $r.Lang).Types $t }} 
-                                        {{- end -}}
-                                    </div>
+                                        {{- else -}}
+                                            -
+                                        {{ end }}
+                                    </li>
                             {{ end }}
 
                             <li>
                                 <div data-guid="{{ $d.GUID }}" class="def">
                                     {{ $d.Content }}
 
                                     {{ if $.Consts.EnableSubmissions }}
-                                        <a href="" data-from="{{ $r.GUID }}" data-to="{{ $d.GUID }}"
+                                        <a href="#" data-from="{{ $r.GUID }}" data-to="{{ $d.GUID }}"
                                             class="edit" title="{{ $.L.Ts "public.suggestEdit" "word" $d.Content }}">✏️</a>
                                     {{ end }}
                                 </div>

diff --git a/site/static/style.css b/site/static/style.css
@@ -1,10 +1,11 @@
 :root {
   --primary: #111;
   --secondary: #333;
-  --light: #888;
+  --light: #666;
   --lighter: #aaa;
   --lightest: #f4f4f4;
   --white: #fff;
+  --blue: #1a0dab;
 }
 
 * {
@@ -19,7 +20,7 @@ body {
   min-width: 375px;
 }
 html, body {
-  font-size: 15px;
+  font-size: 18px;
   line-height: 1.3;
   height: 100%;
 }
@@ -46,11 +47,11 @@ h4, h5 {
 a {
   color: var(--primary);
 }
-a:hover {
-  color: var(--secondary);
-}
+  a:hover {
+    color: var(--blue);
+  }
 
-input,
+input:not([type="radio"]),
 select,
 button,
 textarea,
@@ -136,7 +137,10 @@ button:hover, .button:hover {
     position: relative;
     margin-left: 20px;
     text-align: left;
-    margin-bottom: -2px;
+    margin-bottom: -1px;
+  }
+  .search .tabs .group {
+    display: inline;
   }
   .search .tabs input {
     opacity: 0;
@@ -235,6 +239,7 @@ button:hover, .button:hover {
   }
 
   .entries .defs .types {
+    list-style-type: none;
     margin: 0 0 10px -15px;
     color: var(--light);
     font-style: italic;
@@ -270,6 +275,12 @@ button:hover, .button:hover {
 .related ul {
   font-size: 0.875rem;
 }
+  .related ul li {
+    margin-bottom: 10px;
+  }
+  .related h2 {
+    font-size: 1rem;
+  }
 
 .form-submit {
 }
@@ -374,20 +385,22 @@ button:hover, .button:hover {
   min-height: 400px;
 }
 
-.page.open {
-  margin: 60px;
+.page {
+  margin: 0 30px;
 }
-  .page.open li {
+  .page li {
     margin-bottom: 20px;
   }
-  .page.open a {
-    color: inherit;
+  .page a {
+    color: var(--blue);
+  }
+  .page a:hover {
+    color: var(--secondary);
   }
 
 .nav {
   border-top: 1px dashed #ccc;
   padding: 15px 0;
-  font-size: .85rem;
   text-align: center;
 
   margin: 30px -30px 0 -30px;
@@ -398,11 +411,11 @@ button:hover, .button:hover {
     margin: 0 15px;
   }
   .nav a:hover {
-    color: var(--primary);
+    color: var(--blue);
   }
 
 .header {
-  margin-bottom: 20px;
+  margin-bottom: 40px;
 } 
 .footer {
   margin-bottom: 30px;
@@ -417,7 +430,7 @@ button:hover, .button:hover {
     text-decoration: none;
   }
   .footer a:hover {
-    color: var(--primary);
+    color: var(--blue);
   }
   .footer img {
     max-width: 15px;
@@ -479,6 +492,9 @@ button:hover, .button:hover {
   .container {
     max-width: 50%;
   }
+  .nav a {
+    font-size: 0.75rem;
+  }
 }
 
 @media screen and (max-width: 775px) {
@@ -517,11 +533,15 @@ button:hover, .button:hover {
   .nav a {
     display: block;
     margin-bottom: 5px;
+    padding: 5px 0;
   }
 
   .footer {
     margin-bottom: 15px;
   }
+    .footer a {
+      padding: 10px;
+    }
 
   .form-submit .columns {
     width: 100%;
@@ -538,10 +558,31 @@ button:hover, .button:hover {
 
 @media screen and (max-width: 500px) {
   .search .tabs {
-    margin: 0 50px;
+    margin: 0;
   }
-  .tabs .tab {
-    display: block;
+  .search .tabs .tab {
+    display: inline-block;
     border-bottom: 0;
+    text-align: left;
+    border: 0;
+    padding: 5px 0;
+  }
+  .search .tabs input {
+    opacity: 1;
+    position: relative;
+  }
+  .search .tabs .group {
+    display: block;
+  }
+
+  .footer a {
+    display: block;
+  }
+  .footer a.icon {
+    display: inline-block;
+  }
+  .related a {
+    display: inline-block;
+    padding: 5px 0;
   }
 }