shortlinks / sorted socials / helpers / etc.

This commit is contained in:
monty 2019-12-10 21:47:05 +01:00
parent 4520e66c66
commit f6d011d763
6 changed files with 80 additions and 43 deletions

View file

@ -95,10 +95,12 @@ body.light #box {
transition: border-color 0.5s ease-in-out; transition: border-color 0.5s ease-in-out;
} }
.twitter:hover, .twitter:hover {
.twitter:focus {
fill: #1da1f2 !important; fill: #1da1f2 !important;
color: #1da1f2 !important; }
.twitter:hover ~ #box {
border-color: #1da1f2;
} }
body.light a.twitter { body.light a.twitter {
@ -129,10 +131,12 @@ body.light .twitter::selection {
background-color: #37bbff; background-color: #37bbff;
} }
.keybase:hover, .keybase:hover {
.keybase:focus {
fill: #33a0ff !important; fill: #33a0ff !important;
color: #33a0ff !important; }
.keybase:hover ~ #box {
border-color: #33a0ff;
} }
body.light a.keybase { body.light a.keybase {
@ -163,10 +167,12 @@ body.light .keybase::selection {
background-color: #4dbaff; background-color: #4dbaff;
} }
.discord:hover, .discord:hover {
.discord:focus {
fill: #7289da !important; fill: #7289da !important;
color: #7289da !important; }
.discord:hover ~ #box {
border-color: #7289da;
} }
body.light a.discord { body.light a.discord {
@ -197,10 +203,12 @@ body.light .discord::selection {
background-color: #8ca3f4; background-color: #8ca3f4;
} }
.mastodon:hover, .mastodon:hover {
.mastodon:focus {
fill: #3088d4 !important; fill: #3088d4 !important;
color: #3088d4 !important; }
.mastodon:hover ~ #box {
border-color: #3088d4;
} }
body.light a.mastodon { body.light a.mastodon {
@ -231,10 +239,12 @@ body.light .mastodon::selection {
background-color: #4aa2ee; background-color: #4aa2ee;
} }
.twitch:hover, .twitch:hover {
.twitch:focus {
fill: #6441a4 !important; fill: #6441a4 !important;
color: #6441a4 !important; }
.twitch:hover ~ #box {
border-color: #6441a4;
} }
body.light a.twitch { body.light a.twitch {
@ -265,10 +275,12 @@ body.light .twitch::selection {
background-color: #7e5bbe; background-color: #7e5bbe;
} }
.gitdab:hover, .gitdab:hover {
.gitdab:focus {
fill: #faacb7 !important; fill: #faacb7 !important;
color: #faacb7 !important; }
.gitdab:hover ~ #box {
border-color: #faacb7;
} }
body.light a.gitdab { body.light a.gitdab {
@ -299,10 +311,12 @@ body.light .gitdab::selection {
background-color: #ffc6d1; background-color: #ffc6d1;
} }
.github:hover, .github:hover {
.github:focus {
fill: #333 !important; fill: #333 !important;
color: #333 !important; }
.github:hover ~ #box {
border-color: #333;
} }
body.light a.github { body.light a.github {
@ -333,10 +347,12 @@ body.light .github::selection {
background-color: #4d4d4d; background-color: #4d4d4d;
} }
.gitlab:hover, .gitlab:hover {
.gitlab:focus {
fill: #e24329 !important; fill: #e24329 !important;
color: #e24329 !important; }
.gitlab:hover ~ #box {
border-color: #e24329;
} }
body.light a.gitlab { body.light a.gitlab {
@ -367,10 +383,12 @@ body.light .gitlab::selection {
background-color: #fc5d43; background-color: #fc5d43;
} }
.ko-fi:hover, .ko-fi:hover {
.ko-fi:focus {
fill: #f16061 !important; fill: #f16061 !important;
color: #f16061 !important; }
.ko-fi:hover ~ #box {
border-color: #f16061;
} }
body.light a.ko-fi { body.light a.ko-fi {
@ -401,10 +419,12 @@ body.light .ko-fi::selection {
background-color: #ff7a7b; background-color: #ff7a7b;
} }
.patreon:hover, .patreon:hover {
.patreon:focus {
fill: #f96854 !important; fill: #f96854 !important;
color: #f96854 !important; }
.patreon:hover ~ #box {
border-color: #f96854;
} }
body.light a.patreon { body.light a.patreon {

File diff suppressed because one or more lines are too long

View file

@ -97,10 +97,11 @@ $socials: (
); );
@each $site, $color in $socials { @each $site, $color in $socials {
.#{$site}:hover, .#{$site}:hover {
.#{$site}:focus {
fill: $color !important; fill: $color !important;
color: $color !important; & ~ #box {
border-color: $color;
}
} }
body.light a.#{$site} { body.light a.#{$site} {

View file

@ -9,9 +9,9 @@ portfolio.get('/', (req, res) => {
host: req.hostname, host: req.hostname,
portfolio: { portfolio: {
code: [ code: [
{ name: 'thaldrin', source: 'https://gitdab.com/r/thaldrin' }, { name: 'thaldrin', source: '/p/thaldrin' },
{ name: 'website', source: 'https://gitdab.com/y/website' }, { name: 'website', source: '/p/website' },
{ name: 'yiff', source: 'https://github.com/codepupper/yiff' } { name: 'yiff', source: '/p/yiff' }
] ]
} }
}); });

View file

@ -18,14 +18,22 @@ let { port, hostname } = {
const app = express(); const app = express();
app.set('view engine', 'hbs');
app.engine( app.engine(
'hbs', 'hbs',
hbs({ hbs({
extname: 'hbs', extname: 'hbs',
defaultView: 'default' defaultView: 'default',
helpers: {
ifeq: function(a, b, options) {
if (a === b) {
return options.fn(this);
}
}
}
}) })
); );
app.set('view engine', 'hbs');
app.set('json spaces', 4); app.set('json spaces', 4);
app.use('/assets', express.static('./assets')); app.use('/assets', express.static('./assets'));
app.set('view options', { app.set('view options', {
@ -56,6 +64,7 @@ app.use(
app.use('/portfolio', require('./routes/portfolio')); app.use('/portfolio', require('./routes/portfolio'));
app.use('/lore', require('./routes/lore')); app.use('/lore', require('./routes/lore'));
app.use('/art', require('./routes/art')); app.use('/art', require('./routes/art'));
app.use('/p', require('./routes/p'));
module.exports = (client) => { module.exports = (client) => {
app.get('/', async (req, res) => { app.get('/', async (req, res) => {
@ -68,16 +77,16 @@ module.exports = (client) => {
item: [ { name: 'portfolio', source: '/portfolio' } ], item: [ { name: 'portfolio', source: '/portfolio' } ],
social: [ social: [
{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/codepupper', icon: simpleIcons.Twitter }, { name: 'Twitter', color: '1DA1F2', link: 'twitter.com/codepupper', icon: simpleIcons.Twitter },
{ name: 'Discord', color: '7289da', link: 'thaldr.in/discord', icon: simpleIcons.Discord },
{ name: 'Mastodon', color: '3088d4', link: 'pounced-on.me/@code', icon: simpleIcons.Mastodon }, { name: 'Mastodon', color: '3088d4', link: 'pounced-on.me/@code', icon: simpleIcons.Mastodon },
{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/floofydev', icon: simpleIcons.Twitter },
{ name: 'Discord', color: '7289da', link: 'thaldr.in/discord', icon: simpleIcons.Discord },
{ name: 'Twitch', color: '6441a4', link: 'twitch.tv/codepupper', icon: simpleIcons.Twitch },
{ name: 'Keybase', color: '33a0ff', link: 'keybase.io/codepupper', icon: simpleIcons.Keybase }, { name: 'Keybase', color: '33a0ff', link: 'keybase.io/codepupper', icon: simpleIcons.Keybase },
{ name: 'Gitdab', color: 'faacb7', link: 'gitdab.com/y', icon: simpleIcons.Git }, { name: 'Gitdab', color: 'faacb7', link: 'gitdab.com/y', icon: simpleIcons.Git },
{ name: 'Github', color: '333', link: 'github.com/codepupper', icon: simpleIcons.GitHub }, { name: 'Github', color: '333', link: 'github.com/codepupper', icon: simpleIcons.GitHub },
{ name: 'Gitlab', color: 'E24329', link: 'gitlab.com/codepupper', icon: simpleIcons.GitLab }, { name: 'Gitlab', color: 'E24329', link: 'gitlab.com/codepupper', icon: simpleIcons.GitLab },
{ name: 'Twitch', color: '6441a4', link: 'twitch.tv/codepupper', icon: simpleIcons.Twitch },
{ name: 'Ko-Fi', color: 'f16061', link: 'ko-fi.com/codepupper', icon: simpleIcons['Ko-fi'] }, { name: 'Ko-Fi', color: 'f16061', link: 'ko-fi.com/codepupper', icon: simpleIcons['Ko-fi'] },
{ name: 'Patreon', color: '6441a4', link: 'patreon.com/ryden', icon: simpleIcons.Patreon }, { name: 'Patreon', color: '6441a4', link: 'patreon.com/ryden', icon: simpleIcons.Patreon }
{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/floofydev', icon: simpleIcons.Twitter }
] ]
}); });
}); });

View file

@ -9,11 +9,18 @@
<div class="socials"> <div class="socials">
{{#each social}} {{#each social}}
{{#ifeq name 'Mastodon'}}
<a rel="me" href="https://{{link}}" class="{{name}}"> <a rel="me" href="https://{{link}}" class="{{name}}">
<svg width="40" height="40" role="img" viewBox="0 0 24 24"> <svg width="40" height="40" role="img" viewBox="0 0 24 24">
<title>{{name}} Icon</title> <title>{{name}} Icon</title>
<path d="{{icon.path}}"></path> <path d="{{icon.path}}"></path>
</svg></a> </svg></a>
{{/ifeq}}
<a href="https://{{link}}" class="{{name}}">
<svg width="40" height="40" role="img" viewBox="0 0 24 24">
<title>{{name}} Icon</title>
<path d="{{icon.path}}"></path>
</svg></a>
{{/each}} {{/each}}
</div> </div>