191 lines
3.0 KiB
SCSS
191 lines
3.0 KiB
SCSS
/* 0.3 - Typography
|
|
* This part of the (s)css handle everything related to the typography
|
|
* like paragraphs, blockquote, etc.
|
|
**/
|
|
|
|
/* 2.2 - Global Typography */
|
|
|
|
@mixin paragraph() {
|
|
padding:0;
|
|
padding-bottom: $lineheight;
|
|
margin: 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
a, a:visited, mark {
|
|
text-decoration: none;
|
|
padding: 0.05rem 0.25rem;
|
|
border-radius: 0.1rem;
|
|
}
|
|
|
|
a, a:visited {
|
|
@include background-color($color-link);
|
|
&:hover, &:active, &:focus {
|
|
color: $color-link;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:focus {
|
|
outline-color: currentColor;
|
|
outline-style: dashed;
|
|
outline-width: 2px;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
::selection, ::-moz-selection {
|
|
@include background-color($color-selection);
|
|
}
|
|
|
|
/* 2.3 - Titles */
|
|
|
|
@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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/* 2.4 - hr */
|
|
|
|
hr {
|
|
border: 0px solid rgba(1, 1, 1, 0.15);
|
|
border-bottom: 1px;
|
|
margin: 1.5em;
|
|
}
|
|
|
|
/* 2.5 - Wells and quotes */
|
|
|
|
@mixin well() {
|
|
border: 0;
|
|
border-radius: $well-radius;
|
|
|
|
margin: 0 0 $lineheight 0;
|
|
padding: $lineheight 1rem $lineheight 1rem;
|
|
|
|
max-width: 100%;
|
|
font-style: italic;
|
|
@include background-color($color-background-alt);
|
|
box-shadow: $narrow-shadow;
|
|
}
|
|
|
|
blockquote, .quote {
|
|
&:before {
|
|
content:"";
|
|
}
|
|
}
|
|
|
|
blockquote, .quote, .well, pre, .pre, .well-pre {
|
|
@include well();
|
|
}
|
|
|
|
code {
|
|
background:transparent;
|
|
color: $color-danger;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* 2.6 - Special styling */
|
|
|
|
.time {
|
|
font-style: italic;
|
|
text-align: right;
|
|
width: 100%;
|
|
display: block;
|
|
}
|