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

pull/4/head 0.0.3
cblgh 2021-05-13 17:16:34 +02:00
rodzic 8a5fba92e3
commit fd4e186e5a
3 zmienionych plików z 11 dodań i 11 usunięć

Wyświetl plik

@ -99,7 +99,7 @@ nav li {
padding: 2.1rem 3.2rem; padding: 2.1rem 3.2rem;
} }
.header-home_link { .header-home_link, .header-home_link:hover {
font-family: "Noto Serif"; font-family: "Noto Serif";
font-weight: 400; font-weight: 400;
font-size: 2.4rem; font-size: 2.4rem;
@ -218,8 +218,8 @@ nav li {
width: 1px; width: 1px;
} }
.translateY-50 { .translateY-75 {
transform: translateY(-50%); transform: translateY(-75%);
} }
@import url('inter-ui-web/inter-ui.css'); @import url('inter-ui-web/inter-ui.css');
@ -247,4 +247,4 @@ nav li {
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }

Wyświetl plik

@ -9,7 +9,7 @@
</nav> </nav>
</header> </header>
<main class="grid-items-center"> <main class="grid-items-center">
<article class="translateY-50"> <article class="translateY-75">
<div class="flow"> <div class="flow">
<h1> <h1>
{{ .SiteName }} {{ .SiteName }}
@ -18,11 +18,11 @@
{{ .Data.Tagline }} {{ .Data.Tagline }}
</h2> </h2>
<form class="search"> <form class="search">
<label for="search">Search {{ .SiteName }}</label> <label class="visually-hidden" for="search">Search {{ .SiteName }}</label>
<span class="search__input"> <span class="search__input">
<input type="search" required minlength="1" name="q" placeholder="{{ .Data.Placeholder }}" class="flex-grow" id="search"> <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"> <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> </button>
</span> </span>
</form> </form>

Wyświetl plik

@ -7,16 +7,16 @@
<span class="search__input"> <span class="search__input">
<input type="search" minlength="1" required name="q" placeholder="Search" value="{{ .Data.Query }}" class="search-box" id="search"> <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"> <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> </button>
</span> </span>
</form> </form>
<article> <article>
<ul role="list" class="flow2 two-columns width-126ch"> <ul role="list" class="flow2 two-columns width-126ch">
{{ range .Data.Pages }} {{ range $index, $a := .Data.Pages }}
<li class="entry"> <li class="entry">
<a class="entry__link" href="{{ .URL }}">{{ .Title }}</a> <a aria-described-by="link-{{ $index }}" class="entry__link" href="{{ .URL }}">{{ .Title }}</a>
<p class="entry__text">{{ .About }}</p> <p id="link-{{ $index }}" class="entry__text">{{ .About }}</p>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>