kspace-bludit-theme/scss/core/_typography.scss

193 lines
3 KiB
SCSS
Raw Permalink Normal View History

2024-04-10 20:58:16 +02:00
@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;
}