Browse Source

wider main section for visuals and components

writing-page-updates
eupiteco 6 years ago
parent
commit
57cb728c55
  1. 4
      _includes/components/footer.html
  2. 2
      _includes/components/navbar.html
  3. 6
      _layouts/components.html
  4. 2
      _layouts/visuals.html
  5. 11
      _site/assets/styles/components.scss
  6. 9
      _site/assets/styles/main.css
  7. 58
      _site/components/index.html
  8. 2
      _site/visuals/index.html
  9. 11
      assets/styles/components.scss

4
_includes/components/footer.html

@ -4,7 +4,7 @@
</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="footer__wrapper col-lg-11 col-md-12 mx-auto" >
<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>
@ -36,7 +36,7 @@
</div>
</ul>
</div>
<div class="spacer col-12" id=""></div>
<div class="spacer col-12" ></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" />

2
_includes/components/navbar.html

@ -3,7 +3,7 @@
<!--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">
<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end py-3" 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>

6
_layouts/components.html

@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
<!--{{ content }}-->
<div class="component-wrapper my-5" id="">
{% include components/alerts.html %}
@ -29,10 +29,10 @@
{% include components/cards.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/forms.html %}
{% include components/footer.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/footer.html %}
{% include components/forms.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/navbar.html %}

2
_layouts/visuals.html

@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
{{ content }}
{% include /visuals/colors.html participants=site.data.profiles %}
{% include /visuals/grid.html participants=site.data.profiles %}

11
_site/assets/styles/components.scss

@ -363,6 +363,7 @@
width: 75px;
height: 75px;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: rgba(255,255,255,0.5);
border-radius: 75px;
}
@ -381,16 +382,12 @@
}
}
#styleguide-nav {
background-color: $oc-gray-0 !important;
background-color: $primary !important;
.nav-item:hover {
box-shadow: inset 0 -5px $primary;
& .nav-link {
color: $primary;
}
box-shadow: inset 0 -5px $oc-white;
}
.nav-link {
color: $oc-gray-9;
color: $oc-white;
}
.show {

9
_site/assets/styles/main.css

@ -190,14 +190,13 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.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__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-extras ul li { margin: 0 0.5rem; }
.footer .spacer { content: " "; height: 2rem; }
#styleguide-nav { background-color: #f8f9fa !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 { background-color: #4661A9 !important; }
#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #ffffff; }
#styleguide-nav .nav-link { color: #ffffff; }
#styleguide-nav .show .nav-item:hover { box-shadow: 0 0; }
.rb-link { color: #4661A9 !important; }

58
_site/components/index.html

@ -140,7 +140,7 @@
</div>
</div>
</div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
<!--<p>This is the components page</p>
-->
<div class="component-wrapper my-5" id="">
@ -276,31 +276,6 @@
</div>
</div>
</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>
<div class="row">
<form class="bg-light p-5 col-sm-6">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check_me_out">
<label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
</div>
<button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
</form>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div id="footer" class="page-header mb-4">
@ -309,7 +284,7 @@
</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="footer__wrapper col-lg-11 col-md-12 mx-auto" >
<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>
@ -341,7 +316,7 @@
</div>
</ul>
</div>
<div class="spacer col-12" id=""></div>
<div class="spacer col-12" ></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" />
@ -362,6 +337,31 @@
</div>
</div>
</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>
<div class="row">
<form class="bg-light p-5 col-sm-6">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check_me_out">
<label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
</div>
<button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
</form>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div id="header" class="mb-4">
@ -369,7 +369,7 @@
<!--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">
<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end py-3" id="styleguide-nav" "style=background: $oc-white">
<a class="navbar-brand mr-5" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
</a>

2
_site/visuals/index.html

@ -104,7 +104,7 @@
</div>
</div>
</div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
<div id="colors" class="page-header mb-4">

11
assets/styles/components.scss

@ -363,6 +363,7 @@
width: 75px;
height: 75px;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: rgba(255,255,255,0.5);
border-radius: 75px;
}
@ -381,16 +382,12 @@
}
}
#styleguide-nav {
background-color: $oc-gray-0 !important;
background-color: $primary !important;
.nav-item:hover {
box-shadow: inset 0 -5px $primary;
& .nav-link {
color: $primary;
}
box-shadow: inset 0 -5px $oc-white;
}
.nav-link {
color: $oc-gray-9;
color: $oc-white;
}
.show {

Loading…
Cancel
Save