franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

add more colors, style main text links
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Florian Sorg 2020-12-17 20:33:07 +01:00
parent f81e13bb2f
commit 3205670bbb
2 changed files with 106 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/_colors.scss
View File

@ -3,4 +3,18 @@ $fill-color: #eeeeee;
$text-color: #ffffff;
$text-darker: #aaaaaa;
$highlight: #05b9ec;
$primary-1: #b239ff;
$primary-2: #670295;
$primary-3: #440069;
$primary-4: #240038;
$secondary-1: #6800e7;
$secondary-2: #41008b;
$secondary-3: #2a005e;
$secondary-4: #14002f;
$highlight-1: #05b9ec;
$highlight-2: #0076a9;
$highlight-3: #025d84;
$highlight-4: #002a3a;

92
assets/style.scss
View File

@ -3,6 +3,69 @@
@import 'fonts';
@import 'mixins';
@keyframes cycle-link-background {
0% {
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-1 10%, $highlight-1 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-3 30%, $highlight-3 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-3 70%, $highlight-3 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-2 90%,
);
}
25% {
background-image: linear-gradient(
to right,
$highlight-2 0%, $highlight-2 10%,
$highlight-3 10%, $highlight-3 20%,
$highlight-1 20%, $highlight-1 30%,
$highlight-2 30%, $highlight-2 40%,
$highlight-3 40%, $highlight-3 50%,
$highlight-1 50%, $highlight-1 60%,
$highlight-2 60%, $highlight-2 70%,
$highlight-1 70%, $highlight-1 80%,
$highlight-3 80%, $highlight-3 90%,
$highlight-1 90%
);
}
50% {
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-2 10%, $highlight-2 20%,
$highlight-3 20%, $highlight-3 30%,
$highlight-1 30%, $highlight-1 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-2 70%, $highlight-2 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-3 90%
);
}
75% {
background-image: linear-gradient(
to right,
$highlight-1 0%, $highlight-1 10%,
$highlight-3 10%, $highlight-3 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-1 30%, $highlight-1 40%,
$highlight-3 40%, $highlight-3 50%,
$highlight-1 50%, $highlight-1 60%,
$highlight-2 60%, $highlight-2 70%,
$highlight-1 70%, $highlight-1 80%,
$highlight-2 80%, $highlight-2 90%,
$highlight-3 90%
);
}
}
* {
font-family: Montserrat, sans-serif;
color: $text-color;
@ -70,6 +133,33 @@ h1 {
border-bottom: 2px $text-color solid;
}
main {
a {
text-decoration: none;
color: $highlight-1;
text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
background: repeat-x left bottom / 10em 0.15em;
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-1 10%, $highlight-1 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-3 30%, $highlight-3 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-3 70%, $highlight-3 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-2 90%, $highlight-2 100%
);
&:hover, &:focus {
animation: cycle-link-background 2s steps(4) infinite 0ms;
}
}
}
figure {
margin: 1rem 0;
@ -149,7 +239,7 @@ iframe {
padding: 0.5em;
&.nav-link-active {
color: $highlight;
color: $highlight-1;
}
}