mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-04-29 10:16:53 +02:00
Clean up SCSS
This commit is contained in:
parent
4b92fc0ed2
commit
5f6368e3e0
8 changed files with 336 additions and 370 deletions
65
src/_mixins.scss
Normal file
65
src/_mixins.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
@import "./variables";
|
||||
|
||||
@mixin flexList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
@mixin cardGeneric {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
|
||||
transition: transform .25s, box-shadow .25s;
|
||||
color: $textColor;
|
||||
text-decoration: none;
|
||||
margin: 20px;
|
||||
background: $background;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
transform: scale(1.05);
|
||||
box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonBasic {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: $accentColor;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@mixin homeBanner {
|
||||
background: #10141e;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
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 {
|
||||
line-height: 50px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,3 +3,4 @@ $accentColor: #e5502b;
|
|||
$background: #0d0d0d;
|
||||
$textColor: white;
|
||||
|
||||
$mainFont: 'Anonymous Pro', monospace;
|
||||
|
|
@ -9,13 +9,12 @@ body, html, #___gatsby, #gatsby-focus-wrapper {
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
font-family: $mainFont;
|
||||
}
|
||||
|
||||
#gatsby-focus-wrapper {
|
||||
background: $background;
|
||||
color: $textColor;
|
||||
transition: background .25s, color .25s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -26,11 +25,11 @@ footer {
|
|||
color: white;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: white;
|
||||
text-decoration: underline dotted currentColor;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline dotted currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
|
|
@ -49,36 +48,36 @@ footer a {
|
|||
background: #000710;
|
||||
z-index: 999;
|
||||
transition: background .25s;
|
||||
|
||||
.topBarInner {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
/*text-decoration: underline dotted white;*/
|
||||
text-decoration: none;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homeBar.homeBarTransparent {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.topBarInner {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.topBar a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
/*text-decoration: underline dotted white;*/
|
||||
text-decoration: none;
|
||||
border-top: 2px solid transparent;
|
||||
}
|
||||
|
||||
.topBar a:hover {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.topBar a.active {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.flexSpacer {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
|
|
@ -91,19 +90,23 @@ section > div:not(.profile), section > article, .section > div:not(.profile), .s
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
article p {
|
||||
text-align: justify;
|
||||
article {
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accentColor;
|
||||
text-decoration: underline dotted currentColor;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
}
|
||||
|
||||
article h1, section > div > h1 {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
article a {
|
||||
color: $accentColor;
|
||||
text-decoration: underline dotted currentColor;
|
||||
text-decoration-skip: none;
|
||||
}.languageModal {
|
||||
.languageModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -113,34 +116,32 @@ article a {
|
|||
z-index: 1000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: opacity .25s;
|
||||
-moz-transition: opacity .25s;
|
||||
-ms-transition: opacity .25s;
|
||||
-o-transition: opacity .25s;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
|
||||
.languageModal:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
&:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.languageModalInner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
background: black;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.languageModalInner a {
|
||||
color: white;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
.languageModalInner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
background: black;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
|
||||
.modalCloseLink {
|
||||
text-decoration: none;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modalCloseLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +1,60 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.friendsList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
@include flexList;
|
||||
|
||||
.friendProfile {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
|
||||
transition: transform .25s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.friendProfile {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.friendImage {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
}
|
||||
.friendImage {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
|
||||
.friendBio {
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
text-align: justify;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.friendName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.friendTitle {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.friendProfile .contactLinks {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.friendBio {
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
text-align: justify;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.contactLink {
|
||||
transition: text-decoration .5s;
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||
padding: 6px 0 6px 25px;
|
||||
color: $textColor;
|
||||
}
|
||||
.contactLink {
|
||||
transition: text-decoration .5s;
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||
padding: 6px 0 6px 25px;
|
||||
color: $textColor;
|
||||
|
||||
.contactLink > i {
|
||||
color: $accentColor;
|
||||
margin-left: -25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.friendProfile:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.friendName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.friendTitle {
|
||||
margin-top: auto;
|
||||
> i {
|
||||
color: $accentColor;
|
||||
margin-left: -25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.heroSection {
|
||||
width: 100%;
|
||||
|
|
@ -125,59 +126,21 @@
|
|||
}
|
||||
|
||||
.amazonAlexaSection, .donationSection, .hireMeSection {
|
||||
min-height: 90px;
|
||||
background: #10141e;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.amazonAlexaSection img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.amazonAlexaSection > div, .donationSection > div, .hireMeSection > div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 20px !important;
|
||||
line-height: 50px;
|
||||
font-size: 1.7em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.amazonAlexaSection > div > span, .donationSection > div > span, .hireMeSection > div > span {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.amazonAlexaSection > div > i, .donationSection > div > i, .hireMeSection > div > i {
|
||||
line-height: 50px !important;
|
||||
@include homeBanner;
|
||||
}
|
||||
|
||||
.creditSection {
|
||||
@include homeBanner;
|
||||
background: #060606;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.creditSection > div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 15px !important;
|
||||
line-height: 15px;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.creditSection > div > span {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.creditSection > div > i {
|
||||
line-height: 15px !important;
|
||||
}
|
||||
|
||||
|
||||
> div {
|
||||
padding: 15px !important;
|
||||
line-height: 15px;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
|
||||
> span > i {
|
||||
line-height: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,127 +1,89 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.projectList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
@include flexList;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.projectCard {
|
||||
background: $background;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 15px;
|
||||
color: var(--text-color);
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: calc(100% / 4);
|
||||
box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
|
||||
max-width: 300px;
|
||||
transition: transform .25s, box-shadow .25s;
|
||||
}
|
||||
|
||||
.projectCard:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);
|
||||
}
|
||||
|
||||
@media(max-width: 800px) {
|
||||
.projectCard {
|
||||
@media(max-width: 800px) {
|
||||
width: calc((100% / 2) - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
.projectCard {
|
||||
@media(max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.projectCardActivityIndicator {
|
||||
position: absolute;
|
||||
margin: 12px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.projectCardActivityIndicator {
|
||||
position: absolute;
|
||||
margin: 12px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
.activityIndicatorGreen {
|
||||
background: #26de81;
|
||||
}
|
||||
&.activityIndicatorGreen {
|
||||
background: #26de81;
|
||||
}
|
||||
|
||||
&.activityIndicatorYellow {
|
||||
background: #f7b731;
|
||||
}
|
||||
|
||||
&.activityIndicatorRed {
|
||||
background: #fc5c65;
|
||||
}
|
||||
|
||||
&.activityIndicatorBlue {
|
||||
background: #45aaf2;
|
||||
}
|
||||
}
|
||||
|
||||
.activityIndicatorYellow {
|
||||
background: #f7b731;
|
||||
}
|
||||
.projectCardImage {
|
||||
display: block;
|
||||
height: 150px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.activityIndicatorRed {
|
||||
background: #fc5c65;
|
||||
}
|
||||
.projectCardMeta {
|
||||
padding: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.activityIndicatorBlue {
|
||||
background: #45aaf2;
|
||||
}
|
||||
.projectCardTitle {
|
||||
display: block;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.projectCardImage {
|
||||
display: block;
|
||||
height: 150px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.projectCardCTA {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.projectCardMeta {
|
||||
padding: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.projectCardCTA a {
|
||||
@include buttonBasic;
|
||||
}
|
||||
|
||||
.projectCardTitle {
|
||||
display: block;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.projectCardCTA {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.projectCardCTA a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.projectCardCTAContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media(max-width: 900px) {
|
||||
.projectCardCTAContainer {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.projectCardCTA:nth-child(2) {
|
||||
border-left: none;
|
||||
@media(max-width: 900px) {
|
||||
.projectCardCTAContainer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.projectCardCTA:nth-child(2) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.projectCardCTAContainer > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.projectCardCTA {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.projectCardCTA a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: $accentColor;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
.projectCardCTAContainer > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +1,32 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.socialList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
@include flexList;
|
||||
|
||||
.socialCard {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
|
||||
transition: transform .25s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.socialCard {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.socialImage {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
}
|
||||
.socialImage {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
|
||||
.socialName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
.socialName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.socialUsername {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.socialCard:hover, .socialCard:focus {
|
||||
transform: scale(1.05);
|
||||
.socialUsername {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +1,48 @@
|
|||
@import "../variables";
|
||||
|
||||
.projectHeader .headerBackground {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.projectHeader {
|
||||
> div {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.projectHeader header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
.headerBackground {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.projectHeader .headerInner {
|
||||
max-width: $layoutWidth;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 65px 20px 0;
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
|
||||
.headerInner {
|
||||
max-width: $layoutWidth;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 65px 20px 0;
|
||||
|
||||
.projectHeader .headerInner * {
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.headerPlaceholder {
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.projectHeader .headerPlaceholder {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.projectHeader h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.projectHeader > div {
|
||||
padding-bottom: 0 !important;
|
||||
.headerPlaceholder {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.projectAbout {
|
||||
|
|
@ -52,23 +50,25 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
.projectLinks .linkList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.projectLinks {
|
||||
.linkList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.projectLinks a {
|
||||
display: inline-block;
|
||||
border: thin solid rgb(200, 200, 200);
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
color: $textColor;
|
||||
text-decoration-skip: none;
|
||||
text-decoration: underline dotted currentColor;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
border: thin solid rgb(200, 200, 200);
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
color: $textColor;
|
||||
text-decoration-skip: none;
|
||||
text-decoration: underline dotted currentColor;
|
||||
|
||||
.projectLinks a i.fab, .projectLinks a i.fas, .projectLinks a i.fa, .projectLinks a i.far, .projectLinks a i.fal {
|
||||
display: inline;
|
||||
i.fab, i.fas, i.fa, i.far, i.fal {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue