Added skeleton of site

5 years ago · 6886655752
4 changed files with 527 additions and 0 deletions
--- a/css/styles.css
+++ b/css/styles.css
@ -0,0 +1,282 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+    height: 100%;
+    background-color: #040e1e;
+}
+
+h1 {
+    all: initial;
+}
+
+h1 {
+    font-family: 'Roboto', sans-serif;
+    color: white;
+    padding-right: 8px;
+    font-size: 23.5px;
+}
+
+a {
+    color: white;
+}
+
+a:hover {
+    color: #FF8B00;
+}
+
+.go-down {
+    color: white;
+    background-color: #005380;
+    font-family: 'Roboto', sans-serif;
+    font-size: 1.75em;
+    cursor: pointer;
+    border: 0;
+    transition-duration: 0.3s;
+    padding: 0.5em;
+    border-radius: 0.5em;
+    border: 0.1em solid #FF8B00;
+}
+
+.go-down:hover {
+    transition: ease-in-out;
+    -webkit-transition: ease-in-out;
+    -moz-transition: ease-in-out;
+    -o-transition: ease-in-out;
+    background-color: #FF8B00;
+    border: 0.1em solid #005380;
+}
+
+.go-down:active {
+    outline: 0 !important;
+}
+
+.go-down:focus {
+    outline: 0 !important;
+}
+
+.go-down-container {
+    text-align: center;
+}
+
+.page-container {
+    position: relative;
+    min-height: 100vh;
+}
+
+.content-wrap {
+    padding-bottom: 8.5rem;
+}
+
+.Navbar {
+    background-color: #005380;
+    display: flex;
+    padding: 16px;
+    font-family: 'Roboto', sans-serif;
+    color: white;
+}
+
+.Navbar__Link {
+    padding-right: 8px;
+    font-size: 18.5px;
+}
+
+.Navbar__Link-brand {
+    padding-right: 8px;
+    font-size: 18.5px;
+}
+
+.Navbar__Link a,
+h1 {
+    color: white;
+}
+
+.Navbar__Link a:link {
+    text-decoration: none;
+}
+
+.Navbar__Link a:visited {
+    text-decoration: none;
+}
+
+.Navbar__Link a:hover {
+    text-decoration: underline;
+}
+
+.Navbar__Link a:active {
+    text-decoration: underline;
+}
+
+.Navbar__Items {
+    display: flex;
+}
+
+.Navbar__Items--right {
+    margin-left: auto;
+}
+
+.Navbar__Link-toggle {
+    display: none;
+}
+
+.banner {
+    width: 100%;
+    height: fit-content;
+    padding: 10px;
+}
+
+.column {
+    float: left;
+    width: 33.33%;
+    width: calc(100% / 3);
+    padding: 15px;
+    height: 200px;
+    padding-bottom: 20px;
+}
+
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.row {
+    margin-left: 0px;
+    margin-right: 0px;
+    height: auto;
+    padding-bottom: 20px;
+}
+
+.card {
+    height: 100%;
+    width: 100%;
+    border-radius: 2.5%;
+    background-color: #005380;
+    box-shadow: 5px 10px #FF8B00;
+    cursor: pointer;
+    position: relative;
+}
+
+.card:hover {
+    box-shadow: 10px 20px #FF8B00;
+    transition: box-shadow 0.25s ease-in-out;
+    -webkit-transition: box-shadow 0.25s ease-in-out;
+    -o-transition: box-shadow 0.25s ease-in-out;
+    -moz-transition: box-shadow 0.25s ease-in-out;
+}
+
+.card-top-banner {
+    height: 100%;
+    width: 100%;
+}
+
+.top-banner-text {
+    color: white;
+    text-align: center;
+    font-size: 3em;
+    padding: 0;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+}
+
+.top-banner-text-medium {
+    color: white;
+    text-align: center;
+    font-size: 2em;
+    padding: 0;
+    margin-bottom: 0em;
+    margin-top: 0em;
+}
+
+.top-banner-text-smaller {
+    color: white;
+    text-align: center;
+    font-size: 1.5em;
+    padding: 0;
+    margin-bottom: 25px;
+}
+
+.card-header {
+    color: white;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    font-size: 1.75em;
+    padding: 10px;
+    margin: 0;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.footer {
+    background-color: #005380;
+    color: white;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 5rem;
+}
+
+.footer-links {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 100%;
+    height: 100%;
+    line-height: 1em;
+}
+
+.footer a {
+    background-color: transparent;
+    font-size: 1.1em;
+}
+
+.footer p {
+    background-color: transparent;
+    font-size: 1.1em;
+}
+
+@media only screen and (max-width: 1024px) {
+    .Navbar__Items,
+    .Navbar {
+        flex-direction: column;
+    }
+    .Navbar__Items {
+        display: none;
+    }
+    .Navbar__Items--right {
+        margin-left: 0;
+    }
+    .Navbar__ToggleShow {
+        display: flex;
+    }
+    .Navbar__Link-toggle {
+        align-self: flex-end;
+        display: initial;
+        position: absolute;
+        cursor: pointer;
+    }
+    .column {
+        width: 100%;
+    }
+    .card {
+        border-radius: 1%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .column {
+        height: 400px;
+    }
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Outside Reading Assignment</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Find books, articles, short stories, and poems I've read for the outside reading assignment!">
+    <meta charset="UTF-8">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="css/styles.css" rel="stylesheet" media="screen">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></noscript>
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+
+    <!-- Begin Inlined Google Fonts -->
+
+    <style>
+        /* cyrillic-ext */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
+            unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+        }
+        /* cyrillic */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
+            unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+        }
+        /* greek-ext */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
+            unicode-range: U+1F00-1FFF;
+        }
+        /* greek */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
+            unicode-range: U+0370-03FF;
+        }
+        /* vietnamese */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
+            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+        }
+        /* latin-ext */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
+            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+        }
+        /* latin */
+        
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 300;
+            font-display: swap;
+            src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
+            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+    </style>
+
+    <!-- End Inlined Google Fonts -->
+
+    <!-- Matomo -->
+    <script type="text/javascript">
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u = "//analytics.yeetpc.com/matomo/";
+            _paq.push(['setTrackerUrl', u + 'matomo.php']);
+            _paq.push(['setSiteId', '4']);
+            var d = document,
+                g = d.createElement('script'),
+                s = d.getElementsByTagName('script')[0];
+            g.type = 'text/javascript';
+            g.async = true;
+            g.src = u + 'matomo.js';
+            s.parentNode.insertBefore(g, s);
+        })();
+    </script>
+    <!-- End Matomo Code -->
+
+</head>
+
+<body>
+    <div class="page-container">
+        <div class="content-wrap">
+            <!-- Top Navbar -->
+            <div class="Navbar">
+                <div class="Navbar__Link Navbar__Link-brand">
+                    <h1><a href="#">Outside Reading Assignment</a></h1>
+                </div>
+                <div class="Navbar__Link Navbar__Link-toggle">
+                    <i class="fa fa-bars"></i>
+                </div>
+                <nav class="Navbar__Items Navbar__Items--right">
+                    <div class="Navbar__Link">
+                        <a href="/list.html">List</a>
+                    </div>
+                    <div class="Navbar__Link">
+                        <a href="mailto:ravi@yeetpc.com">Contact Me</a>
+                    </div>
+                </nav>
+            </div>
+            <!-- End Top Navbar -->
+
+            <!-- Begin Top Banner -->
+            <div class="banner">
+                <div class="card-top-banner">
+                    <p class="top-banner-text">Outside Reading Assignment</p>
+                    <p class="top-banner-text-smaller">Below you'll find the books, articles, short stories, and poems I've read for this assignment.</p>
+                    <br />
+                    <div class="go-down-container">
+                        <button class="go-down" id="go-down">Get Started!</button>
+                    </div>
+                </div>
+            </div>
+            <!-- End Top Banner -->
+
+            <!-- Begin Responsive Layout -->
+            <div class="row" id="row">
+                <br />
+                <div class="top-banner-text-medium">
+                    Books & Novels
+                </div>
+                <div class="column">
+                    <br />
+                    <div id="smartgaragedoor" class="card">
+                        <div class="card-header">
+                            Worm: The First Digital World War
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <br />
+                    <div id="repairdashboard" class="card">
+                        <div class="card-header">
+                            Repairability Score Dashboard
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <br />
+                    <div id="thinkpadx220" class="card">
+                        <div class="card-header">
+                            Thinkpad X220 Tablet Upgrades
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <div class="top-banner-text-medium">
+                Articles
+            </div>
+            <div class="row">
+                <div class="column">
+                    <br />
+                    <div id="smartgaragedoor" class="card">
+                        <div class="card-header">
+                            CentOS Linux is dead—and Red Hat says Stream is “not a replacement”
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <br />
+                    <div id="repairdashboard" class="card">
+                        <div class="card-header">
+                            Repairability Score Dashboard
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <br />
+                    <div id="thinkpadx220" class="card">
+                        <div class="card-header">
+                            Thinkpad X220 Tablet Upgrades
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- End Responsive Layout -->
+
+            <!-- Begin Footer -->
+
+            <div class="footer">
+                <div class="footer-links">
+                    <p>Source code <a href="https://github.com/Rav4s/english-books-website">on GitHub</a>.</p>
+                    <p>© 2021 Ravi Shah</p>
+                </div>
+            </div>
+
+            <!-- End Footer -->
+        </div>
+    </div>
+
+    <script src="js/redirects.js"></script>
+    <script src="js/expandnavbar.js" defer></script>
+</body>
+
+</html>
--- a/js/expandnavbar.js
+++ b/js/expandnavbar.js
@ -0,0 +1,8 @@
+function classToggle() {
+    const navs = document.querySelectorAll('.Navbar__Items')
+
+    navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
+}
+
+document.querySelector('.Navbar__Link-toggle')
+    .addEventListener('click', classToggle);
--- a/js/redirects.js
+++ b/js/redirects.js
@ -0,0 +1,4 @@
+document.getElementById("go-down").onclick = function() {
+    var elmntToView = document.getElementById("row");
+    elmntToView.scrollIntoView();
+};