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

4
src/components/Nav.svelte
View File

@ -35,7 +35,7 @@
<aside class="logo-section">
<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>
</aside>
</section>
@ -56,7 +56,7 @@
@import '../styles/variables.module.less';
nav {
padding: 0.5em 0.5em 2em;
padding: 0.5em 0.5em 1em;
background: radial-gradient(
120% 100% at 0% 0%,

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

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

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

@ -4,17 +4,26 @@
@midnight-blue: #171664;
@french-violet: #7332c3;
@sacramento-green: #003d2d;
@rose-bonbon: #ff499e;
@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-link-color: @sacramento-green;
@menu-link-hover-color: lighten(@menu-link-color, 30%);
@menu-link-color: #660066;
@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);
@menu-bg-color: fade(@pinky, 67%);
@footer-visited-link-color: darken(@pinky, 70%, relative);
@bg-color: tint(@light-cyan, 70%);
@menu-bg-color: fade(@pinky, 45%);
@media-l: 1000px;
@media-m: 700px;