From 919d8154128044985f446fbe914909d8565d7b75 Mon Sep 17 00:00:00 2001 From: eupiteco Date: Sun, 5 Aug 2018 19:24:24 -0300 Subject: [PATCH] added footer to the components --- _includes/components/footer.html | 58 +++++++++++++++++++++++++ _layouts/components.html | 3 ++ _site/assets/styles/components.scss | 46 +++++++++++++++++++- _site/assets/styles/main.css | 13 +++++- _site/components/index.html | 67 +++++++++++++++++++++++++++++ assets/styles/components.scss | 46 +++++++++++++++++++- components.md | 1 + 7 files changed, 228 insertions(+), 6 deletions(-) create mode 100644 _includes/components/footer.html diff --git a/_includes/components/footer.html b/_includes/components/footer.html new file mode 100644 index 0000000..c6f4173 --- /dev/null +++ b/_includes/components/footer.html @@ -0,0 +1,58 @@ +
+

Footer

+ +
+ +
+
+ +
+
+
+ +
+
+

© 2018 The Invisible Internet Project
+ Content available under a Creative Commons license.

+
+
+ +
+
+
+
diff --git a/_layouts/components.html b/_layouts/components.html index 1fd6636..f83ad4c 100644 --- a/_layouts/components.html +++ b/_layouts/components.html @@ -32,6 +32,9 @@ {% include components/forms.html %}
+ {% include components/footer.html %} +
+
{% include components/navbar.html %}
diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss index bb9e674..1c9e10d 100644 --- a/_site/assets/styles/components.scss +++ b/_site/assets/styles/components.scss @@ -138,7 +138,7 @@ } .color-gray-9 { - color: $oc-gray-3; + color: $oc-gray-9; } .rb-code { @@ -290,7 +290,7 @@ } .btn-pill { - border-radius: 300px; //make it huge so itis alwas in pill shape + border-radius: 30px; } .faq__chevron-up { @@ -312,6 +312,48 @@ background-color: $secondary !important; } +.footer { + ul { + list-style: none; + font-weight: 600; + text-transform: capitalize; + span { + display: block; + margin-bottom: 0.5em; + } + a { + color: rgba(255,255,255,0.5); + font-weight: 400; + + &:hover { + color: $oc-white; + } + } + } + &__social-media { + display: flex; + &-icon { + content: " "; + width: 75px; + height: 75px; + margin-right: 1rem; + background-color: rgba(255,255,255,0.5); + border-radius: 75px; + } + } + + &-extras{ + ul { + li { + margin: 0 0.5rem; + } + } + } + .spacer { + content: " "; + height: 2rem; + } +} #styleguide-nav { background-color: $oc-white !important; .nav-item:hover { diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css index 19b437f..ee62ba7 100644 --- a/_site/assets/styles/main.css +++ b/_site/assets/styles/main.css @@ -129,7 +129,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .color-secondary { color: #60AB60; } -.color-gray-9 { color: #dee2e6; } +.color-gray-9 { color: #212529; } .rb-code { font-family: 'Source Code Pro', monospace !important; } @@ -168,7 +168,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .btn-scroller:active, .btn-scroller:focus, .btn-scroller:hover { color: #00000b; background-color: #aaaab0; } -.btn-pill { border-radius: 300px; } +.btn-pill { border-radius: 30px; } .faq__chevron-up { height: .8em; vertical-align: -.06em; fill: currentColor; margin-left: .5em; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } @@ -176,6 +176,15 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .badge-secondary { background-color: #60AB60 !important; } +.footer ul { list-style: none; font-weight: 600; text-transform: capitalize; } +.footer ul span { display: block; margin-bottom: 0.5em; } +.footer ul a { color: rgba(255, 255, 255, 0.5); font-weight: 400; } +.footer ul a:hover { color: #ffffff; } +.footer__social-media { display: flex; } +.footer__social-media-icon { content: " "; width: 75px; height: 75px; margin-right: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 75px; } +.footer-extras ul li { margin: 0 0.5rem; } +.footer .spacer { content: " "; height: 2rem; } + #styleguide-nav { background-color: #ffffff !important; } #styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; } #styleguide-nav .nav-item:hover .nav-link { color: #4661A9; } diff --git a/_site/components/index.html b/_site/components/index.html index 44b6903..54e9ac2 100644 --- a/_site/components/index.html +++ b/_site/components/index.html @@ -99,6 +99,12 @@ +
  • + Footer +
    • + + +
  • Forms
    • @@ -295,6 +301,67 @@
    + +
    +
    +

    Footer

    + +
    + +
    +
    + +
    +
    +
    + +
    +
    +

    © 2018 The Invisible Internet Project
    + Content available under a Creative Commons license.

    +
    +
    + +
    +
    +
    +
    +