michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of color manipulations

Browse Source
This commit is contained in:
Michal Vanko 2021-05-02 22:13:00 +02:00
parent b4ffdef43d
commit 84ac7b011e
4 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Footer.svelte
View File

@ -118,7 +118,7 @@
.site-footer { .site-footer {
font-size: 0.9em; font-size: 0.9em;
padding: 2em 0.8em 0em; padding: 2em 0.8em 0em;
color: @menu-color; color: @menu-link-color;
background: radial-gradient( background: radial-gradient(
160% 100% at 100% 100%, 160% 100% at 100% 100%,
@ -144,7 +144,7 @@
font-weight: bold; font-weight: bold;
font-size: 1.15em; font-size: 1.15em;
text-shadow: inherit; text-shadow: inherit;
color: @menu-color; color: @menu-link-color;
margin: 0; margin: 0;
} }
@ -195,36 +195,36 @@
} }
.email :global(svg) { .email :global(svg) {
fill: #eae9be; fill: @menu-link-color;
} }
.twitter :global(svg) { .twitter :global(svg) {
stroke: #eae9be; stroke: @menu-link-color;
stroke-width: 2px; stroke-width: 2px;
fill: #eae9be; fill: @menu-link-color;
} }
.github :global(svg) { .github :global(svg) {
stroke: #eae9be; stroke: @menu-link-color;
stroke-width: 2px; stroke-width: 2px;
} }
.twitch :global(svg), .twitch :global(svg),
.twitch :global(svg rect) { .twitch :global(svg rect) {
/* fill: rgb(169, 112, 255); */ /* fill: rgb(169, 112, 255); */
fill: #eae9be; fill: @menu-link-color;
} }
.instagram :global(svg) { .instagram :global(svg) {
fill: #eae9be; fill: @menu-link-color;
} }
.rss :global(svg) { .rss :global(svg) {
fill: #eae9be; fill: @menu-link-color;
} }
.json-feed :global(svg) { .json-feed :global(svg) {
fill: #eae9be; fill: @menu-link-color;
} }
:global(.svg-icon) { :global(.svg-icon) {
@ -254,17 +254,25 @@
white-space: nowrap; white-space: nowrap;
} }
.latest-posts li a:visited:not(:hover) {
color: #a7a574;
}
.subscribe { .subscribe {
font-weight: bold; font-weight: bold;
} }
hr { hr {
color: fade(@menu-color, 14%); color: fade(@menu-link-color, 14%);
margin: 0.75em 0.2em; margin: 0.75em 0.2em;
border-width: 1px 0 0; border-width: 1px 0 0;
} }
a {
color: @menu-link-color;
&:hover {
color: @menu-link-hover-color;
}
}
.latest-posts li a:visited:not(:hover) {
color: @link-visited-color;
}
</style> </style>

4
src/components/Nav.svelte
View File

@ -35,7 +35,7 @@
<aside class="logo-section"> <aside class="logo-section">
<a class="logo" href="."> <a class="logo" href=".">
<img src="/m-logo.svg" alt="m logo" /> <img src="/m-logo.svg" alt="m logo" width="44px" height="44px" />
</a> </a>
</aside> </aside>
</section> </section>
@ -56,7 +56,7 @@
@import '../styles/variables.module.less'; @import '../styles/variables.module.less';
nav { nav {
padding: 0.5em 0.5em 2em; padding: 0.5em 0.5em 1em;
background: radial-gradient( background: radial-gradient(
120% 100% at 0% 0%, 120% 100% at 0% 0%,

31
src/styles/global.module.less
View File

@ -24,8 +24,8 @@ h5,
h6 { h6 {
margin: 1em 0 0.5em 0; margin: 1em 0 0.5em 0;
line-height: 1.2; line-height: 1.2;
text-shadow: 1px 1px 1px #c6c4b7; // text-shadow: 1px 1px 1px #c6c4b7;
color: #212138; color: @header-color;
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-weight: 500; font-weight: 500;
} }
@ -49,18 +49,25 @@ h4 {
} }
a { a {
color: #2e2ed9;
text-decoration: none; text-decoration: none;
transition: 0.2s; transition: color 2.2s;
}
a:visited { &:link {
color: #9a2ed9; color: @link-color;
} }
a:hover { &:visited {
color: #2e86d9; color: @link-visited-color;
text-decoration: underline; }
&:hover {
text-decoration: underline;
color: @link-hover-color;
}
&:visited:hover {
color: @link-visited-hover-color;
}
} }
code, code,
@ -110,7 +117,7 @@ blockquote {
margin: 0.2em; margin: 0.2em;
border-left: 2px solid #2d3935; //TODO border-left: 2px solid #2d3935; //TODO
padding: 0.2em 0.4em 0.2em 0.8em; padding: 0.2em 0.4em 0.2em 0.8em;
background: darken(@bg-color, 5%); background: darken(@bg-color, 3%, relative);
border-radius: 3px; border-radius: 3px;
box-shadow: 1px 1px 2px #d4dbdb; box-shadow: 1px 1px 2px #d4dbdb;
font-size: 0.9em; font-size: 0.9em;

19
src/styles/variables.module.less
View File

@ -4,17 +4,26 @@
@midnight-blue: #171664; @midnight-blue: #171664;
@french-violet: #7332c3; @french-violet: #7332c3;
@sacramento-green: #003d2d; @sacramento-green: #003d2d;
@rose-bonbon: #ff499e;
@article-text-color: @midnight-blue; @article-text-color: @midnight-blue;
@link-color: #127aff;
@link-hover-color: @tearkiss;
@link-visited-color: saturate(@french-violet, 30%, relative);
@link-visited-hover-color: lighten(@link-visited-color, 10%);
@nice-pink-color: spin(@link-visited-color, 50);
@menu-color: @sacramento-green; @menu-color: @sacramento-green;
@menu-link-color: @sacramento-green; @menu-link-color: #660066;
@menu-link-hover-color: lighten(@menu-link-color, 30%); @menu-link-hover-color: lighten(@menu-link-color, 10%);
@footer-visited-link-color: darken(@pinky, 70%); @header-color: darken(@french-violet, 35%, relative);
@bg-color: lighten(@light-cyan, 5%, relative); @footer-visited-link-color: darken(@pinky, 70%, relative);
@menu-bg-color: fade(@pinky, 67%);
@bg-color: tint(@light-cyan, 70%);
@menu-bg-color: fade(@pinky, 45%);
@media-l: 1000px; @media-l: 1000px;
@media-m: 700px; @media-m: 700px;