setup homepage, created initial css, minor tweaks to recipe page generator

author: scottj <jones.scott0391@gmail.com> 2021-08-14 00:06:31 -0700
committer: scottj <jones.scott0391@gmail.com> 2021-08-14 00:06:31 -0700
commit: 463ef7389e8de67d74973e2e672443b10cd86629 (patch)
tree: cc42cb4acc857f3fdf52fc571a22fc74e9bbab8e
parent: dcf9e9dd323ae462531ee0c7d6aab974e5a11966 (diff)
12 files changed, 304 insertions, 3 deletions
diff --git a/Gemfile.lock b/Gemfile.lock
index 2beb319..1ec0d79 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -9,6 +9,7 @@ GEM
     rexml (3.2.5)
 
 PLATFORMS
+  x86_64-darwin-18
   x86_64-darwin-20
 
 DEPENDENCIES
diff --git a/bin/build_blog b/bin/build_blog
index 10e4016..cd9e7dc 100755
--- a/bin/build_blog
+++ b/bin/build_blog
@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-ruby build_blog.rb > output/blog.html
+ruby build_blog.rb > output/recipes.html
diff --git a/header.html.erb b/header.html.erb
index 66b3adf..d5444da 100644
--- a/header.html.erb
+++ b/header.html.erb
@@ -1,5 +1,5 @@
 <nav>
-  <a href="#"><img src="image/pantry-of-plants-logo.png"></a>
-  <a href="#">Recipes</a>
+  <a href="#"><img src="../images/pantry-of-plants-logo.png"></a>
+  <a href="output/recipes.html">Recipes</a>
   <a href="#">About</a>
 </nav>
diff --git a/images/mail.png b/images/mail.png
new file mode 100644
index 0000000..f97f1d7
--- /dev/null
+++ b/images/mail.png
diff --git a/images/mail.svg b/images/mail.svg
new file mode 100644
index 0000000..dd56c24
--- /dev/null
+++ b/images/mail.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.21875 5.5H25.7812C26.9227 5.49993 28.0209 5.93664 28.8506 6.72055C29.6802 7.50446 30.1785 8.57614 30.2431 9.71575L30.25 9.96875V23.0312C30.2501 24.1727 29.8134 25.2709 29.0295 26.1006C28.2455 26.9302 27.1739 27.4285 26.0343 27.4931L25.7812 27.5H7.21875C6.07731 27.5001 4.97911 27.0634 4.14943 26.2795C3.31975 25.4955 2.8215 24.4239 2.75688 23.2843L2.75 23.0312V9.96875C2.74993 8.82731 3.18664 7.72911 3.97055 6.89943C4.75446 6.06975 5.82614 5.5715 6.96575 5.50688L7.21875 5.5H25.7812H7.21875ZM28.1875 12.8879L16.9813 18.7866C16.8547 18.8535 16.7157 18.8932 16.5729 18.9034C16.4302 18.9136 16.2869 18.894 16.1521 18.8458L16.0201 18.788L4.8125 12.8892V23.0312C4.81252 23.6351 5.03961 24.2169 5.44868 24.6612C5.85776 25.1054 6.41891 25.3796 7.02075 25.4292L7.21875 25.4375H25.7812C26.3854 25.4374 26.9673 25.2102 27.4116 24.8008C27.8559 24.3914 28.1299 23.83 28.1792 23.2279L28.1875 23.0312V12.8879ZM25.7812 7.5625H7.21875C6.61486 7.56252 6.03306 7.78961 5.58884 8.19868C5.14461 8.60776 4.87044 9.16891 4.82075 9.77075L4.8125 9.96875V10.5586L16.5 16.709L28.1875 10.5572V9.96875C28.1874 9.36465 27.9602 8.78266 27.5508 8.3384C27.1414 7.89414 26.58 7.62011 25.9779 7.57075L25.7812 7.5625Z" fill="#758B7A"/>
+</svg>
diff --git a/images/placeholder/home1.jpg b/images/placeholder/home1.jpg
new file mode 100644
index 0000000..971bb36
--- /dev/null
+++ b/images/placeholder/home1.jpg
diff --git a/images/placeholder/home2.jpg b/images/placeholder/home2.jpg
new file mode 100644
index 0000000..ea17465
--- /dev/null
+++ b/images/placeholder/home2.jpg
diff --git a/images/placeholder/home3.jpg b/images/placeholder/home3.jpg
new file mode 100644
index 0000000..f4f25dd
--- /dev/null
+++ b/images/placeholder/home3.jpg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..53801ad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Pantry of Plants</title>
+	<link rel="stylesheet" href="style/style.css">
+	<script src="scripts/image-slide.js" defer></script>
+</head>
+<body>
+	<header>
+		<nav>
+		  <a href="index.html">
+		  	<img src="images/pantry-of-plants-logo.png" class="logo">
+		  </a>
+		  <a href="output/recipes.html" class="nav-text">Recipes</a>
+		  <a href="#" class="nav-text">About</a>
+		</nav>
+	</header>
+	<div class="content">
+		<!-- Slideshow container -->
+		<div class="slideshow-container">
+			<!-- Full-width images with rounded edges -->
+			<div class="slides">
+				<img src="images/placeholder/home1.jpg" style="width:100%; border-radius:20px;">
+			</div>
+			<div class="slides">
+				<img src="images/placeholder/home2.jpg" style="width:100%; border-radius:20px;">
+			</div>
+			<div class="slides">
+				<img src="images/placeholder/home3.jpg" style="width:100%; border-radius:20px;">
+			</div>
+		</div>
+		<!-- The dots/circles -->
+		<div style="text-align:center">
+		  <span class="dot" onclick="currentSlide(1)"></span> 
+		  <span class="dot" onclick="currentSlide(2)"></span> 
+		  <span class="dot" onclick="currentSlide(3)"></span> 
+		</div>
+		<div class="home-links">
+			<a class="button" id="explore" href="output/recipes.html">
+				<p>Explore Recipes</p>
+			</a>
+			<a class="button" id="contact" href="mailto:scott@pantryofplants.ca">
+				<p>Contact <img src="images/mail.svg" class="mail-1"></p>
+			</a>
+		</div>
+	</div>
+
+	<footer>
+		<a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="images/mail.svg" class="mail-2"></a>
+		<p>© 2021 Pantry of Plants</p>
+	</footer>
+</body>
+</html>
+\ No newline at end of file
diff --git a/output/recipes.html b/output/recipes.html
new file mode 100644
index 0000000..fcde2fd
--- /dev/null
+++ b/output/recipes.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <title>Hello</title>
+  </head>
+  <body>
+    <nav>
+  <a href="#"><img src="../images/pantry-of-plants-logo.png"></a>
+  <a href="#">Recipes</a>
+  <a href="#">About</a>
+</nav>
+
+    <h1 id="big-header-boi">Big Header Boi</h1>
+
+<p>This is a <em>bold</em> recipe</p>
+
+<p>List it out!
+- first thing
+- second thing</p>
+
+<ol>
+  <li>hello</li>
+  <li>hello</li>
+</ol>
+<h3 id="sick">Sick</h3>
+
+<p><img src="https://i5.walmartimages.ca/images/Large/094/514/6000200094514.jpg" alt="apple" title="apple" /></p>
+
+    <footer>
+	<a>Contact: scott@pantryofplants.ca</a>
+	<p>© 2021 Pantry of Plants</p>
+</footer>
+
+  </body>
+</html>
diff --git a/scripts/image-slide.js b/scripts/image-slide.js
new file mode 100644
index 0000000..58911ee
--- /dev/null
+++ b/scripts/image-slide.js
@@ -0,0 +1,48 @@
+//set up variables
+var slideIndex = 1;
+var timer = null;
+showSlides(slideIndex);
+
+//Arrow slide controls
+function plusSlides(n) {
+	//resets timer
+	clearTimeout(timer);
+	showSlides(slideIndex += n);
+}
+
+//Slide controls using dots on bottom of display
+function currentSlide(n) {
+	clearTimeout(timer);
+	showSlides(slideIndex = n);
+}
+
+//function to progress image slides
+function showSlides(n) {
+	//setup variables
+	var i;
+	var slides = document.getElementsByClassName("slides");
+	var dots = document.getElementsByClassName("dot");
+
+	if (n == undefined) {
+		n = ++slideIndex;
+	}
+	if (n > slides.length) {
+		slideIndex = 1;
+	}
+	if (n < 1) {
+		slideIndex = slides.length
+	}
+	for (i = 0; i < slides.length; i++) {
+		slides[i].style.display = "none";
+	}
+	for (i = 0; i < dots.length; i++) {
+	  dots[i].className = dots[i].className.replace(" active", "");
+	}
+	slides[slideIndex-1].style.display = "block";
+
+	//highlights dot of current image in slideshow
+	dots[slideIndex-1].className += " active";
+
+	//determines length each image is displayed for
+	timer = setTimeout(showSlides, 6000);
+} 
+\ No newline at end of file
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..b35ec47
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,162 @@
+body {
+	font-family: "Helvetica", sans-serif;
+	padding-left: 50px;
+	padding-right: 50px;
+	background-color: #F1F1F1;
+	color: #758B7A;
+}
+
+
+nav {
+	display: inline;
+}
+
+nav a {
+	font-size: 36px;
+	font-weight: bold;
+
+}
+
+.nav-text {
+	float: right;
+	padding-left: 40px;
+	margin-top: 74px;
+
+}
+
+a {
+	text-decoration: none;
+	color: #758B7A;
+	font: Helvetica;
+	transition-duration: 0.5s;
+}
+
+nav a:hover {
+	opacity: 50%;
+}
+
+.logo {
+	width: 500px;
+}
+
+.content {
+	background-color: #758B7A;
+	color: #F1F1F1;
+	border-radius: 20px;
+}
+
+
+footer {
+	padding-top: 20px;
+	text-align: center;
+	font-size: 18px;
+	font-weight: bold;
+}
+
+/* -------------------------------------------------------------------------- */
+/* styling for image slideshow on home page */
+
+* {box-sizing:border-box}
+
+/* Slideshow container */
+.slideshow-container {
+	max-width: 100%;
+	padding: 80px 80px 20px 80px;
+	position: relative;
+	margin: auto;
+}
+
+/* Hide the images by default */
+.slides {
+	display: none;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+	cursor: pointer;
+	height: 15px;
+	width: 15px;
+	margin: 0 2px;
+	background-color: #F1F1F1;
+	border-radius: 50%;
+	display: inline-block;
+	transition: background-color 0.6s ease;
+	transition-duration: 0.5s;
+}
+
+.active, .dot:hover {
+	background-color: #B8C5BB;
+}
+
+/* Fading animation */
+.fade {
+	-webkit-animation-name: fade;
+	-webkit-animation-duration: 2s;
+	animation-name: fade;
+	animation-duration: 2s;
+}
+
+@-webkit-keyframes fade {
+	from {opacity: .6} 
+	to {opacity: 1}
+}
+
+@keyframes fade {
+	from {opacity: .6} 
+	to {opacity: 1}
+}
+
+/* End of styling for image slideshow */
+/* -------------------------------------------------------------------------- */
+.home-links {
+	display: flex;
+	text-align: center;
+	justify-content: center;
+	padding: 20px;
+	padding-bottom: 50px;
+}
+
+.button {
+	border-radius: 20px;
+	background-color: #F1F1F1;
+	color: #758B7A;
+	width: 40%;
+	text-align: center;
+	margin-right: 50px;
+	margin-left: 50px;
+	font-weight: bold;
+	font-size: 36px;
+	transition-duration: 0.5s;
+}
+
+.button:hover {
+	background-color: #B8C5BB;
+	color: #F1F1F1;
+}
+
+#explore {
+
+}
+
+#contact {
+	margin-left: 200px;
+}
+
+.mail {
+	transition-duration: 0.5s;
+}
+
+.mail:hover {
+	opacity: 50%;
+}
+
+.mail-1 {
+	width: 33px;
+	margin-bottom: -4px;
+	transition-duration: 0.5s;
+}
+
+.mail-2 {
+	width: 20px;
+	margin-bottom: -4px;
+}
+\ No newline at end of file
author	scottj <jones.scott0391@gmail.com>	2021-08-14 00:06:31 -0700
committer	scottj <jones.scott0391@gmail.com>	2021-08-14 00:06:31 -0700
commit	463ef7389e8de67d74973e2e672443b10cd86629 (patch)
tree	cc42cb4acc857f3fdf52fc571a22fc74e9bbab8e
parent	dcf9e9dd323ae462531ee0c7d6aab974e5a11966 (diff)