Switch to Feather Icons

This commit is contained in:
video-prize-ranch 2022-10-13 18:26:08 -04:00
parent 50d71ad321
commit b8469ada4e
No known key found for this signature in database
24 changed files with 47 additions and 60 deletions

View File

@ -24,7 +24,7 @@ nav {
align-items: center; align-items: center;
} }
.logo { .logo, .icon {
filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg);
} }
@ -71,10 +71,6 @@ main {
gap: 10px; gap: 10px;
} }
.post__meta .material-icons-outlined {
font-size: 1rem;
}
.pageSelector { .pageSelector {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -85,15 +81,12 @@ footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 5rem;
margin: 2em 0;
} }
@media only screen and (max-width: 812px) { @media only screen and (max-width: 812px) {
section, header, main { section, header, main {
margin: 0 !important; margin: 0 !important;
} }
footer {
flex-direction: column;
text-align: center;
}
} }

View File

@ -37,11 +37,11 @@
} }
#comments__expandBtn ~ .comments__expandBtn__label > span::after { #comments__expandBtn ~ .comments__expandBtn__label > span::after {
content: "expand_more"; content: "";
} }
#comments__expandBtn:checked ~ .comments__expandBtn__label > span::after { #comments__expandBtn:checked ~ .comments__expandBtn__label > span::after {
content: "expand_less"; content: "";
} }
#comments__expandBtn:checked ~ .comments { #comments__expandBtn:checked ~ .comments {

View File

@ -14,8 +14,7 @@ ul {
} }
.largeIcon { .largeIcon {
font-size: 36px; height: 36px;
color: #2b95f2;
} }
.badgeWrapper { .badgeWrapper {

1
static/fonts/css.css Normal file
View File

@ -0,0 +1 @@
.gg-chevron-down{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs,1));width:22px;height:22px;border:2px solid transparent;border-radius:100px}.gg-chevron-down::after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-right:2px solid;transform:rotate(45deg);left:4px;top:2px}.gg-chevron-up{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs,1));width:22px;height:22px;border:2px solid transparent;border-radius:100px}.gg-chevron-up::after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-top:2px solid;border-right:2px solid;transform:rotate(-45deg);left:4px;bottom:2px}.gg-eye{position:relative;display:block;transform:scale(var(--ggs,1));width:24px;height:18px;border-bottom-right-radius:100px;border-bottom-left-radius:100px;overflow:hidden;box-sizing:border-box}.gg-eye::after,.gg-eye::before{content:"";display:block;border-radius:100px;position:absolute;box-sizing:border-box}.gg-eye::after{top:2px;box-shadow:inset 0 -8px 0 2px,inset 0 0 0 2px;width:24px;height:24px}.gg-eye::before{width:8px;height:8px;border:2px solid;bottom:4px;left:8px}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2b95f2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

After

Width:  |  Height:  |  Size: 351 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2b95f2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

After

Width:  |  Height:  |  Size: 419 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2b95f2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

After

Width:  |  Height:  |  Size: 323 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

After

Width:  |  Height:  |  Size: 269 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>

After

Width:  |  Height:  |  Size: 268 B

1
static/icons/eye.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>

After

Width:  |  Height:  |  Size: 316 B

1
static/icons/hash.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>

After

Width:  |  Height:  |  Size: 389 B

1
static/icons/link.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>

After

Width:  |  Height:  |  Size: 371 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>

After

Width:  |  Height:  |  Size: 305 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>

After

Width:  |  Height:  |  Size: 332 B

1
static/icons/tool.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@ -4,7 +4,6 @@
<head> <head>
{{> partials/head }} {{> partials/head }}
<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
<link rel="stylesheet" href="/static/css/embed.css" /> <link rel="stylesheet" href="/static/css/embed.css" />
</head> </head>
@ -31,7 +30,7 @@
</a> </a>
{{/if}} {{/if}}
<div class="views"> <div class="views">
<span class="material-icons-outlined" title="Views">visibility</span> <img class="icon" src="/static/icons/eye.svg" alt="Views">
<p>{{post.Views}}</p> <p>{{post.Views}}</p>
</div> </div>
</div> </div>

View File

@ -18,8 +18,8 @@
<span class="comment__updatedDate">(deleted {{this.DeletedAt}})</span> <span class="comment__updatedDate">(deleted {{this.DeletedAt}})</span>
{{/if}} {{/if}}
| |
<span class="material-icons-outlined">thumb_up</span> {{this.Upvotes}} <img class="icon" src="/static/icons/chevron-up.svg" alt="Likes"> {{this.Upvotes}}
<span class="material-icons-outlined">thumb_down</span> {{this.Downvotes}} <img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes"> {{this.Downvotes}}
</p> </p>
</div> </div>
<div class="replies"> <div class="replies">

View File

@ -1,10 +1,4 @@
<br><br><br>
<footer> <footer>
<a href="/privacy"> <a href="/privacy">Privacy</a>
<span class="material-icons-outlined">visibility</span> Privacy <a href="https://codeberg.org/video-prize-ranch/rimgo" rel="noreferrer">Source Code</a>
</a>
<a href="https://codeberg.org/video-prize-ranch/rimgo" rel="noreferrer">
<span class="material-icons-outlined">code</span> Source Code
</a>
</footer> </footer>

View File

@ -12,5 +12,4 @@
<meta name="msapplication-config" content="/static/favicon/browserconfig.xml"> <meta name="msapplication-config" content="/static/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
<link rel="stylesheet" href="/static/css/base.css"/> <link rel="stylesheet" href="/static/css/base.css"/>

View File

@ -11,20 +11,14 @@
<p class="post__title">{{Title}}</p> <p class="post__title">{{Title}}</p>
<div class="post__meta"> <div class="post__meta">
<p> <p>
<span class="material-icons-outlined"> <img class="icon" src="/static/icons/chevron-up.svg" alt="Points">
arrow_upward
</span>
{{Points}} {{Points}}
</p> </p>
<p> <p>
<span class="material-icons-outlined"> <img class="icon" src="/static/icons/message-square.svg" alt="Comments">
comment
</span>
{{Comments}} {{Comments}}
<p> <p>
<span class="material-icons-outlined"> <img class="icon" src="/static/icons/eye.svg" alt="Views">
visibility
</span>
{{Views}} {{Views}}
</p> </p>
</div> </div>

View File

@ -11,7 +11,6 @@
{{> partials/head }} {{> partials/head }}
<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
<link rel="stylesheet" href="/static/css/album.css" /> <link rel="stylesheet" href="/static/css/album.css" />
<link rel="stylesheet" href="/static/css/comments.css" /> <link rel="stylesheet" href="/static/css/comments.css" />
@ -37,12 +36,18 @@
{{/if}} {{/if}}
<div class="imageMeta"> <div class="imageMeta">
<div class="imageMeta__item"> <div class="imageMeta__item">
<span class="material-icons-outlined" title="Views">visibility</span> <img class="icon" src="/static/icons/eye.svg" alt="Views">
<p>{{post.Views}}</p> <p>{{post.Views}}</p>
</div> </div>
{{#if post.SharedWithCommunity}} {{#if post.SharedWithCommunity}}
<p><span class="material-icons-outlined" title="Likes">thumb_up</span> {{post.Upvotes}}</p> <div class="imageMeta__item">
<p><span class="material-icons-outlined" title="Dislilkes">thumb_down</span> {{post.Downvotes}}</p> <img class="icon" src="/static/icons/chevron-up.svg" alt="Likes">
<p>{{post.Upvotes}}</p>
</div>
<div class="imageMeta__item">
<img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes">
<p>{{post.Downvotes}}</p>
</div>
{{/if}} {{/if}}
</div> </div>
</div> </div>
@ -93,7 +98,7 @@
<input id="comments__expandBtn" type="checkbox"> <input id="comments__expandBtn" type="checkbox">
<label class="comments__expandBtn__label" for="comments__expandBtn"> <label class="comments__expandBtn__label" for="comments__expandBtn">
<h3>Comments ({{post.Comments}})</h3> <h3>Comments ({{post.Comments}})</h3>
<span class="comments__expandBtn__icon material-icons-outlined"></span> <span class="comments__expandBtn__icon"></span>
</label> </label>
<div class="comments"> <div class="comments">
{{#each comments}} {{#each comments}}

View File

@ -28,9 +28,7 @@
{{#if config.Privacy.not_collected}} {{#if config.Privacy.not_collected}}
<div class="badgeWrapper"> <div class="badgeWrapper">
<div class="badge"> <div class="badge">
<span class="material-icons-outlined largeIcon"> <img class="icon largeIcon" src="/static/icons/check-circle.svg" alt="">
check_circle
</span>
<h3>Data Not Collected</h3> <h3>Data Not Collected</h3>
<p>The instance operator does not collect any data from this instance.</p> <p>The instance operator does not collect any data from this instance.</p>
</div> </div>
@ -40,9 +38,7 @@
{{#unless config.Privacy.set}} {{#unless config.Privacy.set}}
<div class="badgeWrapper"> <div class="badgeWrapper">
<div class="badge"> <div class="badge">
<span class="material-icons-outlined largeIcon"> <img class="icon largeIcon" src="/static/icons/alert-triangle.svg" alt="">
report_problem
</span>
<h3>No Details Provided</h3> <h3>No Details Provided</h3>
<p>The operator of this instance will be required to provide privacy details to be added to the instance list. <p>The operator of this instance will be required to provide privacy details to be added to the instance list.
</p> </p>
@ -52,33 +48,31 @@
{{#unless config.Privacy.not_collected}} {{#unless config.Privacy.not_collected}}
<div class="badgeWrapper"> <div class="badgeWrapper">
<div class="badge"> <div class="badge">
<span class="material-icons-outlined largeIcon"> <img class="icon largeIcon" src="/static/icons/alert-circle.svg" alt="">
error_outline
</span>
<h3>Data Collected</h3> <h3>Data Collected</h3>
<p>The following data may be collected:</p> <p>The following data may be collected:</p>
<ul> <ul>
{{#if config.Privacy.ip}} {{#if config.Privacy.ip}}
<li> <li>
<span class="material-icons-outlined">password</span> <img class="icon" src="/static/icons/hash.svg" alt="">
Internet address (IP Address) Internet address (IP Address)
</li> </li>
{{/if}} {{/if}}
{{#if config.Privacy.url}} {{#if config.Privacy.url}}
<li> <li>
<span class="material-icons-outlined">link</span> <img class="icon" src="/static/icons/link.svg" alt="">
Page viewed (Request URL) Page viewed (Request URL)
</li> </li>
{{/if}} {{/if}}
{{#if config.Privacy.device}} {{#if config.Privacy.device}}
<li> <li>
<span class="material-icons-outlined">phonelink</span> <img class="icon" src="/static/icons/smartphone.svg" alt="">
Device Type (User agent) Device Type (User agent)
</li> </li>
{{/if}} {{/if}}
{{#if config.Privacy.diagnostics}} {{#if config.Privacy.diagnostics}}
<li> <li>
<span class="material-icons-outlined">settings</span> <img class="icon" src="/static/icons/tool.svg" alt="">
Diagnostics Diagnostics
</li> </li>
{{/if}} {{/if}}
@ -95,21 +89,21 @@
</p> </p>
<ul> <ul>
<li> <li>
<span class="material-icons-outlined">password</span> <img class="icon" src="/static/icons/hash.svg" alt="">
Internet address (IP Address) - This is an address that is given to your computer or internet connection. Internet address (IP Address) - This is an address that is given to your computer or internet connection.
This can be used to find your city or region and internet provider but can change depending on your connection. This can be used to find your city or region and internet provider but can change depending on your connection.
</li> </li>
<li> <li>
<span class="material-icons-outlined">link</span> <img class="icon" src="/static/icons/link.svg" alt="">
Page viewed (Request URL) - This is what page you are viewing. Searches are kept private. Page viewed (Request URL) - This is what page you are viewing. Searches are kept private.
</li> </li>
<li> <li>
<span class="material-icons-outlined">phonelink</span> <img class="icon" src="/static/icons/smartphone.svg" alt="">
Device Type (User agent) - This is what browser, device, and operating system you are using. Device Type (User agent) - This is what browser, device, and operating system you are using.
Advanced users can change this with an extension or browser setting. Advanced users can change this with an extension or browser setting.
</li> </li>
<li> <li>
<span class="material-icons-outlined">settings</span> <img class="icon" src="/static/icons/tool.svg" alt="">
Diagnostics - When this data is only collected when there is an error or only a short amount of time while Diagnostics - When this data is only collected when there is an error or only a short amount of time while
diagnosing an issue. diagnosing an issue.
</li> </li>

View File

@ -6,7 +6,6 @@
{{> partials/head }} {{> partials/head }}
<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
<link rel="stylesheet" href="/static/css/base.css" /> <link rel="stylesheet" href="/static/css/base.css" />
<link rel="stylesheet" href="/static/css/tag.css" /> <link rel="stylesheet" href="/static/css/tag.css" />
</head> </head>

View File

@ -6,7 +6,6 @@
{{> partials/head }} {{> partials/head }}
<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
<link rel="stylesheet" href="/static/css/user.css" /> <link rel="stylesheet" href="/static/css/user.css" />
</head> </head>