Move from pico.css to mirageCSS (#1)

UI/UX changes: PicoCSS -> mirageCSS, rice-box.go removed and placed on .gitignore (since it is generated anyway), update templates.

Signed-off-by: Aoi K <koizumi.aoi@kyoko-project.wer.ee>

Co-authored-by: Aoi K <koizumi.aoi@kyoko-project.wer.ee>
Reviewed-on: https://git.mills.io/prologic/spyda/pulls/1
Co-authored-by: Aoi Koizumi (古泉 あおい) <novaburst@noreply@mills.io>
Co-committed-by: Aoi Koizumi (古泉 あおい) <novaburst@noreply@mills.io>
This commit is contained in:
Aoi Koizumi (古泉 あおい)
2022-10-05 00:16:24 +00:00
committed by James Mills
parent a6d10baaf3
commit 7001f3bf51
16 changed files with 706 additions and 2320 deletions

View File

@@ -1,9 +1,9 @@
{{define "content"}}
<article class="grid">
<div>
<hgroup>
<h2>404 Not Found</h2>
<h3>Ooops! The resource you are looking for is not here!</h3>
</hgroup>
</article>
<article class="grid">
<div>
<hgroup>
<h2>404 Not Found</h2>
<h3>Ooops! The resource you are looking for is not here!</h3>
</hgroup>
</article>
{{end}}

View File

@@ -1,27 +1,17 @@
{{ define "pager" }}
{{ if $.Pager.HasPages }}
<nav class="pagination-nav">
<ul>
<li>
{{ if $.Pager.HasPrev }}
<a href="?q={{ $.SearchQuery }}&p={{ $.Pager.PrevPage }}">Prev</a>
{{ else }}
<a href="#" data-tooltip="No more results">Prev</a>
{{ end }}
</li>
</ul>
<ul>
<li><small>Page {{ $.Pager.Page }} of {{ $.Pager.PageNums }} matching {{ $.Pager.Nums }} results in {{ $.SearchTook }}</small></li>
</ul>
<ul>
<li>
{{ if $.Pager.HasNext }}
<a href="?q={{ $.SearchQuery }}&p={{ $.Pager.NextPage }}">Next</a>
{{ else }}
<a href="#" data-tooltip="No more results">Next</a>
{{ end }}
</li>
</ul>
<nav class="nova-menu-list">
{{ if $.Pager.HasPrev }}
<a href="?q={{ $.SearchQuery }}&p={{ $.Pager.PrevPage }}">Prev</a>
{{ else }}
<a href="#" data-tooltip="No more results">Prev</a>
{{ end }}
<small>Page {{ $.Pager.Page }} of {{ $.Pager.PageNums }} matching {{ $.Pager.Nums }} results in {{ $.SearchTook }}</small>
{{ if $.Pager.HasNext }}
<a href="?q={{ $.SearchQuery }}&p={{ $.Pager.NextPage }}">Next</a>
{{ else }}
<a href="#" data-tooltip="No more results">Next</a>
{{ end }}
</nav>
{{ end }}
{{ end }}

View File

@@ -1,121 +1,70 @@
{{define "base"}}
<!DOCTYPE html>
<html lang="en" {{ with .Theme }}data-theme="{{ . }}" {{ end }}>
<head>
{{ if $.Debug }}
<link href="/css/01-pico.css" rel="stylesheet" />
<link href="/css/02-icss.css" rel="stylesheet" />
<link href="/css/03-icons.css" rel="stylesheet" />
<link href="/css/99-spyda.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="/img/favicon.png" />
{{ else }}
<link href="/css/{{ .Commit }}/spyda.min.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="/img/{{ .Commit}}/favicon.png" />
{{ end }}
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Spyda Search">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ .InstanceName }} {{ .Title }}</title>
{{ with .Meta.Title }}
<meta name="title" content="{{ . }}">{{ end }}
{{ with .Meta.Author }}
<meta name="author" content="{{ . }}">{{ end }}
{{ with .Meta.Keywords }}
<meta name="keywords" content="{{ . }}">{{ end }}
{{ with .Meta.Description }}
<meta name="description" content="{{ . }}">{{ end }}
<!-- OpenGraph Meta Tags -->
{{ with .Meta.Title }}
<meta property="og:title" content="{{ . }}">{{ end }}
{{ with .Meta.Description }}
<meta property="og:description" content="{{ . }}">{{ end }}
{{ with .Meta.UpdatedAt }}
<meta property="og:updated_time" content="{{ . }}" />{{ end }}
{{ with .Meta.Image }}
<meta property="og:image" content="{{ . }}">{{ end }}
{{ with .Meta.URL }}
<meta property="og:url" content="{{ . }}">{{ end }}
<meta property="og:site_name" content="{{ .InstanceName }}">
</head>
<body>
<nav id="mainNav" class="container-fluid">
<ul>
<li>
<a id="burgerMenu" href="javascript:void(0);">
<i class="icss-bars"></i>
</a>
</li>
<li class="logo">
<a href="/" class="contrast">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 249.1" style="enable-background:new 0 0 449 249.1;" height="3.5rem">
<text fill="currentColor" stroke-width="0" stroke-opacity="null" x="88.87883" y="80.90412" id="svg_11" font-size="24" font-family="sans-serif" text-anchor="start" xml:space="preserve" transform="matrix(3.7653779451839395,0,0,4.34293309290314,-221.0491383725781,-205.1036199547889) " stroke="null">Spyda</text>
<path fill="currentColor" stroke="null" stroke-width="null" stroke-opacity="null" d="m25.27028,132.84404l67.40806,0.02603l-2.1874,3.27024l-63.00742,-0.07809l-2.21324,-3.21817l0,0l0,-0.00001zm0.46324,-43.50163l66.50733,-0.07809l1.93011,3.35476l-70.39332,0.02603l1.95588,-3.3027zm-6.56346,21.79808l79.58275,-0.07809l-0.10287,3.35477l-79.4284,-0.05207l-0.05147,-3.22461l-0.00001,0zm79.64862,0.31116c0,22.20937 -17.86455,40.27692 -39.82665,40.27692c-21.95261,0 -39.81383,-18.07081 -39.81383,-40.27692c0,-22.20622 17.86445,-40.27376 39.81383,-40.27376c21.9621,-0.00326 39.82665,18.06755 39.82665,40.27376zm-39.82352,-43.50163c-23.705,0 -42.99516,19.513 -42.99516,43.49836c0,23.98863 19.29016,43.50163 42.99516,43.50163c23.7179,0 43.00484,-19.513 43.00484,-43.50163c0,-23.98536 -19.28695,-43.49836 -43.00484,-43.49836zm12.06565,43.50163c0,23.73257 -6.3564,40.27692 -12.06565,40.27692c-5.70278,0 -12.05909,-16.54435 -12.05909,-40.27692c0,-23.7391 6.35317,-40.27376 12.05909,-40.27376c5.70602,-0.00326 12.06565,16.53467 12.06565,40.27376zm-12.06565,-43.50163c-9.90291,0 -15.24687,22.41352 -15.24687,43.49836c0,21.09129 5.34397,43.50163 15.24687,43.50163c9.90301,0 15.25666,-22.4136 15.25666,-43.50163c-0.00323,-21.08485 -5.35365,-43.49836 -15.25666,-43.49836zm28.25769,43.50163c0,22.20937 -12.68073,40.27692 -28.25769,40.27692c-15.57372,0 -28.248,-18.07081 -28.248,-40.27692c0,-22.20622 12.67428,-40.27376 28.248,-40.27376c15.57696,-0.00326 28.25769,18.06755 28.25769,40.27376zm-28.25769,-43.50163c-17.32943,0 -31.43578,19.513 -31.43578,43.49836c0,23.98863 14.10636,43.50163 31.43578,43.50163c17.33589,0 31.43911,-19.513 31.43911,-43.50163c0,-23.98536 -14.10322,-43.49836 -31.43911,-43.49836z" id="svg_13" />
</svg>
</a>
</li>
<li>
<a href="/">
<i class="icss-search"></i>
Search
</a>
</li>
<li>
<a href="/add">
<i class="icss-plus"></i>
Add site...
</a>
</li>
</ul>
<ul>
{{ if .Authenticated }}
<li>
<a class="secondary" href="/logout">
<i class="icss-exit"></i>
Logout
</a>
</li>
<head>
{{ if $.Debug }}
<link rel="stylesheet" type="text/css" href="/css/01-mirage.css" />
<link rel="icon" type="image/png" href="/img/favicon.png" />
{{ else }}
<link href="/css/{{ .Commit }}/spyda.min.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="/img/{{ .Commit }}/favicon.png" />
{{ end }}
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Spyda Search">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ .InstanceName }} {{ .Title }}</title>
{{ with .Meta.Title }}
<meta name="title" content="{{ . }}">{{ end }}
{{ with .Meta.Author }}
<meta name="author" content="{{ . }}">{{ end }}
{{ with .Meta.Keywords }}
<meta name="keywords" content="{{ . }}">{{ end }}
{{ with .Meta.Description }}
<meta name="description" content="{{ . }}">{{ end }}
<!-- OpenGraph Meta Tags -->
{{ with .Meta.Title }}
<meta property="og:title" content="{{ . }}">{{ end }}
{{ with .Meta.Description }}
<meta property="og:description" content="{{ . }}">{{ end }}
{{ with .Meta.UpdatedAt }}
<meta property="og:updated_time" content="{{ . }}" />{{ end }}
{{ with .Meta.Image }}
<meta property="og:image" content="{{ . }}">{{ end }}
{{ with .Meta.URL }}
<meta property="og:url" content="{{ . }}">{{ end }}
<meta property="og:site_name" content="{{ .InstanceName }}">
</head>
<body>
<a href="/" class="nova-brand-logo">
{{ if $.Debug }}
<img src="/img/favicon.png" />
{{ else }}
<img src="/img/{{ .Commit }}/favicon.png" />
{{ end }}
</ul>
</nav>
<main class="container">
{{template "content" . }}
<div class="container-fluid">
<small>
This search engine is a <i>work-in-progress</i>.
Please contact <a href="/support">Support</a>
if you have any questions, concerns or feedback!
</small>
</div>
</main>
<footer class="container">
<div class="footer-copyright">
<a href="https://git.mills.io/prologic/spyda" target="_blank">spyda v{{ .SoftwareVersion }}</a>
·
&copy; 2020 <a href="https://git.mills.io/prologic" target="_blank">James Mills</a>. All rights reserved.
</div>
<div class="footer-menu">
<a href="/about" target="_blank" class="menu-item">About</a>
<a href="/privacy" target="_blank" class="menu-item">Privacy</a>
<a href="/help" target="_blank" class="menu-item">Help</a>
<a href="/support" target="_blank" class="menu-item">Support</a>
<a href="/partner/login" target="_blank">Login</a>
</div>
</footer>
{{ if $.Debug }}
<script type="application/javascript" src="/js/01-umbrella.js"></script>
<script type="application/javascript" src="/js/02-polyfill.js"></script>
<script type="application/javascript" src="/js/03-twix.js"></script>
<script type="application/javascript" src="/js/99-spyda.js"></script>
{{ else }}
<script type="application/javascript" src="/js/{{ .Commit }}/spyda.min.js"></script>
{{ end }}
</body>
</a>
<header>
<nav class="nova-menu-list">
<a href="/about">About</a> &bull;
<a href="/add">Add site...</a> &bull;
<a href="/help">Help</a> &bull;
<a href="/privacy">Privacy</a> &bull;
<a href="/support">Support</a>
</nav>
</header>
<main class="container">
{{template "content" . }}
</main>
<footer class="container">
Powered by <a href="https://git.mills.io/prologic/spyda">prologic/spyda v{{ .SoftwareVersion }}</a> and <a href="https://git.kyoko-project.wer.ee/Mirage/mirageCSS">mirageCSS</a>
</footer>
{{ if $.Debug }}
<script type="application/javascript" src="/js/01-umbrella.js"></script>
<script type="application/javascript" src="/js/02-polyfill.js"></script>
<script type="application/javascript" src="/js/03-twix.js"></script>
<script type="application/javascript" src="/js/99-spyda.js"></script>
{{ else }}
<script type="application/javascript" src="/js/{{ .Commit }}/spyda.min.js"></script>
{{ end }}
</body>
</html>
{{end}}

View File

@@ -1,9 +1,9 @@
{{define "content"}}
<article class="grid">
<div>
<hgroup>
<h2>{{ if .Error }}Error{{ else }}Success {{ end }}</h2>
<h3>{{ .Message }}</h3>
</hgroup>
</article>
<article>
<div>
<hgroup>
<h2>{{ if .Error }}Error{{ else }}Success {{ end }}</h2>
<h3>{{ .Message }}</h3>
</hgroup>
</article>
{{end}}

View File

@@ -1,11 +1,8 @@
{{define "content"}}
<div class="container">
<form action="/search" method="GET">
<input type="text" id="search" name="q" placeholder="{{ $.SearchPrompt }}" value="{{ $.SearchQuery }}" autofocus required>
<button id="go" type="submit">
<i class="icss-search"></i>
Go!
</button>
<form action="/search" method="GET" style="text-align: center; width: 100%;">
<input type="text" id="search" name="q" placeholder="{{ $.SearchPrompt }}" value="{{ $.SearchQuery }}" required="required" style="width: 100%;" autofocus />
<input type="submit" id="go" value="Go!" />
</form>
</div>
{{end}}

View File

@@ -1,44 +1,44 @@
{{define "content"}}
<article class="grid">
<div>
<hgroup>
<h2>Sign in</h2>
<p>Login to your Spyda account on {{ .InstanceName }}</p>
</hgroup>
<form action="/login" method="POST">
<input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
<input type="text" name="username" placeholder="Username" aria-label="Username" autocomplete="nickname" autofocus required>
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
<fieldset>
<label for="rememberme">
<input type="checkbox" id="rememberme" name="rememberme">
Remember me?
</label>
</fieldset>
<button type="submit" class="contrast">Login</button>
<p>
<a href="/resetPassword">Forgotten your password?</a>
</p>
</form>
</div>
<div>
<hgroup>
<h2>How to login to your account</h2>
</hgroup>
<article>
<div>
<hgroup>
<h2>Sign in</h2>
<p>Login to your Spyda account on {{ .InstanceName }}</p>
</hgroup>
<form action="/login" method="POST">
<input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
<input type="text" name="username" placeholder="Username" aria-label="Username" autocomplete="nickname" required="required" autofocus />
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required="required" />
<fieldset>
<label for="rememberme">
<input type="checkbox" id="rememberme" name="rememberme">
Remember me?
</label>
</fieldset>
<input type="submit" class="contrast" value="Login" />
<p>
Login to your Spyda account on {{ .InstanceName }} by filling in
the Username and Password you used when you created your account.
<a href="/resetPassword">Forgotten your password?</a>
</p>
<p>
Check the "Remember Me" box if you don't want to have to keep logging in
every few hours.
</p>
<p>
If you have forgotten your password you can request a
<a href="/resetPassword">Password Reset</a> as long as you remember
your username and email address you signed up with and retain access to
your email (<i>We <b>NEVER</b> store your email address!</i>).
</p>
</div>
</article>
</form>
</div>
<div>
<hgroup>
<h2>How to login to your account</h2>
</hgroup>
<p>
Login to your Spyda account on {{ .InstanceName }} by filling in
the Username and Password you used when you created your account.
</p>
<p>
Check the "Remember Me" box if you don't want to have to keep logging in
every few hours.
</p>
<p>
If you have forgotten your password you can request a
<a href="/resetPassword">Password Reset</a> as long as you remember
your username and email address you signed up with and retain access to
your email (<i>We <b>NEVER</b> store your email address!</i>).
</p>
</div>
</article>
{{end}}

View File

@@ -1,11 +1,8 @@
{{define "content"}}
<div class="container">
<form action="/search" method="GET">
<input type="text" id="search" name="q" placeholder="{{ $.SearchPrompt }}" value="{{ $.SearchQuery }}" autofocus required>
<button id="go" type="submit">
<i class="icss-search"></i>
Go!
</button>
<form action="/search" method="GET" style="text-align: center; width: 100%;">
<input type="text" id="search" name="q" placeholder="{{ $.SearchPrompt }}" value="{{ $.SearchQuery }}" required="required" style="width: 100%;" autofocus />
<input type="submit" id="go" value="Go!" />
</form>
</div>
{{ template "pager" (dict "Pager" $.Pager "SearchQuery" $.SearchQuery "SearchTook" $.SearchTook) }}
@@ -15,7 +12,7 @@
<article>
<h3><a href="{{ .URL }}">{{ .Title }}</a></h3>
<p{{ if .Summary }}>{{ .Summary }}{{ else }} class="placeholder">No summary available{{ end }}</p>
<footer><a href="{{ .URL }}">{{ .URL }}</a> {{ .Length }} <a href="/cache/{{ .ID }}">View cached</a></footer>
<footer><a href="{{ .URL }}">{{ .URL }}</a> {{ .Length }} <a href="/cache/{{ .ID }}">View cached</a></footer>
</article>
{{ else }}
<p>No search results</p>

View File

@@ -1,24 +1,22 @@
{{define "content"}}
<article class="grid">
<div>
<hgroup>
<h2>Contact us</h2>
<h3>How can we help you?</h3>
</hgroup>
<form action="/support" method="POST">
<input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
<input type="text" name="name" placeholder="Name" aria-label="Name" autofocus required>
<input type="email" name="email" placeholder="Email address" aria-label="Email" required>
<input type="text" name="subject" placeholder="Subject" aria-label="Subject" required>
<textarea name="message" placeholder="Message" aria-label="Message" rows="4" cols="50" required></textarea>
<small>Please solve this simple math problem below so we know you're a human!</small>
<img id="captcha" src="/_captcha" alt="captcha" height="50" width="150" />
<input type="text" name="captchaInput" class="captchaInput" placeholder="Captcha" aria-label="Captcha" required>
<button type="submit" class="contrast">Submit</button>
</form>
</div>
<div></div>
</article>
<article>
<div>
<hgroup>
<h2>Contact us</h2>
<h3>How can we help you?</h3>
</hgroup>
<form action="/support" method="POST">
<input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
<input type="text" name="name" placeholder="Name" aria-label="Name" required="required" autofocus />
<input type="email" name="email" placeholder="Email address" aria-label="Email" required="required" />
<input type="text" name="subject" placeholder="Subject" aria-label="Subject" required="required" />
<textarea name="message" placeholder="Message" aria-label="Message" rows="4" cols="50" required="required="></textarea>
<p>Please solve this simple math problem below so we know you're a human!</p>
<img id="captcha" src="/_captcha" alt="captcha" height="50" width="150" />
<input type="text" name="captchaInput" placeholder="Captcha" aria-label="Captcha" required="required" />
<input type="submit" class="contrast" value="submit" />
</form>
</div>
<div></div>
</article>
{{end}}