DavidJentes
/
websitedesign2023
mirror of https://github.com/DavidJentes/websitedesign2023
1
0
Fork 0
Code

Implement new menu system and content change

pull/1/head
dugo3number2 2023-02-06 13:39:43 -06:00
parent 7e95aa50cb
commit c64712c315
8 changed files with 101 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/about/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<title>Work in progress</title>
<title>About - The Cherubim Foundation</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/pages.css">
@ -11,12 +11,15 @@
<body>
<header data-m="reveal-right" data-m-duration="0.5">
<h1>Work in progress</h1>
<h1>The Cherubim Foundation</h1>
<a href="javascript:void(0)" id="menu"><img src="../assets/img/hamburger.svg" width="25"></a>
<nav>
<ul>
<li><a href="..">Home</a></li>
<li><a href="../conditions">Conditions</a></li>
<li><a href="#" class="current">About</a></li>
<li><a href="#" id="current">About</a></li>
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
</ul>
</nav>
</header>
@ -47,11 +50,14 @@
<footer data-m="bounce-up" data-m-duration="0.5">
<ul>
<li><a href="..">Home</a></li>
<li><a href="../conditions">Conditions</a></li>
<li><a href="#">About</a></li>
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
</ul>
</footer>
<script src="../assets/js/scroll.js"></script>
<script src="../assets/js/menu.js"></script>
</body>
</html>

48
docs/assets/css/main.css
View File

@ -58,7 +58,12 @@ nav a:hover, nav a:focus {
background-color: #555555;
}
.current {
.navscroll {
padding: 15px;
font-size: 12px;
}
#current {
color: #ffffff;
background-color: #000000;
}
@ -71,11 +76,52 @@ main {
border-radius: 50px;
}
#menu {
display: none;
}
@media screen and (max-width: 850px) {
#menu {
display: inline-block;
}
nav {
display: none;
margin: 0;
text-align: center;
}
.navshown {
display: block;
}
nav a {
padding: 12px;
font-size: 15px;
margin: 0;
}
nav li {
display: block;
padding: 12px;
}
.navscroll {
padding: 12px;
margin: 0;
font-size: 15px;
}
}
@media screen and (max-width: 370px) {
header {
margin: 10px;
width: calc(100% - 39px);
}
nav a {
padding: 5px;
font-size: 12px;
}
}
article {

1
docs/assets/img/hamburger.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

16
docs/assets/js/menu.js Normal file
View File

@ -0,0 +1,16 @@
const menu = document.getElementsByTagName("nav")[0]
const menuButton = document.getElementById("menu")
var menuShown = false;
menuButton.addEventListener("click", menuToggle)
function menuToggle() {
menuShown = !menuShown;
console.log(menuShown);
if (menuShown) {
menu.className = "navshown"
} else {
menu.className = ""
}
}

6
docs/assets/js/scroll.js
View File

@ -12,16 +12,14 @@ function headerScroll() {
headerText.style.fontSize = "16px"
headerText.style.padding = "5px"
for (const button of headerButtons) {
button.style.fontSize = "12px"
button.children[0].style.padding = "15px"
button.children[0].className = "navscroll"
}
} else {
header.style.padding = "10px"
headerText.style.fontSize = "32px"
headerText.style.padding = "10px"
for (const button of headerButtons) {
button.style.fontSize = "16px"
button.children[0].style.padding = "20px"
button.children[0].className = ""
}
}
}

16
docs/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<title>Work in progress</title>
<title>The Cherubim Foundation</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/home.css">
@ -11,12 +11,15 @@
<body data-m="drop" data-m-duration="1.5">
<header data-m="reveal-right" data-m-delay="1" data-m-duration="1">
<h1>Work in progress</h1>
<h1>The Cherubim Foundation</h1>
<a href="javascript:void(0)" id="menu"><img src="assets/img/hamburger.svg" width="25"></a>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="conditions">Conditions</a></li>
<li><a href="#" id="current">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="projects">Projects</a></li>
<li><a href="calendar">Calendar</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
</nav>
</header>
@ -49,11 +52,14 @@
<footer data-m="bounce-up" data-m-delay="1" duration="1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="conditions">Conditions</a></li>
<li><a href="about">About</a></li>
<li><a href="projects">Projects</a></li>
<li><a href="calendar">Calendar</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
</footer>
<script src="assets/js/scroll.js"></script>
<script src="assets/js/menu.js"></script>
</body>
</html>

16
docs/conditions/index.html → docs/projects/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<title>Work in progress</title>
<title>Projects - The Cherubim Foundation</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/pages.css">
@ -11,17 +11,20 @@
<body>
<header data-m="reveal-right" data-m-duration="0.5">
<h1>Work in progress</h1>
<h1>The Cherubim Foundation</h1>
<a href="javascript:void(0)" id="menu"><img src="../assets/img/hamburger.svg" width="25"></a>
<nav>
<ul>
<li><a href="..">Home</a></li>
<li><a href="#" class="current">Conditions</a></li>
<li><a href="../about">About</a></li>
<li><a href="#" id="current">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main data-m="drop" data-m-duration="0.5">
<h1>Conditions</h1>
<h1>Projects</h1>
<article>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus id turpis vitae accumsan. Nulla
@ -47,11 +50,14 @@
<footer data-m="bounce-up" data-m-duration="0.5">
<ul>
<li><a href="..">Home</a></li>
<li><a href="#">Conditions</a></li>
<li><a href="../about">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
</ul>
</footer>
<script src="../assets/js/scroll.js"></script>
<script src="../assets/js/menu.js"></script>
</body>
</html>

3
ideas.md
View File

@ -2,4 +2,5 @@
* ~~Newly released study Bible advertisement~~ (Doesn't give enough room for creativity)
* ~~Site for church Parent's Day Out ministry~~ (Easy to make with existing platform, wouldn't be useful to them)
* **Site for Reese**
~~**Site for Reese**~~ (Not enough time to get info)
***Website for non-profit***