105 lines
1.8 KiB
SCSS
105 lines
1.8 KiB
SCSS
@use "everforest";
|
|
|
|
/// Stole this from Stack Overflow (https://stackoverflow.com/a/54702294) {{{
|
|
|
|
.rainbow_text_animated {
|
|
background: linear-gradient(to right, everforest.$red, everforest.$orange, everforest.$yellow, everforest.$green, everforest.$blue, everforest.$purple);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
animation: rainbow_animation 1s ease-in-out infinite;
|
|
background-size: 600% 100%;
|
|
}
|
|
|
|
@keyframes rainbow_animation {
|
|
0%,100% {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 0;
|
|
}
|
|
}
|
|
|
|
/// }}}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
background-color: everforest.$bg0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
color: everforest.$fg;
|
|
background-color: everforest.$bg1;
|
|
margin: 0 auto;
|
|
max-width: 800px;
|
|
padding: 10px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
a {
|
|
color: everforest.$blue;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 720px;
|
|
}
|
|
|
|
pre {
|
|
padding: 1rem;
|
|
overflow: auto;
|
|
}
|
|
/* The line numbers already provide some kind of left/right padding */
|
|
pre[data-linenos] {
|
|
padding: 1rem 0;
|
|
}
|
|
pre table td {
|
|
padding: 0;
|
|
}
|
|
/* The line number cells */
|
|
pre table td:nth-of-type(1) {
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
pre mark {
|
|
/* If you want your highlights to take the full width */
|
|
display: block;
|
|
/* The default background colour of a mark is bright yellow */
|
|
background-color: rgba(254, 252, 232, 0.9);
|
|
}
|
|
pre table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.wip-indicator {
|
|
color: everforest.$yellow;
|
|
}
|
|
|
|
.langcolor {
|
|
&-rust {
|
|
color: everforest.$orange;
|
|
}
|
|
&-sass {
|
|
color: everforest.$red;
|
|
}
|
|
&-jsx {
|
|
color: everforest.$blue;
|
|
}
|
|
&-python {
|
|
color: everforest.$yellow;
|
|
}
|
|
&-c {
|
|
color: everforest.$blue;
|
|
}
|
|
}
|
|
|
|
.coverimage {
|
|
max-width: 256px;
|
|
}
|