Browse Source

sidebar alternate style

sidebar-styles
eupiteco 6 years ago
parent
commit
cbe7cc62e8
  1. 2
      _includes/sidebar.html
  2. 10
      _site/assets/styles/layout.scss
  3. 8
      _site/assets/styles/main.css
  4. 2
      _site/components/index.html
  5. 2
      _site/copywriting/index.html
  6. 2
      _site/feed.xml
  7. 2
      _site/visuals/index.html
  8. 10
      assets/styles/layout.scss

2
_includes/sidebar.html

@ -1,4 +1,4 @@
<div class="sidebar {{ include.sidebarClassName }}" id="sidebar"> <div class="sidebar border-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 %}

10
_site/assets/styles/layout.scss

@ -34,7 +34,7 @@
.rb-sidebar__2 { .rb-sidebar__2 {
& .list-group-item { & .list-group-item {
color: $oc-white !important; color: $oc-gray-2 !important;
} }
} }
.sidebar-wrapper { .sidebar-wrapper {
@ -67,8 +67,8 @@
} }
.rb-sidebar__2 .active { .rb-sidebar__2 .active {
box-shadow: inset 5px 0 $oc-white; box-shadow: inset 5px 0 $primary;
color: $oc-white !important; color: $primary !important;
} }
.rp-navbar__top { .rp-navbar__top {
@ -99,7 +99,7 @@
} }
.rb-sidebar__2 { .rb-sidebar__2 {
background-color: $oc-gray-1; background-color: $oc-white;
} }
.rb-contain { .rb-contain {
@ -151,7 +151,7 @@
.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-1 !important; // background-color: $oc-gray-1 !important;
box-shadow: inset 5px 0 $oc-white; box-shadow: inset 5px 0 $primary;
} }
.sidebar .list-group-item { .sidebar .list-group-item {
width: 74.6%; width: 74.6%;

8
_site/assets/styles/main.css

@ -6,7 +6,7 @@
.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: 1.1rem; font-weight: 600 !important; padding-left: 1.1rem !important; }
.rb-sidebar__2 .list-group-item { color: #ffffff !important; } .rb-sidebar__2 .list-group-item { color: #181818 !important; }
.sidebar-wrapper { background-color: #adb5bd; } .sidebar-wrapper { background-color: #adb5bd; }
@ -17,7 +17,7 @@
.active { background-color: transparent !important; box-shadow: inset 5px 0 #ffffff; color: #60AB60 !important; font-weight: bold; } .active { background-color: transparent !important; box-shadow: inset 5px 0 #ffffff; color: #60AB60 !important; font-weight: bold; }
.active * { color: #ffffff !important; } .active * { color: #ffffff !important; }
.rb-sidebar__2 .active { box-shadow: inset 5px 0 #ffffff; color: #ffffff !important; } .rb-sidebar__2 .active { box-shadow: inset 5px 0 #4661A9; color: #4661A9 !important; }
.rp-navbar__top { background-color: #ffffff; } .rp-navbar__top { background-color: #ffffff; }
@ -30,7 +30,7 @@
.rb-sidebar__1 { background-color: #4661A9; } .rb-sidebar__1 { background-color: #4661A9; }
.rb-sidebar__2 { background-color: #adb5bd; } .rb-sidebar__2 { background-color: #ffffff; }
.rb-contain { width: 100%; height: auto; max-height: 100%; } .rb-contain { width: 100%; height: auto; max-height: 100%; }
@ -51,7 +51,7 @@
.list-group-item:focus, .list-group-item:hover { box-shadow: inset 5px 0 #ffffff; } .list-group-item:focus, .list-group-item:hover { box-shadow: inset 5px 0 #ffffff; }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { box-shadow: inset 5px 0 #ffffff; } .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { box-shadow: inset 5px 0 #4661A9; }
.sidebar .list-group-item { width: 74.6%; } .sidebar .list-group-item { width: 74.6%; }

2
_site/components/index.html

@ -71,7 +71,7 @@
</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 rb-sidebar__2" id="sidebar"> <div class="sidebar border-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">

2
_site/copywriting/index.html

@ -71,7 +71,7 @@
</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 rb-sidebar__2" id="sidebar"> <div class="sidebar border-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">

2
_site/feed.xml

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.7.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2018-07-30T15:30:31-03:00</updated><id>http://localhost:4000/</id><title type="html">I2P Styleguide</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><entry><title type="html">Reproducible Builds Styleguide</title><link href="http://localhost:4000/jekyll/update/2018/05/06/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Reproducible Builds Styleguide" /><published>2018-05-06T07:24:53-03:00</published><updated>2018-05-06T07:24:53-03:00</updated><id>http://localhost:4000/jekyll/update/2018/05/06/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2018/05/06/welcome-to-jekyll.html">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt; <?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.7.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2018-07-30T16:04:14-03:00</updated><id>http://localhost:4000/</id><title type="html">I2P Styleguide</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><entry><title type="html">Reproducible Builds Styleguide</title><link href="http://localhost:4000/jekyll/update/2018/05/06/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Reproducible Builds Styleguide" /><published>2018-05-06T07:24:53-03:00</published><updated>2018-05-06T07:24:53-03:00</updated><id>http://localhost:4000/jekyll/update/2018/05/06/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2018/05/06/welcome-to-jekyll.html">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
&lt;p&gt;To add new posts, simply add a file in the &lt;code class=&quot;highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory that follows the convention &lt;code class=&quot;highlighter-rouge&quot;&gt;YYYY-MM-DD-name-of-post.ext&lt;/code&gt; and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.&lt;/p&gt; &lt;p&gt;To add new posts, simply add a file in the &lt;code class=&quot;highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory that follows the convention &lt;code class=&quot;highlighter-rouge&quot;&gt;YYYY-MM-DD-name-of-post.ext&lt;/code&gt; and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.&lt;/p&gt;

2
_site/visuals/index.html

@ -71,7 +71,7 @@
</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 rb-sidebar__2" id="sidebar"> <div class="sidebar border-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">

10
assets/styles/layout.scss

@ -34,7 +34,7 @@
.rb-sidebar__2 { .rb-sidebar__2 {
& .list-group-item { & .list-group-item {
color: $oc-white !important; color: $oc-gray-2 !important;
} }
} }
.sidebar-wrapper { .sidebar-wrapper {
@ -67,8 +67,8 @@
} }
.rb-sidebar__2 .active { .rb-sidebar__2 .active {
box-shadow: inset 5px 0 $oc-white; box-shadow: inset 5px 0 $primary;
color: $oc-white !important; color: $primary !important;
} }
.rp-navbar__top { .rp-navbar__top {
@ -99,7 +99,7 @@
} }
.rb-sidebar__2 { .rb-sidebar__2 {
background-color: $oc-gray-1; background-color: $oc-white;
} }
.rb-contain { .rb-contain {
@ -151,7 +151,7 @@
.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-1 !important; // background-color: $oc-gray-1 !important;
box-shadow: inset 5px 0 $oc-white; box-shadow: inset 5px 0 $primary;
} }
.sidebar .list-group-item { .sidebar .list-group-item {
width: 74.6%; width: 74.6%;

Loading…
Cancel
Save