updated typography, added typography debugging page
This commit is contained in:
parent
6c8b67d069
commit
c94e6f531d
@ -1,67 +1,151 @@
|
|||||||
!base_font_size ||= 14px
|
!base_font_size ||= 14px
|
||||||
!base_font_size_small ||= 12px
|
!base_font_size_small ||= 12px
|
||||||
!h6 ||= !base_font_size
|
!h6 = ceil(!base_font_size*1.3)
|
||||||
!h5 ||= ceil(!h6*1.1)
|
!h5 = ceil(!base_font_size*1.4)
|
||||||
!h4 ||= ceil(!h5*1.1)
|
!h4 = ceil(!base_font_size*1.7)
|
||||||
!h3 ||= ceil(!h4*1.2)
|
!h3 = ceil(!base_font_size*1.9)
|
||||||
!h2 ||= ceil(!h3*1.25)
|
!h2 = ceil(!base_font_size*2.2)
|
||||||
!h1 ||= ceil(!h2*1.255)
|
!h1 = ceil(!base_font_size*2.5)
|
||||||
|
|
||||||
|
=heading-font
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||||
|
=sans-font
|
||||||
|
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
|
||||||
|
=serif-font
|
||||||
|
font-family: Times, "Times New Roman" Georgia, serif
|
||||||
|
=fixed-font
|
||||||
|
font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
|
||||||
|
|
||||||
|
=general-typography(!font_size = !base_font_size)
|
||||||
|
+set-heading-sizes(!font_size)
|
||||||
|
+typography-defaults(!font_size)
|
||||||
|
|
||||||
=set-heading-sizes(!font_size = !base_font_size)
|
=set-heading-sizes(!font_size = !base_font_size)
|
||||||
!h6 = !font_size
|
!h6 = ceil(!font_size*1.3)
|
||||||
!h5 = ceil(!h6*1.1)
|
!h5 = ceil(!font_size*1.4)
|
||||||
!h4 = ceil(!h5*1.1)
|
!h4 = ceil(!font_size*1.7)
|
||||||
!h3 = ceil(!h4*1.2)
|
!h3 = ceil(!font_size*1.9)
|
||||||
!h2 = ceil(!h3*1.25)
|
!h2 = ceil(!font_size*2.2)
|
||||||
!h1 = ceil(!h2*1.255)
|
!h1 = ceil(!font_size*2.5)
|
||||||
h1, h2, h3, h4
|
h1, h2, h3, h4
|
||||||
&:first-child
|
&:first-child
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
h1
|
h1
|
||||||
font-size= !h1
|
font-size= !h1
|
||||||
margin-bottom= !h2/2
|
margin-bottom= !font_size * .765
|
||||||
line-height= !h1 * 1.2
|
line-height= !h1 * 1.625
|
||||||
h2
|
h2
|
||||||
font-size= !h2
|
font-size= !h2
|
||||||
margin= !h2/2 0 !h2/2
|
margin-bottom= !font_size * .855
|
||||||
line-height= !h2 * 1.2
|
line-height= !h2 * 1.625
|
||||||
h3
|
h3
|
||||||
font-size= !h3
|
font-size= !h3
|
||||||
margin= !h2/2 0 !h2/2
|
margin-bottom= !font_size * .956
|
||||||
line-height= !h3 * 1.2
|
line-height= !h3 * 1.625
|
||||||
h4
|
h4
|
||||||
font-size= !h4
|
font-size= !h4
|
||||||
margin= !h4/2 0 !h4/2
|
margin-bottom= !font_size * 1.161
|
||||||
line-height= !h4 * 1.2
|
line-height= !h4 * 1.625
|
||||||
h5
|
h5
|
||||||
font-size= !h5
|
font-size= !h5
|
||||||
margin= !h4/2 0 !h4/2
|
margin-bottom= !font_size * 1.238
|
||||||
line-height= !h5 * 1.2
|
line-height= !h5 * 1.625
|
||||||
h6
|
h6
|
||||||
font-size= !h6
|
font-size= !h6
|
||||||
margin= !h4/2 0 !h4/2
|
margin-bottom= !font_size * 1.625
|
||||||
line-height= !h6 * 1.2
|
line-height= !h6 * 1.625
|
||||||
|
|
||||||
=typography-defaults(!font_size = !base_font_size)
|
=typography-defaults(!font_size = !base_font_size)
|
||||||
line-height= ceil(!font_size * 1.5)
|
body
|
||||||
|
line-height= ceil(!font_size * 1.625)
|
||||||
p
|
p
|
||||||
padding-bottom= !font_size * 2
|
+p-style(!font_size)
|
||||||
h1,h2,h3,h4,h5,h6
|
em, dfn
|
||||||
font-weight: bold
|
|
||||||
em
|
|
||||||
font-style: italic
|
font-style: italic
|
||||||
strong
|
strong, dfn
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
|
del
|
||||||
|
text-decoration: line-through
|
||||||
span.highlight, em.highlight, strong.highlight
|
span.highlight, em.highlight, strong.highlight
|
||||||
background-color: #ff6
|
background-color: #ff6
|
||||||
padding: 2px
|
padding: 2px
|
||||||
margin: 0 -2px
|
margin: 0 -2px
|
||||||
ul, ol, dl
|
ol li
|
||||||
list-style: inside
|
list-style: decimal
|
||||||
margin= 0 0 (!font_size)
|
ul, ol
|
||||||
li
|
list-style: outside
|
||||||
padding: 0 0 2px
|
margin= 0 0 !font_size * 1.625
|
||||||
|
li ul, li ol
|
||||||
|
margin= 0 0 !font_size * 1.625
|
||||||
|
dl
|
||||||
|
margin= 0 0 !font_size * 1.625
|
||||||
|
dt
|
||||||
|
font-weight: bold
|
||||||
|
dd
|
||||||
|
margin-left= !font_size * 1.625
|
||||||
|
table
|
||||||
|
margin= 0 0 !font_size * 1.625
|
||||||
|
border-collapse: collapse
|
||||||
|
th
|
||||||
|
font-weight: bold
|
||||||
|
tr, th, td
|
||||||
|
margin: 0
|
||||||
|
margin= 0 !font_size * 1.625 0 !font_size
|
||||||
|
tfoot
|
||||||
|
font-style: italic
|
||||||
|
caption
|
||||||
|
text-align: center
|
||||||
|
abbr, acronym
|
||||||
|
border-bottom: 1px dotted
|
||||||
|
address
|
||||||
|
margin-top= !font_size * 1.625
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4
|
||||||
|
+serif-font
|
||||||
|
font-size= !font_size * 1.2
|
||||||
|
font-style: italic
|
||||||
|
&:before
|
||||||
|
content: "\201C"
|
||||||
|
font-size= !font_size * 3
|
||||||
|
margin= 0 0 0 -.625em
|
||||||
|
position: absolute
|
||||||
|
font-family: Times, Georgia, serif
|
||||||
|
color: #aaa
|
||||||
|
line-height: 0
|
||||||
|
> p
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
pre, code
|
||||||
|
margin= !font_size * 1.625 0
|
||||||
|
white-space: pre
|
||||||
|
pre, code, tt
|
||||||
|
+fixed-font
|
||||||
|
font-size= !font_size
|
||||||
|
line-height= !font_size * 1.5
|
||||||
|
tt
|
||||||
|
display: block
|
||||||
|
margin= !font_size * 1.625 0
|
||||||
|
hr
|
||||||
|
margin-bottom= !font_size * 1.625
|
||||||
|
|
||||||
small
|
small
|
||||||
font-size= floor(!font_size * .85)
|
font-size= floor(!font_size * .85)
|
||||||
big
|
big
|
||||||
font-size= floor(!font_size * 1.25)
|
font-size= floor(!font_size * 1.25)
|
||||||
|
|
||||||
|
=p-style(!font_size = !base_font_size)
|
||||||
|
padding-bottom= !font_size * 0.8125
|
||||||
|
img
|
||||||
|
float: left
|
||||||
|
margin:
|
||||||
|
top= !font_size * .5
|
||||||
|
right= !font_size * .8125
|
||||||
|
bottom= !font_size* .8125
|
||||||
|
left= 0
|
||||||
|
padding: 0
|
||||||
|
&.right
|
||||||
|
margin:
|
||||||
|
right= 0
|
||||||
|
left= !font_size * .8125
|
@ -1,26 +1,20 @@
|
|||||||
!base_font_size = 15px
|
!base_font_size = 16px
|
||||||
!base_font_size_small = 13px
|
!base_font_size_small = 13px
|
||||||
!default_border_radius = 6px
|
!default_border_radius = 6px
|
||||||
|
|
||||||
=heading-font
|
+general-typography
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
=heading-font
|
||||||
=sans-font
|
+serif-font
|
||||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
|
|
||||||
=serif-font
|
|
||||||
font-family: Baskerville, "Times New Roman", Times, Georgia, serif
|
|
||||||
=fixed-font
|
|
||||||
font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
|
|
||||||
|
|
||||||
body
|
body
|
||||||
font-size= !base_font_size
|
font-size= !base_font_size
|
||||||
+set-heading-sizes
|
|
||||||
+typography-defaults
|
|
||||||
+sans-font
|
+sans-font
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6
|
h1,h2,h3,h4,h5,h6
|
||||||
color: #333
|
color: #333
|
||||||
letter-spacing: -1px
|
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
ol li
|
+heading-font
|
||||||
list-style: decimal
|
.quote blockquote
|
||||||
margin-left: 1.9em
|
font-size= !h4
|
||||||
|
line-height= !h5 * 1.625
|
||||||
|
color: #555
|
@ -14,6 +14,7 @@ html body
|
|||||||
padding: 20px 0
|
padding: 20px 0
|
||||||
a.title
|
a.title
|
||||||
font-size= !h3
|
font-size= !h3
|
||||||
|
+heading-font
|
||||||
display: inline-block
|
display: inline-block
|
||||||
color= !header_nav
|
color= !header_nav
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
108
source/typography.haml
Normal file
108
source/typography.haml
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
title: Typography Debug
|
||||||
|
---
|
||||||
|
|
||||||
|
%h1 Level 01 Heading
|
||||||
|
%h2 Level 02 Heading
|
||||||
|
%h3 Level 03 Heading
|
||||||
|
%h4 Level 04 Heading
|
||||||
|
%h5 Level 05 Heading
|
||||||
|
%h6 Level 06 Heading
|
||||||
|
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu
|
||||||
|
viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat
|
||||||
|
arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum
|
||||||
|
vel pede ut urna eleifend lacinia.
|
||||||
|
%p
|
||||||
|
Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla
|
||||||
|
ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat.
|
||||||
|
Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed
|
||||||
|
sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
|
||||||
|
%p
|
||||||
|
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id
|
||||||
|
nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate
|
||||||
|
felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a
|
||||||
|
libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam
|
||||||
|
porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum
|
||||||
|
neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
|
||||||
|
|
||||||
|
%h3 Unordered lists
|
||||||
|
%ul
|
||||||
|
%li Lorem ipsum dolor sit amet
|
||||||
|
%li Consectetur adipisicing elit
|
||||||
|
%li Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
|
||||||
|
%li Ut enim ad minim veniam
|
||||||
|
|
||||||
|
%h3 Ordered lists
|
||||||
|
%ol
|
||||||
|
%li Consectetur adipisicing elit
|
||||||
|
%li Sed do eiusmod tempor incididunt ut labore
|
||||||
|
%li Et dolore magna aliqua
|
||||||
|
|
||||||
|
%h3 Blockquotes
|
||||||
|
%blockquote
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||||
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
|
||||||
|
%h3 Tables
|
||||||
|
%table
|
||||||
|
%caption
|
||||||
|
Jimi Hendrix - albums
|
||||||
|
%thead
|
||||||
|
%tr
|
||||||
|
%th Album
|
||||||
|
%th Year
|
||||||
|
%th Price
|
||||||
|
%tfoot
|
||||||
|
%tr
|
||||||
|
%td Album
|
||||||
|
%td Year
|
||||||
|
%td Price
|
||||||
|
%tbody
|
||||||
|
%tr
|
||||||
|
%td Are You Experienced
|
||||||
|
%td 1967
|
||||||
|
%td $10.00
|
||||||
|
%tr
|
||||||
|
%td Axis: Bold as Love
|
||||||
|
%td 1967
|
||||||
|
%td $12.00
|
||||||
|
%tr
|
||||||
|
%td Electric Ladyland
|
||||||
|
%td 1968
|
||||||
|
%td $10.00
|
||||||
|
%tr
|
||||||
|
%td Band of Gypsys
|
||||||
|
%td 1970
|
||||||
|
%td $12.00
|
||||||
|
%p
|
||||||
|
%a(href="#")Link
|
||||||
|
%br/
|
||||||
|
%strong <strong>
|
||||||
|
%br/
|
||||||
|
%del <del> deleted
|
||||||
|
%br/
|
||||||
|
%dfn <dfn> dfn
|
||||||
|
%br/
|
||||||
|
%em <em> emphasis
|
||||||
|
%br/
|
||||||
|
|
||||||
|
%pre
|
||||||
|
%code
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class = "main"> <div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
%tt
|
||||||
|
<tt>
|
||||||
|
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
|
||||||
|
%hr
|
Loading…
Reference in New Issue
Block a user