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

nav and sidebars styling

writing-page-updates
eupiteco 6 years ago
parent
0fafd0efca
commit
421fbff17f
18 changed files with 220 additions and 202 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. 2
      _config.yml
  2. 2
      _includes/components/footer.html
  3. 2
      _includes/navbar.html
  4. 30
      _includes/navbar_side.html
  5. 2
      _includes/sidebar.html
  6. 50
      _includes/visuals/typography.html
  7. 4
      _site/404.html
  8. 8
      _site/assets/javascript/index.js
  9. 29
      _site/assets/styles/layout.scss
  10. 22
      _site/assets/styles/main.css
  11. 40
      _site/components/index.html
  12. 36
      _site/copywriting/index.html
  13. 34
      _site/getting-started/index.html
  14. 34
      _site/index.html
  15. 4
      _site/jekyll/update/2018/05/06/welcome-to-jekyll.html
  16. 88
      _site/visuals/index.html
  17. 8
      assets/javascript/index.js
  18. 29
      assets/styles/layout.scss

2
_config.yml
View File

@ -14,7 +14,7 @@
# You can create any custom variable you would like, and they will be accessible # You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}. # in the templates via {{ site.myvariable }}.
title: I2P Styleguide title: I2P Styleguide
logo: "/assets/images/horizontal_color.png" logo: "/assets/images/horizontal_white.png"
description: >- # this means to ignore newlines until "baseurl:" description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this Write an awesome description for your new site here. You can edit this

2
_includes/components/footer.html
View File

@ -1,4 +1,4 @@
<div class="page-header mb-4"> <div id="footer" class="page-header mb-4">
<h3>Footer</h3> <h3>Footer</h3>
<!--p class="text-muted">Some Description about scrollspy.</p--> <!--p class="text-muted">Some Description about scrollspy.</p-->
</div> </div>

2
_includes/navbar.html
View File

@ -1,4 +1,4 @@
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" 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>

30
_includes/navbar_side.html
View File

@ -1,23 +1,23 @@
<div class="sidebar {{include.sidebarClassName}}" id="sidebar1"> <div class="sidebar {{include.sidebarClassName}}" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<li class="list-group-item rb-main-sidebar"> <a href="{{site.baseurl}}/" class="sidebar__link__light">
<a href="{{site.baseurl}}/" class="sidebar__link__light">About</a> <li class="list-group-item rb-main-sidebar">About</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="{{site.baseurl}}/getting-started/" class="sidebar__link__light">
<a href="{{site.baseurl}}/getting-started/" class="sidebar__link__light">Getting Started</a> <li class="list-group-item rb-main-sidebar">Getting Started</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="{{site.baseurl}}/visuals/" class="sidebar__link__light">
<a href="{{site.baseurl}}/visuals/" class="sidebar__link__light">Visuals</a> <li class="list-group-item rb-main-sidebar">Visuals</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="{{site.baseurl}}/components/" class="sidebar__link__light">
<a href="{{site.baseurl}}/components/" class="sidebar__link__light">Components</a> <li class="list-group-item rb-main-sidebar">Components</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="{{site.baseurl}}/copywriting/" class="sidebar__link__light">
<a href="{{site.baseurl}}/copywriting/" class="sidebar__link__light">Copywriting</a> <li class="list-group-item rb-main-sidebar">Copywriting</li>
</li> </a>
</ul> </ul>
</div> </div>

2
_includes/sidebar.html
View File

@ -1,4 +1,4 @@
<div class="sidebar border-right {{ include.sidebarClassName }}" id="sidebar" style="border-color: $oc-gray-1;"> <div class="sidebar border-left-right {{ include.sidebarClassName }}" id="sidebar" style="border-color: $oc-gray-1;">
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
{% for sidebar_hash in page.sidebar %} {% for sidebar_hash in page.sidebar %}
{% for link in sidebar_hash %} {% for link in sidebar_hash %}

50
_includes/visuals/typography.html
View File

@ -4,27 +4,37 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<p class="text-black small text-muted">H1</p> <p class="text-black small text-muted">H1
<h1>Protect communications from monitoring</h1> <h1>Protect communications from monitoring</h1>
<p class="text-black small text-muted">H2</p> </p>
<h2>Protect communications from monitoring</h2> <p class="text-black small text-muted">H2
<p class="text-black small text-muted">H3</p> <h2>Protect communications from monitoring</h2>
<h3>Protect communications from monitoring</h3> </p>
<p class="text-black small text-muted">H4</p> <p class="text-black small text-muted">H3
<h4>Protect communications from monitoring</h4> <h3>Protect communications from monitoring</h3>
<p class="text-black small text-muted">H5</p> </p>
<h5>Protect communications from monitoring</h5> <p class="text-black small text-muted">H4
<p class="text-black small text-muted">H6</p> <h4>Protect communications from monitoring</h4>
<h6>Protect communications from monitoring</h6> </p>
<p class="text-black small text-muted">H5
<h5>Protect communications from monitoring</h5>
</p>
<p class="text-black small text-muted">H6
<h6>Protect communications from monitoring</h6>
</p>
<p class="text-black small pt-5 text-muted">H1 display</p> <p class="text-black small pt-5 text-muted">H1 display
<h1 class="header-display color-secondary">I2P Anonymous Network</h1> <h1 class="header-display color-secondary">I2P Anonymous Network</h1>
<p class="text-black small text-muted">H2 display</p> </p>
<h2 class="header-display color-secondary">I2P Anonymous Network</h2> <p class="text-black small text-muted">H2 display
<p class="text-black small text-muted">H3 display</p> <h2 class="header-display color-secondary">I2P Anonymous Network</h2>
<h3 class="header-display color-secondary">I2P Anonymous Network</h3> </p>
<p class="text-black small text-muted">H4 display</p> <p class="text-black small text-muted">H3 display
<h4 class="header-display color-secondary">I2P Anonymous Network</h4> <h3 class="header-display color-secondary">I2P Anonymous Network</h3>
</p>
<p class="text-black small text-muted">H4 display
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</p>
</div> </div>
</div> </div>
<div class="row pt-5"> <div class="row pt-5">

4
_site/404.html
View File

@ -13,9 +13,9 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

8
_site/assets/javascript/index.js
View File

@ -16,16 +16,16 @@
// }); // });
$(document).ready(function () { $(document).ready(function () {
var listItems = $('.rb-main-sidebar'); var listItems = $('.sidebar__link__light');
$.each(listItems, function (key, litem) { $.each(listItems, function (key, litem) {
var aElement = $(this).children(litem)[0]; var aElement = $(litem)[0];
if(aElement.href == document.URL.split('#')[0]) { if(aElement.href == document.URL.split('#')[0]) {
$(litem).addClass('active'); $(litem).addClass('active');
} }
$("#sidebar-left li").click(function() { $("#sidebar-left a li").click(function() {
// Reset them // Reset them
$("#sidebar-left li").removeClass("active"); $("#sidebar-left a li").removeClass("active");
// Add to the clicked one only // Add to the clicked one only
$(this).addClass("active"); $(this).addClass("active");
}); });

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

@ -24,7 +24,7 @@
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: 0 !important; border-radius: 0 !important;
font-size: 1.1rem; font-size: 1rem;
font-weight: 600 !important; font-weight: 600 !important;
padding-left: 1.1rem !important; padding-left: 1.1rem !important;
// border-color: $oc-gray-4; // border-color: $oc-gray-4;
@ -55,10 +55,10 @@
margin: auto !important; margin: auto !important;
} }
.active { .active,
background-color: transparent !important; .active:hover {
box-shadow: inset 5px 0 $oc-white; background-color: "transparent"!important;
color: $secondary !important; border-left: 5px solid $oc-white;
font-weight: bold; font-weight: bold;
& * { & * {
@ -67,19 +67,18 @@
} }
.rb-sidebar__2 .active { .rb-sidebar__2 .active {
box-shadow: inset 5px 0 $primary; border-left: 5px solid $primary;
color: $primary !important;
} }
.rp-navbar__top { .rp-navbar__top {
background-color: $oc-white; background-color: $primary;
} }
// bootstrap navbar-light class is not working, overwriting classes to fix this // bootstrap navbar-light class is not working, overwriting classes to fix this
//TODO fix this issue //TODO fix this issue
.navbar-light .navbar-toggler { .navbar-light .navbar-toggler {
border-color: rgba(0,0,0,.5); border-color: rgba(255,255,255,.5);
} }
.navbar-light .navbar-toggler-icon { .navbar-light .navbar-toggler-icon {
@ -87,10 +86,10 @@
} }
.navbar-light .navbar-nav .nav-link { .navbar-light .navbar-nav .nav-link {
color: rgba(0,0,0,.5); color: rgba(255,255,255,.5);
&:hover { &:hover {
color: $oc-black; color: $oc-white;
} }
} }
@ -146,15 +145,15 @@
.list-group-item:focus, .list-group-item:hover { .list-group-item:focus, .list-group-item:hover {
// background-color: $oc-gray-3 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $oc-white; border-left: 5px solid $primary;
} }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
// background-color: $oc-gray-3 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary; border-left: 5px solid $oc-white;
} }
.sidebar .list-group-item { .rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
width: 74.6%; border-left: 5px solid $primary;
} }
.rb-sidebar__2 .list-group-item { .rb-sidebar__2 .list-group-item {

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

@ -4,7 +4,7 @@
.sidebar { min-height: 100vh; height: 100%; width: 100%; } .sidebar { min-height: 100vh; height: 100%; width: 100%; }
.sidebar .list-group { position: fixed; } .sidebar .list-group { position: fixed; }
.sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 1.1rem; font-weight: 600 !important; padding-left: 1.1rem !important; } .sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 1rem; font-weight: 600 !important; padding-left: 1.1rem !important; }
.rb-sidebar__2 .list-group-item { color: #212529 !important; } .rb-sidebar__2 .list-group-item { color: #212529 !important; }
@ -14,19 +14,19 @@
.row { margin: auto !important; } .row { margin: auto !important; }
.active { background-color: transparent !important; box-shadow: inset 5px 0 #ffffff; color: #60AB60 !important; font-weight: bold; } .active, .active:hover { background-color: "transparent" !important; border-left: 5px solid #ffffff; font-weight: bold; }
.active * { color: #ffffff !important; } .active *, .active:hover * { color: #ffffff !important; }
.rb-sidebar__2 .active { box-shadow: inset 5px 0 #4661A9; color: #4661A9 !important; } .rb-sidebar__2 .active { border-left: 5px solid #4661A9; }
.rp-navbar__top { background-color: #ffffff; } .rp-navbar__top { background-color: #4661A9; }
.navbar-light .navbar-toggler { border-color: rgba(0, 0, 0, 0.5); } .navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, 0.5); }
.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); } .navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }
.navbar-light .navbar-nav .nav-link:hover { color: #000000; } .navbar-light .navbar-nav .nav-link:hover { color: #ffffff; }
.rb-sidebar__1 { background-color: #4661A9; } .rb-sidebar__1 { background-color: #4661A9; }
@ -49,11 +49,11 @@
@media screen and (max-width: 991px) { .hidden-sm { display: none !important; } } @media screen and (max-width: 991px) { .hidden-sm { display: none !important; } }
.sidebar-fill { width: 12.45%; } .sidebar-fill { width: 12.45%; }
.list-group-item:focus, .list-group-item:hover { box-shadow: inset 5px 0 #ffffff; } .list-group-item:focus, .list-group-item:hover { border-left: 5px solid #4661A9; }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { box-shadow: inset 5px 0 #4661A9; } .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { border-left: 5px solid #ffffff; }
.sidebar .list-group-item { width: 74.6%; } .rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover { border-left: 5px solid #4661A9; }
.rb-sidebar__2 .list-group-item { width: 100%; } .rb-sidebar__2 .list-group-item { width: 100%; }

40
_site/components/index.html
View File

@ -13,9 +13,9 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -47,31 +47,31 @@
<div class="col-md-6 col-sm-16 col-xs-12 p-0"> <div class="col-md-6 col-sm-16 col-xs-12 p-0">
<div class="sidebar rb-sidebar__1" id="sidebar1"> <div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/" class="sidebar__link__light">
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a> <li class="list-group-item rb-main-sidebar">About</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a> <li class="list-group-item rb-main-sidebar">Getting Started</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a> <li class="list-group-item rb-main-sidebar">Visuals</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/components/" class="sidebar__link__light">
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a> <li class="list-group-item rb-main-sidebar">Components</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a> <li class="list-group-item rb-main-sidebar">Copywriting</li>
</li> </a>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-6 col-sm-12 col-xs-3 p-0"> <div class="col-md-6 col-sm-12 col-xs-3 p-0">
<div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;"> <div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
@ -303,7 +303,7 @@
</div> </div>
<div class="component-wrapper my-5" id=""> <div class="component-wrapper my-5" id="">
<div class="page-header mb-4"> <div id="footer" class="page-header mb-4">
<h3>Footer</h3> <h3>Footer</h3>
<!--p class="text-muted">Some Description about scrollspy.</p--> <!--p class="text-muted">Some Description about scrollspy.</p-->
</div> </div>
@ -371,7 +371,7 @@
<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 pb-0" 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_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <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> <span class="navbar-toggler-icon"></span>

36
_site/copywriting/index.html
View File

@ -13,9 +13,9 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -47,31 +47,31 @@
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md"> <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
<div class="sidebar rb-sidebar__1" id="sidebar1"> <div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/" class="sidebar__link__light">
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a> <li class="list-group-item rb-main-sidebar">About</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a> <li class="list-group-item rb-main-sidebar">Getting Started</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a> <li class="list-group-item rb-main-sidebar">Visuals</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/components/" class="sidebar__link__light">
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a> <li class="list-group-item rb-main-sidebar">Components</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a> <li class="list-group-item rb-main-sidebar">Copywriting</li>
</li> </a>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-6 col-sm-12 col-xs-2 p-0"> <div class="col-md-6 col-sm-12 col-xs-2 p-0">
<div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;"> <div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">

34
_site/getting-started/index.html
View File

@ -13,9 +13,9 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -47,25 +47,25 @@
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md"> <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
<div class="sidebar rb-sidebar__1" id="sidebar1"> <div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/" class="sidebar__link__light">
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a> <li class="list-group-item rb-main-sidebar">About</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a> <li class="list-group-item rb-main-sidebar">Getting Started</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a> <li class="list-group-item rb-main-sidebar">Visuals</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/components/" class="sidebar__link__light">
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a> <li class="list-group-item rb-main-sidebar">Components</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a> <li class="list-group-item rb-main-sidebar">Copywriting</li>
</li> </a>
</ul> </ul>
</div> </div>

34
_site/index.html
View File

@ -14,9 +14,9 @@
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -48,25 +48,25 @@
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md sidebar-fill"> <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md sidebar-fill">
<div class="sidebar rb-sidebar__1" id="sidebar1"> <div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/" class="sidebar__link__light">
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a> <li class="list-group-item rb-main-sidebar">About</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a> <li class="list-group-item rb-main-sidebar">Getting Started</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a> <li class="list-group-item rb-main-sidebar">Visuals</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/components/" class="sidebar__link__light">
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a> <li class="list-group-item rb-main-sidebar">Components</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a> <li class="list-group-item rb-main-sidebar">Copywriting</li>
</li> </a>
</ul> </ul>
</div> </div>

4
_site/jekyll/update/2018/05/06/welcome-to-jekyll.html
View File

@ -13,9 +13,9 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

88
_site/visuals/index.html
View File

@ -13,9 +13,9 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top"> <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/"> <a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -47,31 +47,31 @@
<div class="col-md-6 col-sm-6 col-xs-6 p-0"> <div class="col-md-6 col-sm-6 col-xs-6 p-0">
<div class="sidebar rb-sidebar__1" id="sidebar1"> <div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill"> <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/" class="sidebar__link__light">
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a> <li class="list-group-item rb-main-sidebar">About</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a> <li class="list-group-item rb-main-sidebar">Getting Started</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a> <li class="list-group-item rb-main-sidebar">Visuals</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/components/" class="sidebar__link__light">
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a> <li class="list-group-item rb-main-sidebar">Components</li>
</li> </a>
<li class="list-group-item rb-main-sidebar"> <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a> <li class="list-group-item rb-main-sidebar">Copywriting</li>
</li> </a>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-6 col-sm-6 col-xs-6 p-0"> <div class="col-md-6 col-sm-6 col-xs-6 p-0">
<div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;"> <div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
@ -318,27 +318,37 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<p class="text-black small text-muted">H1</p> <p class="text-black small text-muted">H1
<h1>Protect communications from monitoring</h1> <h1>Protect communications from monitoring</h1>
<p class="text-black small text-muted">H2</p> </p>
<h2>Protect communications from monitoring</h2> <p class="text-black small text-muted">H2
<p class="text-black small text-muted">H3</p> <h2>Protect communications from monitoring</h2>
<h3>Protect communications from monitoring</h3> </p>
<p class="text-black small text-muted">H4</p> <p class="text-black small text-muted">H3
<h4>Protect communications from monitoring</h4> <h3>Protect communications from monitoring</h3>
<p class="text-black small text-muted">H5</p> </p>
<h5>Protect communications from monitoring</h5> <p class="text-black small text-muted">H4
<p class="text-black small text-muted">H6</p> <h4>Protect communications from monitoring</h4>
<h6>Protect communications from monitoring</h6> </p>
<p class="text-black small text-muted">H5
<p class="text-black small pt-5 text-muted">H1 display</p> <h5>Protect communications from monitoring</h5>
<h1 class="header-display color-secondary">I2P Anonymous Network</h1> </p>
<p class="text-black small text-muted">H2 display</p> <p class="text-black small text-muted">H6
<h2 class="header-display color-secondary">I2P Anonymous Network</h2> <h6>Protect communications from monitoring</h6>
<p class="text-black small text-muted">H3 display</p> </p>
<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
<p class="text-black small text-muted">H4 display</p> <p class="text-black small pt-5 text-muted">H1 display
<h4 class="header-display color-secondary">I2P Anonymous Network</h4> <h1 class="header-display color-secondary">I2P Anonymous Network</h1>
</p>
<p class="text-black small text-muted">H2 display
<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
</p>
<p class="text-black small text-muted">H3 display
<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
</p>
<p class="text-black small text-muted">H4 display
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</p>
</div> </div>
</div> </div>
<div class="row pt-5"> <div class="row pt-5">

8
assets/javascript/index.js
View File

@ -16,16 +16,16 @@
// }); // });
$(document).ready(function () { $(document).ready(function () {
var listItems = $('.rb-main-sidebar'); var listItems = $('.sidebar__link__light');
$.each(listItems, function (key, litem) { $.each(listItems, function (key, litem) {
var aElement = $(this).children(litem)[0]; var aElement = $(litem)[0];
if(aElement.href == document.URL.split('#')[0]) { if(aElement.href == document.URL.split('#')[0]) {
$(litem).addClass('active'); $(litem).addClass('active');
} }
$("#sidebar-left li").click(function() { $("#sidebar-left a li").click(function() {
// Reset them // Reset them
$("#sidebar-left li").removeClass("active"); $("#sidebar-left a li").removeClass("active");
// Add to the clicked one only // Add to the clicked one only
$(this).addClass("active"); $(this).addClass("active");
}); });

29
assets/styles/layout.scss
View File

@ -24,7 +24,7 @@
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: 0 !important; border-radius: 0 !important;
font-size: 1.1rem; font-size: 1rem;
font-weight: 600 !important; font-weight: 600 !important;
padding-left: 1.1rem !important; padding-left: 1.1rem !important;
// border-color: $oc-gray-4; // border-color: $oc-gray-4;
@ -55,10 +55,10 @@
margin: auto !important; margin: auto !important;
} }
.active { .active,
background-color: transparent !important; .active:hover {
box-shadow: inset 5px 0 $oc-white; background-color: "transparent"!important;
color: $secondary !important; border-left: 5px solid $oc-white;
font-weight: bold; font-weight: bold;
& * { & * {
@ -67,19 +67,18 @@
} }
.rb-sidebar__2 .active { .rb-sidebar__2 .active {
box-shadow: inset 5px 0 $primary; border-left: 5px solid $primary;
color: $primary !important;
} }
.rp-navbar__top { .rp-navbar__top {
background-color: $oc-white; background-color: $primary;
} }
// bootstrap navbar-light class is not working, overwriting classes to fix this // bootstrap navbar-light class is not working, overwriting classes to fix this
//TODO fix this issue //TODO fix this issue
.navbar-light .navbar-toggler { .navbar-light .navbar-toggler {
border-color: rgba(0,0,0,.5); border-color: rgba(255,255,255,.5);
} }
.navbar-light .navbar-toggler-icon { .navbar-light .navbar-toggler-icon {
@ -87,10 +86,10 @@
} }
.navbar-light .navbar-nav .nav-link { .navbar-light .navbar-nav .nav-link {
color: rgba(0,0,0,.5); color: rgba(255,255,255,.5);
&:hover { &:hover {
color: $oc-black; color: $oc-white;
} }
} }
@ -146,15 +145,15 @@
.list-group-item:focus, .list-group-item:hover { .list-group-item:focus, .list-group-item:hover {
// background-color: $oc-gray-3 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $oc-white; border-left: 5px solid $primary;
} }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
// background-color: $oc-gray-3 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary; border-left: 5px solid $oc-white;
} }
.sidebar .list-group-item { .rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
width: 74.6%; border-left: 5px solid $primary;
} }
.rb-sidebar__2 .list-group-item { .rb-sidebar__2 .list-group-item {

Write Preview
Loading…
Cancel
Save