Commit cfc335e0 authored by Sindre Sorhus's avatar Sindre Sorhus

Site: Lots of changes

- Added in correct screenshot
- Cleanup - CSS/HTML
- Compress images
- Cave to my perfectionism syndrome
- Update content
- Labs app list now uses columns to auto wrap
- Lots more
parent accfecf0
This diff is collapsed.
html,
body { body {
font: 15px "Helvetica Neue", Helvetica, Arial; margin: 0;
padding: 0;
}
body {
font: 15px 'Helvetica Neue', Helvetica, Arial;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
width: auto; width: auto;
background: #EAEAEA url('../../assets/bg.png');
color: #4D4D4D;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
} }
h1, h1,
...@@ -11,9 +24,9 @@ h3, ...@@ -11,9 +24,9 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: 600; font-weight: 500;
line-height: 1.2;
color: #000; color: #000;
font:100% Oswald, Helvetica;
} }
h2 { h2 {
...@@ -30,13 +43,13 @@ a:hover { ...@@ -30,13 +43,13 @@ a:hover {
color: #787e7e; color: #787e7e;
} }
.nav-tabs > li > a, .nav-pills > li > a{ .nav-tabs > li > a,
line-height:23px; .nav-pills > li > a {
line-height: 23px;
} }
p { p {
/*font: 100% Merriweather, Georgia;*/ font-size: 15px;
font-size:14px;
line-height: 1.5; line-height: 1.5;
font-weight: 300; font-weight: 300;
} }
...@@ -46,36 +59,28 @@ hr { ...@@ -46,36 +59,28 @@ hr {
border-bottom: 1px dashed #F7F7F7; border-bottom: 1px dashed #F7F7F7;
} }
header h1 {
font-size: 100px;
line-height: 1.2;
/*text-shadow: 2px 2px 1px #7D2A2F;*/
font-weight: 900;
}
header p { header p {
font-size: 30px; font-size: 30px;
} line-height: 1.2;
margin-top: 10px;
header .btn-large {
font-size: 20px;
margin-right: 10px;
} }
header nav { header nav {
margin: 20px 0; margin-top: 20px;
} }
header nav a { header nav a:first-child {
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px;
} }
.logo{ .logo {
margin-top:70px; margin-top:70px;
} }
.nav-tabs > li, .nav-pills > li{ .nav-tabs > li,
clear:both; .nav-pills > li{
clear: both;
} }
.vertical-space li { .vertical-space li {
...@@ -88,103 +93,51 @@ header nav a { ...@@ -88,103 +93,51 @@ header nav a {
margin-bottom: 20px; margin-bottom: 20px;
} }
.hero-unit {
padding: 0;
margin: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #f5f5f5;
}
.hero-unit h1 {
font-size: 80px;
margin-bottom: 10px;
}
.hero-unit p {
font-size: 24px;
line-height: 32px;
}
.hero-unit .btn-large {
font-size: 20px;
font-weight: normal;
padding: 14px 24px;
width: 160px;
}
.hero-unit .btn-large:first-child {
margin-right: 10px;
}
.hero-unit nav {
margin-top: 35px;
margin-bottom: 10px;
}
.screenshot { .screenshot {
width: 528px;
float: right;
}
.header-title {
margin: 43px 60px;
float: none;
}
.container {
margin-top: 50px;
margin-bottom: 50px;
}
.nav-pills {
margin-left: -10px;
}
#icon {
float: right;
}
#screenshot {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 570px; max-width: 570px;
margin-top: 50px; margin-top: 12px;
} }
#app-preview { .tagline2 {
display: none; font-size: 21px;
margin-top: 43px; font-style: italic;
margin-left: -25px; margin-top: 40px;
} }
#demos { .container {
display: inline-block; margin-top: 10px;
margin-bottom: 20px;
} }
#demos ul { .nav-pills {
float: left; margin-left: -10px;
} }
#demos ul li { .applist a {
float: none; white-space: nowrap;
} }
#demos ul li a { .applist .label {
position: relative; position: relative;
top: -3px;
font-size: 9px;
padding: 1px 3px 1px;
background-color: rgba(0, 0, 0, .2);
} }
#demos .popover { .applist .popover {
margin: 0; margin: 0;
cursor: default; cursor: default;
color: #333; color: #333;
} }
#demos .popover-title { .applist .popover-title {
padding: 9px 70px 9px 15px; padding: 9px 70px 9px 15px;
} }
#demos .popover-title a { .applist .popover-title a {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
position: absolute; position: absolute;
...@@ -192,18 +145,17 @@ header nav a { ...@@ -192,18 +145,17 @@ header nav a {
right: 20px; right: 20px;
} }
.applist a { .applist.labs {
white-space: nowrap; -webkit-columns: 3;
} -moz-columns: 3;
-ms-columns: 3;
.applist .label { -o-columns: 3;
font-size: 9px; columns: 3;
padding: 1px 3px 1px;
background-color: rgba(0, 0, 0, .2);
} }
.credit a { .credit a {
margin: 0 5px; margin: 0 5px;
white-space: nowrap;
} }
.credit a img { .credit a img {
...@@ -215,8 +167,13 @@ header nav a { ...@@ -215,8 +167,13 @@ header nav a {
background-color: #a82400; background-color: #a82400;
} }
.zocial.black { .zocial.gray {
background-color: #333; background-color: rgba(0, 0, 0, .5);
}
.zocial.small {
font-size: 12px;
padding: 2px 10px;
} }
.zocial, .zocial,
...@@ -249,45 +206,54 @@ a.zocial { ...@@ -249,45 +206,54 @@ a.zocial {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#demos ul { .applist.labs {
float: none; -webkit-columns: auto !important;
-moz-columns: auto !important;
-ms-columns: auto !important;
-o-columns: auto !important;
columns: auto !important;
}
.credit a {
display: block;
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.screenshot {
width: 420px;
}
.header-title h1 {
font-size: 60px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.screenshot { h2 {
max-width: 528px !important; margin-top: 20px;
margin: 0 auto !important;
} }
.header-title {
margin: 30px !important; .row,
text-align: center; .credit {
max-width: 540px; margin-left: 10px;
margin: 30px auto !important; margin-right: 10px;
} }
.header-title h1 {
font-size: 60px; .logo {
max-width: 100%;
margin-top: 0;
} }
#demos ul {
margin: 0; .logo-icon {
font-size: 16px; display: none;
} }
}
@media (max-width: 1200px) { .container {
.header-title { margin: auto;
margin: 20px;
} }
.hero-unit .btn-large {
margin: 5px; .applist.labs {
-webkit-columns: 2;
-moz-columns: 2;
-ms-columns: 2;
-o-columns: 2;
columns: 2;
} }
} }
@media (max-width: 1200px) {
}
\ No newline at end of file
site/img/logo.png

7.8 KB | W: | H:

site/img/logo.png

3.48 KB | W: | H:

site/img/logo.png
site/img/logo.png
site/img/logo.png
site/img/logo.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment