james/miles-city-council
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css fixes

Browse Source
This commit is contained in:
scoliono 2021-04-28 21:10:28 -07:00
parent 6e605eec2e
commit f973a9ab9b
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/main.css
View File

@ -1,5 +1,6 @@
* { * {
--page-bg: rgb(22, 41, 216); --page-bg: rgb(22, 41, 216);
--banner-dark-bg: rgb(32, 2, 145);
--banner-bg: rgb(255, 255, 255); --banner-bg: rgb(255, 255, 255);
--button-bg: rgb(234, 215, 73); --button-bg: rgb(234, 215, 73);
--button-hover: rgb(219, 200, 58); --button-hover: rgb(219, 200, 58);
@ -13,10 +14,13 @@
src: url(../assets/Navigo-Bold.ttf); src: url(../assets/Navigo-Bold.ttf);
} }
html {
scroll-behavior: smooth;
}
body { body {
font-family: Navigo Bold; font-family: Navigo Bold;
background-color: var(--page-bg); background-color: var(--page-bg);
scroll-behavior: smooth;
} }
a { a {
@ -24,7 +28,8 @@ a {
} }
nav { nav {
position: sticky; position: fixed;
width: 100vw;
top: 0; top: 0;
z-index: 9; z-index: 9;
display: flex; display: flex;
@ -46,12 +51,19 @@ nav a:hover {
.main-banner { .main-banner {
position: relative; position: relative;
background-color: var(--banner-bg); background-color: var(--banner-bg);
top: 6rem; top: 50vh;
transform: translateY(-50%);
left: 4.5rem; left: 4.5rem;
padding: 1rem 2.5rem; padding: 1rem 2.5rem;
width: 550px; width: 550px;
} }
.main-banner img {
display: block;
margin: 1.5rem auto;
width: 70%;
}
.main-banner-buttons { .main-banner-buttons {
display: flex; display: flex;
} }

13
index.html
View File

@ -4,20 +4,21 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="fav icon" href="assets/favicon.png">
<title>Miles Linden for City Council</title> <title>Miles Linden for City Council</title>
</head> </head>
<body> <body>
<div id="home"></div> <div id="home"></div>
<nav> <nav id="main-nav">
<a href="#home">Home</a> <a href="#home">Home</a>
<a href="#about">About</a> <a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#donate">Donate</a>
<a href="#joinus">Join</a> <a href="#joinus">Join</a>
<a href="#donate">Donate</a>
<a href="#contact">Contact</a>
</nav> </nav>
<div id="landing" class="fullpage"> <div id="landing" class="fullpage">
<div class="main-banner"> <div class="main-banner">
<img src="assets/4chan.png" width="550" height="200"> <img src="assets/myles-logo.png">
<div class="main-banner-buttons"> <div class="main-banner-buttons">
<a href="#donate">Donate</a> <a href="#donate">Donate</a>
<a href="#joinus">Join</a> <a href="#joinus">Join</a>
@ -27,11 +28,11 @@
<div id="about" class="fullpage"> <div id="about" class="fullpage">
</div> </div>
<div id="contact" class="fullpage"> <div id="joinus" class="fullpage">
</div> </div>
<div id="donate" class="fullpage"> <div id="donate" class="fullpage">
</div> </div>
<div id="joinus" class="fullpage"> <div id="contact" class="fullpage">
</div> </div>
</body> </body>
</html> </html>

10
js/scroll.js Normal file
View File

@ -0,0 +1,10 @@
document.addEventListener("DOMContentReady", function () {
var navLinks = document.querySelectorAll("#main-nav > a");
for (var link of navLinks) {
link.addEventListener("click", function (e) {
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
}
});