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; }
-
-.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 26 matching lines @@
   border: 1px solid black;
   overflow: auto;
 }
 
 .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 30 matching lines @@
 .toc ul ul
 {
   padding-left: 40px;
 }
 
 .toc li
 {
   margin: 4px 0;
 }
 
 #social-list ul

[juliandoucette, 2017/10/06 13:03:40]

Forgot about this style :D - It should probably be moved or removed.

[ire, 2017/10/09 10:38:02]

Acknowledged.

 {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 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;
@@ skipping 28 matching lines @@
 [dir="ltr"] .alert
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }
 
+/******************************************************************************
+ * .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; }
+
 /*******************************************************************************

[juliandoucette, 2017/10/06 13:03:40]

What do you think of this comment style?

/**
 * Category
 */

/* Subcategory
 */

(except lines are 80 char width)

[ire, 2017/10/09 10:38:03]

I don't mind it being used for subcategories, but I prefer the full-length lines
for the headings of each category. I's much easier to read for me

[juliandoucette, 2017/10/09 16:44:12]

That's what I meant by "(except lines are 80 char width)"... as seen
above/below.

[ire, 2017/10/09 17:01:13]

Oh alright. I thought you meant literally what you wrote. I like the style then.

- * #site-footer
- ******************************************************************************/
-
-#site-footer
+ * #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;
+  }
+}
+
+#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;
+  }
+
+  #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-top: 2em;
-  padding-bottom: 2em;
+  padding: 2em 0em;
   color: #ececec;
   background-color: #292929;
   font-size: 0.9em;
 }
 
-/* #site-footer body
- ******************************************************************************/
-
-#site-footer h5::after

[ire, 2017/10/09 10:38:03]

This should be `:after`

[juliandoucette, 2017/10/11 13:12:06]

Done.

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

[ire, 2017/10/09 10:38:03]

If the width changes with the font size, I think the height should too

[juliandoucette, 2017/10/11 13:12:07]

Good point. Done.

-  margin: 1em 0em 0em 0em;

[ire, 2017/10/09 10:38:02]

NIT: I don't think you need to set the margins for all the sides since the only
change you're making is with the top margin

[juliandoucette, 2017/10/11 13:12:06]

Done.

-  border: none;

[ire, 2017/10/09 10:38:02]

I don't think this style is needed. There isn't a border applied by default
(unless this happens in some browser I'm not aware of)

[juliandoucette, 2017/10/11 13:12:06]

Acknowledged.

+  height: 0.125em;
+  margin-top: 0.5em;
   background-color: #ececec;
 }
 
-#site-footer li
-{
+#footer ul
+{
+  padding: 0em;
   list-style-type: none;

[ire, 2017/10/09 10:38:02]

NIT: I don't know if it makes a difference, but I prefer to add the `list-style:
none` to the `ul` element, and it'll be applied to the `li`s. In my mind (no
evidence for/against) it's more performant. I'll have to do some research on if
this is actually the case or not..

[juliandoucette, 2017/10/11 13:12:07]

Acknowledged.

Never thought about this.

 }
 
-#site-footer ul
-{
-  padding: 0px;
-}
-
-#site-footer a
+#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;
 }
 
-/* #site-footer #social-list
- ******************************************************************************/
+/* #footer #social-list
+ ******************************************************************************/
+
+#social-list ul
+{
+  /* negative margin canceled out by li margin below */
+  margin: 0em -0.375em;
+}
 
 #social-list li

[ire, 2017/10/09 10:38:03]

I think your trick of using negative margins on the parent and positive margins
on the children will work perfectly here, so you don't need the floating or the
rtl styles. e.g.:

```
#social-list ul
{
  margin-right: -0.5em;
  margin-left: -0.5em;
}

#social-list li
{
  display: inline-block;
  margin-right: 0.5em;
  margin-left: 0.5em;
}

```

And from my tests everything still fits on the one line even with the additional
space between the icons

[juliandoucette, 2017/10/11 13:12:06]

Yep. Done.

 {
-  display: block;
   float: left;
+  margin: 0em 0.375em;
 }
 
 [dir="rtl"] #social-list li
 {
   float: right;
 }
 
-#social-list li
-{
-  margin-right: 0.5em;
-}
-
-[dir="rtl"] #social-list li
-{
-  margin-left: 0.5em;
-}
-
 #social-list img
 {
   height: 2em;
 }
 
-/* #site-footer #footer-legal
+@media(min-width: 1200px)
+{
+  #social-list img
+  {
+    height: 3em;
+  }
+}
+
+/* #footer #footer-legal
  ******************************************************************************/
 
 #footer-legal
 {
-  overflow: auto;

[ire, 2017/10/09 10:38:03]

NIT: I was a bit confused about why this style was here, then I realised it was
to stop the margins collapsing. To my eyes, it looks as though the non-collapsed
margins are bigger (therefore uneven) than the space between the other list
sections, so I'm not sure it's actually necessary to have. 

[juliandoucette, 2017/10/11 13:12:07]

There is no good reason for this.

-  margin-top: 2em;
-  font-size: 0.8em;
-}
-
-/* #site-footer #footer-legal #legal-list
+  margin-top: 1em;
+}
+
+@media(min-width: 1200px)
+{
+  #footer-legal
+  {
+    margin-top: 2em;
+  }
+}
+
+/* #footer #footer-legal #legal-list
  ******************************************************************************/
 
 #legal-list li
 {
-  display: block;
   float: left;
 }
 
 [dir="rtl"] #legal-list li
 {
   float: right;
 }
 
+#legal-list li:after
+{
+  margin: 0em 0.375em;
+}
+
+/* IE9+ only */
 #legal-list li::after
 {
-  margin-left: 0.25em;
-  margin-right: 0.25em;

[ire, 2017/10/09 10:38:02]

Since the margin i sonly applied to the `::after` element, it doesn't apply to
lt IE 9 so the list items have no spacing between them.

[juliandoucette, 2017/10/11 13:12:06]

Good point.

   content: "|"
 }
 
 #legal-list li:last-of-type::after
 {
   content: none;
 }
 

[juliandoucette, 2017/10/06 13:03:40]

Maybe I should put a #site-footer comment here?

[ire, 2017/10/09 10:38:03]

Sure. Or you can group all the `#site-footer #footer-legal` under that one
comment instead of further diving them. I'm fine either way.

 /* 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;
   }
 }
 

[juliandoucette, 2017/10/06 13:03:40]

Maybe I should move this up? e.g. under #site-footer or #site-footer
#social-list? What do you think?

 /* hide all footer links except #social-list on ~mobile */
 @media(max-width: 767px)
 {
-  #site-footer .column
+  #footer .column
   {
     display: none;
   }
 
   /* overriding display:none above */
-  #site-footer #social-list
+  #footer #social-list
   {
     display: block;
   }
 }