Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/css/main.css

Issue 29841563: Noissue - Merged index_page into master (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Fixed misc issues discussed in IRC Created July 30, 2018, 3:38 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
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;
+}

Powered by Google App Engine
This is Rietveld