kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: refactor and rationalize typography

Browse source
This commit is contained in:
Kazhnuz 2019-10-18 09:57:05 +02:00
parent 75396c0b4c
commit 881106d947
13 changed files with 183 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
color-test.html
View file

@ -12,9 +12,9 @@
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<!-- framework utilisés -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="css/spectre.min.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">

234
css/style.css
View file

@ -169,85 +169,135 @@ blockquote, pre {
*
*/
/* 2.1 - Font Face */
/* 2.1.1 - OpenSans */
/* 2.1.1 - OpenSans
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Light-webfont.eot");
src: url("fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Light-webfont.woff2") format("woff2"), url("fonts/OpenSans-Light-webfont.woff") format("woff"), url("fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("fonts/OpenSans-Light-webfont.svg#open_sansbold") format("svg");
font-weight: 300;
font-style: normal;
font-family: 'OpenSans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-LightItalic-webfont.eot");
src: url("fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-LightItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-LightItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 300;
font-style: italic;
font-family: 'OpenSans';
src: url('fonts/OpenSans-LightItalic-webfont.eot');
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Regular-webfont.eot");
src: url("fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("fonts/OpenSans-Regular-webfont.woff") format("woff"), url("fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("fonts/OpenSans-Regular-webfont.svg#open_sansbold") format("svg");
font-weight: 400;
font-style: normal;
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Italic-webfont.eot");
src: url("fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("fonts/OpenSans-Italic-webfont.woff") format("woff"), url("fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("fonts/OpenSans-Italic-webfont.svg#open_sansbold") format("svg");
font-weight: 400;
font-style: italic;
font-family: 'OpenSans';
src: url('fonts/OpenSans-Italic-webfont.eot');
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Semibold-webfont.eot");
src: url("fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("fonts/OpenSans-Semibold-webfont.svg#open_sansbold") format("svg");
font-weight: 600;
font-style: normal;
font-family: 'OpenSans';
src: url('fonts/OpenSans-Semibold-webfont.eot');
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-SemiboldItalic-webfont.eot");
src: url("fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-SemiboldItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 600;
font-style: italic;
font-family: 'OpenSans';
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Bold-webfont.eot");
src: url("fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("fonts/OpenSans-Bold-webfont.woff") format("woff"), url("fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
font-weight: 700;
font-style: normal;
font-family: 'OpenSans';
src: url('fonts/OpenSans-Bold-webfont.eot');
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-BoldItalic-webfont.eot");
src: url("fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-BoldItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 700;
font-style: italic;
font-family: 'OpenSans';
src: url('fonts/OpenSans-BoldItalic-webfont.eot');
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-ExtraBold-webfont.eot");
src: url("fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-ExtraBold-webfont.woff2") format("woff2"), url("fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold") format("svg");
font-weight: 800;
font-style: normal;
font-family: 'OpenSans';
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-ExtraBoldItalic-webfont.eot");
src: url("fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-ExtraBoldItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 800;
font-style: italic;
}
font-family: 'OpenSans';
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: italic;
}*/
/* 2.2 - Global Typography */
body {
font-family: Work Sans, WorkSans, sans-serif;
font-family: Open Sans, sans-serif;
text-align: left;
font-size: 4.75mm;
line-height: 1.5rem;
color: #073642;
font-weight: 300;
font-weight: 400;
}
.night-mode {
@ -260,7 +310,7 @@ strong {
em {
font-style: italic;
font-weight: 300;
font-weight: 400;
}
a {
@ -307,7 +357,7 @@ ul li, ol li {
/* 2.2 - Text Wrapper */
.container-typographic p, .container-typographic em, .container-typographic p em {
font-weight: 300;
font-weight: 400;
}
.container-typographic img {
max-width: 100%;
@ -338,7 +388,7 @@ ul li, ol li {
/* 2.3 - Titles */
h1, h2, h3, h4, h5, h6, h7 {
font-family: Amatic SC;
font-family: Open Sans, sans-serif;
text-align: left;
font-size: 1em;
padding: 0;
@ -369,53 +419,53 @@ h1.page-title-flex > a:hover, h1.page-title-flex > a:focus, h1.page-title-flex >
}
h1 {
font-family: Amatic SC;
font-size: 3.33rem;
font-family: Amatic SC, sans-serif;
font-size: 3.815rem;
line-height: 4.5rem;
padding: 0;
padding-bottom: 1.5rem;
font-weight: 200;
font-weight: 300;
}
h2 {
font-family: Amatic SC;
font-size: 2.725rem;
font-family: Open Sans, sans-serif;
font-size: 2.441rem;
line-height: 3rem;
padding: 0;
padding-bottom: 1.5rem;
font-weight: 200;
font-weight: 300;
}
h3 {
font-family: Work Sans;
font-size: 2.23rem;
font-family: Open Sans, sans-serif;
font-size: 1.953rem;
line-height: 3rem;
padding: 0;
padding-bottom: 1.5rem;
font-weight: 500;
font-weight: 600;
}
h4 {
font-family: Work Sans;
font-size: 1.825rem;
font-family: Open Sans, sans-serif;
font-size: 1.563rem;
line-height: 3rem;
padding: 0;
padding-bottom: 1.5rem;
font-weight: 500;
font-weight: 800;
}
h5 {
font-family: Work Sans;
font-size: 1.439rem;
font-family: Open Sans, sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
padding: 0;
padding-bottom: 1.5rem;
font-weight: 500;
font-weight: 800;
}
h6 {
font-family: Work Sans;
font-size: 1.222rem;
font-family: Open Sans, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
padding: 0;
padding-bottom: 1.5rem;
@ -583,7 +633,7 @@ mark {
header h1 {
border-style: none !important;
color: #fdf6e3;
font-weight: 700;
font-weight: 800;
font-size: 5.4em;
font-style: oblique;
padding-bottom: 0px;
@ -686,7 +736,7 @@ ul.social li a:hover {
}
.card-header, .menu-header {
font-size: 1.1em;
font-weight: 600;
font-weight: 300;
border-radius: 0;
padding: 0.75rem;
padding-left: 0;
@ -711,12 +761,12 @@ ul.social li a:hover {
transform: skewX(-15deg);
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .menu-header h1, .menu-header h2, .menu-header h3, .menu-header h4, .menu-header h5, .menu-header h6, .menu-header h7, .menu-header h8, .menu-header h9, .menu-header h10 {
font-size: 1em;
font-size: 1rem;
padding: 0px;
margin: 0px;
color: #fdf6e3;
font-weight: 600;
line-height: 1.5em;
font-weight: 300;
line-height: 1.5rem;
}
.card-menu, .menu-menu {
display: flex;
@ -777,7 +827,7 @@ ul.social li a:hover {
.card-menu .menu-divider, .menu-menu .menu-divider {
position: relative;
left: -0.325rem;
font-weight: 600;
font-weight: 800;
padding-top: 0.325rem;
padding-bottom: 0.325rem;
}
@ -793,7 +843,7 @@ ul.social li a:hover {
}
.smallcard-header, .toast-header {
font-size: 1.1em;
font-weight: 600;
font-weight: 300;
border-radius: 0;
padding: 0.75rem;
padding-left: 0;
@ -818,12 +868,12 @@ ul.social li a:hover {
transform: skewX(-15deg);
}
.smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10, .toast-header h1, .toast-header h2, .toast-header h3, .toast-header h4, .toast-header h5, .toast-header h6, .toast-header h7, .toast-header h8, .toast-header h9, .toast-header h10 {
font-size: 1em;
font-size: 1rem;
padding: 0px;
margin: 0px;
color: #fdf6e3;
font-weight: 600;
line-height: 1.5em;
font-weight: 300;
line-height: 1.5rem;
}
/* COLORIZE CARDS and TOASTS */
@ -1074,6 +1124,7 @@ ul.social li a:hover {
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
font-weight: 400;
position: relative;
z-index: 1;
overflow: visible;
@ -1196,6 +1247,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
font-weight: 400;
position: relative;
z-index: 1;
overflow: visible;
@ -1625,14 +1677,14 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
color: #fdf6e3;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 200;
font-weight: 300;
}
.preview-item .preview-overlay .card-header {
font-family: Work Sans;
font-family: Open Sans, sans-serif;
font-size: 1rem;
background-color: #d33682;
font-size: 1.1em;
font-weight: 600;
font-weight: 300;
border-radius: 0;
padding: 0.375rem;
padding-left: 0;
@ -1645,7 +1697,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
position: relative;
z-index: 1;
overflow: visible;
font-weight: 200;
font-weight: 300;
}
.preview-item .preview-overlay .card-header:before {
content: " ";
@ -1658,12 +1710,12 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
transform: skewX(-15deg);
}
.preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 {
font-size: 1em;
font-size: 1rem;
padding: 0px;
margin: 0px;
color: #fdf6e3;
font-weight: 600;
line-height: 1.5em;
font-weight: 300;
line-height: 1.5rem;
}
.preview-item:hover .preview-overlay {
backdrop-filter: blur(2px);

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

4
index.html
View file

@ -12,9 +12,9 @@
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<!-- framework utilisés -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="css/spectre.min.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">

4
preview.html
View file

@ -12,9 +12,9 @@
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<!-- framework utilisés -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="css/spectre.min.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">

1
scss/_buttons.scss
View file

@ -22,6 +22,7 @@ $button_small: 0.375rem;
height:auto;
@include borders();
@include border-radius();
font-weight: $fontweight_base;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {

10
scss/_cards.scss
View file

@ -20,7 +20,7 @@ $card-smallpad: 0.75rem;
@mixin card-header($size) {
font-size:1.1em;
font-weight:600;
font-weight: $fontweight_big;
border-radius: 0;
padding: $size/2;
padding-left:0;
@ -36,12 +36,12 @@ $card-smallpad: 0.75rem;
@include biseau($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
font-size:1rem;
padding:0px;
margin:0px;
color:$color-light;
font-weight:600;
line-height:1.5em;
font-weight: $fontweight_big;
line-height:1.5rem;
}
}
@ -110,7 +110,7 @@ $card-smallpad: 0.75rem;
.menu-divider {
position: relative;
left: -0.325rem;
font-weight: 600;
font-weight: $fontweight_hyper;
padding-top:0.325rem;
padding-bottom:0.325rem;
}

6
scss/_commons.scss
View file

@ -80,15 +80,15 @@ $preview-height: 8*1.5rem;
color: $color-light;
font-size: 1rem;
line-height: 1.5rem;
font-weight:200;
font-weight:$fontweight_big;
}
.card-header {
font-family: Work Sans;
font-family: $basefont;
font-size: 1rem;
background-color: $color-primary;
@include card-header(0.75rem);
font-weight:200;
font-weight: $fontweight_big;
}
}

8
scss/_definitions.scss
View file

@ -7,6 +7,14 @@ $inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
$border-radius: 0px;
$border-size: 0px;
$fontweight_big: 300;
$fontweight_base: 400;
$fontweight_bold: 600;
$fontweight_hyper: 800;
$basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, sans-serif;
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}

7
scss/_font-face.scss
View file

@ -1,9 +1,6 @@
/* 2.1 - Font Face */
$basefont: Work Sans, WorkSans, sans-serif;
$titlefont: AmaticSC, Open Sans, sans-serif;
/* 2.1.1 - OpenSans */
/* 2.1.1 - OpenSans
@font-face {
font-family: 'OpenSans';
@ -123,4 +120,4 @@ $titlefont: AmaticSC, Open Sans, sans-serif;
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: italic;
}
}*/

2
scss/_global.scss
View file

@ -40,7 +40,7 @@
header h1 {
border-style:none !important;
color: $color-light;
font-weight:700;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding-bottom:0px;

24
scss/_typography.scss
View file

@ -26,7 +26,7 @@ body {
font-size: $base_fontsize;
line-height: $base_lineheight;
color: $color-font;
font-weight: 300;
font-weight: $fontweight_base;
}
.night-mode {
@ -34,12 +34,12 @@ body {
}
strong {
font-weight: 600;
font-weight: $fontweight_bold;
}
em {
font-style: italic;
font-weight: 300;
font-weight: $fontweight_base;
}
a {
@ -77,7 +77,7 @@ ul, ol {
.container-typographic {
p, em, p em {
font-weight:300;
font-weight:$fontweight_base;
}
img {
@ -124,12 +124,12 @@ ul, ol {
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: Amatic SC;
font-family: $basefont;
text-align: left;
font-size: 1em;
padding:0;
margin:0;
font-weight:400;
font-weight: $fontweight_base;
&.page-title {
color: $color-primary;
@ -160,28 +160,28 @@ h1, h2, h3, h4, h5, h6, h7 {
h1 {
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
@include newTitle(Amatic SC, 3.33, 200);
@include newTitle($titlefont, 3.815, $fontweight_big);
}
h2 {
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
@include newTitle(Amatic SC, 2.725, 200);
@include newTitle($basefont, 2.441, $fontweight_big);
}
h3 {
@include newTitle(Work Sans, 2.23, 500);
@include newTitle($basefont, 1.953, $fontweight_bold);
}
h4 {
@include newTitle(Work Sans, 1.825, 500);
@include newTitle($basefont, 1.563, $fontweight_hyper);
}
h5 {
@include newTitle(Work Sans, 1.439, 500);
@include newTitle($basefont, 1.25, $fontweight_bold);
}
h6 {
@include newTitle(Work Sans, 1.222, 800);
@include newTitle($basefont, 1, $fontweight_hyper);
}
/* 2.4 - hr */

2
writing-test.html
View file

@ -13,8 +13,8 @@
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="css/spectre.min.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">