got a basic side nav bar for documentation formatted the way i want. now need to figure out how to autogenerate

This commit is contained in:
len0rd 2018-08-03 23:37:28 -04:00
parent 2e0e29a4f8
commit 2cf2bdf8ad
6 changed files with 20 additions and 14 deletions

View file

@ -31,3 +31,7 @@ ol {
li p { li p {
padding-left: 0; padding-left: 0;
} }
.sticky-offset {
top: 56px !important;
}

View file

@ -51,8 +51,9 @@
background-color: #161038; background-color: #161038;
} }
.text-yellow { .card-soft-link {
text-emphasis-color: yellow; color: #5AB2DA;
padding-right: 2%;
} }
.card { .card {

View file

@ -1,5 +1,5 @@
var $document = $(document), var $document = $(document),
$nav = $('.navbar'), $nav = $('.navbar-top'),
navbarDef = 'bg-dark', navbarDef = 'bg-dark',
effect = 'fadeInDown'; effect = 'fadeInDown';

View file

@ -36,36 +36,36 @@
</div> </div>
<div class="container pb-5 pt-5"> <div class="container pb-5 pt-5">
<div class="card-deck"> <div class="card-deck">
<div class="card bg-dark text-white"> <div class="card bg-dark border-light text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Yama Crawler</h5> <h5 class="card-title">Yama Crawler</h5>
<h6 class="card-subtitle mb-2 text-muted">Selenium-Based Web Crawler</h6> <h6 class="card-subtitle mb-2 text-muted">Selenium-Based Web Crawler</h6>
<p class="card-text">Yama is a powerful developer-friendly web crawler/scraper built with Selenium and Java. Built from the ground up by yours truly.</p> <p class="card-text">Yama is a powerful developer-friendly web crawler/scraper built with Selenium and Java. Built from the ground up by yours truly.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="https://github.com/len0rd/YamaCrawler" class="card-link">See Code</a> <a href="https://github.com/len0rd/YamaCrawler" class="card-link card-soft-link">See Code</a>
<a href="#" class="btn btn-outline-light">Read More</a> <a href="#" class="btn btn-outline-light">Read More</a>
</div> </div>
</div> </div>
<div class="card bg-dark text-white"> <div class="card bg-dark border-light text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Repley</h5> <h5 class="card-title">Repley</h5>
<h6 class="card-subtitle mb-2 text-muted">The Tomcat - ChartJS crossover nobody asked for</h6> <h6 class="card-subtitle mb-2 text-muted">The Tomcat - ChartJS crossover nobody asked for</h6>
<p class="card-text">If you only have a hammer, everything looks like a nail. Repley combines Apache Tomcat and ChartJS to make dynamic database chart generation as easy as editing a JSON file.</p> <p class="card-text">If you only have a hammer, everything looks like a nail. Repley combines Apache Tomcat and ChartJS to make dynamic database chart generation as easy as editing a JSON file.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="https://github.com/len0rd/Repley" class="card-link">See Code</a> <a href="https://github.com/len0rd/Repley" class="card-link card-soft-link">See Code</a>
<a href="#" class="btn btn-outline-light">Read More</a> <a href="#" class="btn btn-outline-light">Read More</a>
</div> </div>
</div> </div>
<div class="card bg-dark text-white"> <div class="card bg-dark border-light text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Darkstar</h5> <h5 class="card-title">Darkstar</h5>
<h6 class="card-subtitle mb-2 text-muted">Why buy a quad when you can build it</h6> <h6 class="card-subtitle mb-2 text-muted">Why buy a quad when you can build it</h6>
<p class="card-text">Tbh, idk what other project to put here, we'll have to figure it our later</p> <p class="card-text">Tbh, idk what other project to put here, we'll have to figure it our later</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="https://github.com/len0rd/Repley" class="card-link text-yellow bottom">See Code</a> <a href="https://github.com/len0rd/Repley" class="card-link card-soft-link">See Code</a>
<a href="projects/darkstar" class="btn btn-outline-light">Read More</a> <a href="projects/darkstar" class="btn btn-outline-light">Read More</a>
</div> </div>
</div> </div>

View file

@ -1,4 +1,5 @@
<% var rootPath = '../../'; %> <% var rootPath = '../../'; %>
<% var navExt = '-nav' %>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -14,10 +15,10 @@
<div class="container mt-5"> <div class="container mt-5">
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3 mt-5">
<!-- scroll spy goes here --> <%- include(rootPath + page + navExt) %>
</div> </div>
<div class="col-9 mt-5 pt-5 pb-5"> <div data-spy="scroll" data-target="#nav-scroll" data-offset="0" class="col-9 mt-5 pt-5 pb-5">
<%- include(rootPath + page) %> <%- include(rootPath + page) %>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<nav class="navbar navbar-expand-lg navbar-dark animated fadeIn fixed-top"> <nav class="navbar navbar-top navbar-expand-lg navbar-dark animated fadeIn fixed-top">
<div class="container-fluid"> <div class="container">
<a class="navbar-brand" href="/#">lenordsNet</a> <a class="navbar-brand" href="/#">lenordsNet</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"