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

153 lines
3.4 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: .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: .15s ease-out;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
font-size: 90%;
top: -0.10em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
}
}
.anchor-tag {
font-size: 70%;
margin-left: 7px;
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;
height: 25px;
box-shadow: 0 1px 1px rgba(12,13,14,0.15),inset 0 1px 0 0 #fff;
display: inline-block;
line-height: 1.5px;
color: $dark;
text-shadow: 0 1px 0 #fff;
background-color: #e4e6e8;
border: 1px solid #9fa6ad;
border-radius: 3px;
cursor: pointer;
margin: 2px 0;
p {
padding: .2rem;
margin: .5rem .2rem;
color: $dark;
}
}