Browse Source

fixed alert color issues and added a jumbotron

new-components
eupiteco 6 years ago
parent
commit
a45afc090a
  1. 3
      _layouts/components.html
  2. 13
      _site/assets/styles/components.scss
  3. 9
      _site/assets/styles/layout.scss
  4. 6
      _site/assets/styles/main.css
  5. 29
      _site/components/index.html
  6. 13
      assets/styles/components.scss
  7. 9
      assets/styles/layout.scss
  8. 1
      components.md

3
_layouts/components.html

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

13
_site/assets/styles/components.scss

@ -189,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 {
background-color: $primary !important;
border-color: transparent !important;

9
_site/assets/styles/layout.scss

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

6
_site/assets/styles/main.css

@ -59,6 +59,9 @@
.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; }
.color { height: 100px; }
@ -146,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: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:hover { background-color: #60AB60 !important; border-color: transparent !important; }

29
_site/components/index.html

@ -117,6 +117,12 @@
<a href="#jumbotron"><li class="list-group-item rb-sidebar">
Jumbotron
</li></a>
<a href="#pagination"><li class="list-group-item rb-sidebar">
Pagination
</li></a>
@ -393,6 +399,29 @@
</nav>
</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 class="component-wrapper my-5" id="">
<div class="page-header mb-4 " id="pagination">

13
assets/styles/components.scss

@ -189,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 {
background-color: $primary !important;
border-color: transparent !important;

9
assets/styles/layout.scss

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

1
components.md

@ -11,6 +11,7 @@
- footer: Footer
- forms: Forms
- header: Header
- jumbotron: Jumbotron
- pagination: Pagination
- tables: Tables
---

Loading…
Cancel
Save