Mic92/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated typography, added typography debugging page

Browse Source
This commit is contained in:
B Mathis 2009-10-20 23:30:52 -05:00
parent 6c8b67d069
commit c94e6f531d
4 changed files with 239 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
source/stylesheets/library/_typography.sass
View File

@ -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

22
source/stylesheets/partials/base/_typography.sass
View File

@ -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

1
source/stylesheets/partials/main/_layout.sass
View File

@ -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
View 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