feat: image loading and theme icon on homepage, fix view button color var

This commit is contained in:
httpjamesm 2022-12-28 12:37:04 -05:00
parent 90e873d9e2
commit 7ec73f8af8
5 changed files with 32 additions and 19 deletions

View File

@ -33,3 +33,17 @@ html {
width: 100vw;
height: 100vh;
}
.icon {
width: 2rem;
min-width: 2rem;
height: 2rem;
min-height: 2rem;
cursor: pointer;
}
.icon img {
background: white;
border-radius: 50%;
padding: .25rem;
}

View File

@ -52,7 +52,7 @@ body {
border: 2px solid transparent;
border-radius: 3px;
background-color: var(-input-bg);
background-color: var(--input-bg);
color: var(--text-color);
@ -79,6 +79,8 @@ body {
.options {
margin-top: 1rem;
display: flex;
gap: .5rem;
}
.title {

3
public/icons/image.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>

After

Width:  |  Height:  |  Size: 497 B

View File

@ -29,20 +29,6 @@ body {
justify-content: space-between;
}
.icon {
width: 2rem;
min-width: 2rem;
height: 2rem;
min-height: 2rem;
cursor: pointer;
}
.icon img {
background: white;
border-radius: 50%;
padding: .25rem;
}
code {
background-color: var(--code-bg);
padding: .15rem;

View File

@ -51,9 +51,17 @@
</div>
</form>
<div class="options">
<a class="toggle" href="/options/images"
>Toggle Image Loading</a
>
<div class="icon">
<a href="/options/images">
<img src="/static/icons/image.svg" alt="Toggle theme" />
</a>
</div>
<div class="icon">
<a href="/options/theme?redirect_url={{ .currentUrl }}">
<img src="/static/icons/{{ if eq .theme "dark" }}sun{{
else }}moon{{ end }}.svg" alt="Toggle theme" />
</a>
</div>
</div>
<p class="footer">
Brought to you by