-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from theTyster/dev
Add Hacker News to public portfolio.
- Loading branch information
Showing
22 changed files
with
2,177 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /* Navigation bar */ | ||
|
|
||
| nav { | ||
| display: flex; | ||
| background-color: #ff6600; | ||
| align-items: center; | ||
| padding: 25px 20px; | ||
| border-radius: 3px 3px 0 0; | ||
| } | ||
|
|
||
| .navbar-brand { | ||
| font-weight: bold; | ||
| margin: 0 1em; | ||
| } | ||
|
|
||
| .nav-link { | ||
| font-size: 0.85rem; | ||
| margin: 0 3px; | ||
| } | ||
|
|
||
| .nav-right { | ||
| margin-left: auto; | ||
| text-align: right; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| /* General typography */ | ||
|
|
||
| html{ | ||
| margin: 0; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arimo, sans-serif; | ||
| margin: 8vh 7.5vw; | ||
| background: radial-gradient(orchid, #95bae8); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 1.1rem; | ||
| margin: 0; | ||
| } | ||
|
|
||
| h4 { | ||
| font-size: 1rem; | ||
| margin: 0; | ||
| } | ||
|
|
||
| h5 { | ||
| font-size: 0.9rem; | ||
| font-weight: lighter; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
|
|
||
| /* Site layout */ | ||
|
|
||
| /* This is the basic box that the main part of the page goes into */ | ||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-self: center; | ||
| background-color: #f6f6ef; | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
|
|
||
|
|
||
| /* Forms */ | ||
|
|
||
| form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 8px 18px 0; | ||
| } | ||
|
|
||
| form > * { | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| form label { | ||
| font-size: 0.9rem; | ||
| font-weight: 700; | ||
| display: inline-block; | ||
| width: 3.5rem; | ||
| text-align: right; | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| form input { | ||
| font-size: 0.8rem; | ||
| border: none; | ||
| border-radius: 2px; | ||
| padding: 8px; | ||
| width: 300px; | ||
| box-shadow: 0 0 3px 1px lightgray; | ||
| } | ||
|
|
||
| form input:focus { | ||
| outline: none; | ||
| box-shadow: 0 0 4px 1px darkgray; | ||
| } | ||
|
|
||
| form > button { | ||
| width: 4rem; | ||
| margin: 5px 0 15px 65px; | ||
| border: none; | ||
| border-radius: 4px; | ||
| padding: 8px; | ||
| font-size: 0.85rem; | ||
| background-color: lightslategray; | ||
| color: white; | ||
| cursor: pointer; | ||
| transition: all 0.15s; | ||
| } | ||
|
|
||
| form > button:hover { | ||
| background-color: dimgray; | ||
| } | ||
|
|
||
| form > hr { | ||
| margin: 0; | ||
| border: 1px solid lightgray; | ||
| } | ||
|
|
||
| .login-input label { | ||
| width: 70px; | ||
| } | ||
|
|
||
|
|
||
| /* responsive queries for tightening things up for mobile. */ | ||
|
|
||
| @media screen and (max-width: 576px) { | ||
| body { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 992px) { | ||
| body { | ||
| max-width: 900px; | ||
| margin: 8px auto; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* Lists of stories */ | ||
|
|
||
| .stories-list { | ||
| margin: 20px 5px; | ||
| } | ||
|
|
||
| .stories-list > li { | ||
| color: gray; | ||
| font-size: 0.8rem; | ||
| margin: 10px 0; | ||
| border-bottom: 1px solid lightgray; | ||
| } | ||
|
|
||
| #stories-loading-msg { | ||
| font-weight: bold; | ||
| font-size: 150%; | ||
| margin: 20px 30px; | ||
| } | ||
|
|
||
|
|
||
| /* Individual stories */ | ||
|
|
||
| .story-link { | ||
| color: black; | ||
| text-transform:capitalize; | ||
| font-size: 0.85rem; | ||
| font-weight: bold; | ||
| margin: 18px 0; | ||
| } | ||
|
|
||
| .story-link:hover { | ||
| text-decoration: none; | ||
| color: #444; | ||
| } | ||
|
|
||
| .story-author { | ||
| display:block; | ||
| text-transform:capitalize; | ||
| margin:.5em 2.5em; | ||
| color: green; | ||
| } | ||
|
|
||
| .story-user { | ||
| display: block; | ||
| text-transform:capitalize; | ||
| margin:.5em 2.5em; | ||
| color: darkorange; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /* Login and signup forms */ | ||
|
|
||
| .account-form button { | ||
| width: 4rem; | ||
| margin-left: 80px; | ||
| } | ||
|
|
||
| #signup-form button { | ||
| width: 8rem; | ||
| } | ||
|
|
||
| .account-forms-container { | ||
| padding-left: 20px; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- Hack or Snooze | ||
| This is the only HTML page; the applications manipulates this DOM | ||
| during use. | ||
| Primary authors: | ||
| - Michael Hueter: initial creation, 2018 | ||
| - Elie Schoppik: refactoring using OO, 2019 | ||
| - Joel Burton: refactored and componentized, 2020 | ||
| - Ty D: Added story submission functionality, 2023 | ||
| --> | ||
|
|
||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <link rel="shortcut icon" type="image/x-icon" href="hackerhoodie.png"> | ||
| <title>Hack or Snooze</title> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" | ||
| integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" | ||
| crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="css/site.css"> | ||
| <link rel="stylesheet" href="css/user.css"> | ||
| <link rel="stylesheet" href="css/stories.css"> | ||
| <link rel="stylesheet" href="css/nav.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <!-- top navigation bar --> | ||
| <nav> | ||
| <div class="navbar-brand"> | ||
| <a class="nav-link" href="#" id="nav-all">Hack or Snooze</a> | ||
| </div> | ||
| <div class="nav-functions"> | ||
| <a class="nav-link hidden" href="#" id="nav-submit">Submit |</a> | ||
| <a class="nav-link hidden" href="#" id="nav-favorites"> Favorites |</a> | ||
| <a class="nav-link hidden" href="#" id="nav-owned"> Owned |</a> | ||
| </div> | ||
| <div class="nav-right"> | ||
| <a class="nav-link" href="#" id="nav-login">login/signup</a> | ||
| <a class="nav-link" href="#" id="nav-user-profile"></a> | ||
| <a class="hidden" id="nav-logout" href="#"><small>(logout)</small></a> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- area for stories (all stories, user stories, favorites) --> | ||
| <section class="stories-container container"> | ||
|
|
||
| <!-- loading message (removed by JS after stories loaded) --> | ||
| <div id="stories-loading-msg">Loading…</div> | ||
|
|
||
| <!-- List of all stories --> | ||
| <ol id="all-stories-list" class="stories-list"></ol> | ||
|
|
||
| </section> | ||
|
|
||
| <!-- Login and signup forms --> | ||
| <section class="account-forms-container container"> | ||
|
|
||
| <!-- Login form --> | ||
| <form action="#" id="login-form" class="account-form hidden" method="post"> | ||
| <h4>Login</h4> | ||
| <div class="login-input"> | ||
| <label for="login-username">username</label> | ||
| <input id="login-username" autocomplete="current-username"> | ||
| </div> | ||
| <div class="login-input"> | ||
| <label for="login-password">password</label> | ||
| <input id="login-password" type="password" autocomplete="current-password"> | ||
| </div> | ||
| <button type="submit">login</button> | ||
| <hr> | ||
| </form> | ||
|
|
||
| <!-- Signup form --> | ||
| <form | ||
| action="#" | ||
| id="signup-form" | ||
| class="account-form hidden" | ||
| method="post"> | ||
| <h4>Create Account</h4> | ||
| <div class="login-input"> | ||
| <label for="signup-name">name</label> | ||
| <input id="signup-name" autocapitalize="words"> | ||
| </div> | ||
| <div class="login-input"> | ||
| <label for="signup-username">username</label> | ||
| <input id="signup-username" autocomplete="new-username"> | ||
| </div> | ||
| <div class="login-input"> | ||
| <label for="signup-password">password</label> | ||
| <input id="signup-password" autocomplete="new-password" type="password"> | ||
| </div> | ||
| <button type="submit">create account</button> | ||
| </form> | ||
|
|
||
| <!-- Submission Form --> | ||
| <form action="#" | ||
| id="submit-form" | ||
| class="hidden" | ||
| method="post"> | ||
| <h4>Submit an Article</h4> | ||
| <div class="submit-input"> | ||
| <label for="submit-title">Title</label> | ||
| <input id="submit-title" type="text" minlength="5"> | ||
| </div> | ||
| <div class="submit-input"> | ||
| <label for="submit-url">URL</label> | ||
| <input id="submit-url" type="url"> | ||
| </div> | ||
| <div class="submit-input"> | ||
| <label for="submit-author">Author</label> | ||
| <input id="submit-author" type="text" minlength="3"> | ||
| </div> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
|
|
||
| </section> | ||
|
|
||
| <!-- Library JS & our JS --> | ||
| <script src="https://unpkg.com/jquery"></script> | ||
| <script src="https://unpkg.com/axios/dist/axios.js"></script> | ||
|
|
||
| <script src="js/models.js"></script> | ||
| <script src="js/main.js"></script> | ||
| <script src="js/nav.js"></script> | ||
| <script src="js/user.js"></script> | ||
| <script src="js/stories.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.