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

responsive tweaks and social icons

writing-page-updates
eupiteco 6 years ago
parent
3a670e18dc
commit
697db1874a
5 changed files with 107 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      _includes/components/footer.html
  2. 17
      _site/assets/styles/components.scss
  3. 8
      _site/assets/styles/main.css
  4. 47
      _site/components/index.html
  5. 17
      assets/styles/components.scss

47
_includes/components/footer.html
View File

@ -29,19 +29,50 @@
</ul> </ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu"> <ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
<span>Follow us</span> <span>Follow us</span>
<div class="footer__social-media" > <div class="row footer__social-media" >
<li class="footer__social-media-icon" ></li> <li>
<li class="footer__social-media-icon" ></li> <svg
<li class="footer__social-media-icon" ></li> class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="../assets/images/feather-sprite.svg#github"/>
</svg>
</li>
<li>
<svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="../assets/images/feather-sprite.svg#twitter"/>
</svg>
</li>
<li>
<svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="../assets/images/feather-sprite.svg#slack"/>
</svg>
</li>
</div> </div>
</ul> </ul>
</div> </div>
<div class="spacer col-12" ></div> <div class="spacer col-12" ></div>
<div class="footer-extras row"> <div class="footer-extras row">
<div class="col-lg-2 col-md-4 col-sm-6" > <div class="footer-extras__logo col-md-6 col-sm-12" >
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" /> <img class="mb-3" 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 /> <p>© 2018 The Invisible Internet Project<br />
Content available under a Creative Commons license.</p> Content available under a Creative Commons license.</p>
</div> </div>

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

@ -343,6 +343,7 @@
list-style: none; list-style: none;
font-weight: 600; font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
margin-bottom: 2rem;
span { span {
display: block; display: block;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -358,14 +359,16 @@
} }
&__social-media { &__social-media {
display: flex; display: flex;
margin-top: 16px !important;
&-icon { &-icon {
content: " "; height: 40px;
width: 75px; width: 40px;
height: 75px;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5);
border-radius: 75px; &:hover {
color: $oc-white;
}
} }
} }
@ -375,6 +378,10 @@
margin: 0 0.5rem; margin: 0 0.5rem;
} }
} }
&__logo img {
max-width: 180px;
height: auto;
}
} }
.spacer { .spacer {
content: " "; content: " ";

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

@ -184,13 +184,15 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0); mar
.badge-secondary { background-color: #60AB60 !important; } .badge-secondary { background-color: #60AB60 !important; }
.footer ul { list-style: none; font-weight: 600; text-transform: capitalize; } .footer ul { list-style: none; font-weight: 600; text-transform: capitalize; margin-bottom: 2rem; }
.footer ul span { display: block; margin-bottom: 0.5em; } .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 { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.footer ul a:hover { color: #ffffff; } .footer ul a:hover { color: #ffffff; }
.footer__social-media { display: flex; } .footer__social-media { display: flex; margin-top: 16px !important; }
.footer__social-media-icon { content: " "; width: 75px; height: 75px; margin-right: 1rem; margin-bottom: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 75px; } .footer__social-media-icon { height: 40px; width: 40px; margin-right: 1rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.5); }
.footer__social-media-icon:hover { color: #ffffff; }
.footer-extras ul li { margin: 0 0.5rem; } .footer-extras ul li { margin: 0 0.5rem; }
.footer-extras__logo img { max-width: 180px; height: auto; }
.footer .spacer { content: " "; height: 2rem; } .footer .spacer { content: " "; height: 2rem; }
#styleguide-nav { background-color: #4661A9 !important; } #styleguide-nav { background-color: #4661A9 !important; }

47
_site/components/index.html
View File

@ -291,19 +291,50 @@
</ul> </ul>
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu"> <ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
<span>Follow us</span> <span>Follow us</span>
<div class="footer__social-media" > <div class="row footer__social-media" >
<li class="footer__social-media-icon" ></li> <li>
<li class="footer__social-media-icon" ></li> <svg
<li class="footer__social-media-icon" ></li> class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="../assets/images/feather-sprite.svg#github"/>
</svg>
</li>
<li>
<svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="../assets/images/feather-sprite.svg#twitter"/>
</svg>
</li>
<li>
<svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="../assets/images/feather-sprite.svg#slack"/>
</svg>
</li>
</div> </div>
</ul> </ul>
</div> </div>
<div class="spacer col-12" ></div> <div class="spacer col-12" ></div>
<div class="footer-extras row"> <div class="footer-extras row">
<div class="col-lg-2 col-md-4 col-sm-6" > <div class="footer-extras__logo col-md-6 col-sm-12" >
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" /> <img class="mb-3" 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 /> <p>© 2018 The Invisible Internet Project<br />
Content available under a Creative Commons license.</p> Content available under a Creative Commons license.</p>
</div> </div>

17
assets/styles/components.scss
View File

@ -343,6 +343,7 @@
list-style: none; list-style: none;
font-weight: 600; font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
margin-bottom: 2rem;
span { span {
display: block; display: block;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -358,14 +359,16 @@
} }
&__social-media { &__social-media {
display: flex; display: flex;
margin-top: 16px !important;
&-icon { &-icon {
content: " "; height: 40px;
width: 75px; width: 40px;
height: 75px;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5);
border-radius: 75px; &:hover {
color: $oc-white;
}
} }
} }
@ -375,6 +378,10 @@
margin: 0 0.5rem; margin: 0 0.5rem;
} }
} }
&__logo img {
max-width: 180px;
height: auto;
}
} }
.spacer { .spacer {
content: " "; content: " ";

Write Preview
Loading…
Cancel
Save