Issue 5740 - Implemented new abp.org footer styles

static/css/main.css

-/*******************************************************************************
- * Base styles
- ******************************************************************************/
-html {
-  color: #212121;
-  background-color: #fff;
-  font-family: sans-serif;
-  line-height: 1.5; }
-
-/**
- * Stretch content full-width
- */
-.full-width {
-  display: block;
-  width: 100%;
-  margin: 1em 0px; }
-
-/**
- * Center content within a (responsive) fixed width
- */
-.container {
-  width: auto;
-  max-width: 100%;
-  margin: 0px auto;
-  padding: 0px 1em; }
-
-@media (min-width: 768px) {
-  .container {
-    width: 720px; } }
-
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px; } }
-
-/*******************************************************************************
- * Grid component
- ******************************************************************************/
-/**
- * - .row contains one or more .column(s)
- * - .row clears .column(s)
- * - .row negates the left & right padding of it's left-most & right-most
- *   .column(s) while preserving consistent padding between .column(s)
- */
-.row {
-  margin: 0px -1em; }
-
-.row:after {
-  display: block;
-  clear: both;
-  content: ""; }
-
-/**
- * - .column is 100% width by default
- * - Modifier classes are applied to .column to change it's width
- * - Modifier classes behave differently on different device widths
- */
-.column {
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  padding: 0px 1em; }
-
-/* - .column(s) within .row .reverse appear in reverse order
- * - .column(s) within [dir=rtl] appear in reverse order respectively
- */
-.column,
-[dir="rtl"] .reverse .column {
-  float: left; }
-
-.row,
-.column {
-  box-sizing: border-box; }

[juliandoucette, 2017/10/05 17:09:57]

Oops! I fixed an issue here
https://codereview.adblockplus.org/29564718/diff/29564719/static/css/main.css...
- I'll update the other patchset and rebase.

-
-.reverse .column,
-[dir="rtl"] .column {
-  float: right; }
-
-@media (min-width: 768px) {
-  .one-half,
-  .one-fourth {
-    width: 50%; } }
-
-@media (min-width: 1200px) {
-  .one-third {
-    width: 33.333333%; }
-  .two-thirds {
-    width: 66.666667%; }
-  .one-fourth {
-    width: 25%; }
-  .three-fourths {
-    width: 75%; } }
-
 *
 {
   font-family: Arial, sans;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
@@ skipping 28 matching lines @@
 }
 
 .sprite
 {
   display: inline-block;
   font-size: 0px; /* fix for IE6 height bug */
   background-image: url(../img/sprite-main.png);
   background-repeat: no-repeat;
 }
 
-header
-{
-  display: block;
-  position: relative;
-  background: white;
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  box-shadow: 1px 1px 0 0 #d9d9d9;
-  z-index: 1;
-}
-
-header nav li
-{
-  padding: 0px 5px;
-}
-
-header nav li.selected
-{
-  color: #db1313;
-  text-shadow: 1px 1px 1px #eee;
-  cursor: default;
-}
-
-header nav li.install-link a
-{
-  color: #048e48;
-}
-
-header nav li.install-link .install-link-icon
-{
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background-position: -167px -13px;
-}
-
-.language-entry a
-{
-  display: block;
-}
-
-#logo
-{
-  position: absolute;
-  width: 128px;
-  height: 128px;
-  background-position: -83px -83px;
-}
-
-#content h1
-{
-  font-size: 30px;
-}
-
-#content h2
-{
-  font-weight: bold;
-  font-size: 25px;
-}
-
-#content h3
-{
-  font-size: 20px;
-}
-
 #adblock-browser-notification
 {
   text-align: center;
 }
 
 #adblock-browser-notification a
 {
   font-weight: bold;
 }
 
@@ skipping 33 matching lines @@
 .toc li
 {
   margin: 4px 0;
 }
 
 #social-list ul
 {
   list-style: none;
   padding: 0;
   margin: 0;
-}
-
-.social-entry
-{
-  display: inline-block;
-  margin: 0px 5px;
-}
-
-.social-entry a
-{
-  width: 82px;
-  height: 82px;
-  -webkit-transition: opacity .5s ease;
-  -moz-transition: opacity .5s ease;
-  -ms-transition: opacity .5s ease;
-  -o-transition: opacity .5s ease;
-  transition: opacity .5s ease;
-  opacity: .6;
-}
-
-.social-entry a:hover
-{
-  opacity: 1.0;
-}
-
-#social-facebook
-{
-  background-position: 0px 0px;
-}
-
-#social-twitter
-{
-  background-position: 0px -83px;
-}
-
-#social-gplus
-{
-  background-position: -83px 0px;
 }
 
 div.animation[started="false"]:before
 {
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ%2BIh5AAAAFVBMVEUAgAAAgAD%2F%2F%2F%2Fr9uvY7Ni%2B376h0aGeNpcsAAAAAXRSTlNtc%2BXFgwAAADVJREFUeF5dzVEKACAMAlC7QW6t%2F7r%2FIYOBEPr1GOgw2AHiduaHkwKXwBK4BYZdylrpy4K%2BP%2Fu5C1CVKVSzAAAAAElFTkSuQmCC);
   padding-left: 0px;
   padding-right: 3px;
 }
 
 html[dir="rtl"] div.animation[started="false"]:before
@@ skipping 24 matching lines @@
 [dir="ltr"] .alert
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }
 
-@media(max-width: 767px)
-{
-  #site-footer .column
+/******************************************************************************
+ * .content
+ *****************************************************************************/
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5
+{
+  font-weight: bold;
+  margin: 32px 0px;
+  margin: 2rem 0rem;
+}
+
+.content h1 { font-size: 2.4em; }
+.content h2 { font-size: 1.6em; }
+.content h3 { font-size: 1.3em; }
+.content h4 { font-size: 1.2em; }
+.content h5 { font-size: 1.1em; }
+
+/*******************************************************************************
+ * #navbar
+ ******************************************************************************/
+
+#navbar
+{
+  height: 4em;
+  background-color: #c70d2c;
+}
+
+#navbar li
+{
+  list-style-type: none;
+}
+
+/* padding provided by navbar contents */
+.navbar-container
+{
+  width: 1170px;
+  margin: 0 auto;
+}
+
+/* full-width under .container max-width */
+@media(max-width: 1199px)
+{
+  .navbar-container
+  {
+    width: 100%;
+  }
+}
+
+/* #navbar #navbar-logo
+ ******************************************************************************/
+
+#navbar-logo
+{
+  /* padding is visible in hover background-color change */
+  padding: 0em 1em;
+  color: #fff;
+}
+
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
+{
+  background-color: #AE0013;
+  text-decoration: none;
+}
+
+#navbar-logo,
+#navbar-logo > *
+{
+  float: left;
+}
+
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
+{
+  float: right;
+}
+
+#navbar-logo img
+{
+  height: 4em;
+  padding: 0.5em 0em;
+  margin: 0em 1em 0em 0em;
+}
+
+[dir="rtl"] #navbar-logo > img
+{
+  margin: 0em  0em 0em 1em;
+}
+
+#navbar-logo > span
+{
+  /* full-height: 2.91 * 1.375 = ~4em */
+  line-height: 2.91em;
+  font-size: 1.375em;
+}
+
+/* #navbar #navbar-menu-toggle
+ ******************************************************************************/
+
+#navbar-menu-toggle
+{
+  float: right;
+  padding: 1em;
+}
+
+[dir="rtl"] #navbar-menu-toggle
+{
+  float: left;
+}
+
+/* show on mobile */
+#navbar-menu-toggle,
+#navbar-menu-toggle > img
+{
+  display: block;
+}
+
+/* hide on desktop */
+@media(min-width: 992px)
+{
+  #navbar-menu-toggle
   {
     display: none;
   }
-
-  #site-footer #social-list

[juliandoucette, 2017/10/05 17:09:56]

This is suspicious. 

+}
+
+#navbar-menu-toggle > img
+{
+  /* plus 2em padding = 4em */
+  height: 2em;
+}
+
+#navbar-menu-toggle:hover,
+#navbar-menu-toggle:active,
+#navbar-menu-toggle:focus
+{
+  background-color: #AE0013;
+}
+
+/* #navbar #navbar-menu
+ ******************************************************************************/
+
+#navbar-menu a
+{
+  display: block;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* #navbar #navbar-menu #navbar-locale-menu
+ ******************************************************************************/
+
+/* caret */
+#navbar-locale-selected:after
+{
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin: 0em 0em 0em 0.255em;
+  vertical-align: .255em;
+  content: "";
+  border-top: .3em solid;
+  border-right: .3em solid transparent;
+  border-left: .3em solid transparent;
+}
+
+[dir="rtl"] #navbar-locale-selected:after
+{
+  margin: 0em 0.255em 0em 0em;
+}
+
+#navbar-locale-menu
+{
+  display: none;
+}
+
+#navbar-locale-menu.visible
+{
+  display: block;
+}
+
+#navbar-locale-menu > li > a
+{
+  padding: 0.75em 1em;
+}
+
+#navbar-locale-menu > li > a:hover,
+#navbar-locale-menu > li > a:active,
+#navbar-locale-menu > li > a:focus
+{
+  background-color: #434343;
+}
+
+/* #navbar #navbar-menu (desktop)
+ ******************************************************************************/
+
+@media(min-width: 992px)
+{
+  #navbar-menu
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-menu
+  {
+    float: left;
+  }
+
+  #navbar-menu > li,
+  #navbar-menu > li > a
+  {
+    display: inline-block;
+  }
+
+  #navbar-menu > li > a
+  {
+    padding: 0em 1em;
+    line-height: 4em;
+  }
+
+  #navbar-menu > li > a:hover,
+  #navbar-menu > li > a:active,
+  #navbar-menu > li > a:focus
+  {
+    background-color: #AE0013;
+  }
+
+  /* #navbar #navbar-menu #navbar-locale-menu
+   ****************************************************************************/
+
+  #navbar-locale-menubar
+  {
+    position: relative;
+  }
+
+  #navbar-locale-menu
+  {
+    position: absolute;
+    min-width: 16em;
+    max-height: 20em;
+    max-height: 50vh;
+    top: 100%;
+    right: 0px;
+    overflow: auto;
+    z-index: 9001;
+    background-color: #292929;
+  }
+
+  [dir="rtl"] #navbar-locale-menu
+  {
+    right: auto;
+    left: 0px;
+  }
+}
+
+/* #navbar #navbar-menu (mobile)
+ ******************************************************************************/
+
+@media(max-width: 991px)
+{
+  #navbar-menu
+  {
+    display: none;
+    float: left;
+    clear: both;
+    width: 100%;
+    background-color: #292929;
+  }
+
+  #navbar-menu.visible
   {
     display: block;
   }
 
-  #site-footer #social-list ul
-  {
-    margin: 0em 1em;
-  }
-}
-
-#site-footer

[juliandoucette, 2017/10/05 17:09:57]

I should probably order and/or separate (comment) this better (everything
#site-footer related). 

-{
+  #navbar-menu li a
+  {
+    padding: 0.75em 1em;
+  }
+
+  #navbar-menu li a:hover,
+  #navbar-menu li a:active,
+  #navbar-menu li a:focus
+  {
+    background-color: #434343;
+  }
+}
+
+/*******************************************************************************
+ * #footer
+ ******************************************************************************/
+
+#footer
+{
+  overflow: auto;
   margin-top: 2em;
   padding: 2em 0em;
   color: #ececec;
   background-color: #292929;
-  overflow: auto;
-}
-
-#site-footer h5
-{
-  color: #ececec;
-  font-size: 22px;
-  margin: 16px 0px 40px 0px;
-}
-
-#site-footer h5::after

[juliandoucette, 2017/10/05 17:09:57]

Note: I took this from https://codereview.adblockplus.org/29536654/

+  font-size: 0.9em;
+}
+
+/* #footer body
+ ******************************************************************************/
+
+#footer h5
+{
+  margin-top: 1em;
+  margin-bottom: 1.5em;
+}
+
+#footer h5:after
 {
   content: "";
   display: block;
-  width: 30px;
-  height: 3px;

[juliandoucette, 2017/10/05 17:09:57]

This is probably too wide.

-  margin: 16px 0px 0px 0px;
-  border: none;
+  width: 1.25em;
+  height: 0.125em;
+  margin-top: 0.5em;
   background-color: #ececec;
 }
 
-#site-footer p
-{
-  font-size: 18px;
-}
-
-#site-footer li
-{
+#footer ul
+{
+  padding: 0em;
   list-style-type: none;
 }
 
-#site-footer ul
-{
-  padding: 0px;
-}
-
-#site-footer a
-{
-  font-size: 18px;
+#footer a
+{
   color: #ececec;
-  text-decoration: none;
-}
-
-#site-footer a:hover,
-#site-footer a:active,
-#site-footer a:focus
+}
+
+#footer a:hover,
+#footer a:active,
+#footer a:focus
 {
   color: #fff;
   text-decoration: underline;
 }
 
+/* #footer #social-list
+ ******************************************************************************/
+
+#social-list ul
+{
+  /* negative margin canceled out by li margin below */
+  margin: 0em -0.375em;
+}
+
+#social-list li
+{
+  float: left;
+  margin: 0em 0.375em;
+}
+
+[dir="rtl"] #social-list li
+{
+  float: right;
+}
+
+#social-list img
+{
+  height: 2em;
+}
+
+@media(min-width: 1200px)
+{
+  #social-list img
+  {
+    height: 3em;
+  }
+}
+
+/* #footer #footer-legal
+ ******************************************************************************/
+
 #footer-legal
 {
-  margin-top: 3em;
-}
-
-#site-footer #copyright-notice,
-#site-footer #copyright-notice a,
-#legal-list a
-{
-  font-size: 14px;
-}
-
-@media(min-width: 768px)
-{
-  #site-footer #copyright-notice,
-  #site-footer #copyright-notice a,
-  #legal-list a
-  {
-    font-size: 16px;
-  }
-}
-
-#social-list li,
+  margin-top: 1em;
+}
+
+@media(min-width: 1200px)
+{
+  #footer-legal
+  {
+    margin-top: 2em;
+  }
+}
+
+/* #footer #footer-legal #legal-list
+ ******************************************************************************/
+
 #legal-list li
 {
-  display: block;
   float: left;
 }
 
-#social-list li
-{
-  margin-right: 10px;
-}
-
-[dir="rtl"] #social-list li
-{
-  margin-left: 10px;
-}
-
-#social-list img
-{
-  height: 40px;
-}
-
+[dir="rtl"] #legal-list li
+{
+  float: right;
+}
+
+#legal-list li:after
+{
+  margin: 0em 0.375em;
+}
+
+/* IE9+ only */
 #legal-list li::after
 {
-  margin: 0px 5px;
   content: "|"
 }
 
 #legal-list li:last-of-type::after
 {
   content: none;
 }
 
-@media(min-width: 1024px)
+/* float copyright and legal links left and right on ~desktop */
+@media(min-width: 1200px)
 {
   #copyright-notice
   {
     float: left;
   }
 
   [dir="rtl"] #copyright-notice
   {
     float: right;
   }
 
   #legal-list
   {
     float: right;
   }
 
   [dir="rtl"] #legal-list
   {
     float: left;
   }
 }
+
+/* hide all footer links except #social-list on ~mobile */
+@media(max-width: 767px)
+{
+  #footer .column
+  {
+    display: none;
+  }
+
+  /* overriding display:none above */
+  #footer #social-list
+  {
+    display: block;
+  }
+}