This repository has been archived on 2022-11-21. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-static/src/scss/_typography.scss

341 lines
6.3 KiB
SCSS
Raw Normal View History

2019-10-15 16:43:25 +02:00
/*
* 2 - Typography ( _typography.scss )
2019-12-07 15:58:08 +01:00
*
2019-10-15 16:43:25 +02: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;
padding-bottom: $lineheight;
2019-10-15 16:43:25 +02:00
margin: 0;
}
body {
font-family: $basefont;
text-align: left;
font-size: $fontsize;
line-height: $lineheight;
2019-10-15 16:43:25 +02:00
color: $color-font;
font-weight: $fontweight_base;
2019-10-15 16:43:25 +02:00
}
.night-mode {
color: $color-light2;
}
strong {
font-weight: $fontweight_bold;
2019-10-15 16:43:25 +02:00
}
em {
font-style: italic;
font-weight: $fontweight_base;
2019-10-15 16:43:25 +02:00
}
a {
color: $color-link;
text-decoration:none;
&:hover, &:active {
color: $color-link;
}
}
p {
@include paragraph();
&:last-child {
padding-bottom:0;
}
}
ul, ol {
2019-10-15 16:43:25 +02:00
@include paragraph();
ul, ol {
2019-10-15 16:43:25 +02:00
padding-bottom:0;
margin:0;
2019-10-15 16:43:25 +02:00
}
li {
margin:0;
margin-left: $lineheight;
line-height: $lineheight;
2019-10-15 16:43:25 +02:00
}
}
::selection { background: $color-selection; color: $color-light; }
::-moz-selection { background: $color-selection; color: $color-light; }
/* 2.2 - Text Wrapper */
.container-typographic {
2019-10-15 16:43:25 +02:00
p, em, p em {
font-weight:$fontweight_base;
2019-10-15 16:43:25 +02:00
}
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02:00
img {
max-width: 100%;
height: auto;
}
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02:00
.article-thumbnail {
padding-bottom: 1em;
text-align: center;
img {
max-width: 100%;
height: auto;
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02: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;
}
}
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02:00
.bypass-flex-fontsize {
line-height: $lineheight;
2019-10-15 16:43:25 +02:00
}
}
2019-10-18 13:41:02 +02:00
article.maintext {
padding-bottom: $lineheight;
2019-10-18 13:41:02 +02:00
}
2019-10-15 16:43:25 +02:00
/* 2.3 - Titles */
@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;
2019-10-15 16:43:25 +02:00
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: $basefont;
2019-10-15 16:43:25 +02:00
text-align: left;
font-size: 1em;
2019-10-15 16:43:25 +02:00
padding:0;
margin:0;
font-weight: $fontweight_base;
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02:00
&.page-title {
color: $color-primary;
i {
font-size: 0.55em;
position: relative;
top: -0.175em;
}
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02:00
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span, & > i, & > a {
display: block;
}
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02:00
& > a {
color: $color-primary;
&:hover, &:focus, &:active {
color: darken($color-primary, 10%);
}
}
}
}
}
h1 {
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
@include newTitle($titlefont, 3.815, $fontweight_big);
color: $color-primary;
2019-10-15 16:43:25 +02:00
}
h2 {
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
@include newTitle($basefont, 2.441, $fontweight_big);
2019-10-15 16:43:25 +02:00
}
h3 {
@include newTitle($basefont, 1.953, $fontweight_bold);
2019-10-15 16:43:25 +02:00
}
h4 {
@include newTitle($basefont, 1.563, $fontweight_hyper);
2019-10-15 16:43:25 +02:00
}
h5 {
@include newTitle($basefont, 1.25, $fontweight_bold);
2019-10-15 16:43:25 +02:00
}
h6 {
@include newTitle($basefont, 1, $fontweight_hyper);
2019-10-15 16:43:25 +02:00
}
/* 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() {
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;
2019-10-15 16:43:25 +02:00
}
blockquote, .quote {
2019-10-15 16:43:25 +02:00
@include well();
&:before {
content:"";
}
2019-10-15 16:43:25 +02:00
}
.well, pre, .pre, .well-pre {
2019-10-15 16:43:25 +02:00
@include well();
}
2019-10-15 16:43:25 +02:00
code {
background:transparent;
color: $color-red;
}
.container-typographic {
max-width: 800px;
margin:auto;
2019-10-15 16:43:25 +02:00
}
/* 2.6 - Special styling */
mark {
border-radius: 0.2em;
padding:0 0.2em 0 0.2em;
2019-12-07 15:58:08 +01:00
2019-10-15 16:43:25 +02: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;
}
/* 2.6.1 - Colored texts */
@mixin text-color($text-color) {
color: $text-color;
}
.text {
&-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); }
&-purple { @include text-color($color-purple); }
&-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); }
&-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); }
2019-12-07 15:58:08 +01:00
&-grey { @include text-color($color-grey); }
2019-10-15 16:43:25 +02:00
&-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); }
&-success { @include text-color($color-success); }
}
2019-10-18 13:41:02 +02:00
/* Table elements */
@mixin table-color($text-color) {
th {
color: $text-color;
}
}
2019-10-18 15:26:26 +02:00
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;
}
2019-10-18 13:41:02 +02:00
th {
font-weight: $fontweight_hyper;
}
.table {
&-blue { @include table-color($color-blue); }
&-violet { @include table-color($color-violet); }
&-purple { @include table-color($color-purple); }
&-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); }
&-turquoise { @include table-color($color-turquoise); }
&-yellow { @include table-color($color-yellow); }
&-brown { @include table-color($color-brown); }
2019-12-07 15:58:08 +01:00
&-grey { @include table-color($color-grey); }
2019-10-18 13:41:02 +02:00
&-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); }
2019-12-07 15:58:08 +01:00
}