qdouze-bludit-theme/scss/core/_typography.scss
2024-04-10 20:54:20 +02:00

179 lines
No EOL
2.8 KiB
SCSS
Executable file

@mixin paragraph() {
padding:0;
padding-bottom: $lineheight;
margin: 0;
}
:root {
@include accent-color($color-primary, get-color-light("primary"));
--text-color:#{$color-font};
--link-color-hover:#{transparentize($color-font, 0.85)};
--link-color:#{darken($color-link, 10%)};
}
strong {
font-weight: $fontweight_bold;
}
em {
font-style: italic;
font-weight: $fontweight_base;
}
mark {
padding: 0.05rem 0.25rem;
border-radius: 0.1rem;
}
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%);
}
}
}
.main-title {
font-family: $titlefont;
@include newTitle(3.815, $fontweight_hyper);
}
h1, .title-1 {
font-family: $titlefont;
@include newTitle(2.441, $fontweight_hyper);
color: $color-primary;
}
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;
}