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

4
preview.html
View file

@ -12,9 +12,9 @@
<!-- mon icon --> <!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png"> <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=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/spectre.min.css" rel="stylesheet">
<link href="css/fork-awesome.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; height:auto;
@include borders(); @include borders();
@include border-radius(); @include border-radius();
font-weight: $fontweight_base;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { &: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) { @mixin card-header($size) {
font-size:1.1em; font-size:1.1em;
font-weight:600; font-weight: $fontweight_big;
border-radius: 0; border-radius: 0;
padding: $size/2; padding: $size/2;
padding-left:0; padding-left:0;
@ -36,12 +36,12 @@ $card-smallpad: 0.75rem;
@include biseau($size); @include biseau($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em; font-size:1rem;
padding:0px; padding:0px;
margin:0px; margin:0px;
color:$color-light; color:$color-light;
font-weight:600; font-weight: $fontweight_big;
line-height:1.5em; line-height:1.5rem;
} }
} }
@ -110,7 +110,7 @@ $card-smallpad: 0.75rem;
.menu-divider { .menu-divider {
position: relative; position: relative;
left: -0.325rem; left: -0.325rem;
font-weight: 600; font-weight: $fontweight_hyper;
padding-top:0.325rem; padding-top:0.325rem;
padding-bottom:0.325rem; padding-bottom:0.325rem;
} }

6
scss/_commons.scss
View file

@ -80,15 +80,15 @@ $preview-height: 8*1.5rem;
color: $color-light; color: $color-light;
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
font-weight:200; font-weight:$fontweight_big;
} }
.card-header { .card-header {
font-family: Work Sans; font-family: $basefont;
font-size: 1rem; font-size: 1rem;
background-color: $color-primary; background-color: $color-primary;
@include card-header(0.75rem); @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-radius: 0px;
$border-size: 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() { @mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3) 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 */ /* 2.1 - Font Face */
$basefont: Work Sans, WorkSans, sans-serif; /* 2.1.1 - OpenSans
$titlefont: AmaticSC, Open Sans, sans-serif;
/* 2.1.1 - OpenSans */
@font-face { @font-face {
font-family: 'OpenSans'; font-family: 'OpenSans';
@ -123,4 +120,4 @@ $titlefont: AmaticSC, Open Sans, sans-serif;
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg'); url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 800; font-weight: 800;
font-style: italic; font-style: italic;
} }*/

2
scss/_global.scss
View file

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

24
scss/_typography.scss
View file

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

2
writing-test.html
View file

@ -13,8 +13,8 @@
<link rel="shortcut icon" href="img/favicon.png"> <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=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/spectre.min.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet"> <link href="css/fork-awesome.css" rel="stylesheet">