wassname/side-by-side
1
0
Fork 0
mirror of https://github.com/wassname/side-by-side.git synced 2026-09-09 11:34:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

SVG icons instead of woff2

Browse Source
This commit is contained in:
Vit Brunner
2022-11-21 01:06:31 +01:00
parent ddb07925b4
commit a56ca8aec3
6 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/fonts/icons.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-star" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/>
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</symbol>
<symbol id="icon-expand-more" viewBox="0 0 24 24" fill="currentColor">
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/>
</symbol>
<symbol id="icon-expand-less" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/>
</symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

source/fonts/material-icons.woff2
BIN
View File
Binary file not shown.
source/includes/comparison.html.jade
+4 -2
View File
@@ -3,8 +3,10 @@
.version(ng-repeat="heading in headings")
.version-padded
.version-menu
.arrow.material-icons(ng-show="!pick") keyboard_arrow_up
.arrow.material-icons(ng-show="pick") keyboard_arrow_down
svg.icon.arrow(ng-show="!pick")
use(xlink:href="/fonts/icons.svg#icon-expand-less")
svg.icon.arrow(ng-show="pick")
use(xlink:href="/fonts/icons.svg#icon-expand-more")
.text(ng-bind-html="heading")
.pick(ng-show="pick")
source/index.html.jade
+4 -2
View File
@@ -30,11 +30,13 @@ html(ng-app="sideBySide" ng-controller="AppController")
a(href="" ng-click="display(link.display)" ng-bind-html="link.text")
li
a(href="" ng-click="flipPick()")
i.material-icons menu
svg.icon
use(xlink:href="/fonts/icons.svg#icon-menu")
span Compare translations
li
a(href="" ng-click="showPage('about')")
i.material-icons star
svg.icon
use(xlink:href="/fonts/icons.svg#icon-star")
span About
div(ng-controller="ComparisonController" class="cols-{{columns}}")
source/styles/fonts.css.styl
-22
View File
@@ -11,25 +11,3 @@
font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/alegreya-v29-all-700.woff2') format('woff2');
}
/* Material Icons */
@font-face {
font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/material-icons.woff2') format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
source/styles/style.css.styl
+12 -7
View File
@@ -33,11 +33,6 @@ body
.pure-menu.menu-main
height: 34px
.material-icons
font-size: 18px
margin-right: 7px
padding-bottom: 2px
vertical-align: middle
.pure-menu.menu-verses
height: $bottom_bar_height px
@@ -47,10 +42,11 @@ body
:hover
cursor: pointer
.arrow
width: 24px
height: 24px
left: -15px
top: 2px
position: absolute
vertical-align: middle
display: inline-block
transition: .3s linear all
.arrow.ng-hide
transform: scale(.1)
@@ -61,6 +57,15 @@ a
p
margin: 24px 0px
.icon
height: 18px
width: 18px
line-height: 18px
margin-right: 7px
margin-top: -2px
vertical-align: middle
display: inline-block
#section-meta .key
padding-right: 10px
font-style: italic