Issue 5740 - Implemented new abp.org footer styles

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -133,34 +133,16 @@
 .sprite
 {
   display: inline-block;
   font-size: 0px; /* fix for IE6 height bug */
   background-image: url(../img/sprite-main.png);
   background-repeat: no-repeat;
 }
 
-nav ul
-{
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-nav a:link, nav a:visited
-{
-  color: #7d7d7d;
-  text-decoration: none;
-}
-
-nav a:hover
-{
-  text-decoration: underline;
-}
-
 header
 {
   display: block;
   position: relative;
   background: white;
   border: 1px solid #d9d9d9;
   border-top: none;
   box-shadow: 1px 1px 0 0 #d9d9d9;
@@ -264,88 +246,23 @@
   padding-left: 40px;
 }
 
 .toc li
 {
   margin: 4px 0;
 }
 
-#footer-main
-{
-  display: block;
-  background: white;
-  box-shadow: 0 -1px 0 0 #b5b4b0, 0 -2px 0 0 #e4e1dc;
-  padding: 0;
-  line-height: 1;
-}
-
-#footer-main nav h1, #footer-main nav li
-{
-  color: #444444;
-  border-bottom: 1px solid #dedede;
-}
-
-#footer-main h1
-{
-  font-size: 16px;
-  margin-top: 0;
-  margin-bottom: 15px;
-}
-
-#footer-main nav li
-{
-  margin-bottom: 5px;
-}
-
-#social-list
+#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;
 }
 
-.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
@@ -377,8 +294,165 @@
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }
+
+/*******************************************************************************

[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
+{
+  overflow: auto;
+  margin-top: 2em;
+  padding-top: 2em;
+  padding-bottom: 2em;
+  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.

+{
+  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.

+  background-color: #ececec;
+}
+
+#site-footer li
+{
+  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
+{
+  color: #ececec;
+  text-decoration: none;
+}
+
+#site-footer a:hover,
+#site-footer a:active,
+#site-footer a:focus
+{
+  color: #fff;
+  text-decoration: underline;
+}
+
+/* #site-footer #social-list
+ ******************************************************************************/
+
+#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;
+}
+
+[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
+ ******************************************************************************/
+
+#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
+ ******************************************************************************/
+
+#legal-list li
+{
+  display: block;
+  float: left;
+}
+
+[dir="rtl"] #legal-list li
+{
+  float: right;
+}
+
+#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
+  {
+    display: none;
+  }
+
+  /* overriding display:none above */
+  #site-footer #social-list
+  {
+    display: block;
+  }
+}