This repository has been archived on 2024-04-03. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-wordpress-theme/scss/_typography.scss

317 lines
5.2 KiB
SCSS
Raw Normal View History

/*
* 2 - Typography ( _typography.scss )
2020-12-30 19:11:12 +01:00
*
* This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc.
*
*/
@import 'font-face';
/* 2.2 - Global Typography */
@mixin paragraph() {
padding:0;
2020-12-30 19:11:12 +01:00
padding-bottom: $lineheight;
margin: 0;
}
body {
2020-12-30 19:11:12 +01:00
font-family: $basefont;
text-align: left;
2020-12-30 19:11:12 +01:00
font-size: $fontsize;
line-height: $lineheight;
color: $color-font;
2020-12-30 19:11:12 +01:00
font-weight: $fontweight_base;
}
.night-mode {
2020-12-30 19:11:12 +01:00
color: $color-light2;
}
strong {
2020-12-30 19:11:12 +01:00
font-weight: $fontweight_bold;
}
em {
2020-12-30 19:11:12 +01:00
font-style: italic;
font-weight: $fontweight_base;
}
a {
color: $color-link;
text-decoration:none;
&:hover, &:active {
color: $color-link;
}
}
p {
@include paragraph();
&:last-child {
padding-bottom:0;
}
}
2020-12-30 19:11:12 +01:00
ul, ol {
@include paragraph();
2020-12-30 19:11:12 +01:00
list-style: disc;
ul, ol {
padding-bottom:0;
2020-12-30 19:11:12 +01:00
margin:0;
}
li {
2020-12-30 19:11:12 +01:00
margin:0;
margin-left: $lineheight;
line-height: $lineheight;
}
}
2020-12-30 19:11:12 +01:00
::selection { background: $color-selection; color: $color-light; }
::-moz-selection { background: $color-selection; color: $color-light; }
/* 2.2 - Text Wrapper */
2020-12-30 19:11:12 +01:00
.container-typographic {
p {
padding:0;
margin:0;
text-indent: 3rem;
}
p, em, p em {
2020-12-30 19:11:12 +01:00
font-weight:$fontweight_base;
}
2020-12-30 19:11:12 +01:00
img {
max-width: 100%;
height: auto;
}
2020-12-30 19:11:12 +01:00
.article-thumbnail {
padding-bottom: 1em;
text-align: center;
img {
max-width: 100%;
height: auto;
2020-12-30 19:11:12 +01:00
}
}
.article-excerpt {
padding: 0.5em 0.5em 0.5em 0.5em;
font-style: italic;
}
.article-author {
margin:0;
padding:0;
.card-meta {
margin:0;
}
}
2020-12-30 19:11:12 +01:00
.bypass-flex-fontsize {
2020-12-30 19:11:12 +01:00
line-height: $lineheight;
}
}
2020-12-30 19:11:12 +01:00
article.maintext {
padding-bottom: $lineheight;
}
/* 2.3 - Titles */
2020-12-30 19:11:12 +01:00
@mixin newTitle($font, $size, $weight) {
$lineNumber: ceil($size / 1.5);
font-family: $font;
font-size: $size * 1rem;
line-height: $lineNumber * $lineheight;
padding: 0;
padding-bottom: $lineheight;
font-weight: $weight;
}
h1, h2, h3, h4, h5, h6, h7 {
2020-12-30 19:11:12 +01:00
font-family: $basefont;
text-align: left;
2020-12-30 19:11:12 +01:00
font-size: 1em;
padding:0;
margin:0;
2020-12-30 19:11:12 +01:00
font-weight: $fontweight_base;
&.page-title {
color: $color-primary;
2020-12-30 19:11:12 +01:00
i {
font-size: 0.55em;
position: relative;
top: -0.175em;
}
2020-12-30 19:11:12 +01:00
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span, & > i, & > a {
display: block;
}
2020-12-30 19:11:12 +01:00
& > a {
color: $color-primary;
&:hover, &:focus, &:active {
color: darken($color-primary, 10%);
}
}
}
}
}
h1 {
2020-12-30 19:11:12 +01:00
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
@include newTitle($titlefont, 3.815, $fontweight_big);
color: $color-primary;
}
h2 {
2020-12-30 19:11:12 +01:00
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
@include newTitle($basefont, 2.441, $fontweight_big);
}
h3 {
2020-12-30 19:11:12 +01:00
@include newTitle($basefont, 1.953, $fontweight_bold);
}
h4 {
2020-12-30 19:11:12 +01:00
@include newTitle($basefont, 1.563, $fontweight_hyper);
}
h5 {
2020-12-30 19:11:12 +01:00
@include newTitle($basefont, 1.25, $fontweight_bold);
}
h6 {
2020-12-30 19:11:12 +01:00
@include newTitle($basefont, 1, $fontweight_hyper);
}
/* 2.4 - hr */
hr {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: rgba(1,1,1,0.15);
border-style: solid;
margin: 1.5em;
}
/* 2.5 - Wells and quotes */
@mixin well() {
2020-12-30 19:11:12 +01:00
border-width: 0 0 0 0em;
border-style: none;
border-radius: 0px;
margin: 0 0 $lineheight 0;
padding: $lineheight 1rem $lineheight 1rem;
max-width: 100%;
background-color: $color-light2;
font-style: italic;
color: $color-dark2;
}
2020-12-30 19:11:12 +01:00
blockquote, .quote {
@include well();
2020-12-30 19:11:12 +01:00
&:before {
content:"";
}
}
2020-12-30 19:11:12 +01:00
.well, pre, .pre, .well-pre {
@include well();
2020-12-30 19:11:12 +01:00
}
code {
background:transparent;
color: $color-red;
}
.container-typographic {
max-width: 800px;
margin:auto;
margin-bottom: 3rem;
}
/* 2.6 - Special styling */
mark {
border-radius: 0.2em;
padding:0 0.2em 0 0.2em;
2020-12-30 19:11:12 +01:00
background-color: lighten($color-mark, 30%);
color: inherit;
}
.night-mode mark {
background-color: $color-primary;
}
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
}
2020-12-30 19:11:12 +01:00
/* Table elements */
@mixin table-color($text-color) {
th {
color: $text-color;
}
}
table {
border-collapse: collapse;
}
table, th, td {
border: 0;
padding:0px;
margin:0px;
}
th, td {
vertical-align:center;
padding-top: 0.325em;
padding-bottom: 0.325em;
}
th {
font-weight: $fontweight_hyper;
}
.table {
&-blue { @include table-color($color-blue); }
&-violet { @include table-color($color-violet); }
&-red { @include table-color($color-red); }
&-orange { @include table-color($color-orange); }
&-green { @include table-color($color-green); }
&-skyblue { @include table-color($color-skyblue); }
&-dark { @include table-color($color-dark); }
&-light { @include table-color($color-light); }
&-yellow { @include table-color($color-yellow); }
&-grey { @include table-color($color-grey); }
&-primary { @include table-color($color-primary); }
&-secondary { @include table-color($color-secondary); }
&-warning { @include table-color($color-warning); }
&-danger { @include table-color($color-danger); }
&-info { @include table-color($color-info); }
&-success { @include table-color($color-success); }
}