more icons, less lengthy icon row
This commit is contained in:
codepupper
parent
ae69b0aa79
commit
4520e66c66
|
|
@ -95,19 +95,18 @@ body.light #box {
|
|||
transition: border-color 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.twitter:hover #box,
|
||||
.twitter:focus #box {
|
||||
border-color: #1da1f2;
|
||||
.twitter:hover,
|
||||
.twitter:focus {
|
||||
fill: #1da1f2 !important;
|
||||
color: #1da1f2 !important;
|
||||
}
|
||||
|
||||
body.light a.twitter {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.twitter {
|
||||
fill: #1da1f2 !important;
|
||||
color: #1da1f2 !important;
|
||||
}
|
||||
|
||||
a.twitter.light {
|
||||
fill: #1da1f2 !important;
|
||||
color: #1da1f2 !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.twitter::-moz-selection {
|
||||
|
|
@ -130,19 +129,18 @@ body.light .twitter::selection {
|
|||
background-color: #37bbff;
|
||||
}
|
||||
|
||||
.keybase:hover #box,
|
||||
.keybase:focus #box {
|
||||
border-color: #33a0ff;
|
||||
.keybase:hover,
|
||||
.keybase:focus {
|
||||
fill: #33a0ff !important;
|
||||
color: #33a0ff !important;
|
||||
}
|
||||
|
||||
body.light a.keybase {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.keybase {
|
||||
fill: #33a0ff !important;
|
||||
color: #33a0ff !important;
|
||||
}
|
||||
|
||||
a.keybase.light {
|
||||
fill: #33a0ff !important;
|
||||
color: #33a0ff !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.keybase::-moz-selection {
|
||||
|
|
@ -165,19 +163,18 @@ body.light .keybase::selection {
|
|||
background-color: #4dbaff;
|
||||
}
|
||||
|
||||
.discord:hover #box,
|
||||
.discord:focus #box {
|
||||
border-color: #7289da;
|
||||
.discord:hover,
|
||||
.discord:focus {
|
||||
fill: #7289da !important;
|
||||
color: #7289da !important;
|
||||
}
|
||||
|
||||
body.light a.discord {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.discord {
|
||||
fill: #7289da !important;
|
||||
color: #7289da !important;
|
||||
}
|
||||
|
||||
a.discord.light {
|
||||
fill: #7289da !important;
|
||||
color: #7289da !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.discord::-moz-selection {
|
||||
|
|
@ -200,19 +197,18 @@ body.light .discord::selection {
|
|||
background-color: #8ca3f4;
|
||||
}
|
||||
|
||||
.mastodon:hover #box,
|
||||
.mastodon:focus #box {
|
||||
border-color: #3088d4;
|
||||
.mastodon:hover,
|
||||
.mastodon:focus {
|
||||
fill: #3088d4 !important;
|
||||
color: #3088d4 !important;
|
||||
}
|
||||
|
||||
body.light a.mastodon {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.mastodon {
|
||||
fill: #3088d4 !important;
|
||||
color: #3088d4 !important;
|
||||
}
|
||||
|
||||
a.mastodon.light {
|
||||
fill: #3088d4 !important;
|
||||
color: #3088d4 !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.mastodon::-moz-selection {
|
||||
|
|
@ -235,19 +231,18 @@ body.light .mastodon::selection {
|
|||
background-color: #4aa2ee;
|
||||
}
|
||||
|
||||
.twitch:hover #box,
|
||||
.twitch:focus #box {
|
||||
border-color: #6441a4;
|
||||
.twitch:hover,
|
||||
.twitch:focus {
|
||||
fill: #6441a4 !important;
|
||||
color: #6441a4 !important;
|
||||
}
|
||||
|
||||
body.light a.twitch {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.twitch {
|
||||
fill: #6441a4 !important;
|
||||
color: #6441a4 !important;
|
||||
}
|
||||
|
||||
a.twitch.light {
|
||||
fill: #6441a4 !important;
|
||||
color: #6441a4 !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.twitch::-moz-selection {
|
||||
|
|
@ -270,19 +265,18 @@ body.light .twitch::selection {
|
|||
background-color: #7e5bbe;
|
||||
}
|
||||
|
||||
.gitdab:hover #box,
|
||||
.gitdab:focus #box {
|
||||
border-color: #faacb7;
|
||||
.gitdab:hover,
|
||||
.gitdab:focus {
|
||||
fill: #faacb7 !important;
|
||||
color: #faacb7 !important;
|
||||
}
|
||||
|
||||
body.light a.gitdab {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.gitdab {
|
||||
fill: #faacb7 !important;
|
||||
color: #faacb7 !important;
|
||||
}
|
||||
|
||||
a.gitdab.light {
|
||||
fill: #faacb7 !important;
|
||||
color: #faacb7 !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.gitdab::-moz-selection {
|
||||
|
|
@ -305,19 +299,18 @@ body.light .gitdab::selection {
|
|||
background-color: #ffc6d1;
|
||||
}
|
||||
|
||||
.github:hover #box,
|
||||
.github:focus #box {
|
||||
border-color: #333;
|
||||
.github:hover,
|
||||
.github:focus {
|
||||
fill: #333 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
body.light a.github {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.github {
|
||||
fill: #333 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
a.github.light {
|
||||
fill: #333 !important;
|
||||
color: #333 !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.github::-moz-selection {
|
||||
|
|
@ -340,19 +333,18 @@ body.light .github::selection {
|
|||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
.gitlab:hover #box,
|
||||
.gitlab:focus #box {
|
||||
border-color: #e24329;
|
||||
.gitlab:hover,
|
||||
.gitlab:focus {
|
||||
fill: #e24329 !important;
|
||||
color: #e24329 !important;
|
||||
}
|
||||
|
||||
body.light a.gitlab {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.gitlab {
|
||||
fill: #e24329 !important;
|
||||
color: #e24329 !important;
|
||||
}
|
||||
|
||||
a.gitlab.light {
|
||||
fill: #e24329 !important;
|
||||
color: #e24329 !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.gitlab::-moz-selection {
|
||||
|
|
@ -375,8 +367,76 @@ body.light .gitlab::selection {
|
|||
background-color: #fc5d43;
|
||||
}
|
||||
|
||||
.ko-fi:hover,
|
||||
.ko-fi:focus {
|
||||
fill: #f16061 !important;
|
||||
color: #f16061 !important;
|
||||
}
|
||||
|
||||
body.light a.ko-fi {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.ko-fi {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.ko-fi::-moz-selection {
|
||||
color: white;
|
||||
background-color: #f16061;
|
||||
}
|
||||
|
||||
.ko-fi::selection {
|
||||
color: white;
|
||||
background-color: #f16061;
|
||||
}
|
||||
|
||||
body.light .ko-fi::-moz-selection {
|
||||
color: black;
|
||||
background-color: #ff7a7b;
|
||||
}
|
||||
|
||||
body.light .ko-fi::selection {
|
||||
color: black;
|
||||
background-color: #ff7a7b;
|
||||
}
|
||||
|
||||
.patreon:hover,
|
||||
.patreon:focus {
|
||||
fill: #f96854 !important;
|
||||
color: #f96854 !important;
|
||||
}
|
||||
|
||||
body.light a.patreon {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
a.patreon {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.patreon::-moz-selection {
|
||||
color: white;
|
||||
background-color: #f96854;
|
||||
}
|
||||
|
||||
.patreon::selection {
|
||||
color: white;
|
||||
background-color: #f96854;
|
||||
}
|
||||
|
||||
body.light .patreon::-moz-selection {
|
||||
color: black;
|
||||
background-color: #ff826e;
|
||||
}
|
||||
|
||||
body.light .patreon::selection {
|
||||
color: black;
|
||||
background-color: #ff826e;
|
||||
}
|
||||
|
||||
a svg {
|
||||
max-width: 4ch;
|
||||
max-width: 6ch;
|
||||
}
|
||||
|
||||
.socials {
|
||||
|
|
@ -385,6 +445,15 @@ a svg {
|
|||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
-webkit-transition: fill 1s ease-in-out;
|
||||
transition: fill 1s ease-in-out;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 2vh;
|
||||
}
|
||||
|
||||
divide {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -91,24 +91,23 @@ $socials: (
|
|||
"twitch": #6441a4,
|
||||
"gitdab":#faacb7,
|
||||
"github": #333,
|
||||
"gitlab": #e24329
|
||||
"gitlab": #e24329,
|
||||
"ko-fi": #f16061,
|
||||
"patreon": #f96854
|
||||
);
|
||||
|
||||
@each $site, $color in $socials {
|
||||
.#{$site}:hover,
|
||||
.#{$site}:focus {
|
||||
#box {
|
||||
border-color: $color;
|
||||
}
|
||||
fill: $color !important;
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
a.#{$site} {
|
||||
fill: $color !important;
|
||||
color: $color !important;
|
||||
body.light a.#{$site} {
|
||||
fill: black;
|
||||
}
|
||||
a.#{$site}.light {
|
||||
fill: $color !important;
|
||||
color: $color !important;
|
||||
a.#{$site} {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.#{$site}::selection {
|
||||
|
|
@ -123,13 +122,20 @@ $socials: (
|
|||
}
|
||||
|
||||
a svg {
|
||||
max-width: 4ch;
|
||||
max-width: 6ch;
|
||||
}
|
||||
|
||||
.socials {
|
||||
font-size: 2vh;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
transition: fill 1s ease-in-out;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 2vh;
|
||||
}
|
||||
|
||||
divide {
|
||||
|
|
|
|||
|
|
@ -75,6 +75,8 @@ module.exports = (client) => {
|
|||
{ name: 'Github', color: '333', link: 'github.com/codepupper', icon: simpleIcons.GitHub },
|
||||
{ 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: 'Patreon', color: '6441a4', link: 'patreon.com/ryden', icon: simpleIcons.Patreon },
|
||||
{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/floofydev', icon: simpleIcons.Twitter }
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<body>
|
||||
<h1 class="title"> <a href="/">{{name}}</a></h1>
|
||||
<h1 class="title"><a href="/">{{name}}</a></h1>
|
||||
<h1 class="subtitle toggle">dark/light</h1>
|
||||
<div class="center">
|
||||
{{#each art}}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div class="center">
|
||||
<h1 class="title">{{name}}</h1>
|
||||
<h1 class="subtitle toggle">dark/light</h1>
|
||||
<divide></divide>
|
||||
|
||||
{{#each item}}
|
||||
<a class="{{this.name}}" href="{{this.source}}">{{this.name}}</a>
|
||||
{{/each}}
|
||||
<divide></divide>
|
||||
|
||||
<div class="socials">
|
||||
{{#each social}}
|
||||
<a rel="me" href="https://{{link}}" class="{{name}}">
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
<title>{{name}} Icon</title>
|
||||
<path d="{{icon.path}}"></path>
|
||||
</svg></a>
|
||||
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue