[frontend] small fixes (#907)

* add missing watchify dependency

* replace svg rss icon with forkawesome+styling

* use $white1 instead of hardcoding white

* fix toot overflow
This commit is contained in:
f0x52 2022-10-12 18:23:50 +02:00 committed by GitHub
parent eb85ef7325
commit 80c2833d83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 22 deletions

View File

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
<defs>
<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
<stop offset="1.0" stop-color="#D95B29"/>
</linearGradient>
</defs>
<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
<circle cx="68" cy="189" r="24" fill="#FFF"/>
<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -225,10 +225,13 @@ main {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 1rem; margin: 1rem;
.rsslogo { .rss-icon {
width: 1.45em; font-size: 1.45em;
height: 1.45em;
object-fit: contain; object-fit: contain;
vertical-align: middle; vertical-align: middle;
color: $orange2;
/* can't size a single-color background, so we use a linear-gradient that's effectively white */
background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
} }
} }

View File

@ -133,6 +133,8 @@ main {
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 100%;
a { a {
color: $link-fg; color: $link-fg;
text-decoration: underline; text-decoration: underline;

View File

@ -47,6 +47,7 @@
"redux-thunk": "^2.4.1", "redux-thunk": "^2.4.1",
"tiny-lr": "^2.0.0", "tiny-lr": "^2.0.0",
"uglifyify": "^5.0.2", "uglifyify": "^5.0.2",
"watchify": "^4.0.0",
"wouter": "^2.8.0-alpha.2" "wouter": "^2.8.0-alpha.2"
}, },
"devDependencies": { "devDependencies": {

View File

@ -30,7 +30,9 @@
<h2 id="recent"> <h2 id="recent">
<span>Latest public toots</span> <span>Latest public toots</span>
{{ if .rssFeed }} {{ if .rssFeed }}
<a href="{{ .rssFeed }}"><img class="rsslogo" src="/assets/rss.svg" alt="The orange RSS logo."/></a> <a href="{{ .rssFeed }}" aria-label="RSS feed">
<i class="rss-icon fa fa-rss-square" aria-hidden="true"></i>
</a>
{{ end }} {{ end }}
</h2> </h2>
{{ if not .statuses }} {{ if not .statuses }}