added blog post page and tempalte, added blog page to nav menu

5 months ago · 61a3cb103d
5 changed files with 361 additions and 0 deletions
--- a/blog/index.html
+++ b/blog/index.html
@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+		/>
+		<link rel="shortcut icon" href="../favicon_hush_x256.ico" />
+		<link rel="stylesheet" href="/css/style.css?=v2" />
+		<title>Hush SilentDragon 1.4.0 Zany Zooid</title>
+	</head>
+
+	<body>
+		<!-- Checkbox for Mobile Nav Bar -->
+		<!-- Header & Nav Bar -->
+
+		<header class="header">
+			<div class="header-nav">
+				<input type="checkbox" id="nav-check" style="display: none" />
+				<div class="header-gradient"></div>
+				<div class="nav-logo">
+					<a class="header-logo" href="https://hush.is">
+						<svg
+							version="1.1"
+							xmlns="http://www.w3.org/2000/svg"
+							width="4rem"
+							height="4rem"
+							viewBox="0 0 256 256"
+						>
+							>
+							<path
+								fill="white"
+								stroke="none"
+								stroke-width="1"
+								d="M 138.90,158.50
+              C 138.90,158.50 138.90,182.50 138.90,182.50
+                138.90,188.50 134.00,193.40 128.00,193.40
+                128.00,193.40 128.00,193.40 128.00,193.40
+                127.90,193.40 127.90,193.40 127.80,193.40
+                124.90,193.30 122.30,192.10 120.40,190.20
+                118.50,188.30 117.30,185.70 117.20,182.80
+                117.20,182.70 117.20,182.70 117.20,182.60
+                117.20,182.60 117.20,142.30 117.20,142.30
+                117.20,138.70 121.50,137.00 124.00,139.50
+                124.00,139.50 136.00,151.50 136.00,151.50
+                137.80,153.20 138.90,155.80 138.90,158.50 Z
+              M 138.90,73.90
+              C 138.90,73.90 138.90,113.80 138.90,113.80
+                138.90,117.40 134.60,119.10 132.10,116.60
+                132.10,116.60 120.10,104.60 120.10,104.60
+                118.20,102.70 117.10,100.10 117.10,97.40
+                117.10,97.40 117.10,73.90 117.10,73.90
+                117.10,73.80 117.10,73.80 117.10,73.70
+                117.20,67.90 121.90,63.20 127.70,63.10
+                127.80,63.10 127.80,63.10 127.90,63.10
+                127.90,63.10 128.00,63.10 128.00,63.10
+                134.00,63.00 138.90,67.90 138.90,73.90 Z
+              M 84.50,153.80
+              C 84.50,153.80 84.50,153.80 84.50,153.80
+                90.50,153.80 95.40,158.70 95.40,164.70
+                95.40,164.70 95.40,222.00 95.40,222.00
+                95.40,228.00 90.50,232.90 84.50,232.90
+                84.50,232.90 84.50,232.90 84.50,232.90
+                78.50,232.90 73.60,228.00 73.60,222.00
+                73.60,222.00 73.60,164.60 73.60,164.60
+                73.60,158.60 78.50,153.80 84.50,153.80 Z
+              M 40.90,210.60
+              C 40.90,210.60 40.90,210.60 40.90,210.60
+                34.90,210.60 30.00,205.70 30.00,199.70
+                30.00,199.70 30.00,47.20 30.00,47.20
+                30.00,41.20 34.90,36.30 40.90,36.30
+                40.90,36.30 40.90,36.30 40.90,36.30
+                46.90,36.30 51.80,41.20 51.80,47.20
+                51.80,47.20 51.80,199.70 51.80,199.70
+                51.80,205.70 46.90,210.60 40.90,210.60 Z
+              M 84.50,12.60
+              C 84.50,12.60 84.50,12.60 84.50,12.60
+                90.50,12.60 95.40,17.50 95.40,23.50
+                95.40,23.50 95.40,121.50 95.40,121.50
+                95.40,127.50 90.50,132.40 84.50,132.40
+                84.50,132.40 84.50,132.40 84.50,132.40
+                78.50,132.40 73.60,127.50 73.60,121.50
+                73.60,121.50 73.60,23.50 73.60,23.50
+                73.60,17.50 78.50,12.60 84.50,12.60 Z
+              M 171.50,232.90
+              C 171.50,232.90 171.50,232.90 171.50,232.90
+                165.50,232.90 160.60,228.00 160.60,222.00
+                160.60,222.00 160.60,124.00 160.60,124.00
+                160.60,118.00 165.50,113.10 171.50,113.10
+                171.50,113.10 171.50,113.10 171.50,113.10
+                177.50,113.10 182.40,118.00 182.40,124.00
+                182.40,124.00 182.40,222.00 182.40,222.00
+                182.40,228.10 177.50,232.90 171.50,232.90 Z
+              M 171.50,91.80
+              C 171.50,91.80 171.50,91.80 171.50,91.80
+                165.50,91.80 160.60,86.90 160.60,80.90
+                160.60,80.90 160.60,23.50 160.60,23.50
+                160.60,17.50 165.50,12.60 171.50,12.60
+                171.50,12.60 171.50,12.60 171.50,12.60
+                177.50,12.60 182.40,17.50 182.40,23.50
+                182.40,23.50 182.40,80.90 182.40,80.90
+                182.40,86.90 177.50,91.80 171.50,91.80 Z
+              M 215.10,210.60
+              C 215.10,210.60 215.10,210.60 215.10,210.60
+                209.10,210.60 204.20,205.70 204.20,199.70
+                204.20,199.70 204.20,47.20 204.20,47.20
+                204.20,41.20 209.10,36.30 215.10,36.30
+                215.10,36.30 215.10,36.30 215.10,36.30
+                221.10,36.30 226.00,41.20 226.00,47.20
+                226.00,47.20 226.00,199.70 226.00,199.70
+                225.90,205.70 221.10,210.60 215.10,210.60 Z
+              M 117.30,101.40
+              C 117.30,101.30 117.20,101.10 117.20,101.00
+                117.30,101.20 117.30,101.30 117.30,101.40 Z
+              M 128.00,214.60
+              C 130.70,214.60 133.30,214.30 135.80,213.70
+                137.40,213.30 138.90,214.50 138.90,216.10
+                138.90,216.10 138.90,245.10 138.90,245.10
+                138.90,251.10 134.00,256.00 128.00,256.00
+                128.00,256.00 128.00,256.00 128.00,256.00
+                122.00,256.00 117.10,251.10 117.10,245.10
+                117.10,245.10 117.10,216.10 117.10,216.10
+                117.10,214.50 118.60,213.30 120.20,213.70
+                122.70,214.30 125.30,214.60 128.00,214.60 Z
+              M 138.90,10.90
+              C 138.90,10.90 138.90,39.90 138.90,39.90
+                138.90,41.50 137.40,42.70 135.80,42.30
+                133.30,41.70 130.70,41.40 128.00,41.40
+                125.30,41.40 122.70,41.70 120.20,42.30
+                118.60,42.70 117.10,41.50 117.10,39.90
+                117.10,39.90 117.10,10.90 117.10,10.90
+                117.10,4.90 122.00,0.00 128.00,0.00
+                128.00,0.00 128.10,0.00 128.10,0.00
+                134.00,0.00 138.90,4.90 138.90,10.90 Z"
+							/>
+						</svg>
+					</a>
+				</div>
+				<div class="nav-center"></div>
+				<nav class="nav-buttons">
+					<a href="https://explorer.hush.is" class="component-button"
+						><small>Explorer</small></a
+					>
+					<a href="https://videos.hush.is" class="component-button"
+						><small>Videos</small></a
+					>
+					<a
+						href="https://git.hush.is/hush/SilentDragonLite/releases"
+						class="component-button"
+						><small>Download HushChat</small></a
+					>
+					<a href="https://hush.is/privacy" class="component-button"
+						><small>Privacy</small></a
+					>
+					<a href="https://hush.is/Blog" class="component-button"
+						><small>Blog</small></a
+					>
+				</nav>
+				<div class="nav-bg"></div>
+				<label for="nav-check" class="nav-menu-btn"></label>
+			</div>
+		</header>
+		<!-- Hero Section -->
+		<div style="width: 100%; height: 4rem"></div>
+		<h1 class="section-title">Blog</h1>
+		<section class="section-default">
+			<article class="blog-post-item">
+				<h2>Example Blog Post Title</h2>
+				<img
+					src="../images/blogposts/blog_image_default.png"
+					class="blog-img"
+					alt=""
+				/>
+				<p>
+					Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta quidem
+					assumenda recusandae veritatis obcaecati dolores perspiciatis mollitia
+					quae quasi. Quam numquam blanditiis, voluptatem voluptates dolor quos
+					officiis sed illum rem.
+				</p>
+				<p>
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem sed
+					repudiandae, minima odio illo sint exercitationem dolore quisquam
+					placeat. Quae assumenda molestiae neque, saepe velit doloribus commodi
+					enim dolorum quasi, praesentium unde possimus laboriosam deserunt
+					vitae sunt modi voluptatibus quidem at, in natus! Voluptates saepe
+					ducimus libero facilis similique aliquam fugiat accusamus provident,
+					dolorem quam reprehenderit eum, nihil magni voluptas.
+				</p>
+        <ul>
+          <h3>heading</h3>
+          <li>list item</li>
+          <li>list item</li>
+          <li>list item</li>
+          <li>list item</li>
+        </ul>
+				<div class="blog-links">
+          <a href="#">External Link</a>
+          <a href="#">External Link</a>
+          <a href="#">External Link</a>
+        </div>
+			</article>
+		</section>
+
+		<footer>
+			<h2>Hush is a community project. Everyone is welcomed with open arms!</h2>
+			<div class="footer-nav">
+				<a class="footer-icon" href="https://hush.is/twitter/">
+					<img src="../graphics/social_media_icons/icon_twitter.svg" alt />
+					<span class="tooltip">Twitter</span>
+				</a>
+				<a class="footer-icon" href="https://hush.is/tg/">
+					<img src="../graphics/social_media_icons/icon_telegram.svg" alt />
+					<span class="tooltip">Telegram</span>
+				</a>
+				<a
+					class="footer-icon"
+					href="https://www.youtube.com/channel/UCmGOYuRrFbPGRw5vytVgUQw"
+				>
+					<img src="../graphics/social_media_icons/icon_Youtube.svg" alt />
+					<span class="tooltip">Youtube</span>
+				</a>
+				<a class="footer-icon" href="https://odysee.com/@hush:17">
+					<img src="../graphics/social_media_icons/icon_odysee.svg" alt />
+					<span class="tooltip">Odysee</span>
+				</a>
+				<a class="footer-icon" href="https://git.hush.is/hush">
+					<img src="../graphics/social_media_icons/icon_git.svg" alt />
+					<span class="tooltip">Git</span>
+				</a>
+				<a class="footer-icon" href="https://hush.is/matrix/">
+					<img src="../graphics/social_media_icons/icon_matrix.svg" alt />
+					<span class="tooltip">Matrix</span>
+				</a>
+				<a
+					class="footer-icon"
+					href="https://bitcointalk.org/index.php?topic=2008578.0"
+				>
+					<img src="../graphics/social_media_icons/icon_bitcointalk.svg" alt />
+					<span class="tooltip">Bitcoin Talk</span>
+				</a>
+				<a class="footer-icon" href="https://hush.is/mastodon">
+					<img src="../graphics/social_media_icons/icon_mastadon.svg" alt />
+					<span class="tooltip">Mastodon</span>
+				</a>
+				<a class="footer-icon" href="https://videos.hush.is/">
+					<img src="../graphics/social_media_icons/icon_peertube.svg" alt />
+					<span class="tooltip">Peertube</span>
+				</a>
+				<a class="footer-icon" href="https://hush.is/reddit/">
+					<img src="../graphics/social_media_icons/icon_reddit.svg" alt />
+					<span class="tooltip">Reddit</span>
+				</a>
+			</div>
+			<p>Copyright © 2016-2023 The Hush developers. All rights reserved.</p>
+		</footer>
+
+		<!-- Scripts -->
+		<script type="text/javascript">
+			var today = new Date();
+			var year = today.getFullYear();
+			var syear = document.getElementById("s_year");
+			syear.innerHTML = year;
+		</script>
+		<script
+			src="//code.jquery.com/jquery-3.2.1.min.js"
+			integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+			crossorigin="anonymous"
+		></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+		<script src="/js/bootstrap.min.js"></script>
+		<script src="/js/scripts.js"></script>
+	</body>
+</html>
--- a/css/style.css
+++ b/css/style.css
@ -117,6 +117,8 @@ input[type="radio"] ~ a label a {
 	color: white;
 	text-align: center;
 	text-shadow: 0 0 2rem rgba(255, 255, 255, 0.5);
+	font-size: 4rem;
+	margin: 0;
 }

 /* ●============== Header ==============● */
@ -1372,4 +1374,82 @@ footer > p {
 		width: 90%;

 	}
+}
+
+
+.blog-post-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	outline: .15rem solid rgba(255, 255, 255, 0.5);
+	width: 64rem;
+	margin: 4rem auto;
+	border-radius: .1rem;
+	background-color: rgba(255, 255, 255, 0.25);
+	color: white;
+	padding: .5rem 1rem;
+}
+
+.blog-post-item h2 {
+	font-size: 2.5rem;
+	text-align: left;
+	width: 100%;
+	padding-left: 5%;
+}
+
+.blog-post-item ul {
+	width: 90%;
+	font-size: 1.15rem;
+	font-weight: 100;
+}
+
+.blog-post-item ul li {
+	font-size: 1.15rem;
+	opacity: 85%;
+	margin-left: 2rem;
+	margin-top: .5rem;
+}
+
+.blog-post-item p {
+	width: 90%;
+	font-size: 1.25rem;
+}
+
+.blog-img {
+	max-width: 70%;
+}
+
+.blog-links {
+	display: flex;
+	align-items: start;
+	width: 100%;
+	gap: 1rem;
+	margin-top: 2rem;
+}
+
+.blog-post-item a {
+	transition: all ease-in-out 100ms;
+	color: white;
+	background-color: rgba(255, 255, 255, 0.25);
+	padding: .25rem .5rem;
+	border-radius: .25rem;
+}
+
+.blog-post-item a:hover {
+	transform: scale(1.05);
+	background-color: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 1024px) {
+	.blog-post-item {
+		width: 85%;
+	}
+	.blog-post-item {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.blog-post-item a{
+		width: max-content;
+	}
 }
--- a/images/blogposts/blog_image_default.png
+++ b/images/blogposts/blog_image_default.png
--- a/index.html
+++ b/index.html
@ -129,6 +129,9 @@
        <a href="https://videos.hush.is" class="component-button"><small>Videos</small></a>
        <a href="https://git.hush.is/hush/SilentDragonLite/releases" class="component-button"><small>Download HushChat</small></a>
        <a href="https://hush.is/privacy" class="component-button"><small>Privacy</small></a>
+        <a href="https://hush.is/Blog" class="component-button"
+        ><small>Blog</small></a
+      >
      </nav>
      <div class="nav-bg"></div>
      <label for="nav-check" class="nav-menu-btn"></label>
--- a/releases/sd/1.4.0/index.html
+++ b/releases/sd/1.4.0/index.html
@ -154,6 +154,9 @@
 					<a href="https://hush.is/privacy" class="component-button"
 						><small>Privacy</small></a
 					>
+          <a href="https://hush.is/Blog" class="component-button"
+          ><small>Blog</small></a
+        >
 				</nav>
 				<div class="nav-bg"></div>
 				<label for="nav-check" class="nav-menu-btn"></label>