rav4s
/
english-books-website
mirror of https://github.com/Rav4s/english-books-website
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added skeleton of site

main
Ravi Shah 5 years ago
parent
91e4b723ed
commit
6886655752
4 changed files with 527 additions and 0 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. 282
      css/styles.css
  2. 233
      index.html
  3. 8
      js/expandnavbar.js
  4. 4
      js/redirects.js

282
css/styles.css
View File

@ -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;
}
}

233
index.html
View File

@ -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>

8
js/expandnavbar.js
View File

@ -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);

4
js/redirects.js
View File

@ -0,0 +1,4 @@
document.getElementById("go-down").onclick = function() {
var elmntToView = document.getElementById("row");
elmntToView.scrollIntoView();
};
Write Preview
Loading…
Cancel
Save