Browse Source

Merge pull request #1 from uracreative/new-components

New components
writing-page-updates
Piteco 7 years ago
committed by GitHub
parent
commit
1a2155abb0
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 21
      _includes/components/alerts.html
  2. 2
      _includes/components/badges.html
  3. 2
      _includes/components/cards.html
  4. 58
      _includes/components/footer.html
  5. 3
      _includes/components/forms.html
  6. 34
      _includes/components/navbar.html
  7. 3
      _includes/components/paginate.html
  8. 12
      _includes/components/scrollspy.html
  9. 8
      _includes/components/tables.html
  10. 1
      _includes/scrollspy.html
  11. 33
      _layouts/components.html
  12. 136
      _site/assets/styles/components.scss
  13. 40
      _site/assets/styles/main.css
  14. 4
      _site/assets/styles/visuals.scss
  15. 409
      _site/components/index.html
  16. 3
      _site/copywriting/index.html
  17. 3
      _site/getting-started/index.html
  18. 3
      _site/index.html
  19. 3
      _site/visuals/index.html
  20. 136
      assets/styles/components.scss
  21. 1
      assets/styles/main.scss
  22. 4
      assets/styles/visuals.scss
  23. 10
      components.md

21
_includes/components/alerts.html

@ -1,18 +1,27 @@
<div class="page-header mb-4 mt-5">
<div class="page-header mb-4">
<h2 id="alerts">Alerts</h2>
<p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
This is a primary alert—check it out!
<p class="mb-0">This is a primary alert — check it out!</p>
</div>
<div class="col-12 alert alert-secondary" role="alert">
<p class="mb-0">This is a default alert — check it out!</p>
</div>
<div class="col-12 alert alert-success" role="alert">
This is a success alert—check it out!
<p class="mb-0">This is a success alert — check it out!</p>
</div>
<div class="col-12 alert alert-warning" role="alert">
<p class="mb-0">This is a warning alert — check it out!</p>
</div>
<div class="col-12 alert alert-danger" role="alert">
This is a danger alert—check it out!
<p class="mb-0">This is a danger alert check it out!</p>
</div>
<div class="col-12 alert alert-warning" role="alert">
This is a warning alert—check it out!
<div class="col-12 alert alert-success" role="alert">
<h4 class="alert-header">Well done!!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
</div>
</div>

2
_includes/components/badges.html

@ -1,4 +1,4 @@
<div class="page-header mb-4 mt-5">
<div class="page-header mb-4">
<h2 id="badges">Badges</h2>
<!--p class="text-muted">Some Description about badges.</p-->
</div>

2
_includes/components/cards.html

@ -1,4 +1,4 @@
<div class="mt-5" id="cards">
<div class="mb-4" id="cards">
<h2>Cards</h2>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12">

58
_includes/components/footer.html

@ -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
_includes/components/forms.html

@ -1,5 +1,4 @@
<h1 id="forms"> </h1>
<div class="page-header mb-4 mt-5">
<div class="page-header mb-4" id="forms">
<h2>Forms</h2>
<!--p class="text-muted">Some Description about Forms.</p-->
</div>

34
_includes/components/navbar.html

@ -0,0 +1,34 @@
<div id="header" class="mb-4">
<h2>Header</h2>
<!--p class="text-muted">Some Description about buttons.</p-->
</div>
<div class="bg-light p-5" id="">
<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
<a class="navbar-brand mr-5" href="https://geti2p.net/">
<img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="SGnavSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
</li>
</ul>
</div>
</nav>
</div>

3
_includes/components/paginate.html

@ -1,5 +1,4 @@
<h1 id="pagination"></h1>
<div class="page-header mb-4 mt-5">
<div class="page-header mb-4 " id="pagination">
<h2>Pagination</h2>
<!--p class="text-muted">Some Description about pagination.</p-->
</div>

12
_includes/components/scrollspy.html

@ -0,0 +1,12 @@
<div class="page-header mb-4" id="scrollspy">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row bg-light p-5">
<div class="col-12 p-0">
<p>
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
</p>
</div>
</div>

8
_includes/components/tables.html

@ -1,6 +1,7 @@
<div class="mt-5" id="tables">
<div class="page-header mb-4" id="tables">
<h2>Tables</h2>
<div class="row mt-5">
</div>
<div class="row bg-light p-5">
<span>Default</span>
<br />
<table class="table">
@ -33,8 +34,6 @@
</tr>
</tbody>
</table>
</div>
<div class="row mt-5">
<span>Striped</span>
<br />
<table class="table table-striped">
@ -68,4 +67,3 @@
</tbody>
</table>
</div>
</div>

1
_includes/scrollspy.html

@ -1,4 +1,3 @@
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->

33
_layouts/components.html

@ -16,14 +16,37 @@
</div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<!--{{ content }}-->
{% include components/buttons.html %}
<div class="component-wrapper my-5" id="">
{% include components/alerts.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/badges.html %}
{% include components/forms.html %}
{% include components/tables.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/buttons.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/cards.html %}
</div>
<div class="component-wrapper my-5" id="">
{% 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="">
{% include components/paginate.html %}
{% include components/alerts.html %}
{% include scrollspy.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/scrollspy.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/tables.html %}
</div>
{% include scrollspy.html %}
</div>
</div>
{% include scripts.html %}

136
_site/assets/styles/components.scss

@ -1,5 +1,71 @@
.navbar {
// background-color: $oc-white !important;
.alert {
border-radius: 25px;
&-custom {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-primary {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-success {
color: #075207;
background-color: #beffbe;
border-color: #a7f2a7;
& hr {
border-top-color: #7ac57a;
}
& .alert-link {
color: #003b00;
}
}
&-warning {
color: #bd8200;
background-color: #ffffa9;
border-color: #ffff92;
& hr {
border-top-color: #fff464;
}
& .alert-link {
color: #a66b00;
}
}
&-danger {
color: #9f1405;
background-color: #ffcbbc;
border-color: #ffb4a5;
& hr {
border-top-color: #ff8677;
}
& .alert-link {
color: #880000;
}
}
}
.background-primary {
@ -72,7 +138,7 @@
}
.color-gray-9 {
color: $oc-gray-3;
color: $oc-gray-9;
}
.rb-code {
@ -224,7 +290,7 @@
}
.btn-pill {
border-radius: 300px; //make it huge so itis alwas in pill shape
border-radius: 30px;
}
.faq__chevron-up {
@ -246,6 +312,68 @@
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 {
box-shadow: inset 0 -5px $primary;
& .nav-link {
color: $primary;
}
}
.nav-link {
color: $oc-gray-9;
}
.show {
.nav-item:hover {
box-shadow: 0 0;
}
}
}
.rb-link {
color: $primary !important;
&:hover {

40
_site/assets/styles/main.css

@ -61,8 +61,6 @@
.b-border { border-bottom: 2px solid lightgrey !important; }
p { color: #212529; }
.color { height: 100px; }
.grid { height: 100px; background-color: #4661A9; border-radius: 7px; }
@ -80,6 +78,23 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.icon { font-size: 20px; background-color: #212529; padding: 20px; }
.alert { border-radius: 25px; }
.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
.alert-custom hr { border-top-color: #7691d9; }
.alert-custom .alert-link { color: #000850; }
.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
.alert-primary hr { border-top-color: #7691d9; }
.alert-primary .alert-link { color: #000850; }
.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; }
.alert-success hr { border-top-color: #7ac57a; }
.alert-success .alert-link { color: #003b00; }
.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; }
.alert-warning hr { border-top-color: #fff464; }
.alert-warning .alert-link { color: #a66b00; }
.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; }
.alert-danger hr { border-top-color: #ff8677; }
.alert-danger .alert-link { color: #880000; }
.background-primary { background-color: #4661A9; }
.background-secondary { background-color: #60AB60; }
@ -114,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; }
@ -153,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); }
@ -161,6 +176,21 @@ 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; }
#styleguide-nav .nav-link { color: #212529; }
#styleguide-nav .show .nav-item:hover { box-shadow: 0 0; }
.rb-link { color: #4661A9 !important; }
.rb-link:hover { color: #60AB60 !important; }
@ -177,6 +207,6 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
@media (max-width: 992px) { .display-md { display: none !important; } }
.display-md { display: unset; }
body { font-family: "Source Sans Pro", sans-serif !important; font-size: 1.2rem; }
body { color: #212529; font-family: "Source Sans Pro", sans-serif !important; font-size: 1.2rem; }
a { text-decoration: none !important; }

4
_site/assets/styles/visuals.scss

@ -1,7 +1,3 @@
p {
color: $oc-gray-9;
}
.color {
height: 100px;
}

409
_site/components/index.html

@ -75,8 +75,8 @@
<ul class="p-0 list-group pt-3 sidebar-fill">
<a href="#buttons"><li class="list-group-item rb-sidebar">
Buttons
<a href="#alerts"><li class="list-group-item rb-sidebar">
Alerts
</li></a>
@ -87,20 +87,38 @@
<a href="#buttons"><li class="list-group-item rb-sidebar">
Buttons
</li></a>
<a href="#cards"><li class="list-group-item rb-sidebar">
Cards
</li></a>
<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>
<a href="#tables"><li class="list-group-item rb-sidebar">
Tables
<a href="#header"><li class="list-group-item rb-sidebar">
Header
</li></a>
<a href="#cards"><li class="list-group-item rb-sidebar">
Cards
<a href="#pagination"><li class="list-group-item rb-sidebar">
Pagination
</li></a>
@ -110,6 +128,12 @@
</li></a>
<a href="#tables"><li class="list-group-item rb-sidebar">
Tables
</li></a>
</ul>
</div>
@ -119,6 +143,55 @@
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<!--<p>This is the components page</p>
-->
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4">
<h2 id="alerts">Alerts</h2>
<p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
<p class="mb-0">This is a primary alert — check it out!</p>
</div>
<div class="col-12 alert alert-secondary" role="alert">
<p class="mb-0">This is a default alert — check it out!</p>
</div>
<div class="col-12 alert alert-success" role="alert">
<p class="mb-0">This is a success alert — check it out!</p>
</div>
<div class="col-12 alert alert-warning" role="alert">
<p class="mb-0">This is a warning alert — check it out!</p>
</div>
<div class="col-12 alert alert-danger" role="alert">
<p class="mb-0">This is a danger alert — check it out!</p>
</div>
<div class="col-12 alert alert-success" role="alert">
<h4 class="alert-header">Well done!!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4">
<h2 id="badges">Badges</h2>
<!--p class="text-muted">Some Description about badges.</p-->
</div>
<div class="row p-5 bg-light">
<div class="col-12">
<h2>Example heading <span class="badge badge-primary">New</span></h2>
</div>
<div class="col-12">
<h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
</div>
<div class="col-12">
<h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div id="buttons" class="mb-4">
<h2>Buttons</h2>
<!--p class="text-muted">Some Description about buttons.</p-->
@ -146,24 +219,66 @@
</div>
</div>
<div class="page-header mb-4 mt-5">
<h2 id="badges">Badges</h2>
<!--p class="text-muted">Some Description about badges.</p-->
</div>
<div class="row p-5 bg-light">
<div class="col-12">
<h2>Example heading <span class="badge badge-primary">New</span></h2>
</div>
<div class="col-12">
<h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
</div>
<div class="col-12">
<h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
</div>
<div class="component-wrapper my-5" id="">
<div class="mb-4" id="cards">
<h2>Cards</h2>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
</div>
</div>
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="rb-link" onclick="return false;">Apply</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card">
<img class="card-img-top"
src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">A few things everyone can do now</h4>
<p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
<mark>contributing</mark>
</a> to help the I2P project grow.
</li>
<li class="list-group-item">Take a moment to
<mark>donate</mark>
to support further development.
</li>
<li class="list-group-item">Help
<mark>translate</mark>
the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
</li>
</ul>
<div class="card-body">
<a href="#" class="rb-link" onclick="return false;">View All</a>
</div>
</div>
</div>
</div>
</div>
<h1 id="forms"> </h1>
<div class="page-header mb-4 mt-5">
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4" id="forms">
<h2>Forms</h2>
<!--p class="text-muted">Some Description about Forms.</p-->
</div>
@ -186,9 +301,151 @@
</form>
</div>
<div class="mt-5" id="tables">
</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">
<h2>Header</h2>
<!--p class="text-muted">Some Description about buttons.</p-->
</div>
<div class="bg-light p-5" id="">
<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
<a class="navbar-brand mr-5" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="SGnavSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
</li>
<li class="nav-item pb-2">
<a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4 " id="pagination">
<h2>Pagination</h2>
<!--p class="text-muted">Some Description about pagination.</p-->
</div>
<div class="row bg-light p-5">
<nav aria-label="...">
<ul class="pagination m-0">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
<li class="page-item">
<span class="page-link rb-paginate-active">
2<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
<li class="page-item">
<a class="page-link" href="#" onclick="return false;">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4" id="scrollspy">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row bg-light p-5">
<div class="col-12 p-0">
<p>
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
</p>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4" id="tables">
<h2>Tables</h2>
<div class="row mt-5">
</div>
<div class="row bg-light p-5">
<span>Default</span>
<br />
<table class="table">
@ -221,8 +478,6 @@
</tr>
</tbody>
</table>
</div>
<div class="row mt-5">
<span>Striped</span>
<br />
<table class="table table-striped">
@ -256,109 +511,9 @@
</tbody>
</table>
</div>
</div>
<div class="mt-5" id="cards">
<h2>Cards</h2>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
</div>
</div>
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="rb-link" onclick="return false;">Apply</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card">
<img class="card-img-top"
src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">A few things everyone can do now</h4>
<p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
<mark>contributing</mark>
</a> to help the I2P project grow.
</li>
<li class="list-group-item">Take a moment to
<mark>donate</mark>
to support further development.
</li>
<li class="list-group-item">Help
<mark>translate</mark>
the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
</li>
</ul>
<div class="card-body">
<a href="#" class="rb-link" onclick="return false;">View All</a>
</div>
</div>
</div>
</div>
</div>
<h1 id="pagination"></h1>
<div class="page-header mb-4 mt-5">
<h2>Pagination</h2>
<!--p class="text-muted">Some Description about pagination.</p-->
</div>
<div class="row bg-light p-5">
<nav aria-label="...">
<ul class="pagination m-0">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
<li class="page-item">
<span class="page-link rb-paginate-active">
2<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
<li class="page-item">
<a class="page-link" href="#" onclick="return false;">Next</a>
</li>
</ul>
</nav>
</div>
<div class="page-header mb-4 mt-5">
<h2 id="alerts">Alerts</h2>
<p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="col-12 alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="col-12 alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="col-12 alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
</div>
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
</div>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>

3
_site/copywriting/index.html

@ -176,8 +176,7 @@
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>

3
_site/getting-started/index.html

@ -109,8 +109,7 @@
<div>
</div>
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>

3
_site/index.html

@ -111,8 +111,7 @@
</div>
</div>
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>

3
_site/visuals/index.html

@ -479,8 +479,7 @@
</div>
</div>
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>

136
assets/styles/components.scss

@ -1,5 +1,71 @@
.navbar {
// background-color: $oc-white !important;
.alert {
border-radius: 25px;
&-custom {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-primary {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-success {
color: #075207;
background-color: #beffbe;
border-color: #a7f2a7;
& hr {
border-top-color: #7ac57a;
}
& .alert-link {
color: #003b00;
}
}
&-warning {
color: #bd8200;
background-color: #ffffa9;
border-color: #ffff92;
& hr {
border-top-color: #fff464;
}
& .alert-link {
color: #a66b00;
}
}
&-danger {
color: #9f1405;
background-color: #ffcbbc;
border-color: #ffb4a5;
& hr {
border-top-color: #ff8677;
}
& .alert-link {
color: #880000;
}
}
}
.background-primary {
@ -72,7 +138,7 @@
}
.color-gray-9 {
color: $oc-gray-3;
color: $oc-gray-9;
}
.rb-code {
@ -224,7 +290,7 @@
}
.btn-pill {
border-radius: 300px; //make it huge so itis alwas in pill shape
border-radius: 30px;
}
.faq__chevron-up {
@ -246,6 +312,68 @@
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 {
box-shadow: inset 0 -5px $primary;
& .nav-link {
color: $primary;
}
}
.nav-link {
color: $oc-gray-9;
}
.show {
.nav-item:hover {
box-shadow: 0 0;
}
}
}
.rb-link {
color: $primary !important;
&:hover {

1
assets/styles/main.scss

@ -10,6 +10,7 @@
@import "state";
body {
color: $oc-gray-9;
font-family: $font;
font-size: 1.2rem;
}

4
assets/styles/visuals.scss

@ -1,7 +1,3 @@
p {
color: $oc-gray-9;
}
.color {
height: 100px;
}

10
components.md

@ -4,12 +4,16 @@
permalink: /components/
sidebar:
- buttons: Buttons
- alerts: Alerts
- badges: Badges
- forms: Forms
- tables: Tables
- buttons: Buttons
- cards: Cards
- footer: Footer
- forms: Forms
- header: Header
- pagination: Pagination
- scrollspy: Scrollspy
- tables: Tables
---
This is the components page

Loading…
Cancel
Save