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

Run prettier

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-07-26 13:15:39 +00:00
parent 79b6120522
commit 839ea26e92
10 changed files with 875 additions and 870 deletions
Download patch file Download diff file Expand all files Collapse all files

201
src/_mixins.scss
View file

@ -1,100 +1,101 @@
@import "./variables";
@mixin flexList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@mixin cardGeneric {
border-radius: 5px;
overflow: hidden;
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, color 0.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.2),
-1px 11px 33px -10px rgba($accentColor, 0.75);
}
@media(prefers-color-scheme: light) {
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
background: $lightBackground;
color: $lightTextColor;
&:hover,
&:active,
&:focus {
transform: scale(1.05);
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.75);
}
}
}
@mixin buttonBasic {
display: block;
padding: 10px;
text-align: center;
background: $accentColor;
color: white;
text-decoration: none;
box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
transition: box-shadow 0.25s;
&:hover,
&:active,
&:hover {
box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
}
}
@mixin button {
@include buttonBasic;
border-radius: 5px;
}
@mixin homeBanner {
background: lighten($background, 1);
cursor: pointer;
display: block;
text-decoration: none;
color: inherit;
transition: background-color .25s, color .25s;
@media(prefers-color-scheme: light) {
background: darken($accentColor, 1);
}
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;
}
}
}
@import "./variables";
@mixin flexList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@mixin cardGeneric {
border-radius: 5px;
overflow: hidden;
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
color 0.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.2),
-1px 11px 33px -10px rgba($accentColor, 0.75);
}
@media (prefers-color-scheme: light) {
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
background: $lightBackground;
color: $lightTextColor;
&:hover,
&:active,
&:focus {
transform: scale(1.05);
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.75);
}
}
}
@mixin buttonBasic {
display: block;
padding: 10px;
text-align: center;
background: $accentColor;
color: white;
text-decoration: none;
box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
transition: box-shadow 0.25s;
&:hover,
&:active,
&:hover {
box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
}
}
@mixin button {
@include buttonBasic;
border-radius: 5px;
}
@mixin homeBanner {
background: lighten($background, 1);
cursor: pointer;
display: block;
text-decoration: none;
color: inherit;
transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: darken($accentColor, 1);
}
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;
}
}
}