reformat and correct footer link color

This commit is contained in:
Amolith 2022-10-10 16:55:54 -04:00
parent 4baeae0fcd
commit 47e2aa1cd5
Signed by: Amolith
GPG Key ID: 8AE30347CE28D101
1 changed files with 144 additions and 133 deletions

View File

@ -1,163 +1,174 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
font-family: Heliotrope; font-family: Heliotrope;
color: $dark; color: $dark;
background: $light; background: $light;
} }
hr { hr {
margin: 15px 0; margin: 15px 0;
border: 1px solid $dark; border: 1px solid $dark;
} }
code { code {
background: $button-background; background: $button-background;
border-radius: 3px; border-radius: 3px;
padding: 0 4px; padding: 0 4px;
} }
code, pre { code,
font-size: 16px; pre {
font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 16px;
color: $dark; font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
color: $dark;
} }
input { input {
font-family: inherit; font-family: inherit;
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 35px; height: 35px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 1px 1px rgba(12,13,14,0.15),inset 0 1px 0 0 #fff; box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff;
transition: .15s ease-out; transition: 0.15s ease-out;
} }
input[type=text] { input[type="text"] {
font-size: inherit; font-size: inherit;
color: $dark; color: $dark;
text-decoration: italic; text-decoration: italic;
border: 1px solid #9fa6ad; border: 1px solid #9fa6ad;
border-radius: 3px; border-radius: 3px;
} }
input[type=text]:focus { input[type="text"]:focus {
} }
.wrapper { .wrapper {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 18px;
line-height: 30px; line-height: 30px;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
-moz-hyphens: auto; -moz-hyphens: auto;
hyphens: auto; hyphens: auto;
text-align: left; text-align: left;
} }
.content { .content {
h2, p, li, td { h2,
a { p,
color: $dark; li,
text-decoration: none; td {
background-image: linear-gradient(120deg,$gradient-right 0%,$gradient-left 100%); a {
background-repeat: no-repeat; color: $dark;
background-size: 0 0; text-decoration: none;
background-position: 100% 21%; background-image: linear-gradient(
transition: .15s ease-out; 120deg,
&:hover { $gradient-right 0%,
background-size: 100% 100%; $gradient-left 100%
color: $light; );
&:after { background-repeat: no-repeat;
color: $gradient-right; background-size: 0 0;
} background-position: 100% 21%;
} transition: 0.15s ease-out;
&::after { &:hover {
position: relative; background-size: 100% 100%;
content: "\FEFF°"; color: $light;
margin-left: 0.10em; &:after {
font-size: 90%; color: $gradient-right;
top: -0.10em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
} }
} }
.anchor-tag { &::after {
font-size: 70%;
position: relative; position: relative;
bottom: 2.6px; content: "\FEFF°";
background-size: 100% 0; margin-left: 0.1em;
background-position: 0 150%; font-size: 90%;
&::after { top: -0.1em;
content: ""; color: $light-highlight;
} font-feature-settings: "caps";
font-variant-numeric: normal;
}
} }
.footnote-ref { }
background-size: 100% 1.5px; .anchor-tag {
background-position: 0 90%; font-size: 70%;
&::after { position: relative;
content: ""; bottom: 2.6px;
} background-size: 100% 0;
&:hover { background-position: 0 150%;
background-size: 100% 100%; &::after {
color: #fff; content: "";
}
} }
.footnote-backref { }
background-size: 100% 1.5px; .footnote-ref {
background-position: 0 90%; background-size: 100% 1.5px;
&::after { background-position: 0 90%;
content: ""; &::after {
} content: "";
&:hover {
background-size: 100% 100%;
color: #fff;
}
} }
.highlight { &:hover {
code { background-size: 100% 100%;
padding: 0px !important; color: #fff;
}
pre {
overflow: auto;
border-radius: 5px;
padding: 12px;
background: $button-background !important;
}
a {
background-image: none;
&::after {
content: "";
}
}
} }
}
.footnote-backref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: #fff;
}
}
.highlight {
code {
padding: 0px !important;
}
pre {
overflow: auto;
border-radius: 5px;
padding: 12px;
background: $button-background !important;
}
a {
background-image: none;
&::after {
content: "";
}
}
}
} }
.button { .button {
font-family: inherit; font-family: inherit;
font-style: normal !important; font-style: normal !important;
text-decoration: none !important; text-decoration: none !important;
height: 25px; height: 25px;
box-shadow: 0 1px 1px rgba(12,13,14,0.15),inset 0 1px 0 0 #fff; box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff;
display: inline-block; display: inline-block;
color: $dark; color: $dark;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
background-color: #e4e6e8; background-color: #e4e6e8;
border: 1px solid #9fa6ad; border: 1px solid #9fa6ad;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
padding: 0px 4px 4px; padding: 0px 4px 4px;
} }
.footer { .footer {
padding: 20px 0 20px 0; padding: 20px 0 20px 0;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
a:visited { a {
color: $dark; color: $dark;
} }
.ring { a:visited {
font-size: 20px; color: $dark;
} }
.boring_stuff { .ring {
font-style: italic; font-size: 20px;
} }
.boring_stuff {
font-style: italic;
}
} }