kazhnuz
/
clear-typography
1
0
Fork 0
Code Issues 4 Pull Requests Releases 1 Wiki Activity

Compare commits

base: kazhnuz:v0.1
Branches Tags
kazhnuz:master
kazhnuz:clear-typgraphy-0.x
kazhnuz:next
kazhnuz:2.0
kazhnuz:1.2
kazhnuz:1.1
kazhnuz:v1.0
kazhnuz:v0.1
...
compare: kazhnuz:master
Branches Tags
kazhnuz:master
kazhnuz:clear-typgraphy-0.x
kazhnuz:next
kazhnuz:2.0
kazhnuz:1.2
kazhnuz:1.1
kazhnuz:v1.0
kazhnuz:v0.1

58 Commits
v0.1 ... master

Author SHA1 Message Date
Kazhnuz 60bc795bf1 meta: prepare for true 2.0.0 release 2019-11-07 13:00:53 +01:00
Kazhnuz 56a2c02b11 improvement: new default height 2019-11-07 12:55:36 +01:00
Kazhnuz 18c8a9878a chore : slight refactoring for ul and ol 2019-11-07 12:52:49 +01:00
Kazhnuz 13c252ee9e fix: well overflowing 2019-11-07 12:51:31 +01:00
Kazhnuz e1a43513ce fix: make sup/sub no longer affect lineheight 2019-11-07 12:49:17 +01:00
Kazhnuz 8f4d4fc4c0 improvement: rework well styling 2019-11-07 12:37:56 +01:00
Kazhnuz 2f0ea5b8bd resture debug grid drawing 2019-11-07 12:28:41 +01:00
Kazhnuz dd51e1e170 improvement: add a $lineheight variable 2019-11-07 12:22:09 +01:00
Kazhnuz 066566d170 meta : switch to keep a changelog for the changelog 2019-11-07 12:08:39 +01:00
Kazhnuz 94cb3385b8 meta: prepare for 2.0 2019-11-04 16:03:59 +01:00
Kazhnuz c16d9d2e28 improvement: rework text-wrapper 2019-11-04 16:02:16 +01:00
Kazhnuz 4437f9b180 fix: use right margins for hr 2019-11-04 15:58:16 +01:00
Kazhnuz e7ed01381d fix: rework entirely titles 2019-11-04 15:57:00 +01:00
Kazhnuz 0e1fee29bd fix: use margin instead of padding for paragraphs delimitations 2019-11-04 15:47:24 +01:00
Kazhnuz f716db73c7 fix: make sure that baseline is done according to text height 2019-11-04 15:28:23 +01:00
Kazhnuz 5234abfdd3 fix: use rem instead of em for line-height 2019-11-04 15:21:06 +01:00
Kazhnuz 07009bf0af prepare for 1.2 2018-10-15 13:40:54 +02:00
Kazhnuz 3f2538fafd typo: change title styling 2018-10-15 13:38:58 +02:00
Kazhnuz 513a28cbdd fonts: switch to open sans 2018-10-15 13:35:03 +02:00
Kazhnuz 98052ed4db prepare for 1.1 2018-10-13 17:49:00 +02:00
Kazhnuz e3716657e7 scss: add support for ol 2018-10-13 17:46:57 +02:00
Kazhnuz 8d71f9dfb8 scss: make hr follow line heights 2018-10-13 17:43:37 +02:00
Kazhnuz ee6e291441 scss: make wells follow line heights 2018-10-13 17:41:52 +02:00
Kazhnuz 9f166387db scss: use a slightly larger border for wells 2018-10-13 17:37:46 +02:00
Kazhnuz 6bdd7ebcee scss: make last paragraph have no bottom padding 2018-10-13 17:36:15 +02:00
Kazhnuz 5c9d7ee5d0 scss: make paragraph and ul respect lines height 2018-10-13 17:35:10 +02:00
Kazhnuz 404ae051cd scss: make titles respect line heights 2018-10-13 17:30:30 +02:00
Kazhnuz 1661ac8f47 scss: customize padding instead of margin for titles 2018-10-13 17:23:29 +02:00
Kazhnuz 1363268709 scss: make margin-top modifiable for titles 2018-10-13 17:21:55 +02:00
Kazhnuz 7504d1d16e exemple: show text lines 2018-10-13 17:19:27 +02:00
Kazhnuz 5a0f783388 scss: add a debug class to show text lines 2018-10-13 17:18:12 +02:00
Kazhnuz 8c3cc8ff4d css: regenerate css file 2018-10-13 17:15:23 +02:00
Kazhnuz b9c0796769 scss: simplify mark style 2018-10-13 17:14:57 +02:00
Kazhnuz 1451480bdc scss: use a mixin for titles 2018-10-13 17:13:38 +02:00
Kazhnuz f7b69f7347 scss: port blockquote and pre to scss 2018-10-13 17:05:57 +02:00
Kazhnuz e00d30fc13 css: regenerate css file 2018-10-13 16:56:42 +02:00
Kazhnuz 28334e2696 scss: remove redundancies in title alignement 2018-10-13 16:56:11 +02:00
Kazhnuz a7453ef201 scss: remove padding in title 2018-10-13 16:54:38 +02:00
Kazhnuz 0e83193dd1 scss: init port to scss 2018-10-13 16:49:21 +02:00
Kazhnuz cfb63f9701 prepare version 1.0 2018-10-03 17:49:45 +02:00
Kazhnuz 718f7529b6 css: add 'mark' support 2018-10-03 17:43:55 +02:00
Kazhnuz bbfa34f229 css: finish responsive wrapper support 2018-10-03 17:02:35 +02:00
Kazhnuz 8662d30bcb css: initial responsive support 2018-10-03 16:20:22 +02:00
Kazhnuz fd0cd6155c css: 'night mode' support 2018-10-03 15:11:07 +02:00
Kazhnuz b2409e1639 example: prepare text wrapping 2018-10-03 14:57:59 +02:00
Kazhnuz e37caebad8 css: add pre and quote styling 2018-10-03 14:56:01 +02:00
Kazhnuz 8a05c4364a css: improve code readibility 2018-10-03 14:49:15 +02:00
Kazhnuz 9e5b87d79c css: use lighter styling for hr 2018-10-03 14:31:31 +02:00
Kazhnuz bab1190728 css: tweak title sizes and weight 2018-10-03 14:27:53 +02:00
Kazhnuz 009e6a352c css: remove titles centering and borders 2018-10-03 14:23:59 +02:00
Kazhnuz fb7ca007bf css: better contrast 2018-10-03 14:20:02 +02:00
Kazhnuz 384b1c8441 example: use 900px width 2018-10-03 14:19:21 +02:00
Kazhnuz f9e43a5d62 css: use a size in mm 2018-10-03 13:47:49 +02:00
Kazhnuz 8d5f214490 css: dynamic font resizing 2018-10-03 13:43:03 +02:00
Kazhnuz fe1668bfc7 css: remove some forgotten justify 2018-10-03 13:30:31 +02:00
Kazhnuz 89b2504ce2 example: use more usefull titles 2018-10-03 13:25:38 +02:00
Kazhnuz 00120502d5 example: rename example file 2018-10-03 13:21:39 +02:00
Kazhnuz fd4a92e9e4 css: don't justify text 2018-10-03 13:15:36 +02:00
48 changed files with 648 additions and 197551 deletions
Show Stats Expand all files Collapse all files

76
CHANGELOG.md Normal file
View File

@ -0,0 +1,76 @@
# CHANGELOG
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [2.0.0] - 2019-11-07
### Added
- Modifiable variables for sizing
- Restore debug grid drawing
### Changed
- Switch to using rem instead of em for sizing
- Support vertical rythm
- Auto-calculate lineheight for titles
- Default lineheight is now 1.75
### Fixed
- Line-height is no longer affected by sup and sub
- Better overflowing for wells
## [1.2.0] - 2018-15-03
### Changed
- Switch to Open Sans, in order to solve problem with LightItalic font
## [1.1.0] - 2018-12-03
### Added
- Debug class added to show line heights
### Changed
- Stylesheet ported to SCSS
- Better typography : by making sure that lines always follow line heights
## [1.0.0] - 2018-10-03
### Added
- More markup support : pre, mark and blockquote
- Wrapper system to handle font size changes with responsive design
- Night Mode support
### Changed
- Better typographic support :
- Don't justify text
- Better contrast with text
- Remove underlining and centering in title
- Tweaks in titles size
- Nicer styling for hr
## [0.1.0] - 2014-12-08
- Just a basic bad typographic css stylesheet.

386
css/clear-typography.css
View File

@ -1,203 +1,283 @@
/* ------------------ FONT LOADING ------------------- */
@font-face {
font-family: 'ClearSans';
src: url('../fonts/ClearSans-Light.eot');
src: url('../fonts/ClearSans-Light.woff') format('woff'),
url('../fonts/ClearSans-Light.ttf') format('truetype');
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: 'ClearSans';
src: url('../fonts/ClearSans-Regular.eot');
src: url('../fonts/ClearSans-Regular.woff') format('woff'),
url('../fonts/ClearSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
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: 'ClearSans';
src: url('../fonts/ClearSans-Italic.eot');
src: url('../fonts/ClearSans-Italic.woff') format('woff'),
url('../fonts/ClearSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
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: 'ClearSans';
src: url('../fonts/ClearSans-Medium.eot');
src: url('../fonts/ClearSans-Medium.woff') format('woff'),
url('../fonts/ClearSans-Medium.ttf') format('truetype');
font-weight: 600;
font-style: normal;
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: 'ClearSans';
src: url('../fonts/ClearSans-MediumItalic.eot');
src: url('../fonts/ClearSans-MediumItalic.woff') format('woff'),
url('../fonts/ClearSans-MediumItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
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-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-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-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-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;
}
html {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: 18px;
}
body {
font-family: ClearSans, sans-serif;
text-align:justify;
font-size: 16px;
line-height: 1.5em;
color: #666;
font-weight: 400;
line-height: 1.75rem;
color: #444;
font-weight: 400;
}
.debug {
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.75rem;
}
.night-mode {
color: #BBB;
}
strong {
font-weight: 600;
font-weight: 600;
}
em {
font-style: italic;
font-style: italic;
}
a {
color:#2484c1;
text-decoration:none;
color: #2484c1;
text-decoration: none;
}
p, time {
padding: 0;
margin: 0;
margin-bottom: 1.75rem;
}
p:last-child, time:last-child {
margin-bottom: 0;
}
ul, ol {
padding: 0;
margin: 0;
margin-bottom: 1.75rem;
}
ul ul, ol ul {
margin-bottom: 0;
}
ul li, ol li {
margin-left: 1.75rem;
}
/* sup, sub */
sup, sub {
margin: 0;
padding: 0;
line-height: 1.75rem;
font-size: 0.8rem;
vertical-align: baseline;
position: relative;
}
sup {
top: -0.4375rem;
}
sub {
top: 0.4375rem;
}
::selection {
background: #2484c1;
color: #fff;
}
::-moz-selection {
background: #2484c1;
color: #fff;
}
/* ------------------ WRAPPERS ------------------- */
.text-wrapper {
width: 720px;
margin: auto;
}
/* ------------------ TITLES ------------------- */
h1, h2, h3, h4, h5, h6, h7 {
text-align:justify;
font-size: 1em;
line-height: 1.5em;
padding:0px;
margin:0px;
font-weight:400;
text-align: left;
font-size: 18px;
line-height: 1.75rem;
padding: 0;
margin: 0;
font-weight: 400;
}
h1 {
text-align:center;
font-size: 2em;
line-height: 1.5em;
padding:0.2em;
margin-bottom:1em;
font-weight:600;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:1px;
border-color:#666;
border-style:dashed;
font-size: 2.3333333rem;
line-height: 3.5rem;
margin-bottom: 1.75rem;
font-weight: 700;
}
h2 {
text-align:center;
font-size: 1.8em;
line-height: 1.5em;
padding:0.1em;
/*margin-bottom:0.5em;*/
font-weight:600;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
border-color:#666;
border-style:dashed;
font-size: 2rem;
line-height: 3.5rem;
margin-bottom: 1.75rem;
font-weight: 700;
}
h3 {
text-align:justify;
font-size: 1.8em;
line-height: 1.5em;
padding:0.1em;
/*margin-bottom:0.5em;*/
font-weight:600;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
border-color:#666;
border-style:dashed;
font-size: 1.5rem;
line-height: 1.75rem;
margin-bottom: 1.75rem;
font-weight: 700;
}
h4 {
text-align:justify;
font-size: 1.5em;
line-height: 1.5em;
padding:0.1em;
/*margin-bottom:0.5em;*/
font-weight:600;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
border-color:#666;
border-style:dashed;
font-size: 1.5rem;
line-height: 1.75rem;
margin-bottom: 1.75rem;
font-weight: 600;
}
h5 {
text-align:justify;
font-size: 1.3em;
line-height: 1.5em;
padding:0.1em;
/*margin-bottom:0.5em;*/
font-weight:600;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
border-color:#666;
border-style:dashed;
font-size: 1.333333rem;
line-height: 1.75rem;
margin-bottom: 1.75rem;
font-weight: 600;
}
h6 {
text-align:justify;
font-size: 1.3em;
line-height: 1.5em;
padding:0.1em;
/*margin-bottom:0.5em;*/
font-weight:400;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
border-color:#666;
border-style:dashed;
font-size: 1.1rem;
line-height: 1.75rem;
margin-bottom: 1.75rem;
font-weight: 600;
}
/* ------------------ HR ------------------- */
hr {
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:1px;
border-color:#666;
border-style:dashed;
margin:2em;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: rgba(1, 1, 1, 0.15);
border-style: solid;
padding: 0;
margin: 0;
margin-bottom: 1.75rem;
}
/* ------------------ QUOTE ------------------- */
blockquote {
border-width: 0 0 0 0.4375rem;
border-style: solid;
border-radius: 0.21875rem;
margin: 0;
margin-bottom: 1.75rem;
padding: 1.75rem;
font-size: 1.1rem;
max-width: 100%;
overflow: auto;
border-color: rgba(1, 1, 1, 0.15);
}
.night-mode blockquote {
border-color: rgba(255, 255, 255, 0.15);
}
pre {
border-width: 0 0 0 0.4375rem;
border-style: solid;
border-radius: 0.21875rem;
margin: 0;
margin-bottom: 1.75rem;
padding: 1.75rem;
font-size: 1.1rem;
max-width: 100%;
overflow: auto;
border-color: rgba(1, 1, 1, 0.2);
background-color: #EEE;
}
.night-mode pre {
background-color: #222;
border-color: rgba(255, 255, 255, 0.2);
}
/* ------------------ SPECIAL STYLING ------------------- */
mark {
border-radius: 0.2em;
padding: 0 0.4375rem 0 0.4375rem;
background-color: rgba(255, 255, 0, 0.33);
color: inherit;
}
.night-mode mark {
background-color: rgba(128, 128, 0, 0.66);
}
/* ------------------ SPECIAL STYLING ------------------- */
.time {
font-style:italic;
text-align:right;
width:100%;
display:block;
font-style: italic;
text-align: right;
width: 100%;
display: block;
font-size: 0.9rem;
}
::selection { background: #2484c1; color: #fff; }
::-moz-selection { background: #2484c1; color: #fff; }
/*# sourceMappingURL=clear-typography.css.map */

1
css/clear-typography.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_font-face.scss","../scss/clear-typography.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;ACvGJ;EACC;EACA;EACA,WAhBY;;;AAmBb;EACC,aAfY;EAgBZ;EACA;;;AAGD;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAxCE;EACA;EACA,eALW;;AA6CX;EACE;;;AAIJ;EA/CE;EACA;EACA,eALW;;AAoDX;EACE;;AAEF;EACE,aAxDS;;;AA4Db;AAEA;EACE;EACA;EACA,aAjEW;EAkEX;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WA3GY;EA4GZ,aAvGY;EAwGZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eAhGY;EAiGZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eAhGY;EAiGZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eAhGY;EAiGZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eAhGY;EAiGZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eAhGY;EAiGZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eAhGY;EAiGZ,aAiCqB;;;AAGtB;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAhJW;;;AAmJb;AAeA;EAZE;EACD;EACA;EACA;EACA,eA1JY;EA2JZ,SA3JY;EA4JT;EAEH;EACG;EAKH;;AAEA;EACG;;;AAIJ;EArBE;EACD;EACA;EACA;EACA,eA1JY;EA2JZ,SA3JY;EA4JT;EAEH;EACG;EAcH;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA;EACG","file":"clear-typography.css"}

BIN
fonts/ClearSans-Bold.eot
View File

Binary file not shown.

22646
fonts/ClearSans-Bold.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-Bold.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-Bold.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-BoldItalic.eot
View File

Binary file not shown.

23072
fonts/ClearSans-BoldItalic.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-BoldItalic.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-BoldItalic.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-Italic.eot
View File

Binary file not shown.

22411
fonts/ClearSans-Italic.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-Italic.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-Italic.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-Light.eot
View File

Binary file not shown.

22411
fonts/ClearSans-Light.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-Light.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-Light.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-Medium.eot
View File

Binary file not shown.

28626
fonts/ClearSans-Medium.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-Medium.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-Medium.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-MediumItalic.eot
View File

Binary file not shown.

27990
fonts/ClearSans-MediumItalic.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-MediumItalic.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-MediumItalic.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-Regular.eot
View File

Binary file not shown.

28060
fonts/ClearSans-Regular.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-Regular.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-Regular.woff
View File

Binary file not shown.

BIN
fonts/ClearSans-Thin.eot
View File

Binary file not shown.

22180
fonts/ClearSans-Thin.svg
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/ClearSans-Thin.ttf
View File

Binary file not shown.

BIN
fonts/ClearSans-Thin.woff
View File

Binary file not shown.

BIN
fonts/OpenSans-Bold-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-BoldItalic-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-ExtraBold-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-ExtraBoldItalic-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-Italic-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-Light-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-LightItalic-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-Regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-Semibold-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-SemiboldItalic-webfont.woff Normal file
View File

Binary file not shown.

4
index.html
View File

@ -17,12 +17,12 @@
</head>
<body style="max-width:1200px;padding:20px;margin:auto;">
<body class="text-wrapper debug">
<h1>
Document de Test
</h1>
<div class="time"><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
<time class="time"> Le vendredi 19 septembre 2014 à 07:16 </time>
<h2>
Introduction : Lorem Ipsum

121
scss/_font-face.scss Normal file
View File

@ -0,0 +1,121 @@
/* ------------------ FONT LOADING ------------------- */
@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-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-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-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-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-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-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-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-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-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;
}

215
scss/clear-typography.scss Normal file
View File

@ -0,0 +1,215 @@
@import 'font-face';
// Change these two variables for styling
$baseheight: 18px;
$baseline: 1.75;
// Don't change this one, it's just to
// make code more readable
$lineheight: $baseline * 1rem;
@mixin paragraph() {
padding:0;
margin:0;
margin-bottom: $lineheight;
}
html {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: $baseheight;
}
body {
line-height: $lineheight;
color: #444;
font-weight: 400;
}
.debug {
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% $lineheight;
}
.night-mode {
color:#BBB;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
a {
color:#2484c1;
text-decoration:none;
}
p, time {
@include paragraph();
&:last-child {
margin-bottom:0;
}
}
ul, ol {
@include paragraph();
ul {
margin-bottom:0;
}
li {
margin-left: $lineheight;
}
}
/* sup, sub */
sup, sub {
margin:0;
padding:0;
line-height:$lineheight;
font-size: 0.8rem;
vertical-align:baseline;
position:relative;
}
sup {
top: -$lineheight/4;
}
sub {
top: $lineheight/4;
}
::selection { background: #2484c1; color: #fff; }
::-moz-selection { background: #2484c1; color: #fff; }
/* ------------------ WRAPPERS ------------------- */
.text-wrapper {
width:$baseheight*40;
margin: auto;
}
/* ------------------ TITLES ------------------- */
@mixin title($size, $weight) {
$height: ceil($size / $baseline) * $baseline;
font-size: $size * 1rem;
line-height: $height * 1rem;
margin-bottom: $lineheight;
font-weight: $weight;
}
h1, h2, h3, h4, h5, h6, h7 {
text-align: left;
font-size: $baseheight;
line-height: $lineheight;
padding:0;
margin:0;
font-weight:400;
}
h1 {
@include title(2.3333333, 700);
}
h2 {
@include title(2, 700);
}
h3 {
@include title(1.5, 700);
}
h4 {
@include title(1.5, 600);
}
h5 {
@include title(1.333333, 600);
}
h6 {
@include title(1.1, 600);
}
/* ------------------ 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;
padding:0;
margin:0;
margin-bottom: $lineheight;
}
/* ------------------ QUOTE ------------------- */
@mixin well() {
border-width: 0 0 0 $lineheight/4;
border-style: solid;
border-radius: $lineheight/8;
margin:0;
margin-bottom: $lineheight;
padding: $lineheight;
font-size:1.1rem;
max-width: 100%;
overflow: auto;
}
blockquote {
@include well();
border-color: rgba(1, 1, 1, 0.15);
.night-mode & {
border-color: rgba(255, 255, 255, 0.15)
}
}
pre {
@include well();
border-color: rgba(1,1,1,0.20);
background-color:#EEE;
.night-mode & {
background-color:#222;
border-color:rgba(255,255,255,0.20);
}
}
/* ------------------ SPECIAL STYLING ------------------- */
mark {
border-radius: 0.2em;
padding:0 $lineheight/4 0 $lineheight/4;
background-color:rgba(255,255,0,0.33);
color: inherit;
}
.night-mode mark {
background-color:rgba(128,128,0,0.66);
}
/* ------------------ SPECIAL STYLING ------------------- */
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
font-size: 0.9rem;
}