kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-04-29 10:16:53 +02:00
Code Issues Projects Releases Wiki Activity

Clean up SCSS

Browse source
This commit is contained in:
Kevin Kandlbinder 2020-12-23 15:19:53 +01:00
parent 4b92fc0ed2
commit 5f6368e3e0
8 changed files with 336 additions and 370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/_mixins.scss Normal file
View 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;
}
}
}
}

1
src/_variables.scss
View file

@ -3,3 +3,4 @@ $accentColor: #e5502b;
$background: #0d0d0d;
$textColor: white;
$mainFont: 'Anonymous Pro', monospace;

129
src/layouts/default.scss
View file

@ -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;
}
}

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

@ -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;
}
.friendProfile .contactLinks {
padding: 15px;
margin: 0;
display: flex;
flex-direction: column;
}
.friendTitle {
margin-top: auto;
}
}
.contactLink {
transition: text-decoration .5s;
text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 25px;
color: $textColor;
}
.friendBio {
padding: 15px;
flex-grow: 1;
text-align: justify;
display: block;
padding-bottom: 0;
}
.contactLink > i {
color: $accentColor;
margin-left: -25px;
margin-right: 5px;
}
.contactLinks {
padding: 15px;
margin: 0;
display: flex;
flex-direction: column;
.friendProfile:hover {
transform: scale(1.05);
}
.contactLink {
transition: text-decoration .5s;
text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 25px;
color: $textColor;
.friendName {
font-size: 2em;
margin-top: -5px;
}
.friendTitle {
margin-top: auto;
> i {
color: $accentColor;
margin-left: -25px;
margin-right: 5px;
}
}
}
}
}

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

@ -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;
}
> div {
padding: 15px !important;
line-height: 15px;
font-size: 1.2em;
color: white;
.creditSection > div > span {
margin-left: auto;
margin-right: auto;
> span > i {
line-height: 15px !important;
}
}
}
.creditSection > div > i {
line-height: 15px !important;
}

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

@ -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;
}
&.activityIndicatorYellow {
background: #f7b731;
}
.activityIndicatorRed {
background: #fc5c65;
}
&.activityIndicatorRed {
background: #fc5c65;
}
.activityIndicatorBlue {
background: #45aaf2;
}
&.activityIndicatorBlue {
background: #45aaf2;
}
}
.projectCardImage {
display: block;
height: 150px;
background-position: center;
background-size: cover;
}
.projectCardImage {
display: block;
height: 150px;
background-position: center;
background-size: cover;
}
.projectCardMeta {
padding: 10px;
flex-grow: 1;
}
.projectCardMeta {
padding: 10px;
flex-grow: 1;
}
.projectCardTitle {
display: block;
font-size: 1.2em;
}
.projectCardTitle {
display: block;
font-size: 1.2em;
}
.projectCardCTA {
display: block;
}
.projectCardCTA {
display: block;
}
.projectCardCTA a {
display: block;
padding: 10px;
text-align: center;
background: var(--accent-color);
color: white;
text-decoration: none;
}
.projectCardCTA a {
@include buttonBasic;
}
.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;
}
}

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

@ -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;
}
}
}
}

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

@ -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);
.projectHeader .headerInner * {
margin: 0;
color: white;
}
.headerInner {
max-width: $layoutWidth;
width: 100%;
margin: 0 auto;
padding: 65px 20px 0;
.headerPlaceholder {
width: 100%;
height: 225px;
}
* {
margin: 0;
color: white;
}
.projectHeader .headerPlaceholder {
width: 100%;
height: 200px;
}
h1 {
font-size: 2em;
}
}
.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;
}
}
}