get rid of FontAwesome.

This commit is contained in:
Wouter Groeneveld 2021-03-25 17:49:44 +01:00
parent 1a3ff6423c
commit d9586ff3fa
18 changed files with 117 additions and 277 deletions

View File

@ -11,7 +11,8 @@ keywords:
- game retrospectives
---
<strong><i class='fa fa-book'></i>&nbsp;Codex | <i class='fa fa-comments'></i>&nbsp;Articles | <i class='fa fa-gamepad'></i>&nbsp;Guides | <i class='fa fa-newspaper-o'></i>&nbsp;Reviews.</strong>
**Codex | Articles | Guides | Reviews.**
<hr/>
You're looking at <a class="h-card" rel="me" href="https://jefklakscodex.com/articles/">Jefklak</a>'s Retro Game Codex, a dedicated and highly opinionated website about nostalgic games. A lovely mix between Nintendo handheld gaming love, '90s DOS games and old school PC RPGs that were an integral part of [my youth](/about). <br/>

View File

@ -0,0 +1,49 @@
nav
svg
width: 24px
height: 24px
float: left
%icon-in-text
position: relative
top: 5px
main
p
.icon
@extend %icon-in-text
li
.icon
@extend %icon-in-text
.icon
width: 32px
height: 32px
padding-right: 0.3rem
&-small
position: relative
top: 2px
padding-right: 0.1rem
width: 16px !important
height: 16px !important
&-gray
color: #999
&-text
@extend %icon-in-text
&-float
@extend %icon-in-text
float: left
&-inline
float: left
color: #999
width: 24px !important
height: 24px !important
a.icon:hover
text-decoration: none

View File

@ -2,4 +2,5 @@
@import 'fonts'
@import 'codex'
@import 'sidebar'
@import 'toot'
@import 'toot'
@import 'icons'

View File

@ -4,6 +4,7 @@
{{ partial "head.html" . }}
</head>
<body>
{{ partial "icons" . }}
<div id="skiptocontent">
<a href="#top">skip to main content</a>
</div>

View File

@ -13,7 +13,10 @@
{{ $createdate := .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
<time datetime='{{ .Date.Format "2006-01-02" }}' class="dt-published" title="Created Date">
<i class='fa fa-calendar'></i>&nbsp;
<svg class='icon icon-text'>
<title>calendar icon</title>
<use xlink:href='#cal1'></use>
</svg>
<a class="u-url u-uid" href="{{ .RelPermalink }}">
{{ $createdate }}
</a>

View File

@ -14,6 +14,7 @@ article ul {
</style>
<body>
{{ partial "icons" . }}
<a name="top" id="top"></a>
<div id="all">
<div class="container-fluid">

View File

@ -1,6 +1,9 @@
{{ range .Data.Pages.GroupByDate "01-2006" "desc" }}
<h5 style="float: left; color: grey;">
<i class='fa fa-calendar'></i>&nbsp;{{ .Key }}
<svg class='icon icon-inline'>
<use xlink:href='#cal1'></use>
</svg>
&nbsp;{{ .Key }}
</h5>
<ul style="text-align: left; float: left; margin-left: 20px; list-style-type: none; border-left: #eee 1px solid; padding: 0">
{{ range .Pages.ByDate.Reverse }}

View File

@ -110,11 +110,9 @@
</script>
<link rel="preload" href="{{ "css/bootstrap.min.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ "css/font-awesome.min.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ "css/simple-lightbox.min.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="{{ "css/bootstrap.min.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/font-awesome.min.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/simple-lightbox.min.css" | absURL }}">
</noscript>

View File

@ -0,0 +1,36 @@
<svg width="0" height="0" class="hidden">
<symbol viewBox="0 0 24 24" id="lock" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M14 15C14 16.11 13.11 17 12 17C10.89 17 10 16.1 10 15C10 13.89 10.89 13 12 13C13.11 13 14 13.9 14 15M13.09 20C13.21 20.72 13.46 21.39 13.81 22H6C4.89 22 4 21.1 4 20V10C4 8.89 4.89 8 6 8H7V6C7 3.24 9.24 1 12 1S17 3.24 17 6V8H18C19.11 8 20 8.9 20 10V13.09C19.67 13.04 19.34 13 19 13C18.66 13 18.33 13.04 18 13.09V10H6V20H13.09M9 8H15V6C15 4.34 13.66 3 12 3S9 4.34 9 6V8M21.34 15.84L17.75 19.43L16.16 17.84L15 19L17.75 22L22.5 17.25L21.34 15.84Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="tag" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M6.5 10C7.3 10 8 9.3 8 8.5S7.3 7 6.5 7 5 7.7 5 8.5 5.7 10 6.5 10M9 6L16 13L11 18L4 11V6H9M9 4H4C2.9 4 2 4.9 2 6V11C2 11.6 2.2 12.1 2.6 12.4L9.6 19.4C9.9 19.8 10.4 20 11 20S12.1 19.8 12.4 19.4L17.4 14.4C17.8 14 18 13.5 18 13C18 12.4 17.8 11.9 17.4 11.6L10.4 4.6C10.1 4.2 9.6 4 9 4M13.5 5.7L14.5 4.7L21.4 11.6C21.8 12 22 12.5 22 13S21.8 14.1 21.4 14.4L16 19.8L15 18.8L20.7 13L13.5 5.7Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="book" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M9.05,9H7.06V6H9.05V4.03H7.06V3.03C7.06,1.92 7.95,1.04 9.05,1.04H15.03V8L17.5,6.5L20,8V1.04H21C22.05,1.04 23,2 23,3.03V17C23,18.03 22.05,19 21,19H9.05C8,19 7.06,18.05 7.06,17V16H9.05V14H7.06V11H9.05V9M1,18H3V15H1V13H3V10H1V8H3V5H5V8H3V10H5V13H3V15H5V18H3V20H5V21H21V23H5A2,2 0 0,1 3,21V20H1V18Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="news" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M4 7V19H19V21H4C2 21 2 19 2 19V7H4M21 5V15H8V5H21M21.3 3H7.7C6.76 3 6 3.7 6 4.55V15.45C6 16.31 6.76 17 7.7 17H21.3C22.24 17 23 16.31 23 15.45V4.55C23 3.7 22.24 3 21.3 3M9 6H12V11H9V6M20 14H9V12H20V14M20 8H14V6H20V8M20 11H14V9H20V11Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="mail" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="discuss" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M15,4V11H5.17L4,12.17V4H15M16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12V3A1,1 0 0,0 16,2M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="bulb" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="cal1" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
</symbol>
<symbol viewBox="0 0 24 24" id="cal2" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H10V19H5V8H19V9H21V5A2,2 0 0,0 19,3M21.7,13.35L20.7,14.35L18.65,12.35L19.65,11.35C19.85,11.14 20.19,11.13 20.42,11.35L21.7,12.63C21.89,12.83 21.89,13.15 21.7,13.35M12,18.94L18.07,12.88L20.12,14.88L14.06,21H12V18.94Z" />
</symbol>
<symbol id="folder" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z" />
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -1,4 +1,4 @@
<div class="small-navbar visible-xs">
<button type="button" data-toggle="offcanvas" class="btn btn-ghost pull-left"> <i class="fa fa-align-left"> </i>Menu</button>
<button type="button" data-toggle="offcanvas" class="btn btn-ghost pull-left"> &raquo;&nbsp;Menu</button>
<h1 class="small-navbar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
</div>

View File

@ -12,7 +12,9 @@
<h4 style="margin: 0; float: left;"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
{{ .Date.Format (.Site.Params.dateFormat | default "01/2006") | $.Scratch.Set "subtitle" }}
<span class="sidebar-date" style="float: right;">
<i class='fa fa-calendar'></i>&nbsp;
<svg class='icon icon-inline'>
<use xlink:href='#cal1'></use>
</svg>
{{ $.Scratch.Get "subtitle" }}
</span>
<div class="box-masonry-description" style="clear: both;">

View File

@ -57,11 +57,8 @@
<ul class="sidebar-menu">
{{ range $related }}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>&nbsp;
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
<span class="sidebar-date">
<i class='fa fa-calendar'></i>&nbsp;
{{ .Date.Format "01/2006" }}
<br/>
{{ if isset .Params "Description" }}
{{ .Description }}
{{ else }}
@ -83,11 +80,8 @@
<ul class="sidebar-menu">
{{ range first 5 .Data.Pages.ByDate.Reverse }}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>&nbsp;
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
<span class="sidebar-date">
<i class='fa fa-calendar'></i>&nbsp;
{{ .Date.Format "01/2006" }}
<br/>
{{ if isset .Params "Description" }}
{{ .Description }}
{{ else }}

View File

@ -5,7 +5,10 @@
<hr/>
<h3 class="page-header" id="mentions">
<a href="#mentions">
<i class="fa fa-comments-o"></i>
<svg class='icon icon-text' width='24' height='24'>
<title>Discussion</title>
<use xlink:href='#discuss'></use>
</svg>
</a>&nbsp;
Mentions and Replies
</h3>
@ -17,7 +20,9 @@
{{ .name | safeHTML }}: {{ .content | safeHTML }}
</p>
<div class="meta">
<i class="fa fa-calendar"></i>&nbsp;
<svg class='icon icon-inline'>
<use xlink:href='#cal1'></use>
</svg>
<time class="dt-published" datetime="{{ .published }}">
{{ .publishedFromNow }}
</time>

View File

@ -18,7 +18,10 @@
{{ $.Scratch.Set "curLetter" $firstChar }}
<h5 style="float: left; color: grey;">
<i class='fa fa-tag'></i>&nbsp;{{ $firstChar }}
<svg class='icon icon-inline'>
<use xlink:href='#tag'></use>
</svg>
{{ $firstChar }}
</h5>
<ul style="text-align: left; float: left; margin-left: 20px; list-style-type: none; border-left: #eee 1px solid;">
{{ end }}

File diff suppressed because one or more lines are too long

View File

@ -1,191 +0,0 @@
/* HELPER CLASS
* -------------------------- */
/* FA based classes */
/*! Modified from font-awesome helper CSS classes - PIXEDEN
* Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (CSS: MIT License)
*/
/* makes the font 33% larger relative to the icon container */
.pe-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.pe-2x {
font-size: 2em;
}
.pe-3x {
font-size: 3em;
}
.pe-4x {
font-size: 4em;
}
.pe-5x {
font-size: 5em;
}
.pe-fw {
width: 1.2857142857142858em;
text-align: center;
}
.pe-ul {
padding-left: 0;
margin-left: 2.142857142857143em;
list-style-type: none;
}
.pe-ul > li {
position: relative;
}
.pe-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
top: 0.14285714285714285em;
text-align: center;
}
.pe-li.pe-lg {
left: -1.8571428571428572em;
}
.pe-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.pe.pull-left {
margin-right: .3em;
}
.pe.pull-right {
margin-left: .3em;
}
.pe-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.pe-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.pe-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.pe-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.pe-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.pe-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
.pe-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.pe-stack-1x,
.pe-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.pe-stack-1x {
line-height: inherit;
}
.pe-stack-2x {
font-size: 2em;
}
.pe-inverse {
color: #ffffff;
}
/* Custom classes / mods - PIXEDEN */
.pe-va {
vertical-align: middle;
}
.pe-border {
border: solid 0.08em #eaeaea;
}
[class^="pe-7s-"], [class*=" pe-7s-"] {
display: inline-block;
}

View File

@ -113,10 +113,6 @@ button {
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
a i.fa,
button i.fa {
margin: 0 5px;
}
.clickable {
cursor: pointer !important;
}
@ -283,33 +279,6 @@ fieldset[disabled] .btn-white.active {
background-color: #fff;
border-color: #fff;
}
.icon {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 30px;
border: solid 1px #ef5285;
color: #ef5285;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-size: 30px;
margin: 0 auto 30px;
text-align: center;
}
.icon.brand-secondary {
border-color: #60c5ba;
color: #60c5ba;
}
.icon.brand-terciary {
border-color: #008c9e;
color: #008c9e;
}
.icon.brand-four {
border-color: #feee7d;
color: #feee7d;
}
/*
=====================
SIDEBAR + RIGHT COLUMN
@ -363,12 +332,6 @@ SIDEBAR + RIGHT COLUMN
.sidebar-menu li a {
color: #555555;
}
.sidebar-menu li:before {
font-family: 'FontAwesome';
content: '\f105';
margin: 0 5px 0 -15px;
color: #999999;
}
.sidebar-menu li.active a {
color: #ef5285;
font-weight: bold;
@ -415,12 +378,6 @@ SIDEBAR + RIGHT COLUMN
.content-column-content ul li {
list-style-type: none;
}
.content-column-content ul li:before {
font-family: 'FontAwesome';
content: '\f105';
margin: 0 5px 0 -15px;
color: #ef5285;
}
.small-navbar {
margin-bottom: 20px;
}
@ -934,25 +891,6 @@ a:active {
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.box-masonry .box-masonry-image.with-hover-icon:after {
display: block;
position: absolute;
width: 100%;
left: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-family: 'FontAwesome';
content: '\f105';
text-align: center;
font-size: 50px;
color: #555555;
}
.box-masonry .box-masonry-image:hover {
text-decoration: none;
}

View File

@ -70,7 +70,7 @@ $(function() {
var obfuscateMail = function() {
var meel = document.querySelector('.meel');
var enc = "<o ofwo-zopsz='aowz orrfsgg' vfst='aowzhc:xst@xstyzoygqcrsl.qca'>xst@xstyzoygqcrsl.qca</o> <o ofwo-zopsz='sbqfmdhwcb DUD ysm' vfst='vhhdg://ysmg.cdsbdud.cfu/jyg/j1/pm-twbusfdfwbh/24O319TO8708OP6961997205S66Q99941091O46R' hwhzs='Sbqfmdh aowzg kwhv am UDU ysm'><w qzogg='to to-zcqy' ofwo-vwrrsb='hfis'></w></o>"
var enc = "<o ofwo-zopsz='aowz orrfsgg' vfst='aowzhc:xst@xstyzoygqcrsl.qca'>xst@xstyzoygqcrsl.qca</o> <o ofwo-zopsz='sbqfmdhwcb DUD ysm' vfst='vhhdg://ysmg.cdsbdud.cfu/jyg/j1/pm-twbusfdfwbh/24O319TO8708OP6961997205S66Q99941091O46R' hwhzs='Sbqfmdh aowzg kwhv am UDU ysm'><gju qzogg='wqcb wqcb-hslh' kwrhv='24' vswuvh='24'><igs lzwby:vfst='#zcqy'></igs></gju></o>"
if(meel) {
meel.addEventListener('click', function() {