fixes to sticky element and footer fixes

imarc · Feb 10, 2017 · ac06cf8 · ac06cf8
1 parent 06d8940
commit ac06cf8
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 29 deletions.
diff --git a/components/index.html b/components/index.html
@@ -65,7 +65,7 @@ <h1>Imarc Components list</h1>
                                 <a href="features.html">Features</a>
                             </li>
                             <li>
-                                <a href="mobile-navigation.html">Mobile Navigation</a>
+                                <a href="mobile-navigation.html">Mobile navigation</a>
                             </li>
                             <li>
                                 Modal windows
@@ -80,10 +80,10 @@ <h1>Imarc Components list</h1>
                                 <a href="pagination.html">Pagination</a>
                             </li>
                             <li>
-                                <a href="progress.html">Progress</a>
+                                <a href="progress.html">Progress breadcrumbs</a>
                             </li>
                             <li>
-                                <a href="scroll-to-section.html">Scroll to Section</a>
+                                <a href="scroll-to-section.html">Scroll to section</a>
                             </li>
                             <li>
                                 <a href="sticky-element.html">Sticky element</a>

diff --git a/components/progress.html b/components/progress.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title>Progress Component - Imarc</title>
+        <title>Progress Breadcrumbs Component - Imarc</title>
         <meta name="description" content="The Imarc Boilerplate is a streamlined starting point for building websites." />
         <meta name="web_author" content="Imarc, A Digital Agency | Boston + Silicon Valley | more info at imarc.com" />
         <meta name="viewport" content="width=device-width" />
@@ -14,9 +14,9 @@
             <main>
                 <section class="intro">
                     <div class="container">
-                        <h1>Progress Breadcrumb</h1>
+                        <h1>Progress Breadcrumbs</h1>
                         <p>
-                            Below is an example of a progress breadcrumb.
+                            Below is an example of progress breadcrumbs.
                         </p>
                     </div>
                 </section>

diff --git a/components/sticky-element.html b/components/sticky-element.html
@@ -12,26 +12,18 @@
     <body>
         <div class="torso">
             <div class="container">
-                <div class="group">
-                    <aside class="primary">
-                        <section style="background-color: #EEE; width: 100%; z-index: 1;">
-                            <h3>Sticky Bar</h3>
-                            <p>
-                                This is a simple sticky bar.
-                            </p>
-                        </section>
-                    </aside>
+               <section class="intro">
+                    <h1>Sticky Element</h1>
+                    <p>
+                        The Sticky Element component can be used to make elements switch between being in the flow of the page and being fixed. It can be used for sidebars, sticking images along scroll text, etc. It also supports having the element while 'stuck' move slowly if you'd like, for a parallax effect.
+                    </p>
+
+                    <p>
+                        This page includes both an example of an element stuck to the side as well as one stuck temporarily within the flow of the page.
+                    </p>
+                </section>
+                <div class="wrap">
                     <main>
-                       <section class="intro">
-                            <h1>Sticky Element</h1>
-                            <p>
-                                The Sticky Element component can be used to make elements switch between being in the flow of the page and being fixed. It can be used for sidebars, sticking images along scroll text, etc. It also supports having the element while 'stuck' move slowly if you'd like, for a parallax effect.
-                            </p>
-
-                            <p>
-                                This page includes both an example of an element stuck to the side as well as one stuck temporarily within the flow of the page.
-                            </p>
-                        </section>
 
                         <section>
                             <h2>Usage</h2>
@@ -226,6 +218,14 @@ <h2>
                         </section>
 
                     </main>
+                    <aside class="primary">
+                        <section style="background-color: #EEE; width: 100%; z-index: 1;">
+                            <h3>Sticky Bar</h3>
+                            <p>
+                                This is a simple sticky bar.
+                            </p>
+                        </section>
+                    </aside>
                 </div>
             </div>
         </div>

diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.scss b/css/styles.scss
@@ -559,6 +559,7 @@ footer.primary {
         }
     }
     nav ul {
+        justify-content: center;
         margin-bottom: 2rem;
         text-align: center;
     }
@@ -1053,14 +1054,16 @@ table {
     footer.primary {
         .wrapper {
             display: flex;
-            justify-content: space-between;
             > * {
                 flex: 1 0 0;
             }
             > nav {
                 flex-grow: 2;
                 margin-bottom: 0;
             }
+            > nav > ul {
+                justify-content: center;
+            }
         }
         .branding {
             margin-right: 0;