summaryrefslogtreecommitdiffstats
path: root/css/screen.css
diff options
context:
space:
mode:
Diffstat (limited to 'css/screen.css')
-rw-r--r--css/screen.css326
1 files changed, 201 insertions, 125 deletions
diff --git a/css/screen.css b/css/screen.css
index a337aa4..e4f5032 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -133,53 +133,89 @@ body {
height:100%;
width:100%;
}
+
span.horizon {
border-top:1px solid #423E39;
height:1px;
margin-left:0;
-
position:absolute;
}
-span.rising {width:100%; margin-top:10.5em;}
-span.setting {width:52em; margin-top:2.5em;margin-left:-22em;}
+span.rising {width:100%; margin-top:15em;}
+span.setting {width:100%; margin-top: -20em;}
+
#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 {
- max-width:32em;
+ width:32em;
position:relative;
+ margin: 0 auto;
}
hgroup {
- background:url(../images/brand.png) no-repeat 0 0;
- display: block;
- direction: ltr;
- margin:0 0 5em -4.5625em;
- overflow: hidden;
- text-align: left;
- text-indent: -999em;
- height:80px;
- width:409px;
+ margin:0 0 12em 0;
+}
+hgroup h1 {
+ font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
+ font-size:3.5em;
+ font-weight:200;
+ line-height:1;
+ margin-left:1.35em;
+ text-transform:uppercase;
+}
+.wf-inactive hgroup h1{
+ letter-spacing:4px;
+}
+
+hgroup h1:before {
+ content: "F";
+ background:#fef1d8;
+ border:1px solid #2d2a27;
+ color:#2d2a27;
+ font-size:0.5em;
+ font-weight:200;
+ margin-right:0.5em;
+ padding-top:0.25em;
+ position:absolute;
+ text-align:center;
+ vertical-align:center;
+ top:0.1em;
+ left:0;
+ width:1.5em;
+ height:1.25em;
+ -moz-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53;
+ -webkit-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53;
+ -o-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53;
+ box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53;
+}
+
+
+hgroup h2 {
+ color:#eebe5f;
+ font-size:1.3125em;
+ font-weight:200;
+ letter-spacing:0.1em;
+ margin-top:0.5em;
}
-/* Really wish H&FJ webfonts were available… but they're not. Image replacement it is.
.brave {
background: #2d2a27;
color:#fef1d8;
font-size:1.05em;
- left:30em;
+ left:8em;
line-height:1;
position:absolute;
text-transform:uppercase;
- top:3.85em;
- height: 170px;
- width: 170px;
- -webkit-border-radius: 170px;
- -moz-border-radius: 170px;
- border-radius: 170px;
+ top:5.25em;
+ height: 7em;
+ width: 7em;
+ -webkit-border-radius: 7em;
+ -moz-border-radius: 7em;
+ border-radius: 7em;
background-clip: padding-box;
z-index:100;
}
@@ -190,86 +226,159 @@ hgroup {
text-transform:uppercase;
left:10px;
top: 10px;
- height:150px;
- width: 150px;
- -webkit-border-radius: 150px;
- -moz-border-radius: 150px;
- border-radius: 150px;
+ height:6em;
+ width: 6em;
+ -webkit-border-radius: 6em;
+ -moz-border-radius: 6em;
+ border-radius: 6em;
background-clip: padding-box;
z-index:-1;
-}*/
-.brave {
- background: #2d2a27 url(../images/bravenewworld.png) no-repeat 0 0;
- color:#fef1d8;
- font-size:1em;
- left:27.75em;
- line-height:1;
- position:absolute;
- top:1.5em;
- height: 176px;
- width: 176px;
- z-index:100;
}
.brave i {
- display:block;
- text-indent:-9999em;
+ font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
+ font-size:0.8125em;
+ font-style: normal;
+ font-weight: normal;
+ top: 2.25em;
+ position: relative;
+ width: 4em;
+ display: block;
+ left: 2.25em;
}
-hgroup + p, hgroup + p + p {
+hgroup + p {
font-size: 1.3125em;
line-height:1.1429;
margin-bottom:1.5em;
- max-width:25em;
+ xwidth:24em;
+}
+hgroup + p strong {
+ line-height: 1.25;
+ font-size: 1.125em;
+}
+.wf-active hgroup + p strong {
+ line-height: 1.25;
+ font-size: 1.25em;
+}
+
+hgroup + p + p {
+ font-size: 1.25em;
+ line-height:1.5;
+ margin-bottom:1.5em;
+}
+.smcap {
+ font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
+ font-size:0.7em;
+ font-weight:200;
+ text-transform:uppercase;
+}
+.wf-inactive .smcap {
+ font-size:1em;
}
.bkmrklt {
font-size:1.3125em;
- margin-bottom: 3em;
+ margin:2em 0 3em;
position:relative;
}
+
+@-webkit-keyframes drag-me {
+ from {
+ top:0;
+ left:0;
+ }
+ to {
+ top:-20px;
+ left:30px;
+ }
+}
+
.bkmrklt a {
- background:url(../images/bookmarklet-button.png) no-repeat 0 0;
- border:0;
- direction: ltr;
- display:block;
- overflow: hidden;
- text-indent:-9999em;
- text-align: left;
- height:57px;
- width:215px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid #2D2A27;
+ color: #F0E4CC;
+ font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
+ font-size: 1.125em;
+ padding: .5em 1em;
+ position:relative;
+ text-align:center;
+ text-transform: uppercase;
+ text-shadow:0 1px 1px #2D2A27;
+ z-index:100;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -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 {
- border-bottom:0;
+ -webkit-animation-name: drag-me;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-timing-function: ease-in-out;
+}
+.bkmrklt a:after {
+ content: attr(data-drag);
+ display:none;
+}
+.bkmrklt a:hover:after {
+ background:rgba(0,0,0,0.8);
+ display:block;
+ position:absolute;
+ top:-3em;
+ left:30%;
+ padding:0.5em 1em;
+ font-family: "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif;
+ font-size:0.5em;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
}
.bkmrklt span {
color:#eebe5f;
+ font-size:0.9125em;
+ font-weight:200;
left: 11em;
letter-spacing:4px;
- position: absolute;
+ margin-left:0.5em;
text-transform:uppercase;
- top: 0.95em;
}
+
h3 {
- margin:0 0 1em;
+ margin:0 0 1.5em;
}
-#main aside {
- color:rgba(202,191,171,0.5);
- font-size: 0.75em;
- line-height: 1.7;
- padding-top: .4em;
- position: absolute;
- right: -21.5em;
- width: 16em;
+h3 a {
+ color:rgba(202,191,171,0.75);
+ font-weight:normal;
+ position:relative;
+ top:-4px;
}
#main ol {
- margin:0 0 1.5em;
+ margin:0;
}
#main ol li {
margin-bottom:1em;
}
-
-#main ol + p {
+#main ol li:last-child {
+ margin-bottom:0;
+}
+#main ol .note {
+ display:block;
+ font-size:0.8125em;
+ margin-top:1em;
+}
+#main aside {
+ color:rgba(202,191,171,0.5);
+ font-size: 0.75em;
+ line-height: 1.7;
+ margin:1em 0 4em;
+}
+aside strong {
+ margin-left:-8px;
+}
+#main aside + p {
background:url(../images/bang.png) no-repeat 3px 1px;
font-weight:bold;
padding-left:2em;
@@ -297,69 +406,36 @@ footer .twitter-share-button {
top:5px;
}
-
-
-
/* media queries for responsive design */
/* One-column - iPhone portrait and any 320px device */
@media (max-width:640px){
- .container{
- width: 320px;
+ body {font-size:85%;}
+ .typekit-badge {display:none !important;}
+ .content{
+ width: 310px;
+ margin:0 auto;
}
- #secondary{
- margin-left: 15px;
+ #main {
+ border:0;
+ margin:0;
+ padding-top:2em;
}
+ .rising {margin-top:13em !important;}
+ .setting {margin-top:-22em !important;}
+ hgroup h1 {font-size:2.6em !important;}
+ hgroup h2 {font-size:1.2em;letter-spacing:0 !important;}
+ .brave {left:5.25em;top:4.5em;}
+ hgroup + p strong {font-size:0.9em;}
+ .bkmrklt {text-align:center;}
+ .bkmrklt span {display:block;margin-top:1em;}
+ footer {font-size:95%;}
}
-/* One-column - iPhone landscape */
-@media (orientation:landscape) and (min-width:321px) and (max-width:480px){
- /*
- .container{
- width: 480px;
- }*/
-}
-
-/* Two-column - iPad */
+/* iPad */
@media (min-width:641px) and (max-width:960px){
- hgroup {
- margin-bottom:10em;
- }
-
-}
-
-/* 15" MacBook Pro */
-@media (min-width:1281px) and (max-width:1600px){
- .container{
- width: 1280px;
- }
-}
-
-/* 17" MacBook Pro, iMac */
-@media (min-width:1601px) and (max-width:1920px){
- .container{
- width: 1600px;
- }
-}
-
-/* HD */
-@media (min-width:1920px) and (max-width:2240px){
- .container{
- width: 1920px;
- }
-}
-
-@media all and (orientation:portrait) {
-
-}
-
-@media all and (orientation:landscape) {
-
-}
-
-/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
- consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
-@media screen and (max-device-width: 480px) {
-
+ #main {
+ margin:0 2em;
+ }
}
/* print styles */
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 17:27:57 +0000