uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

added footer to the components

pull/1/head
eupiteco 6 years ago
parent
6ddd008d66
commit
919d815412
7 changed files with 228 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      _includes/components/footer.html
  2. 3
      _layouts/components.html
  3. 46
      _site/assets/styles/components.scss
  4. 13
      _site/assets/styles/main.css
  5. 67
      _site/components/index.html
  6. 46
      assets/styles/components.scss
  7. 1
      components.md

58
_includes/components/footer.html
View File

@ -0,0 +1,58 @@
<div class="page-header mb-4">
<h3>Footer</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="footer col-12 p-5 background-primary text-white">
<div class="footer__wrapper col-lg-10 col-md-12 mx-auto" id="<++>">
<div class="row" id="footer-lists">
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
<span>I2P</span>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">events</a></li>
<li><a href="#">contact us</a></li>
</ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-gettingStarted-menu">
<span>Getting started</span>
<li><a href="#">guides</a></li>
<li><a href="#">technology</a></li>
<li><a href="#">api</a></li>
<li><a href="#">docs</a></li>
</ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-getInvolved-menu">
<span>get involved</span>
<li><a href="#">contribute</a></li>
<li><a href="#">donate</a></li>
<li><a href="#">partners</a></li>
<li><a href="#">run OONI</a></li>
</ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
<span>Follow us</span>
<div class="footer__social-media" >
<li class="footer__social-media-icon " ></li>
<li class="footer__social-media-icon" ></li>
<li class="footer__social-media-icon" ></li>
</div>
</ul>
</div>
<div class="spacer col-12" id=""></div>
<div class="footer-extras row">
<div class="col-lg-2 col-md-4 col-sm-6" >
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12" >
<p>© 2018 The Invisible Internet Project<br />
Content available under a Creative Commons license.</p>
</div>
<div class="col-lg-4 col-sm-12" >
<ul class="d-flex flex-wrap pl-0">
<li><a href="#">data policy</a></li>
<li><a href="#">legal</a></li>
<li><a href="#">sitemap</a></li>
<li><a href="#">ipressum</a></li>
</ul>
</div>
</div>
</div>
</div>

3
_layouts/components.html
View File

@ -32,6 +32,9 @@
{% include components/forms.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/footer.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/navbar.html %}
</div>
<div class="component-wrapper my-5" id="">

46
_site/assets/styles/components.scss
View File

@ -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 {

13
_site/assets/styles/main.css
View File

@ -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; }

67
_site/components/index.html
View File

@ -99,6 +99,12 @@
<a href="#footer"><li class="list-group-item rb-sidebar">
Footer
</li></a>
<a href="#forms"><li class="list-group-item rb-sidebar">
Forms
</li></a>
@ -295,6 +301,67 @@
</form>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4">
<h3>Footer</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="footer col-12 p-5 background-primary text-white">
<div class="footer__wrapper col-lg-10 col-md-12 mx-auto" id="<++>">
<div class="row" id="footer-lists">
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
<span>I2P</span>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">events</a></li>
<li><a href="#">contact us</a></li>
</ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-gettingStarted-menu">
<span>Getting started</span>
<li><a href="#">guides</a></li>
<li><a href="#">technology</a></li>
<li><a href="#">api</a></li>
<li><a href="#">docs</a></li>
</ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-getInvolved-menu">
<span>get involved</span>
<li><a href="#">contribute</a></li>
<li><a href="#">donate</a></li>
<li><a href="#">partners</a></li>
<li><a href="#">run OONI</a></li>
</ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
<span>Follow us</span>
<div class="footer__social-media" >
<li class="footer__social-media-icon " ></li>
<li class="footer__social-media-icon" ></li>
<li class="footer__social-media-icon" ></li>
</div>
</ul>
</div>
<div class="spacer col-12" id=""></div>
<div class="footer-extras row">
<div class="col-lg-2 col-md-4 col-sm-6" >
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12" >
<p>© 2018 The Invisible Internet Project<br />
Content available under a Creative Commons license.</p>
</div>
<div class="col-lg-4 col-sm-12" >
<ul class="d-flex flex-wrap pl-0">
<li><a href="#">data policy</a></li>
<li><a href="#">legal</a></li>
<li><a href="#">sitemap</a></li>
<li><a href="#">ipressum</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div id="header" class="mb-4">

46
assets/styles/components.scss
View File

@ -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 {

1
components.md
View File

@ -8,6 +8,7 @@
- badges: Badges
- buttons: Buttons
- cards: Cards
- footer: Footer
- forms: Forms
- header: Header
- pagination: Pagination

Write Preview
Loading…
Cancel
Save