add RSS icon following feed hyperlink

This commit is contained in:
leafee98 2022-05-16 18:38:33 +08:00
parent 6526292b08
commit babe8865cb
11 changed files with 423 additions and 6 deletions

View file

@ -1,11 +1,20 @@
<footer class="footer"> <footer class="footer">
<div class="footer-row"> <div class="footer-row">
{{ if .IsHome }} {{ if .IsHome }}
<a class="footer-item" href="/index.xml">The Site Feed</a> <a class="footer-item" href="{{ "/index.xml" | relURL }}">
The Site Feed
<i class="icofont-rss"></i>
</a>
{{ else }} {{ else }}
<a class="footer-item" href="/index.xml">The Site Feed</a> <a class="footer-item" href="{{ "/index.xml" | relURL }}">
The Site Feed
<i class="icofont-rss"></i>
</a>
{{ with .OutputFormats.Get "rss" }} {{ with .OutputFormats.Get "rss" }}
<a class="footer-item" href="{{ .Permalink }}">The Taxonomy Feed</a> <a class="footer-item" href="{{ .Permalink }}">
The Taxonomy Feed
<i class="icofont-rss"></i>
</a>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>

View file

@ -29,6 +29,7 @@
</script> </script>
{{ end }} {{ end }}
<link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}" /> <link rel="stylesheet" href="{{ "/lib/icofont/icofont.min.css" | relURL }}" />
<link rel="stylesheet" href="{{ "/css/syntax.css" | relURL }}" />
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}" /> <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}" />
<link rel="shortcut icon" href="{{ "/images/favicon.ico" | relURL }}" type="image/x-icon" /> <link rel="shortcut icon" href="{{ "/images/favicon.ico" | relURL }}" type="image/x-icon" />

View file

@ -259,6 +259,12 @@ body {
.footer a { color: var(--color-fav-2); text-decoration: none; } .footer a { color: var(--color-fav-2); text-decoration: none; }
.footer a:hover { color: var(--color-fav-3); } .footer a:hover { color: var(--color-fav-3); }
.footer img {
display: inline;
height: var(--font-size-1);
color: var(--color-fav-2);
}
/**********************************/ /**********************************/
/* set up home page's list layout */ /* set up home page's list layout */

View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples | IcoFont</title>
<link rel="stylesheet" type="text/css" href="./icofont.min.css">
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #F6F6F9;
}
.header {
border-bottom: 1px solid #DCDCE1;
padding: 10px 0;
margin-bottom: 10px;
}
.container {
width: 980px;
margin: 0 auto;
}
.ico-title {
font-size: 2em;
}
.iconlist {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.iconlist li {
position: relative;
margin: 5px;
width: 150px;
cursor: pointer;
}
.iconlist li .icon-holder {
position: relative;
text-align: center;
border-radius: 3px;
overflow: hidden;
padding-bottom: 5px;
background: #ffffff;
border: 1px solid #E4E5EA;
transition: all 0.2s linear 0s;
}
.iconlist li .icon-holder:hover {
background: #00C3DA;
color: #ffffff;
}
.iconlist li .icon-holder:hover .icon i {
color: #ffffff;
}
.iconlist li .icon-holder .icon {
padding: 20px;
text-align: center;
}
.iconlist li .icon-holder .icon i {
font-size: 3em;
color: #1F1142;
}
.iconlist li .icon-holder span {
font-size: 14px;
display: block;
margin-top: 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1 class="ico-title"> IcoFont Icons </h1>
</div>
</div>
<div class="container">
<ul class="iconlist">
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-rss"></i>
</div>
<span> rss </span>
</div>
</li>
</ul>
</div>
</body>
</html>

Binary file not shown.

View file

@ -0,0 +1,11 @@
<?xml version="1.0" standalone="no"?>
<!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">
<defs>
<font id="icofont" horiz-adv-x="1000" >
<font-face font-family="IcoFont" font-weight="400" font-style="Regular" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="rss" horiz-adv-x="1000" unicode="&#xed64;" d="M64 323c109 0 212-43 288-120 77-78 120-181 120-290h168c0 318-258 577-576 577l0-167z m1 297c388 0 703-317 703-707h168c0 482-391 875-871 875l0-168z m232-590c0-65-52-117-117-117-64 0-116 52-116 117s52 116 116 116c65 0 117-52 117-116z" />
</font>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 707 B

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,287 @@
/*!
* @package IcoFont
* @version 1.0.1
* @author IcoFont https://icofont.com
* @copyright Copyright (c) 2015 - 2022 IcoFont
* @license - https://icofont.com/license/
*/
@font-face
{
font-family: "IcoFont";
font-weight: normal;
font-style: "Regular";
src: url("./fonts/icofont.woff2") format("woff2"),
url("./fonts/icofont.woff") format("woff");
}
[class^="icofont-"], [class*=" icofont-"]
{
font-family: 'IcoFont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.icofont-rss:before
{
content: "\ed64";
}
.icofont-xs
{
font-size: .5em;
}
.icofont-sm
{
font-size: .75em;
}
.icofont-md
{
font-size: 1.25em;
}
.icofont-lg
{
font-size: 1.5em;
}
.icofont-1x
{
font-size: 1em;
}
.icofont-2x
{
font-size: 2em;
}
.icofont-3x
{
font-size: 3em;
}
.icofont-4x
{
font-size: 4em;
}
.icofont-5x
{
font-size: 5em;
}
.icofont-6x
{
font-size: 6em;
}
.icofont-7x
{
font-size: 7em;
}
.icofont-8x
{
font-size: 8em;
}
.icofont-9x
{
font-size: 9em;
}
.icofont-10x
{
font-size: 10em;
}
.icofont-fw
{
text-align: center;
width: 1.25em;
}
.icofont-ul
{
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.icofont-ul > li
{
position: relative;
line-height: 2em;
}
.icofont-ul > li .icofont
{
display: inline-block;
vertical-align: middle;
}
.icofont-border
{
border: solid 0.08em #f1f1f1;
border-radius: .1em;
padding: .2em .25em .15em;
}
.icofont-pull-left
{
float: left;
}
.icofont-pull-right
{
float: right;
}
.icofont.icofont-pull-left
{
margin-right: .3em;
}
.icofont.icofont-pull-right
{
margin-left: .3em;
}
.icofont-spin
{
-webkit-animation: icofont-spin 2s infinite linear;
animation: icofont-spin 2s infinite linear;
display: inline-block;
}
.icofont-pulse
{
-webkit-animation: icofont-spin 1s infinite steps(8);
animation: icofont-spin 1s infinite steps(8);
display: inline-block;
}
@-webkit-keyframes icofont-spin
{
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes icofont-spin
{
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.icofont-rotate-90
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.icofont-rotate-180
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.icofont-rotate-270
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.icofont-flip-horizontal
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icofont-flip-vertical
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
}
.icofont-flip-horizontal.icofont-flip-vertical
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
:root .icofont-rotate-90,
:root .icofont-rotate-180,
:root .icofont-rotate-270,
:root .icofont-flip-horizontal,
:root .icofont-flip-vertical
{
-webkit-filter: none;
filter: none;
display: inline-block;
}
.icofont-inverse
{
color: #fff;
}
.sr-only
{
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.sr-only-focusable:active,
.sr-only-focusable:focus
{
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

7
static/lib/icofont/icofont.min.css vendored Normal file
View file

@ -0,0 +1,7 @@
/*!
* @package IcoFont
* @version 1.0.1
* @author IcoFont https://icofont.com
* @copyright Copyright (c) 2015 - 2022 IcoFont
* @license - https://icofont.com/license/
*/@font-face{font-family:IcoFont;font-weight:400;font-style:Regular;src:url(fonts/icofont.woff2) format("woff2"),url(fonts/icofont.woff) format("woff")}[class*=" icofont-"],[class^=icofont-]{font-family:IcoFont!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;line-height:1;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.icofont-rss:before{content:"\ed64"}.icofont-xs{font-size:.5em}.icofont-sm{font-size:.75em}.icofont-md{font-size:1.25em}.icofont-lg{font-size:1.5em}.icofont-1x{font-size:1em}.icofont-2x{font-size:2em}.icofont-3x{font-size:3em}.icofont-4x{font-size:4em}.icofont-5x{font-size:5em}.icofont-6x{font-size:6em}.icofont-7x{font-size:7em}.icofont-8x{font-size:8em}.icofont-9x{font-size:9em}.icofont-10x{font-size:10em}.icofont-fw{text-align:center;width:1.25em}.icofont-ul{list-style-type:none;padding-left:0;margin-left:0}.icofont-ul>li{position:relative;line-height:2em}.icofont-ul>li .icofont{display:inline-block;vertical-align:middle}.icofont-border{border:solid .08em #f1f1f1;border-radius:.1em;padding:.2em .25em .15em}.icofont-pull-left{float:left}.icofont-pull-right{float:right}.icofont.icofont-pull-left{margin-right:.3em}.icofont.icofont-pull-right{margin-left:.3em}.icofont-spin{-webkit-animation:icofont-spin 2s infinite linear;animation:icofont-spin 2s infinite linear;display:inline-block}.icofont-pulse{-webkit-animation:icofont-spin 1s infinite steps(8);animation:icofont-spin 1s infinite steps(8);display:inline-block}@-webkit-keyframes icofont-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icofont-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icofont-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.icofont-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.icofont-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.icofont-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.icofont-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.icofont-flip-horizontal.icofont-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .icofont-flip-horizontal,:root .icofont-flip-vertical,:root .icofont-rotate-180,:root .icofont-rotate-270,:root .icofont-rotate-90{-webkit-filter:none;filter:none;display:inline-block}.icofont-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}