Index: static/css/main.css |
=================================================================== |
--- a/static/css/main.css |
+++ b/static/css/main.css |
@@ -1,16 +1,11 @@ |
-* |
-{ |
- font-family: Arial, sans; |
- font-size: 16px; |
-} |
- |
body |
{ |
+ font-family: "Source Sans Pro", Arial, sans-serif; |
margin: 0; |
/* Start below fixed navbar */ |
padding-top: 4em; |
line-height: 1.5; |
} |
#content, |
#blog |
@@ -48,45 +43,16 @@ |
.sprite |
{ |
display: inline-block; |
font-size: 0px; /* fix for IE6 height bug */ |
background-image: url(../img/sprite-main.png); |
background-repeat: no-repeat; |
} |
-#adblock-browser-notification |
-{ |
- text-align: center; |
-} |
- |
-#adblock-browser-notification a |
-{ |
- font-weight: bold; |
-} |
- |
-#adblock-browser-notification img |
-{ |
- vertical-align: bottom; |
- width: 25px; |
- height: 25px; |
-} |
- |
-#adblock-browser-notification span |
-{ |
- white-space: nowrap; |
- margin-left: 1em; |
-} |
- |
-[dir="rtl"] #adblock-browser-notification span |
-{ |
- margin-left: 0; |
- margin-right: 1em; |
-} |
- |
.toc |
{ |
display: inline-block; |
border: 1px solid #aaa; |
background: #fff; |
padding: 16px 20px; |
} |
@@ -171,35 +137,54 @@ |
padding: 2em 0; |
} |
/****************************************************************************** |
* .content |
*****************************************************************************/ |
.content h1, |
+.content .h1, |
.content h2, |
.content h3, |
.content h4, |
.content h5 |
{ |
font-weight: bold; |
margin: 32px 0 16px 0; |
margin: 2rem 0 1rem 0; |
+ line-height: 1.4; |
} |
-.content h1 { font-size: 1.8em; } |
-.content h2 { font-size: 1.4em; } |
-.content h3 { font-size: 1.3em; } |
-.content h4 { font-size: 1.2em; } |
-.content h5 { font-size: 1.1em; } |
+.content h1, |
+.content .h1 { font-size: 1.4em; } |
+.content h2 { font-size: 1.3em; } |
+.content h3 { font-size: 1.2em; } |
+.content h4 { font-size: 1.1em; } |
+.content h5 { font-size: 1em; } |
+ |
+@media(min-width: 576px) |
+{ |
+ .content h1, |
+ .content .h1 { font-size: 1.6em; } |
+ .content h2 { font-size: 1.4em; } |
+ .content h3 { font-size: 1.3em; } |
+ .content h4 { font-size: 1.2em; } |
+ .content h5 { font-size: 1.1em; } |
+} |
@media(min-width: 768px) |
{ |
- .content h1 { font-size: 2.4em; } |
+ .content h1, |
+ .content .h1 |
+ { |
+ font-size: 2.4em; |
+ line-height: 1.3; |
+ } |
+ |
.content h2 { font-size: 1.6em; } |
} |
.content a, |
.content a:visited |
{ |
color: #c70d2c; |
} |
@@ -228,36 +213,36 @@ |
{ |
display: block; |
width: 100%; |
} |
} |
.button.primary |
{ |
- color: #fff; |
- background-color: #c70d2c; |
+ color: #fff !important; |
+ background-color: #c70d2c !important; |
box-shadow: 0px 2px 5px #95989A; |
} |
.button.primary:hover |
{ |
- background-color: #E00F32; |
+ background-color: #E00F32 !important; |
} |
.button.primary:active |
{ |
- background-color: #AD102A; |
+ background-color: #AD102A !important; |
} |
.button.accent, |
.button.accent:visited |
{ |
- background: #077CA6; |
- color: #fff; |
+ background: #077CA6 !important; |
+ color: #fff !important; |
margin-left: 2px; |
margin-right: 2px; |
} |
.button.accent:hover, |
.button.accent:active, |
.button.accent:focus |
{ |
@@ -268,16 +253,22 @@ |
* .fg-* utilities |
******************************************************************************/ |
.fg-accent |
{ |
color: #077CA6; |
} |
+.bg-secondary |
+{ |
+ color: #000; |
+ background-color: #F4F4F4; |
+} |
+ |
/******************************************************************************* |
* #navbar |
******************************************************************************/ |
#navbar |
{ |
min-height: 4em; |
background-color: #c70d2c; |
@@ -818,8 +809,155 @@ |
{ |
margin-top: -40px; |
} |
.hide |
{ |
display: none; |
} |
+ |
+/****************************************************************************** |
+ * .item-group |
+ *****************************************************************************/ |
+ |
+.item-group |
+{ |
+ text-align: center; |
+ padding-top: 3em; |
+ padding-bottom: 3em; |
+} |
+ |
+.item-group img |
+{ |
+ height: 5em; |
+ width: auto; |
+} |
+ |
+.item-group h2 |
+{ |
+ text-transform: uppercase; |
+} |
+ |
+@media (max-width: 575px) |
+{ |
+ .item-group .column |
+ { |
+ margin-bottom: 3em; |
+ } |
+ |
+ .item-group .column:last-of-type |
+ { |
+ margin-bottom: 0; |
+ } |
+} |
+ |
+@media (min-width: 576px) and (max-width: 1023px) |
+{ |
+ .item-group |
+ { |
+ text-align: left; |
+ } |
+ |
+ [dir="rtl"] .item-group |
+ { |
+ text-align: right; |
+ } |
+ |
+ .item-group .column |
+ { |
+ position: relative; |
+ width: auto; |
+ padding: 0 3em 2em 10.5em; |
+ min-height: 7em; /* Height of image plus 2em bottom padding */ |
+ } |
+ |
+ [dir="rtl"] .item-group .column |
+ { |
+ padding: 0 10.5em 2em 3em; |
+ } |
+ |
+ .item-group .column:last-of-type |
+ { |
+ padding-bottom: 0; |
+ min-height: 6em; /* Height of image */ |
+ } |
+ |
+ .item-group img |
+ { |
+ position: absolute; |
+ left: 3em; |
+ top: 0.5em; |
+ } |
+ |
+ [dir="rtl"] .item-group img |
+ { |
+ left: auto; |
+ right: 3em; |
+ } |
+ |
+ .item-group h2 |
+ { |
+ margin: 0; |
+ } |
+} |
+ |
+/* Horizontal List |
+ ******************************************************************************/ |
+ |
+.horizontal-list |
+{ |
+ display: inline; |
+ list-style: none; |
+} |
+ |
+.horizontal-list, |
+.content .horizontal-list |
+{ |
+ padding: 0; |
+} |
+ |
+.horizontal-list li |
+{ |
+ display: inline; |
+ list-style: none; |
+} |
+ |
+/* Download button |
+ ******************************************************************************/ |
+ |
+.content .tos-short |
+{ |
+ margin-bottom: 0.5em; |
+} |
+ |
+.content .install-button |
+{ |
+ display: inline-block; |
+ min-width: 250px; |
+ /* stretch full-width <= small tablets */ |
+ width: 100%; |
+ /* 0.2em taller than normal buttons */ |
+ padding-top: 0.8em; |
+ padding-bottom: 0.8em; |
+ color: #fff; |
+ background-color: #3D9C4F; |
+} |
+ |
+.content .install-button:hover, |
+.content .install-button:focus |
+{ |
+ background-color: #258333; |
+} |
+ |
+@media (min-width: 576px) |
+{ |
+ .content .install-button |
+ { |
+ /* force auto-width >= small tablets */ |
+ width: auto; |
+ } |
+} |
+ |
+.content .download-alt |
+{ |
+ font-size: smaller; |
+} |