kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-14 17:36:59 +02:00
Code Issues Projects Releases Wiki Activity

Add light mode

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-07-25 13:47:03 +00:00 • committed by GitHub
parent c0db0f2611
commit d9b538312a
9 changed files with 754 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/_mixins.scss
View file

@ -1,80 +1,100 @@
@import "./variables"; @import "./variables";
@mixin flexList { @mixin flexList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
@mixin cardGeneric { @mixin cardGeneric {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3); box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
transition: transform 0.25s, box-shadow 0.25s; transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, color 0.25s;
color: $textColor; color: $textColor;
text-decoration: none; text-decoration: none;
margin: 20px; margin: 20px;
background: $background; background: $background;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
transform: scale(1.05); transform: scale(1.05);
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.75); -1px 11px 33px -10px rgba($accentColor, 0.75);
} }
}
@media(prefers-color-scheme: light) {
@mixin buttonBasic { box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
display: block;
padding: 10px; background: $lightBackground;
text-align: center; color: $lightTextColor;
background: $accentColor;
color: white; &:hover,
text-decoration: none; &:active,
box-shadow: 0 0 33px -10px rgba($accentColor, 0.5); &:focus {
transition: box-shadow 0.25s; transform: scale(1.05);
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
&:hover, -1px 11px 33px -10px rgba($accentColor, 0.75);
&:active, }
&:hover { }
box-shadow: 0 0 33px -10px rgba($accentColor, 0.9); }
}
} @mixin buttonBasic {
display: block;
@mixin button { padding: 10px;
@include buttonBasic; text-align: center;
border-radius: 5px; background: $accentColor;
} color: white;
text-decoration: none;
@mixin homeBanner { box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
background: lighten($background, 1); transition: box-shadow 0.25s;
cursor: pointer;
display: block; &:hover,
text-decoration: none; &:active,
color: inherit; &:hover {
box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
img { }
height: 50px; }
}
@mixin button {
> div { @include buttonBasic;
display: flex; border-radius: 5px;
height: 100%; }
padding: 20px !important;
line-height: 50px; @mixin homeBanner {
font-size: 1.7em; background: lighten($background, 1);
color: white; cursor: pointer;
display: block;
> span { text-decoration: none;
margin-left: auto; color: inherit;
margin-right: auto; transition: background-color .25s, color .25s;
}
@media(prefers-color-scheme: light) {
> i { background: darken($accentColor, 1);
display: inline-flex; }
flex-direction: column;
justify-content: center; img {
} height: 50px;
} }
}
> div {
display: flex;
height: 100%;
padding: 20px !important;
line-height: 50px;
font-size: 1.7em;
color: white;
> span {
margin-left: auto;
margin-right: auto;
}
> i {
display: inline-flex;
flex-direction: column;
justify-content: center;
}
}
}

16
src/_variables.scss
View file

@ -1,7 +1,9 @@
$layoutWidth: 1200px; $layoutWidth: 1200px;
$accentColor: #e5502b; $accentColor: #e5502b;
$background: #070707; $background: #070707;
$textColor: white; $lightBackground: #fff;
$layoutPadding: 20px; $textColor: white;
$lightTextColor: black;
$mainFont: "Anonymous Pro", monospace; $layoutPadding: 20px;
$mainFont: "Anonymous Pro", monospace;

134
src/components/navigation.module.scss
View file

@ -1,59 +1,75 @@
@import "../variables"; @import "../variables";
@import "../mixins"; @import "../mixins";
.topBar { .topBar {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
display: flex; display: flex;
width: 100%; width: 100%;
background: rgba($background, 0.95); background: rgba($background, 0.95);
backdrop-filter: blur(5px); color: $textColor;
z-index: 999; backdrop-filter: blur(5px);
transition: background 0.25s; z-index: 999;
transition: background-color .25s, color .25s;
@supports (backdrop-filter: blur(5px)) {
background: rgba($background, 0.9); @supports (backdrop-filter: blur(5px)) {
} background: rgba($background, 0.9);
}
.topBarInner {
display: flex; @media(prefers-color-scheme: light) {
width: 100%; background: rgba($lightBackground, 0.95);
max-width: $layoutWidth; color: $lightTextColor;
margin: auto;
@supports (backdrop-filter: blur(5px)) {
> :first-child { background: rgba($lightBackground, 0.9);
padding-left: $layoutPadding; }
} }
> :last-child { .topBarInner {
padding-right: $layoutPadding; display: flex;
} width: 100%;
max-width: $layoutWidth;
a { margin: auto;
display: block;
padding: 10px $layoutPadding; > :first-child {
color: white; padding-left: $layoutPadding;
text-decoration: none; }
border-top: 2px solid transparent;
> :last-child {
&:hover { padding-right: $layoutPadding;
border-color: rgba(255, 255, 255, 0.25); }
}
a {
&.active { display: block;
border-color: white; padding: 10px $layoutPadding;
} color: inherit;
} text-decoration: none;
} border-top: 2px solid transparent;
}
&:hover {
.homeBar.homeBarTransparent { border-color: rgba(255, 255, 255, 0.25);
background: transparent; }
backdrop-filter: blur(0);
} &.active {
border-color: white;
.flexSpacer { transition: border-color .25s;
flex-grow: 1;
text-align: center; @media(prefers-color-scheme: light) {
} border-color: $accentColor;
}
}
}
}
}
.homeBar.homeBarTransparent {
background: transparent;
color: $textColor;
backdrop-filter: blur(0);
}
.flexSpacer {
flex-grow: 1;
text-align: center;
}

158
src/layouts/default.scss
View file

@ -1,73 +1,85 @@
@import "../variables"; @import "../variables";
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body, body,
html, html,
#___gatsby, #___gatsby,
#gatsby-focus-wrapper { #gatsby-focus-wrapper {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
font-family: $mainFont; font-family: $mainFont;
} }
#gatsby-focus-wrapper { #gatsby-focus-wrapper {
background: $background; background: $background;
color: $textColor; color: $textColor;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} transition: background-color .25s, color .25s;
footer { @media(prefers-color-scheme: light) {
background: darken($background, 1); background: $lightBackground;
width: 100%; color: $lightTextColor;
color: white; }
padding: 5px; }
text-align: center;
footer {
a { background: darken($background, 1);
color: white; width: 100%;
text-decoration: underline dotted currentColor; color: white;
} padding: 5px;
} text-align: center;
transition: background-color .25s, color .25s;
#content {
flex-grow: 1; @media(prefers-color-scheme: light) {
display: flex; background: darken($lightBackground, 1);
flex-direction: column; color: $lightTextColor;
} }
.flexSpacer { a {
flex-grow: 1; color: inherit;
text-align: center; text-decoration: underline dotted currentColor;
} }
}
section > div:not(.profile),
section > article, #content {
.section > div:not(.profile), flex-grow: 1;
.section > article { display: flex;
max-width: $layoutWidth; flex-direction: column;
width: 100%; }
padding: 39px 20px;
margin: 0 auto; .flexSpacer {
} flex-grow: 1;
text-align: center;
article { }
p {
text-align: justify; section > div:not(.profile),
} section > article,
.section > div:not(.profile),
a { .section > article {
color: $accentColor; max-width: $layoutWidth;
text-decoration: underline dotted currentColor; width: 100%;
text-decoration-skip: none; padding: 39px 20px;
} margin: 0 auto;
} }
h1 { article {
font-size: 2em; p {
} text-align: justify;
}
a {
color: $accentColor;
text-decoration: underline dotted currentColor;
text-decoration-skip: none;
}
}
h1 {
font-size: 2em;
}

130
src/pages/friends.module.scss
View file

@ -1,62 +1,68 @@
@import "../variables"; @import "../variables";
@import "../mixins"; @import "../mixins";
.friendsList { .friendsList {
@include flexList; @include flexList;
.friendProfile { .friendProfile {
@include cardGeneric; @include cardGeneric;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 300px; width: 300px;
flex-shrink: 0; flex-shrink: 0;
.friendImage { .friendImage {
width: 100%; width: 100%;
height: 300px; height: 300px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
display: flex; display: flex;
padding: 10px; padding: 10px;
flex-direction: column-reverse; flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
color: white;
.friendName {
font-size: 2em; .friendName {
margin-top: -5px; font-size: 2em;
} margin-top: -5px;
}
.friendTitle {
margin-top: auto; .friendTitle {
} margin-top: auto;
} }
}
.friendBio {
padding: 15px; .friendBio {
flex-grow: 1; padding: 15px;
text-align: justify; flex-grow: 1;
display: block; text-align: justify;
padding-bottom: 0; display: block;
} padding-bottom: 0;
}
.contactLinks {
padding: 15px; .contactLinks {
margin: 0; padding: 15px;
display: flex; margin: 0;
flex-direction: column; display: flex;
flex-direction: column;
.contactLink {
transition: text-decoration 0.5s; .contactLink {
text-decoration: underline dotted rgba(0, 0, 0, 0); transition: text-decoration 0.5s;
padding: 6px 0 6px 25px; text-decoration: underline dotted rgba(0, 0, 0, 0);
color: $textColor; padding: 6px 0 6px 25px;
color: $textColor;
> i { transition: color .25s;
color: $accentColor;
margin-left: -25px; @media(prefers-color-scheme: light) {
margin-right: 5px; color: $lightTextColor;
} }
}
} > i {
} color: $accentColor;
} margin-left: -25px;
margin-right: 5px;
}
}
}
}
}

373
src/pages/index.module.scss
View file

@ -1,184 +1,189 @@
@import "../variables"; @import "../variables";
@import "../mixins"; @import "../mixins";
.heroSection { .heroSection {
width: 100%; width: 100%;
height: 600px; height: 600px;
overflow: hidden; overflow: hidden;
.heroSectionBg, .heroSectionBg,
.heroSectionBgOver { .heroSectionBgOver {
position: absolute; position: absolute;
width: 100%; width: 100%;
max-width: unset; max-width: unset;
height: 600px; height: 600px;
padding: 0; padding: 0;
@media (pointer: coarse), (pointer: none) { @media (pointer: coarse), (pointer: none) {
height: 700px; height: 700px;
} }
} }
.heroSectionBg { .heroSectionBg {
/*background: radial-gradient(ellipse at top left, #1f0ba659, transparent), /*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
radial-gradient(ellipse at bottom right, #4a086829, transparent);*/ radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
background: linear-gradient(45deg, #000850 0%, #000320 100%), background: linear-gradient(45deg, #000850 0%, #000320 100%),
radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%), radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
linear-gradient(225deg, #ff7a00 0%, #000000 100%), linear-gradient(225deg, #ff7a00 0%, #000000 100%),
linear-gradient( linear-gradient(
135deg, 135deg,
#cdffeb 10%, #cdffeb 10%,
#cdffeb 35%, #cdffeb 35%,
#009f9d 35%, #009f9d 35%,
#009f9d 60%, #009f9d 60%,
#07456f 60%, #07456f 60%,
#07456f 67%, #07456f 67%,
#0f0a3c 67%, #0f0a3c 67%,
#0f0a3c 100% #0f0a3c 100%
); );
background-blend-mode: screen, overlay, hard-light, normal; background-blend-mode: screen, overlay, hard-light, normal;
} }
.heroSectionBgOver { .heroSectionBgOver {
background: linear-gradient(to bottom, transparent 80%, $background); background: linear-gradient(to bottom, transparent 80%, $background);
} transition: background-image .25s;
@media (pointer: coarse), (pointer: none) { @media(prefers-color-scheme: light) {
height: 700px; background: linear-gradient(to bottom, transparent 90%, $lightBackground);
} }
}
.profile {
position: relative; @media (pointer: coarse), (pointer: none) {
left: 50%; height: 700px;
width: calc(90% - 40px); }
max-width: 600px;
max-height: 400px; .profile {
transform: translate(-50%, 0%); position: relative;
top: 100px; left: 50%;
width: calc(90% - 40px);
.hello { max-width: 600px;
font-weight: 100; max-height: 400px;
opacity: 0.75; transform: translate(-50%, 0%);
display: block; top: 100px;
margin-bottom: -5px;
} .hello {
font-weight: 100;
.name { opacity: 0.75;
font-weight: 100; display: block;
font-size: 2em; margin-bottom: -5px;
display: block; }
}
.name {
.description { font-weight: 100;
font-weight: 100; font-size: 2em;
display: block; display: block;
} }
.contactLinks { .description {
margin-top: 20px; font-weight: 100;
display: flex; display: block;
flex-direction: column; }
}
.contactLinks {
.contactLink { margin-top: 20px;
transition: text-decoration 0.5s; display: flex;
text-decoration: underline dotted rgba(0, 0, 0, 0); flex-direction: column;
padding: 6px 0 6px 25px; }
color: $textColor;
.contactLink {
@media (pointer: coarse), (pointer: none) { transition: text-decoration 0.5s;
padding-top: 15px; text-decoration: underline dotted rgba(0, 0, 0, 0);
padding-bottom: 15px; padding: 6px 0 6px 25px;
} color: $textColor;
}
@media (pointer: coarse), (pointer: none) {
.contactLink:hover, padding-top: 15px;
.contactLink:active { padding-bottom: 15px;
text-decoration: underline dotted rgba(0, 0, 0, 0.5); }
} }
.contactLink > i { .contactLink:hover,
color: $accentColor; .contactLink:active {
margin-left: -25px; text-decoration: underline dotted rgba(0, 0, 0, 0.5);
margin-right: 5px; }
}
.contactLink > i {
.profileCard { color: $accentColor;
width: calc(100% - 40px); margin-left: -25px;
height: calc(100% - 20px); margin-right: 5px;
transform: translate(40px, 20px); }
border-radius: 5px;
padding: 20px 20px 20px 230px; .profileCard {
color: $textColor; width: calc(100% - 40px);
} height: calc(100% - 20px);
transform: translate(40px, 20px);
.profileImage, border-radius: 5px;
.profileImageDummy { padding: 20px 20px 20px 230px;
display: inline-block; color: $textColor;
width: 250px; }
height: 350px;
border-radius: 5px; .profileImage,
position: absolute; .profileImageDummy {
z-index: 100; display: inline-block;
background-color: #1c1c1c; width: 250px;
background-size: cover; height: 350px;
background-position: center; border-radius: 5px;
transition: transform 0.25s; position: absolute;
} z-index: 100;
background-color: #1c1c1c;
.profileImage { background-size: cover;
z-index: 20; background-position: center;
box-shadow: -1px 11px 33px -10px #e5502b4b; transition: transform 0.25s;
clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%); }
}
.profileImage {
.profileImageDummy { z-index: 20;
z-index: 10; box-shadow: -1px 11px 33px -10px #e5502b4b;
background: $accentColor; clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
opacity: 0.2; }
clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
} .profileImageDummy {
z-index: 10;
@media (max-width: 590px) { background: $accentColor;
.profileImage, opacity: 0.2;
.profileImageDummy { clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
display: none; }
}
@media (max-width: 590px) {
.profileCard { .profileImage,
padding: 20px 20px 20px 20px; .profileImageDummy {
transform: translate(20px, 20px); display: none;
} }
}
} .profileCard {
} padding: 20px 20px 20px 20px;
transform: translate(20px, 20px);
.amazonAlexaSection, }
.donationSection, }
.hireMeSection { }
@include homeBanner; }
}
.amazonAlexaSection,
.creditSection { .donationSection,
@include homeBanner; .hireMeSection {
@include homeBanner;
> div { }
padding: 15px !important;
line-height: 15px; .creditSection {
font-size: 1.2em; @include homeBanner;
color: white;
> div {
> span > i { padding: 15px !important;
line-height: 15px !important; line-height: 15px;
} font-size: 1.2em;
} color: white;
}
> span > i {
.seeMoreButton { line-height: 15px !important;
@include button; }
width: fit-content; }
margin: 0 auto; }
margin-top: 40px;
padding: 10px 20px; .seeMoreButton {
} @include button;
width: fit-content;
margin: 0 auto;
margin-top: 40px;
padding: 10px 20px;
}

179
src/pages/projects.module.scss
View file

@ -1,89 +1,90 @@
@import "../variables"; @import "../variables";
@import "../mixins"; @import "../mixins";
.projectList { .projectList {
@include flexList; @include flexList;
margin: 15px 0; margin: 15px 0;
} }
.projectCard { .projectCard {
@include cardGeneric; @include cardGeneric;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
width: 250px; width: 250px;
flex-shrink: 0; flex-shrink: 0;
.projectCardActivityIndicator { .projectCardActivityIndicator {
position: absolute; position: absolute;
margin: 12px; margin: 12px;
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
&.activityIndicatorGreen { &.activityIndicatorGreen {
background: #26de81; background: #26de81;
} }
&.activityIndicatorYellow { &.activityIndicatorYellow {
background: #f7b731; background: #f7b731;
} }
&.activityIndicatorRed { &.activityIndicatorRed {
background: #fc5c65; background: #fc5c65;
} }
&.activityIndicatorBlue { &.activityIndicatorBlue {
background: #45aaf2; background: #45aaf2;
} }
} }
.projectCardImage { .projectCardImage {
width: 100%; width: 100%;
height: 250px; height: 250px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
} color: white;
}
.projectCardMeta {
padding: 10px; .projectCardMeta {
flex-grow: 1; padding: 10px;
display: flex; flex-grow: 1;
flex-direction: column; display: flex;
padding: 10px; flex-direction: column;
height: 100%; padding: 10px;
background: linear-gradient(to bottom, transparent, black); height: 100%;
} background: linear-gradient(to bottom, transparent, black);
}
.projectCardTitle {
display: block; .projectCardTitle {
font-size: 1.5em; display: block;
margin-top: auto; font-size: 1.5em;
} margin-top: auto;
}
.projectCardCTA {
display: block; .projectCardCTA {
} display: block;
}
.projectCardCTA a {
@include buttonBasic; .projectCardCTA a {
} @include buttonBasic;
}
.projectCardCTAContainer {
display: flex; .projectCardCTAContainer {
} display: flex;
}
@media (max-width: 900px) {
.projectCardCTAContainer { @media (max-width: 900px) {
flex-direction: column; .projectCardCTAContainer {
} flex-direction: column;
}
.projectCardCTA:nth-child(2) {
border-left: none; .projectCardCTA:nth-child(2) {
} border-left: none;
} }
}
.projectCardCTAContainer > * {
flex-grow: 1; .projectCardCTAContainer > * {
} flex-grow: 1;
} }
}

65
src/pages/social.module.scss
View file

@ -1,32 +1,33 @@
@import "../variables"; @import "../variables";
@import "../mixins"; @import "../mixins";
.socialList { .socialList {
@include flexList; @include flexList;
.socialCard { .socialCard {
@include cardGeneric; @include cardGeneric;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.socialImage { .socialImage {
width: 300px; width: 300px;
height: 300px; height: 300px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
display: flex; display: flex;
padding: 10px; padding: 10px;
flex-direction: column-reverse; flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
color: white;
.socialName {
font-size: 2em; .socialName {
margin-top: -5px; font-size: 2em;
} margin-top: -5px;
}
.socialUsername {
margin-top: auto; .socialUsername {
} margin-top: auto;
} }
} }
} }
}

204
src/templates/project.module.scss
View file

@ -1,99 +1,105 @@
@import "../variables"; @import "../variables";
.projectHeader { .projectHeader {
> div { > div {
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.headerBackground { .headerBackground {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
height: 400px; height: 400px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
header { header {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
height: 400px; height: 400px;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba($background, 0.95), rgba($background, 0.95),
rgba($background, 0.25) 20%, rgba($background, 0.25) 20%,
rgba($background, 0.35) 80%, rgba($background, 0.35) 80%,
rgba($background, 1) 100% rgba($background, 1) 100%
); );
.headerInner { .headerInner {
max-width: $layoutWidth; max-width: $layoutWidth;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-shadow: 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 20px black;
padding: 10px 20px; padding: 10px 20px;
* { * {
margin: 0; margin: 0;
color: white; color: white;
font-size: 1.25em; font-size: 1.25em;
} }
h1 { h1 {
font-size: 2.2em; font-size: 2.2em;
margin-top: auto; margin-top: auto;
} }
} }
} }
.headerPlaceholder { .headerPlaceholder {
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
} }
.projectAbout, .projectAbout,
.projectLinks { .projectLinks {
&:nth-of-type(2) { &:nth-of-type(2) {
> div, > div,
> article { > article {
padding-top: 20px; padding-top: 20px;
} }
} }
} }
.projectAbout { .projectAbout {
background: #060606; background: #060606;
color: white; color: white;
} transition: background-color .25s, color .25s;
.projectLinks { @media(prefers-color-scheme: light) {
.linkList { background: $lightBackground;
display: flex; color: $lightTextColor;
justify-content: center; }
flex-wrap: wrap; }
}
.projectLinks {
a { .linkList {
display: inline-block; display: flex;
border: thin solid rgb(200, 200, 200); justify-content: center;
border-radius: 5px; flex-wrap: wrap;
padding: 10px 15px; }
margin: 5px;
color: $textColor; a {
text-decoration-skip: none; display: inline-block;
text-decoration: underline dotted currentColor; border: thin solid rgb(200, 200, 200);
border-radius: 5px;
i.fab, padding: 10px 15px;
i.fas, margin: 5px;
i.fa, color: inherit;
i.far, text-decoration-skip: none;
i.fal { text-decoration: underline dotted currentColor;
display: inline;
} i.fab,
} i.fas,
} i.fa,
i.far,
i.fal {
display: inline;
}
}
}