diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..cf48049 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f0ff6be --- /dev/null +++ b/index.html @@ -0,0 +1,233 @@ + + + + + Outside Reading Assignment + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+

Outside Reading Assignment

+
+
+ +
+ +
+ + + + + + + +
+
+
+ Books & Novels +
+
+
+
+
+ Worm: The First Digital World War +
+
+
+
+
+
+
+ Repairability Score Dashboard +
+
+
+
+
+
+
+ Thinkpad X220 Tablet Upgrades +
+
+
+
+
+
+ Articles +
+
+
+
+
+
+ CentOS Linux is dead—and Red Hat says Stream is “not a replacement” +
+
+
+
+
+
+
+ Repairability Score Dashboard +
+
+
+
+
+
+
+ Thinkpad X220 Tablet Upgrades +
+
+
+
+ + + + +
+
+

Source code on GitHub.

+

© 2021 Ravi Shah

+
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/js/expandnavbar.js b/js/expandnavbar.js new file mode 100644 index 0000000..3ab5d9f --- /dev/null +++ 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); \ No newline at end of file diff --git a/js/redirects.js b/js/redirects.js new file mode 100644 index 0000000..811b74f --- /dev/null +++ b/js/redirects.js @@ -0,0 +1,4 @@ +document.getElementById("go-down").onclick = function() { + var elmntToView = document.getElementById("row"); + elmntToView.scrollIntoView(); +}; \ No newline at end of file