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_small ||= 12px
|
||||
!h6 ||= !base_font_size
|
||||
!h5 ||= ceil(!h6*1.1)
|
||||
!h4 ||= ceil(!h5*1.1)
|
||||
!h3 ||= ceil(!h4*1.2)
|
||||
!h2 ||= ceil(!h3*1.25)
|
||||
!h1 ||= ceil(!h2*1.255)
|
||||
!h6 = ceil(!base_font_size*1.3)
|
||||
!h5 = ceil(!base_font_size*1.4)
|
||||
!h4 = ceil(!base_font_size*1.7)
|
||||
!h3 = ceil(!base_font_size*1.9)
|
||||
!h2 = ceil(!base_font_size*2.2)
|
||||
!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)
|
||||
!h6 = !font_size
|
||||
!h5 = ceil(!h6*1.1)
|
||||
!h4 = ceil(!h5*1.1)
|
||||
!h3 = ceil(!h4*1.2)
|
||||
!h2 = ceil(!h3*1.25)
|
||||
!h1 = ceil(!h2*1.255)
|
||||
!h6 = ceil(!font_size*1.3)
|
||||
!h5 = ceil(!font_size*1.4)
|
||||
!h4 = ceil(!font_size*1.7)
|
||||
!h3 = ceil(!font_size*1.9)
|
||||
!h2 = ceil(!font_size*2.2)
|
||||
!h1 = ceil(!font_size*2.5)
|
||||
h1, h2, h3, h4
|
||||
&:first-child
|
||||
margin-top: 0
|
||||
h1
|
||||
font-size= !h1
|
||||
margin-bottom= !h2/2
|
||||
line-height= !h1 * 1.2
|
||||
margin-bottom= !font_size * .765
|
||||
line-height= !h1 * 1.625
|
||||
h2
|
||||
font-size= !h2
|
||||
margin= !h2/2 0 !h2/2
|
||||
line-height= !h2 * 1.2
|
||||
margin-bottom= !font_size * .855
|
||||
line-height= !h2 * 1.625
|
||||
h3
|
||||
font-size= !h3
|
||||
margin= !h2/2 0 !h2/2
|
||||
line-height= !h3 * 1.2
|
||||
margin-bottom= !font_size * .956
|
||||
line-height= !h3 * 1.625
|
||||
h4
|
||||
font-size= !h4
|
||||
margin= !h4/2 0 !h4/2
|
||||
line-height= !h4 * 1.2
|
||||
margin-bottom= !font_size * 1.161
|
||||
line-height= !h4 * 1.625
|
||||
h5
|
||||
font-size= !h5
|
||||
margin= !h4/2 0 !h4/2
|
||||
line-height= !h5 * 1.2
|
||||
margin-bottom= !font_size * 1.238
|
||||
line-height= !h5 * 1.625
|
||||
h6
|
||||
font-size= !h6
|
||||
margin= !h4/2 0 !h4/2
|
||||
line-height= !h6 * 1.2
|
||||
margin-bottom= !font_size * 1.625
|
||||
line-height= !h6 * 1.625
|
||||
|
||||
=typography-defaults(!font_size = !base_font_size)
|
||||
line-height= ceil(!font_size * 1.5)
|
||||
body
|
||||
line-height= ceil(!font_size * 1.625)
|
||||
p
|
||||
padding-bottom= !font_size * 2
|
||||
h1,h2,h3,h4,h5,h6
|
||||
font-weight: bold
|
||||
em
|
||||
+p-style(!font_size)
|
||||
em, dfn
|
||||
font-style: italic
|
||||
strong
|
||||
strong, dfn
|
||||
font-weight: bold
|
||||
del
|
||||
text-decoration: line-through
|
||||
span.highlight, em.highlight, strong.highlight
|
||||
background-color: #ff6
|
||||
padding: 2px
|
||||
margin: 0 -2px
|
||||
ul, ol, dl
|
||||
list-style: inside
|
||||
margin= 0 0 (!font_size)
|
||||
li
|
||||
padding: 0 0 2px
|
||||
ol li
|
||||
list-style: decimal
|
||||
ul, ol
|
||||
list-style: outside
|
||||
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
|
||||
font-size= floor(!font_size * .85)
|
||||
big
|
||||
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
|
||||
!default_border_radius = 6px
|
||||
|
||||
+general-typography
|
||||
=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: Baskerville, "Times New Roman", Times, Georgia, serif
|
||||
=fixed-font
|
||||
font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
|
||||
+serif-font
|
||||
|
||||
body
|
||||
font-size= !base_font_size
|
||||
+set-heading-sizes
|
||||
+typography-defaults
|
||||
+sans-font
|
||||
|
||||
h1,h2,h3,h4,h5,h6
|
||||
color: #333
|
||||
letter-spacing: -1px
|
||||
font-weight: bold
|
||||
ol li
|
||||
list-style: decimal
|
||||
margin-left: 1.9em
|
||||
+heading-font
|
||||
.quote blockquote
|
||||
font-size= !h4
|
||||
line-height= !h5 * 1.625
|
||||
color: #555
|
@ -14,6 +14,7 @@ html body
|
||||
padding: 20px 0
|
||||
a.title
|
||||
font-size= !h3
|
||||
+heading-font
|
||||
display: inline-block
|
||||
color= !header_nav
|
||||
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