css tweaks, make svg use --colors & add id to result paragraphs

cblgh · May 13, 2021 · fd4e186 · fd4e186
1 parent 8a5fba9
commit fd4e186
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/html/assets/style.css b/html/assets/style.css
@@ -99,7 +99,7 @@ nav li {
     padding: 2.1rem 3.2rem;
 }
 
-.header-home_link {
+.header-home_link, .header-home_link:hover {
     font-family: "Noto Serif";
     font-weight: 400;
     font-size: 2.4rem;
@@ -218,8 +218,8 @@ nav li {
     width: 1px;
 }
 
-.translateY-50 {
-    transform: translateY(-50%);
+.translateY-75 {
+    transform: translateY(-75%);
 }
 
 @import url('inter-ui-web/inter-ui.css');
@@ -247,4 +247,4 @@ nav li {
     font-weight: bold;
     font-style: normal;
     font-display: swap;
-}
+}
diff --git a/html/index.html b/html/index.html
@@ -9,7 +9,7 @@
     </nav>
 </header>
 <main class="grid-items-center">
-    <article class="translateY-50">
+    <article class="translateY-75">
         <div class="flow">
             <h1>
                 {{ .SiteName }}
@@ -18,11 +18,11 @@ <h2 class="italic-text">
                 {{ .Data.Tagline }}
             </h2>
             <form class="search">
-                <label for="search">Search {{ .SiteName }}</label>
+                <label class="visually-hidden" for="search">Search {{ .SiteName }}</label>
                 <span class="search__input">
                     <input type="search" required minlength="1" name="q" placeholder="{{ .Data.Placeholder }}" class="flex-grow" id="search">
                     <button type="submit" class="search__button" aria-label="Search" title="Search">
-                        <svg viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" baseProfile="full" style="background:#000" width="42" height="30" fill="none"><path d="M90 135q60-60 120-60 0 0 0 0 60 0 120 60m-120 60a60 60 0 01-60-60 60 60 0 0160-60 60 60 0 0160 60 60 60 0 01-60 60m45-15h0l30 30m-75-15h0v45m-45-60h0l-30 30" stroke-width="81" stroke-linecap="square" stroke-linejoin="round" stroke="#fff"/></svg>
+                        <svg viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" baseProfile="full" style="background:var(--secondary)" width="42" height="30" fill="none"><path d="M90 135q60-60 120-60 0 0 0 0 60 0 120 60m-120 60a60 60 0 01-60-60 60 60 0 0160-60 60 60 0 0160 60 60 60 0 01-60 60m45-15h0l30 30m-75-15h0v45m-45-60h0l-30 30" stroke-width="81" stroke-linecap="square" stroke-linejoin="round" stroke="var(--primary)"/></svg>
                     </button>
                 </span>
             </form>

diff --git a/html/search.html b/html/search.html
@@ -7,16 +7,16 @@ <h1>Results</h1>
         <span class="search__input">
             <input type="search" minlength="1" required name="q" placeholder="Search" value="{{ .Data.Query }}" class="search-box" id="search">
             <button type="submit" class="search__button" aria-label="Search" title="Search">
-                <svg viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" baseProfile="full" style="background:#000" width="42" height="30" fill="none"><path d="M90 135q60-60 120-60 0 0 0 0 60 0 120 60m-120 60a60 60 0 01-60-60 60 60 0 0160-60 60 60 0 0160 60 60 60 0 01-60 60m45-15h0l30 30m-75-15h0v45m-45-60h0l-30 30" stroke-width="81" stroke-linecap="square" stroke-linejoin="round" stroke="#fff"/></svg>
+                <svg viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" baseProfile="full" style="background:var(--secondary)" width="42" height="30" fill="none"><path d="M90 135q60-60 120-60 0 0 0 0 60 0 120 60m-120 60a60 60 0 01-60-60 60 60 0 0160-60 60 60 0 0160 60 60 60 0 01-60 60m45-15h0l30 30m-75-15h0v45m-45-60h0l-30 30" stroke-width="81" stroke-linecap="square" stroke-linejoin="round" stroke="var(--primary)"/></svg>
             </button>
         </span>
     </form>
     <article>
         <ul role="list" class="flow2 two-columns width-126ch">
-        {{ range .Data.Pages }}
+        {{ range $index, $a := .Data.Pages }}
             <li class="entry">
-                <a class="entry__link" href="{{ .URL }}">{{ .Title }}</a>
-                <p class="entry__text">{{ .About }}</p>
+                <a aria-described-by="link-{{ $index }}" class="entry__link" href="{{ .URL }}">{{ .Title }}</a>
+                <p id="link-{{ $index }}" class="entry__text">{{ .About }}</p>
             </li>
         {{ end }}
         </ul>