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

wider main section for visuals and components

writing-page-updates
eupiteco 6 years ago
parent
0472fce145
commit
57cb728c55
9 changed files with 51 additions and 58 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. 6
      _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. 60
      _site/components/index.html
  8. 2
      _site/visuals/index.html
  9. 11
      assets/styles/components.scss

6
_includes/components/footer.html
View File

@ -4,7 +4,7 @@
</div> </div>
<div class="footer col-12 p-5 background-primary text-white"> <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"> <div class="row" id="footer-lists">
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu"> <ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
<span>I2P</span> <span>I2P</span>
@ -30,13 +30,13 @@
<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="footer__social-media" >
<li class="footer__social-media-icon " ></li> <li class="footer__social-media-icon" ></li>
<li class="footer__social-media-icon" ></li> <li class="footer__social-media-icon" ></li>
<li class="footer__social-media-icon" ></li> <li class="footer__social-media-icon" ></li>
</div> </div>
</ul> </ul>
</div> </div>
<div class="spacer col-12" id=""></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="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" /> <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />

2
_includes/components/navbar.html
View File

@ -3,7 +3,7 @@
<!--p class="text-muted">Some Description about buttons.</p--> <!--p class="text-muted">Some Description about buttons.</p-->
</div> </div>
<div class="bg-light p-5" id=""> <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/"> <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> <img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
</a> </a>

6
_layouts/components.html
View File

@ -14,7 +14,7 @@
</div> </div>
</div> </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 }}--> <!--{{ content }}-->
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/alerts.html %} {% include components/alerts.html %}
@ -29,10 +29,10 @@
{% include components/cards.html %} {% include components/cards.html %}
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/forms.html %} {% include components/footer.html %}
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/footer.html %} {% include components/forms.html %}
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
{% include components/navbar.html %} {% include components/navbar.html %}

2
_layouts/visuals.html
View File

@ -14,7 +14,7 @@
</div> </div>
</div> </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 }} {{ content }}
{% include /visuals/colors.html participants=site.data.profiles %} {% include /visuals/colors.html participants=site.data.profiles %}
{% include /visuals/grid.html participants=site.data.profiles %} {% include /visuals/grid.html participants=site.data.profiles %}

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

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

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

@ -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 { 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; }
.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-extras ul li { margin: 0 0.5rem; }
.footer .spacer { content: " "; height: 2rem; } .footer .spacer { content: " "; height: 2rem; }
#styleguide-nav { background-color: #f8f9fa !important; } #styleguide-nav { background-color: #4661A9 !important; }
#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; } #styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #ffffff; }
#styleguide-nav .nav-item:hover .nav-link { color: #4661A9; } #styleguide-nav .nav-link { color: #ffffff; }
#styleguide-nav .nav-link { color: #212529; }
#styleguide-nav .show .nav-item:hover { box-shadow: 0 0; } #styleguide-nav .show .nav-item:hover { box-shadow: 0 0; }
.rb-link { color: #4661A9 !important; } .rb-link { color: #4661A9 !important; }

60
_site/components/index.html
View File

@ -140,7 +140,7 @@
</div> </div>
</div> </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> <!--<p>This is the components page</p>
--> -->
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
@ -276,31 +276,6 @@
</div> </div>
</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>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
<div id="footer" class="page-header mb-4"> <div id="footer" class="page-header mb-4">
@ -309,7 +284,7 @@
</div> </div>
<div class="footer col-12 p-5 background-primary text-white"> <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"> <div class="row" id="footer-lists">
<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu"> <ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
<span>I2P</span> <span>I2P</span>
@ -335,13 +310,13 @@
<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="footer__social-media" >
<li class="footer__social-media-icon " ></li> <li class="footer__social-media-icon" ></li>
<li class="footer__social-media-icon" ></li> <li class="footer__social-media-icon" ></li>
<li class="footer__social-media-icon" ></li> <li class="footer__social-media-icon" ></li>
</div> </div>
</ul> </ul>
</div> </div>
<div class="spacer col-12" id=""></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="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" /> <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>
</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>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
<div id="header" class="mb-4"> <div id="header" class="mb-4">
@ -369,7 +369,7 @@
<!--p class="text-muted">Some Description about buttons.</p--> <!--p class="text-muted">Some Description about buttons.</p-->
</div> </div>
<div class="bg-light p-5" id=""> <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/"> <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> <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
</a> </a>

2
_site/visuals/index.html
View File

@ -104,7 +104,7 @@
</div> </div>
</div> </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"> <div id="colors" class="page-header mb-4">

11
assets/styles/components.scss
View File

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

Write Preview
Loading…
Cancel
Save