Starter html and page templating

5 years ago · b0956874d8
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
 ################################################################################
 # This .gitignore file was automatically created by Microsoft(R) Visual Studio.
 ################################################################################

 /.vs
--- a/about.html
+++ b/about.html
@ -0,0 +1,37 @@
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
        <div id="header-title">
            <a href="./index.html">
                <img id="icon" src="./logo.svg" />
            </a>
        </div>
        <ul id="navigation" class="nav justify-content-end">
            <li class="nav-item">
                <a href="./generate">
                    Generate graphs
                </a>
            </li>
            <div class="nav-sep"></div>
            <li class="nav-item">
                <a href="https://github.com/jrtechs/github-graphs">
                    View on GitHub
                </a>
            </li>
            <div class="nav-sep"></div>
            <li class="nav-item">
                <a href="./about">
                    About
                </a>
            </li>
        </ul>
    </div>
 </body>
 </html>
--- a/icon.svg
+++ b/icon.svg
--- a/index.html
+++ b/index.html
@ -0,0 +1,38 @@
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
        <div id="header-title">
            <a href="./index.html">
                <img id="icon" src="./logo.svg" />
            </a>
        </div>
        <ul id="navigation" class="nav justify-content-end">
            <li class="nav-item">
                <a href="./generate">
                    Generate graphs
                </a>
            </li>
            <div class="nav-sep"></div>
            <li class="nav-item">
                <a href="https://github.com/jrtechs/github-graphs">
                    View on GitHub
                </a>
            </li>
            <div class="nav-sep"></div>
            <li class="nav-item">
                <a href="./about">
                    About
                </a>
            </li>
        </ul>
    </div>

 </body>
 </html>
--- a/logo.svg
+++ b/logo.svg
--- a/style.css
+++ b/style.css
@ -0,0 +1,41 @@
 #header-bar {
    height: 70px;
    width: 100%;
    background-color: rgb(208, 208, 208);
 }
 #header-title {
    width: 30%;
    padding-left: 20px;
    font-size: 25px;
 }
 #icon {
    height: 60px;
 }
 #navigation {
    width: 70%;
    padding-right: 20px !important;

 }
 .nav-sep {
    position: relative;
    left: 10px;
    top: 6px;
    padding-left: 20px;
    border-left: 2px solid #232323;
    height: 30px;
 }
 a {
    color: #232323;
    text-decoration: none;
 }
 a:hover {
    color: rgb(57, 163, 225);
    text-decoration: none;
 }
 .nav-item {
    padding: 5px;
    font-size: 20px;
 }
 body {
    background-color: rgb(242, 242, 242);
 }