mirror of
https://github.com/DigitalDesignDude/DSGM-Resource-Site.git
synced 2025-06-18 21:55:41 -04:00
Added Site Navigation Bar
This commit is contained in:
DigitalDesignDude
parent
f0d48e2d3a
commit
fce3a5a426
@ -23,11 +23,33 @@
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<img id="site-logo" class="img-fluid" src="images/logo-dsgm.png">
|
||||
<h1 class="themed-text">Resource Site</h1>
|
||||
<a id="site-brand" href="index.html">
|
||||
<img id="site-logo" class="img-fluid" src="images/logo-dsgm.png">
|
||||
<h1 class="themed-text">Resource Site</h1>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<!-- NAVIGATION BAR -->
|
||||
<nav id="site-navigation" class="navbar navbar-expand-md">
|
||||
<!-- Brand Image/Icon -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-home"></i>
|
||||
</a>
|
||||
|
||||
<div class="separator"></div>
|
||||
<!-- Toggler/Collapsibe Button -->
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Navbar links -->
|
||||
<div class="collapse navbar-collapse" id="collapsibleNavbar">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="archives.html">Archives</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="main-content">
|
||||
|
||||
@ -353,10 +375,14 @@
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="script.js"></script>
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
42
index.html
42
index.html
@ -23,11 +23,33 @@
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<img id="site-logo" class="img-fluid" src="images/logo-dsgm.png">
|
||||
<h1 class="themed-text">Resource Site</h1>
|
||||
<a id="site-brand" href="index.html">
|
||||
<img id="site-logo" class="img-fluid" src="images/logo-dsgm.png">
|
||||
<h1 class="themed-text">Resource Site</h1>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="separator"></div>
|
||||
<!-- NAVIGATION BAR -->
|
||||
<nav id="site-navigation" class="navbar navbar-expand-md">
|
||||
<!-- Brand Image/Icon -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-home"></i>
|
||||
</a>
|
||||
|
||||
<!-- Toggler/Collapsibe Button -->
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Navbar links -->
|
||||
<div class="collapse navbar-collapse" id="collapsibleNavbar">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="archives.html">Archives</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="main-content">
|
||||
|
||||
@ -69,7 +91,7 @@
|
||||
</div>
|
||||
<div class="col-md-6 d-flex align-items-center py-3 px-0">
|
||||
<ul>
|
||||
<li><a href="hosted-files/DS%20Game%20Maker%205%20Manual.pdf">DS Game Maker.pdf</a></li>
|
||||
<li><a href="hosted-files/DS%20Game%20Maker%205%20Manual.pdf">DS Game Maker 5 Manual.pdf</a></li>
|
||||
<li><a href="hosted-files/DSGM%20Coding%20at%20a%20Glance.pdf">DSGM Coding at a Glance.pdf</a></li>
|
||||
<li><a href="hosted-files/Index%20of%20DS%20Game%20Maker%20Functions.pdf">Index of DS Game Maker Functions.pdf</a></li>
|
||||
<li><a href="hosted-files/PAlib%20Functions%20Reference.pdf">Palib Functions Reference.pdf</a></li>
|
||||
@ -92,7 +114,7 @@
|
||||
<div>
|
||||
<img class="img-fluid mb-3" src="images/logo-dsgm.png" alt="documentation">
|
||||
<h3 class="banner-text mb-3 themed-text">Example Files</h3>
|
||||
<a class="btn btn-primary banner-button" href="https://surrealcubemedia.itch.io/ds-game-maker-examples">View on Itch.io</a>
|
||||
<a class="btn btn-primary banner-button" href="https://surrealcubemedia.itch.io/ds-game-maker-examples">Coming soon to Itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 d-flex justify-content-center">
|
||||
@ -164,9 +186,15 @@
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
16
script.js
Normal file
16
script.js
Normal file
@ -0,0 +1,16 @@
|
||||
//Make Navbar fixed to top of screen after scrolling past header
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 253) {
|
||||
document.getElementById('site-navigation').classList.add('nav-fixed');
|
||||
// add padding top to show content behind navbar
|
||||
navbar_height = document.querySelector('.navbar').offsetHeight;
|
||||
document.body.style.paddingTop = navbar_height + 'px';
|
||||
} else {
|
||||
document.getElementById('site-navigation').classList.remove('nav-fixed');
|
||||
// remove padding top from body
|
||||
document.body.style.paddingTop = '0';
|
||||
}
|
||||
});
|
||||
});
|
||||
// DOMContentLoaded end
|
||||
114
style.css
114
style.css
@ -1,3 +1,6 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -31,7 +34,7 @@ select option,
|
||||
strong,
|
||||
dt,
|
||||
dd {
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-family: 'Open Sans', 'Tahoma', sans-serif;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
@ -57,15 +60,88 @@ header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-brand{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.separator{
|
||||
.separator {
|
||||
background-image: linear-gradient(#DEDEDE, #6B6B6B);
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/*NAVBAR=======================*/
|
||||
|
||||
.navbar {
|
||||
background-color: #EBEBEB;
|
||||
background-image: linear-gradient(#E4E4E4, #F0F0F0 45%, #D4D4D4, #CCCCCC);
|
||||
color: #4a4a4a;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
padding: 0px 0px;
|
||||
max-height: 48px;
|
||||
border-bottom: 1px solid rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
.nav-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1030;
|
||||
width: 80%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navbar-toggler i {
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
padding: 4px 12px !important;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus,
|
||||
.navbar-toggler:active,
|
||||
.navbar-toggler-icon:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: #393939;
|
||||
padding: 4px 8px;
|
||||
border-right: 1px solid rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
|
||||
nav li a {
|
||||
color: #393939;
|
||||
text-align: right;
|
||||
border-left: 1px solid rgb(128, 128, 128);
|
||||
padding: 8px 20px !important;
|
||||
min-height: 39px;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*FOOTER=====================================*/
|
||||
|
||||
@ -105,12 +181,12 @@ h3 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4{
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 1rem;
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@ -271,24 +347,24 @@ h5{
|
||||
|
||||
/*CODE STYLING =================================*/
|
||||
|
||||
.code-snippet{
|
||||
border: 1px solid #d0d0d0;
|
||||
color: #0080ff;
|
||||
.code-snippet {
|
||||
border: 1px solid #d0d0d0;
|
||||
color: #0080ff;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
|
||||
h4{
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
|
||||
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
h5{
|
||||
h5 {
|
||||
background-color: #d0d0d0;
|
||||
margin-bottom: 0;
|
||||
padding:6px 4px;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
|
||||
@ -307,6 +383,16 @@ h5{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.nav-fixed {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
background-color: #ccc;
|
||||
border-top: 1px solid rgb(128, 128, 128);
|
||||
border-bottom: 1px solid rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
/*HEADLINES ----------------------*/
|
||||
|
||||
h1 {
|
||||
@ -332,6 +418,10 @@ h5{
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.nav-fixed {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
padding: 40px 5%;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user