192 lines
3 KiB
SCSS
192 lines
3 KiB
SCSS
@mixin paragraph() {
|
|
padding:0;
|
|
padding-bottom: $lineheight;
|
|
margin: 0;
|
|
}
|
|
|
|
:root {
|
|
@include accent-color($color-primary);
|
|
--text-color:#{$color-font};
|
|
--link-color-hover:#{transparentize($color-font, 0.85)};
|
|
--link-color:#{darken($color-link, 10%)};
|
|
}
|
|
|
|
// html, body {
|
|
// font-family: $basefont;
|
|
// text-align: left;
|
|
// font-size: $fontsize;
|
|
// line-height: $lineheight;
|
|
// color: getFontColor();
|
|
// font-weight: $fontweight_base;
|
|
// }
|
|
|
|
strong {
|
|
font-weight: $fontweight_bold;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
font-weight: $fontweight_base;
|
|
}
|
|
|
|
mark {
|
|
padding: 0.05rem 0.25rem;
|
|
border-radius: 0.1rem;
|
|
}
|
|
|
|
img {
|
|
border-style: none;
|
|
article & {
|
|
max-width:100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
outline-color: $color-link;
|
|
padding: 0.05rem;
|
|
border-radius: 0.1rem;
|
|
text-decoration: underline dashed 1px;
|
|
text-underline-offset: 0.1rem;
|
|
|
|
&:visited {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
&:hover, &:active {
|
|
background-color: var(--link-color-hover);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
a:focus-visible, input:focus-visible {
|
|
outline-style: dashed;
|
|
outline-width: 2px;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
mark {
|
|
background-color: lighten($color-mark, 30%);
|
|
color: inherit;
|
|
}
|
|
|
|
p, ul, ol {
|
|
@include paragraph();
|
|
&:last-child {
|
|
padding-bottom:0;
|
|
}
|
|
}
|
|
|
|
ul, ol {
|
|
list-style: disc;
|
|
ul, ol {
|
|
padding-bottom:0;
|
|
margin:0;
|
|
}
|
|
li {
|
|
margin:0;
|
|
margin-left: $lineheight;
|
|
line-height: $lineheight;
|
|
}
|
|
|
|
&.nolist {
|
|
display:inline;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
::selection, ::-moz-selection {
|
|
@include background-color($color-selection);
|
|
}
|
|
|
|
@mixin newTitle($size, $weight) {
|
|
$lineNumber: ceil($size / 1.5);
|
|
font-size: $size * 1rem;
|
|
line-height: $lineNumber * $lineheight;
|
|
font-weight: $weight;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, h7 {
|
|
font-family: $basefont;
|
|
text-align: left;
|
|
font-size: 1em;
|
|
padding:0;
|
|
margin:0;
|
|
font-weight: $fontweight_base;
|
|
padding-bottom: $lineheight;
|
|
a {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
sup, sub {
|
|
& > a {
|
|
color: $color-link;
|
|
background-color:transparent;
|
|
&:hover, &:focus, &:active {
|
|
color: darken($color-link, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
h1, .title-1, .main-title,
|
|
.page-title {
|
|
font-family: $titlefont;
|
|
@include newTitle(3, $fontweight_hyper);
|
|
color: $color-primary;
|
|
letter-spacing: -3px;
|
|
font-style: italic;
|
|
}
|
|
|
|
h2, .title-2 {
|
|
@include newTitle(2.441, $fontweight_big);
|
|
}
|
|
|
|
h3, .title-3 {
|
|
@include newTitle(1.953, $fontweight_bold);
|
|
}
|
|
|
|
h4, .title-4 {
|
|
@include newTitle(1.563, $fontweight_hyper);
|
|
}
|
|
|
|
h5, .title-5 {
|
|
@include newTitle(1.25, $fontweight_bold);
|
|
}
|
|
|
|
h6, .title-6 {
|
|
@include newTitle(1, $fontweight_hyper);
|
|
}
|
|
|
|
hr {
|
|
border: 0px solid rgba(1, 1, 1, 0.15);
|
|
border-bottom: 1px;
|
|
margin: 1.5em;
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
pre {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.small-text, small {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.time {
|
|
font-style: italic;
|
|
text-align: right;
|
|
width: 100%;
|
|
display: block;
|
|
}
|