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

Merge pull request #3 from uracreative/new-components 

New components
writing-page-updates
Piteco 6 years ago
committed by GitHub
parent
1a2155abb0 0fafd0efca
commit
4666b8903a
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 191 additions and 84 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. 20
      _includes/components/jumbotron.html
  2. 4
      _layouts/components.html
  3. 74
      _site/assets/styles/components.scss
  4. 9
      _site/assets/styles/layout.scss
  5. 37
      _site/assets/styles/main.css
  6. 46
      _site/components/index.html
  7. BIN
      assets/images/jumbo.png
  8. 74
      assets/styles/components.scss
  9. 9
      assets/styles/layout.scss
  10. 2
      components.md

20
_includes/components/jumbotron.html
View File

@ -0,0 +1,20 @@
<div class="mb-4" id="jumbotron">
<h2 >Jumbotron</h2>
<div class="bg-light p-md-5 p-sm-3">
<div class="jumbotron bg-primary text-white">
<div class="container" >
<div class="row" >
<div class="col-sm-4 d-none d-sm-block" >
<img src="../assets/images/jumbo.png" class="img-fluid" />
</div>
<div class="col-sm-8" >
<h1 class="display-4">Privacy in numbers</h1>
<p class="lead">Protect communication from dragnet surveillance and monitoring.</p>
<hr class="my-4">
<a class="btn btn-white btn-pill btn-lg" href="#" role="button">Download I2P</a>
</div>
</div>
</div>
</div>
</div>
</div>

4
_layouts/components.html
View File

@ -38,10 +38,10 @@
{% include components/navbar.html %} {% include components/navbar.html %}
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/paginate.html %} {% include components/jumbotron.html %}
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/scrollspy.html %} {% include components/paginate.html %}
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/tables.html %} {% include components/tables.html %}

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

@ -1,39 +1,52 @@
.alert { .alert {
border-radius: 25px; border-radius: 15px;
&-custom { &-custom {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .alert-link {
color: #000850; color: #081b4f;
} }
} }
&-primary { &-primary {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .alert-link {
color: #000850; color: #003600;
}
}
&-secondary {
color: $oc-gray-7;
background-color: $oc-gray-2;
border-color: $oc-gray-6;
& hr {
border-top-color: $oc-gray-6;
}
& .alert-link {
color: $oc-gray-8;
} }
} }
&-success { &-success {
color: #075207; color: #105c10;
background-color: #beffbe; background-color: #e1f2e1;
border-color: #a7f2a7; border-color: #60ab60;
& hr { & hr {
border-top-color: #7ac57a; border-top-color: #1d731d;
} }
& .alert-link { & .alert-link {
@ -41,12 +54,12 @@
} }
} }
&-warning { &-warning {
color: #bd8200; color: #6b4c00;
background-color: #ffffa9; background-color: #ffeab5;
border-color: #ffff92; border-color: #cca443;
& hr { & hr {
border-top-color: #fff464; border-top-color: #cca443;
} }
& .alert-link { & .alert-link {
@ -54,12 +67,12 @@
} }
} }
&-danger { &-danger {
color: #9f1405; color: #700b00;
background-color: #ffcbbc; background-color: #ffcac4;
border-color: #ffb4a5; border-color: #e15647;
& hr { & hr {
border-top-color: #ff8677; border-top-color: #e15647;
} }
& .alert-link { & .alert-link {
@ -176,6 +189,19 @@
} }
} }
.btn-white {
color: $primary !important;
background-color: $oc-white !important;
border-color: transparent !important;
padding: 1rem 1.5rem !important;
font-size: 1rem;
&:hover {
color: $oc-white !important;
background-color: $secondary !important;
border-color: transparent !important;
}
}
.btn-small { .btn-small {
background-color: $primary !important; background-color: $primary !important;
border-color: transparent !important; border-color: transparent !important;
@ -355,7 +381,7 @@
} }
} }
#styleguide-nav { #styleguide-nav {
background-color: $oc-white !important; background-color: $oc-gray-0 !important;
.nav-item:hover { .nav-item:hover {
box-shadow: inset 0 -5px $primary; box-shadow: inset 0 -5px $primary;

9
_site/assets/styles/layout.scss
View File

@ -165,6 +165,15 @@
background-color: #f1f3f5 !important; background-color: #f1f3f5 !important;
} }
.bg {
&-primary {
background-color: $primary !important;
}
&-secondary {
background-color: $secondary !important;
}
}
.b-border { .b-border {
border-bottom: 2px solid lightgrey !important; border-bottom: 2px solid lightgrey !important;
} }

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

@ -59,6 +59,9 @@
.bg-box { background-color: #f1f3f5 !important; } .bg-box { background-color: #f1f3f5 !important; }
.bg-primary { background-color: #4661A9 !important; }
.bg-secondary { background-color: #60AB60 !important; }
.b-border { border-bottom: 2px solid lightgrey !important; } .b-border { border-bottom: 2px solid lightgrey !important; }
.color { height: 100px; } .color { height: 100px; }
@ -78,21 +81,24 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.icon { font-size: 20px; background-color: #212529; padding: 20px; } .icon { font-size: 20px; background-color: #212529; padding: 20px; }
.alert { border-radius: 25px; } .alert { border-radius: 15px; }
.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } .alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
.alert-custom hr { border-top-color: #7691d9; } .alert-custom hr { border-top-color: #6679ac; }
.alert-custom .alert-link { color: #000850; } .alert-custom .alert-link { color: #081b4f; }
.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } .alert-primary { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
.alert-primary hr { border-top-color: #7691d9; } .alert-primary hr { border-top-color: #6679ac; }
.alert-primary .alert-link { color: #000850; } .alert-primary .alert-link { color: #003600; }
.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; } .alert-secondary { color: #495057; background-color: #e9ecef; border-color: #868e96; }
.alert-success hr { border-top-color: #7ac57a; } .alert-secondary hr { border-top-color: #868e96; }
.alert-secondary .alert-link { color: #343a40; }
.alert-success { color: #105c10; background-color: #e1f2e1; border-color: #60ab60; }
.alert-success hr { border-top-color: #1d731d; }
.alert-success .alert-link { color: #003b00; } .alert-success .alert-link { color: #003b00; }
.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; } .alert-warning { color: #6b4c00; background-color: #ffeab5; border-color: #cca443; }
.alert-warning hr { border-top-color: #fff464; } .alert-warning hr { border-top-color: #cca443; }
.alert-warning .alert-link { color: #a66b00; } .alert-warning .alert-link { color: #a66b00; }
.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; } .alert-danger { color: #700b00; background-color: #ffcac4; border-color: #e15647; }
.alert-danger hr { border-top-color: #ff8677; } .alert-danger hr { border-top-color: #e15647; }
.alert-danger .alert-link { color: #880000; } .alert-danger .alert-link { color: #880000; }
.background-primary { background-color: #4661A9; } .background-primary { background-color: #4661A9; }
@ -143,6 +149,9 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.btn-primary { background-color: #4661A9 !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; } .btn-primary { background-color: #4661A9 !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
.btn-primary:hover { background-color: #60AB60 !important; border-color: transparent !important; } .btn-primary:hover { background-color: #60AB60 !important; border-color: transparent !important; }
.btn-white { color: #4661A9 !important; background-color: #ffffff !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
.btn-white:hover { color: #ffffff !important; background-color: #60AB60 !important; border-color: transparent !important; }
.btn-small { background-color: #4661A9 !important; border-color: transparent !important; padding: .08rem .4rem 0 !important; font-size: .8rem; color: #ffffff; } .btn-small { background-color: #4661A9 !important; border-color: transparent !important; padding: .08rem .4rem 0 !important; font-size: .8rem; color: #ffffff; }
.btn-small:hover { background-color: #60AB60 !important; border-color: transparent !important; } .btn-small:hover { background-color: #60AB60 !important; border-color: transparent !important; }
@ -185,7 +194,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.footer-extras ul li { margin: 0 0.5rem; } .footer-extras ul li { margin: 0 0.5rem; }
.footer .spacer { content: " "; height: 2rem; } .footer .spacer { content: " "; height: 2rem; }
#styleguide-nav { background-color: #ffffff !important; } #styleguide-nav { background-color: #f8f9fa !important; }
#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; } #styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; }
#styleguide-nav .nav-item:hover .nav-link { color: #4661A9; } #styleguide-nav .nav-item:hover .nav-link { color: #4661A9; }
#styleguide-nav .nav-link { color: #212529; } #styleguide-nav .nav-link { color: #212529; }

46
_site/components/index.html
View File

@ -117,14 +117,14 @@
<a href="#pagination"><li class="list-group-item rb-sidebar"> <a href="#jumbotron"><li class="list-group-item rb-sidebar">
Pagination Jumbotron
</li></a> </li></a>
<a href="#scrollspy"><li class="list-group-item rb-sidebar"> <a href="#pagination"><li class="list-group-item rb-sidebar">
Scrollspy Pagination
</li></a> </li></a>
@ -399,6 +399,29 @@
</nav> </nav>
</div> </div>
</div>
<div class="component-wrapper my-5" id="">
<div class="mb-4" id="jumbotron">
<h2 >Jumbotron</h2>
<div class="bg-light p-md-5 p-sm-3">
<div class="jumbotron bg-primary text-white">
<div class="container" >
<div class="row" >
<div class="col-sm-4 d-none d-sm-block" >
<img src="../assets/images/jumbo.png" class="img-fluid" />
</div>
<div class="col-sm-8" >
<h1 class="display-4">Privacy in numbers</h1>
<p class="lead">Protect communication from dragnet surveillance and monitoring.</p>
<hr class="my-4">
<a class="btn btn-white btn-pill btn-lg" href="#" role="button">Download I2P</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
<div class="page-header mb-4 " id="pagination"> <div class="page-header mb-4 " id="pagination">
@ -425,21 +448,6 @@
</nav> </nav>
</div> </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>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
<div class="page-header mb-4" id="tables"> <div class="page-header mb-4" id="tables">

BIN
assets/images/jumbo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

74
assets/styles/components.scss
View File

@ -1,39 +1,52 @@
.alert { .alert {
border-radius: 25px; border-radius: 15px;
&-custom { &-custom {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .alert-link {
color: #000850; color: #081b4f;
} }
} }
&-primary { &-primary {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .alert-link {
color: #000850; color: #003600;
}
}
&-secondary {
color: $oc-gray-7;
background-color: $oc-gray-2;
border-color: $oc-gray-6;
& hr {
border-top-color: $oc-gray-6;
}
& .alert-link {
color: $oc-gray-8;
} }
} }
&-success { &-success {
color: #075207; color: #105c10;
background-color: #beffbe; background-color: #e1f2e1;
border-color: #a7f2a7; border-color: #60ab60;
& hr { & hr {
border-top-color: #7ac57a; border-top-color: #1d731d;
} }
& .alert-link { & .alert-link {
@ -41,12 +54,12 @@
} }
} }
&-warning { &-warning {
color: #bd8200; color: #6b4c00;
background-color: #ffffa9; background-color: #ffeab5;
border-color: #ffff92; border-color: #cca443;
& hr { & hr {
border-top-color: #fff464; border-top-color: #cca443;
} }
& .alert-link { & .alert-link {
@ -54,12 +67,12 @@
} }
} }
&-danger { &-danger {
color: #9f1405; color: #700b00;
background-color: #ffcbbc; background-color: #ffcac4;
border-color: #ffb4a5; border-color: #e15647;
& hr { & hr {
border-top-color: #ff8677; border-top-color: #e15647;
} }
& .alert-link { & .alert-link {
@ -176,6 +189,19 @@
} }
} }
.btn-white {
color: $primary !important;
background-color: $oc-white !important;
border-color: transparent !important;
padding: 1rem 1.5rem !important;
font-size: 1rem;
&:hover {
color: $oc-white !important;
background-color: $secondary !important;
border-color: transparent !important;
}
}
.btn-small { .btn-small {
background-color: $primary !important; background-color: $primary !important;
border-color: transparent !important; border-color: transparent !important;
@ -355,7 +381,7 @@
} }
} }
#styleguide-nav { #styleguide-nav {
background-color: $oc-white !important; background-color: $oc-gray-0 !important;
.nav-item:hover { .nav-item:hover {
box-shadow: inset 0 -5px $primary; box-shadow: inset 0 -5px $primary;

9
assets/styles/layout.scss
View File

@ -165,6 +165,15 @@
background-color: #f1f3f5 !important; background-color: #f1f3f5 !important;
} }
.bg {
&-primary {
background-color: $primary !important;
}
&-secondary {
background-color: $secondary !important;
}
}
.b-border { .b-border {
border-bottom: 2px solid lightgrey !important; border-bottom: 2px solid lightgrey !important;
} }

2
components.md
View File

@ -11,8 +11,8 @@
- footer: Footer - footer: Footer
- forms: Forms - forms: Forms
- header: Header - header: Header
- jumbotron: Jumbotron
- pagination: Pagination - pagination: Pagination
- scrollspy: Scrollspy
- tables: Tables - tables: Tables
--- ---

Write Preview
Loading…
Cancel
Save