From e674bd5f72d0f9fd68c707cd355c4fc72bb37b47 Mon Sep 17 00:00:00 2001
From: Josh Brewer
Date: Tue, 19 Apr 2011 17:16:13 -0700
Subject: centering the content, adjusting elements accordingly
---
bookmarklet/ffffallback.css | 2 +-
site/css/screen2.css | 40 +++++++++++++++++++++++++++++-----------
site/index.html | 9 +++++----
3 files changed, 35 insertions(+), 16 deletions(-)
diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css
index d630c41..66f6794 100644
--- a/bookmarklet/ffffallback.css
+++ b/bookmarklet/ffffallback.css
@@ -251,7 +251,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
border-top:1px solid #444!important;
list-style: none!important;
margin: 0!important;
- padding:0.5em 0 0.5em 1em!important;
+ padding:0.5em 0 1em 1em!important;
}
#ffffallback-fonts li b {
diff --git a/site/css/screen2.css b/site/css/screen2.css
index c1727cc..5d59d99 100644
--- a/site/css/screen2.css
+++ b/site/css/screen2.css
@@ -140,17 +140,23 @@ span.horizon {
position:absolute;
}
span.rising {width:100%; margin-top:15em;}
-span.setting {width:52em; margin-top:2.5em;margin-left:-20em;}
+/*span.setting {width:52em; margin-top:2.5em;margin-left:-20em;}*/
+span.setting {width:100%; position:absolute;bottom:2.5em;}
+
+
+
#main {
- border-left: 1px solid #423e39;
- margin:0 0 0 4em;
- padding:3em 0 0 7em;
+ border: 1px solid #423e39;
+ border-width:0 1px;
+ margin:0 4em;
+ padding:3em 0 0 0;
position:relative;
}
.content {
- width:32em;
+ width:31em;
position:relative;
+ margin: 0 auto;
}
hgroup {
margin:0 0 12em 0;
@@ -239,12 +245,24 @@ hgroup h2 {
left: 2.25em;
}
-hgroup + p, hgroup + p + p {
+hgroup + p {
font-size: 1.3125em;
line-height:1.1429;
margin-bottom:1.5em;
- width:25em;
+ width:24em;
+}
+hgroup + p + p {
+ font-size: 1.125em;
+ line-height:1.5;
+ margin-bottom:1.5em;
}
+.smcap {
+ font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
+ font-size:0.9em;
+ font-weight:200;
+ text-transform:uppercase;
+}
+
.bkmrklt {
font-size:1.3125em;
@@ -278,10 +296,10 @@ hgroup + p, hgroup + p + p {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
- -moz-box-shadow: 0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
- -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
- -o-box-shadow: 0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
- box-shadow: 0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
+ -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
+ -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
+ -o-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
+ box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
}
.bkmrklt a:hover {
-webkit-animation-name: drag-me;
diff --git a/site/index.html b/site/index.html
index 97457d0..513d0ae 100644
--- a/site/index.html
+++ b/site/index.html
@@ -29,11 +29,11 @@
A simple tool for bulletproof web typography.
- It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means a better typographic web for everyone.
- In the spirit of bulletproof web design, we give you…
+ It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Ffffallback means a better typographic web for everyone.
+ So, in the spirit of bulletproof web design, we give you…
@@ -59,8 +59,9 @@
For more background on how this came to be and why it's important, read Type study: Choosing fallback fonts.
-