-
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.
- Loading branch information
Showing
3 changed files
with
121 additions
and
84 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 |
|---|---|---|
| @@ -1,32 +1,58 @@ | ||
| nav.navbar { | ||
| height: 50px; | ||
| position: sticky; | ||
| height: 50px; | ||
| position: sticky; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .bg-dark { | ||
| background-color: var(--dark); | ||
| background-color: var(--dark); | ||
| } | ||
|
|
||
| div.body#mainContent { | ||
| padding: 10px; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| h1.header { | ||
| color: var(--dark); | ||
| color: var(--dark); | ||
| } | ||
|
|
||
| p.paragraph { | ||
| color: var(--black); | ||
| color: var(--black); | ||
| } | ||
|
|
||
| ul.nav-items { | ||
| margin: 0; | ||
| background-color: transparent; | ||
| text-align: center; | ||
| list-style-type: none; | ||
| display: inline-block; | ||
| margin: 0; | ||
| background-color: transparent; | ||
| text-align: center; | ||
| list-style-type: none; | ||
| padding: 14px 16px; | ||
| align-self: center; | ||
| } | ||
|
|
||
| ul.nav-items > li.nav-item { | ||
| background-color: transparent; | ||
| padding: 10px; | ||
| display: inline-block; | ||
| text-align: center; | ||
| margin: 0 10px; | ||
| } | ||
|
|
||
| ul.nav-items > li.nav-item > a { | ||
| background-color: transparent; | ||
| text-decoration: none; | ||
| color: var(--light-blue); | ||
| padding: 19px 16px; | ||
| font-weight: 700; | ||
| transition: 0.3s; | ||
| width: 100%; | ||
| } | ||
|
|
||
| ul.nav-items > li.nav-item > a:hover { | ||
| background-color: var(--secondary); | ||
| color: var(--black); | ||
| } | ||
|
|
||
| @media screen and (max-width: 500px) { | ||
| body { | ||
| background-color: black; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,50 +1,51 @@ | ||
| /* Global variables */ | ||
| :root { | ||
| /* Commonly colors for this site */ | ||
| --primary: lightBlue; | ||
| --secondary: gray; | ||
| --success: #00bb00; | ||
| --info: #00aadd; | ||
| --danger: #aa000f; | ||
| --warning: #ffaa00; | ||
| --dark: #555; | ||
| --light: #ddd; | ||
| /* Colors */ | ||
| --red: #fff; | ||
| --orange: #ff7b00; | ||
| --yellow: rgb(255, 254, 170); | ||
| --green: #00aa00; | ||
| --blue: #006dff; | ||
| --purple: #8400ff; | ||
| --white: #ffffff; | ||
| --black: #000000; | ||
| --grey-100: #555; | ||
| --grey-200: #777; | ||
| --grey-300: #999; | ||
| --grey-400: #aaa; | ||
| --grey-500: #bbb; | ||
| --grey-600: #ccc; | ||
| --grey-700: #ddd; | ||
| /* Commonly colors for this site */ | ||
| --primary: #0099ee; | ||
| --secondary: gray; | ||
| --success: #00bb00; | ||
| --info: #00aadd; | ||
| --danger: #aa000f; | ||
| --warning: #ffaa00; | ||
| --dark: #555; | ||
| --light: #ddd; | ||
| /* Colors */ | ||
| --red: #fff; | ||
| --orange: #ff7b00; | ||
| --yellow: rgb(255, 254, 170); | ||
| --green: #00aa00; | ||
| --blue: #006dff; | ||
| --light-blue: #00aaee; | ||
| --purple: #8400ff; | ||
| --white: #ffffff; | ||
| --black: #000000; | ||
| --grey-100: #555; | ||
| --grey-200: #777; | ||
| --grey-300: #999; | ||
| --grey-400: #aaa; | ||
| --grey-500: #bbb; | ||
| --grey-600: #ccc; | ||
| --grey-700: #ddd; | ||
| } | ||
|
|
||
| /* Global styles */ | ||
| body { | ||
| margin: 0; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| scrollbar-width: none; | ||
| margin: 0; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| scrollbar-width: none; | ||
| } | ||
|
|
||
| .skip-to-main-content-link { | ||
| position: absolute; | ||
| left: -9999px; | ||
| z-index: 999; | ||
| padding: 1em; | ||
| background-color: black; | ||
| color: white; | ||
| opacity: 0; | ||
| position: absolute; | ||
| left: -9999px; | ||
| z-index: 999; | ||
| padding: 1em; | ||
| background-color: black; | ||
| color: white; | ||
| opacity: 0; | ||
| } | ||
| .skip-to-main-content-link:focus { | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| opacity: 1; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| opacity: 1; | ||
| } |
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 |
|---|---|---|
| @@ -1,38 +1,48 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link rel="stylesheet" href="/static/CSS/home.css" /> | ||
| <link rel="stylesheet" href="/static/CSS/main.css" /> | ||
| <title>aOS Web</title> | ||
| </head> | ||
| <body> | ||
| <!-- Begin accessibility --> | ||
| <a href="#main" class="skip-to-main-content-link" | ||
| >Skip to main content</a | ||
| > | ||
| <!-- End accessibility --> | ||
| <!-- Navbar --> | ||
| <nav class="navbar bg-dark"> | ||
| <ul class="nav-items"> | ||
| <li class="nav-item"> | ||
| <a href="/">Home</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <!-- Main page content --> | ||
| <div id="main"></div> | ||
| <div class="body" id="mainContent"> | ||
| <h1 class="header">aOS Web</h1> | ||
| <p class="paragraph"> | ||
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cam | ||
| fugiat veniam quas quasi quia impedit nulla. Repudiandae debitis | ||
| eum, aspernatur ipsam nulla error fuga odit modi! Ipsam | ||
| similique rem explicabo. | ||
| </p> | ||
| </div> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link rel="stylesheet" href="/static/CSS/home.css" /> | ||
| <link rel="stylesheet" href="/static/CSS/main.css" /> | ||
| <title>aOS Web</title> | ||
| </head> | ||
| <body> | ||
| <!-- Begin accessibility --> | ||
| <a href="#main" class="skip-to-main-content-link" | ||
| >Skip to main content</a | ||
| > | ||
| <!-- End accessibility --> | ||
| <!-- Navbar --> | ||
| <nav class="navbar bg-dark"> | ||
| <ul class="nav-items"> | ||
| <li class="nav-item"> | ||
| <a href="/">Home</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a href="/about">About</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a href="/about/contact">Contact</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a href="/aos?limited=true">Demo</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <!-- Main page content --> | ||
| <div id="main"></div> | ||
| <div class="body" id="mainContent"> | ||
| <h1 class="header">aOS Web</h1> | ||
| <p class="paragraph"> | ||
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cam | ||
| fugiat veniam quas quasi quia impedit nulla. Repudiandae debitis | ||
| eum, aspernatur ipsam nulla error fuga odit modi! Ipsam | ||
| similique rem explicabo. | ||
| </p> | ||
| </div> | ||
|
|
||
| <script src="/static/JS/home.js"></script> | ||
| </body> | ||
| <script src="/static/JS/home.js"></script> | ||
| <script></script> | ||
| </body> | ||
| </html> |