secluded/themes/secluded/assets/scss/_main.scss

175 lines
3.2 KiB
SCSS

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