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/scss/_typography.scss

294 lines
5.1 KiB
SCSS
Raw Normal View History

2019-10-15 16:43:25 +02:00
/*
* 2 - Typography ( _typography.scss )
*
* This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc.
*
*/
@import 'font-face';
/* 2.2 - Global Typography */
$baseline: 1.5;
$base_lineheight: $baseline * 1rem;
$base_fontsize: 4.75mm;
2019-10-15 16:43:25 +02:00
@mixin paragraph() {
padding:0;
padding-bottom: $base_lineheight;
2019-10-15 16:43:25 +02:00
margin: 0;
}
body {
font-family: $basefont;
text-align: left;
font-size: $base_fontsize;
line-height: $base_lineheight;
2019-10-15 16:43:25 +02:00
color: $color-font;
font-weight: 300;
&, #wrapper {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.25) 0, rgba(255, 255, 255, 0) 1px);
background-repeat: repeat-y;
background-size: 100% 1.5rem;}
2019-10-15 16:43:25 +02:00
}
.night-mode {
color: $color-light2;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
font-weight: 300;
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: $base_lineheight;
line-height: $base_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:300;
}
img {
max-width: 100%;
height: auto;
}
.article-thumbnail {
padding-bottom: 1em;
text-align: center;
img {
max-width: 100%;
height: auto;
}
}
.article-excerpt {
padding: 0.5em 0.5em 0.5em 0.5em;
font-style: italic;
}
.article-author {
margin:0;
padding:0;
.card-meta {
margin:0;
}
}
.bypass-flex-fontsize {
line-height: $base_lineheight;
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 * 1.5rem;
padding: 0;
padding-bottom: 1.5rem;
font-weight: $weight;
2019-10-15 16:43:25 +02:00
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: Amatic SC;
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:400;
&.page-title {
color: $color-primary;
i {
font-size: 0.55em;
position: relative;
top: -0.175em;
}
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span, & > i, & > a {
display: block;
}
& > 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(Amatic SC, 3.33, 200);
2019-10-15 16:43:25 +02:00
}
h2 {
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
@include newTitle(Amatic SC, 2.725, 200);
2019-10-15 16:43:25 +02:00
}
h3 {
@include newTitle(Work Sans, 2.23, 500);
2019-10-15 16:43:25 +02:00
}
h4 {
@include newTitle(Work Sans, 1.825, 500);
2019-10-15 16:43:25 +02:00
}
h5 {
@include newTitle(Work Sans, 1.439, 500);
2019-10-15 16:43:25 +02:00
}
h6 {
@include newTitle(Work Sans, 1.222, 800);
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 1.5rem 0;
padding: 1.5rem 1rem 1.5rem 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;
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); }
&-grey { @include text-color($color-grey); }
&-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); }
}