erin
/
website
1
1
Fork 0
Code Issues Pull Requests Releases Activity

Switch to Catppuccin theme

This commit is contained in:
~erin 2022-04-19 18:37:14 -04:00
parent 54f054fb45
commit 0190c1de90
No known key found for this signature in database
GPG Key ID: DA70E064A8C70F44
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_scss/_base.scss
View File

@ -17,8 +17,8 @@ html {
.section { .section {
border-radius: 35px; border-radius: 35px;
background: $background-color; background: $background-color;
box-shadow: 5px 5px 17px #060606, box-shadow: 5px 5px 17px scale-color($background-color, $lightness: -35%),
-5px -5px 17px #16161a; -5px -5px 17px scale-color($background-color, $lightness: +5%);
max-width: 20cm; max-width: 20cm;
margin: 0 auto; margin: 0 auto;
} }

32
_scss/_formatting.scss
View File

@ -15,31 +15,37 @@
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
border-radius: 10px; border-radius: 10px;
background: $background-color; background: $background-color;
box-shadow: 5px 5px 10px #060606, box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px #16161a; -5px -5px 10px scale-color($background-color, $lightness: +5%);
&:hover { &:hover {
background: linear-gradient(145deg, #0f0f11, #0d0d0e); background: linear-gradient(145deg,
box-shadow: 5px 5px 10px #060606, scale-color($background-color, $lightness: -35%),
-5px -5px 10px #16161a; scale-color($background-color, $lightness: +5%));
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
} }
&:active { &:active {
background: linear-gradient(145deg, #0d0d0e, #0f0f11); background: linear-gradient(145deg,
box-shadow: 5px 5px 10px #060606, scale-color($background-color, $lightness: -35%),
-5px -5px 10px #16161a; scale-color($background-color, $lightness: +5%));
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
} }
} }
a { a {
color: $light-color; color: $accent-color;
} }
a:visited { a:visited {
color: scale-color($light-color, $lightness: -15%); color: $light-color;
} }
ul, ol { ul, ol {
color: scale-color($foreground-color, $lightness: -20%); color: #C3BAC6;
} }
blockquote { blockquote {
@ -83,8 +89,8 @@ code, pre {
padding: 10px; padding: 10px;
background: $background-color !important; background: $background-color !important;
box-shadow: inset 5px 5px 10px #070708, box-shadow: inset 5px 5px 10px scale-color($background-color, $lightness: -35%),
inset -5px -5px 10px #151518; inset -5px -5px 10px scale-color($background-color, $lightness: +5%);
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
display: inline-block; display: inline-block;
max-width: 18cm; max-width: 18cm;

9
style.scss
View File

@ -1,7 +1,6 @@
$background-color: #0E0E10; $background-color: #161320;
$foreground-color: #F9F8F8; $foreground-color: #D9E0EE;
$light-color: #E2ADF2; $light-color: #F5C2E7;
$dark-color: #2A1E5C; $accent-color: #F2CDCD;
$accent-color: #EE4266;
@import '_scss/base', '_scss/formatting', '_scss/navigation', '_scss/footer', '_scss/image'; @import '_scss/base', '_scss/formatting', '_scss/navigation', '_scss/footer', '_scss/image';