Post Designs

meu9067 · meu9067 · commit 8a312e86b6bb · 2025-10-17T16:01:20.000+01:00
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,10 @@
+
+<footer>
+    <div class="ticker">
+        <p>The articles featured are excerpts from earlier issues of Nature. This page is not affiliated with the scientific journal Nature.</p>
+    </div>
+    <p>© 2025 Amazing Nature</p>
+</footer>
+
+</body>
+</html>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Amazing Nature</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Amazing Nature - Excerpts from earlier issues of Nature.">
+    <meta name="keywords" content="nature, science, articles, amazing">
+    <link rel="stylesheet" href="/styles/main.css">
+</head>
+<body>
diff --git a/_includes/home.html b/_includes/home.html
@@ -0,0 +1,14 @@
+{% include 'head.html' %}
+
+<div class="main">
+
+    <header>
+        <h1><a href="/">Amazing Nature</a></h1>
+    </header>
+
+    <section class="content">
+        {{ content }}
+    </section>
+</div>
+
+{% include 'footer.html' %}
diff --git a/_includes/layout.html b/_includes/layout.html
diff --git a/_includes/post.html b/_includes/post.html
@@ -0,0 +1,31 @@
+{% include 'head.html' %}
+
+<div class="main">
+
+    <header>
+        <h2><a href="/">Amazing Nature</a></h2>
+    </header>
+
+    <section class="post">
+
+        <h1>{{ title }}</h1>
+
+        <ul class="sources">
+            <li>Original Data Publications:  {{ publicationDate | date: "%B %Y" }} </li>
+            <li>Nature Links: <a href="{{natureUrl}}">{{natureUrl}}</a></li>
+        </ul>
+
+
+
+        <div class="post-content">
+            <div class="image">
+                <img src="../../{{ imgUrl }}" alt="{{ title }}">
+            </div>
+            {{ content}}
+
+        </div>
+
+    </section>
+</div>
+
+{% include 'footer.html' %}
diff --git a/assets/img/post-4.jpg b/assets/img/post-4.jpg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 ---
-layout: layout.html
+layout: home.html
 ---
 
     {% include 'introduction.html' %}
diff --git a/posts/post-1.md b/posts/post-1.md
@@ -1,8 +1,10 @@
 --- 
+layout: post.html
 title: "A Mysterious Glow on Mars"
 category: sci-fi
 natureUrl: https://www.nature.com/articles/050319c0
 imgUrl: assets/img/post-1.jpg
+publicationDate: 1905-08-03
 summary: "A strange glowing light was spotted on the dark side of Mars, sparking speculation about its origin."
 --- 
 
diff --git a/posts/post-2.md b/posts/post-2.md
@@ -1,8 +1,11 @@
 --- 
+layout: post.html
 title: "Lectures to Ladies"
 category: education
-natureUrl: https://www.nature.com/articles/050319c0
+natureUrl: https://www.nature.com/articles/001112b0
 imgUrl: assets/img/post-2.jpg
+publicationDate: 1869-11-11
+
 summary: "In 1869 Britain, the rise of “Ladies’ Lectures” marked a serious and transformative push by women for access to higher education and intellectual empowerment."
 --- 
 
diff --git a/posts/post-3.md b/posts/post-3.md
@@ -1,8 +1,11 @@
 --- 
+layout: post.html
 title: "Penny Science Classes  "
 category: education
 natureUrl: https://www.nature.com/articles/001057a0
 imgUrl: assets/img/post-3.jpg
+publicationDate: 1869-11-11
+
 summary: "With just a penny per class, the Birmingham and Midland Institute turned science education into a working-class revolution—proving that big ideas don’t need big budgets to thrive."
 --- 
 
diff --git a/posts/post-4.md b/posts/post-4.md
@@ -0,0 +1,16 @@
+--- 
+layout: post.html
+title: "Mind and Matter"
+category: ocultism
+natureUrl: https://www.nature.com/articles/118618a0
+imgUrl: assets/img/post-4.jpg
+publicationDate: 1926-10-30
+
+summary: "The Society for Psychical Research conducted an investigation into the American medium Margery, known for alleged telekinetic and materialisation phenomena."
+--- 
+
+Investigation of Medium "Margery" by the Society for Psychical Research
+The Society for Psychical Research conducted an investigation into the American medium Margery, known for alleged telekinetic and materialisation phenomena. The inquiry was led by E.J. Dingwall and resembled earlier studies of the Goligher Circle.
+Margery’s séances featured a supposed spirit operator named Walter, her deceased brother, who communicated audibly and predicted physical manifestations. These included the appearance of teleplasm—an amorphous substance that changed shape and formed finger-like projections, including a hooked extension. At one point, a hand-like object appeared on a table, described as a light, skin-like bag weighing a few ounces.
+Despite some striking events, such as the ringing of a sealed bell, the investigation was hindered by limited visibility and resistance to stricter controls. Suggestions to use a gauze cage were rejected, and the medium’s husband was allowed to participate and control one of her hands, complicating the setup.
+Dingwall noted the credibility of Margery and her husband as a point in favor of authenticity, but also considered the possibility of deliberate deception. Ultimately, like in previous cases, the investigator’s initial belief in the phenomena was challenged by the lack of conclusive evidence under controlled conditions.
diff --git a/styles/_base.scss b/styles/_base.scss
@@ -0,0 +1,3 @@
+html, body {
+  font-size: 16px;
+}
diff --git a/styles/_breakpoints.scss b/styles/_breakpoints.scss
@@ -0,0 +1,7 @@
+$breakpoints: (
+		xs: 320px,
+		sm: 640px,
+		md: 1024px,
+		lg: 1440px,
+		xl: 1600px
+);
diff --git a/styles/_links.scss b/styles/_links.scss
@@ -1,25 +1,37 @@
 
-a {
+section a {
   box-shadow: inset 0 0 0 0 #2e1709;
   color: #2e1709;
   padding: 0 .25rem;
   margin: 0 -.25rem;
   transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
-a:hover {
-  color: #fff;
-  box-shadow: inset 200px 0 0 0 #2e1709;;
-}
-
-/* Presentational styles */
-a {
-  color: #2e1709;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.5;
   text-decoration: none;
+  &:hover {
+	color: #fff;
+	box-shadow: inset 200px 0 0 0 #2e1709;;
+  }
+}
+
+section .sources a {
+  box-shadow: inset 0 0 0 0 #E0C9A6;
+  color: #E0C9A6;
+
+  &:hover {
+	color: #2e1709;
+	box-shadow: inset 300px 0 0 0 #E0C9A6;;
+  }
 }
 
+
+
 .link {
   white-space: nowrap;
+}
+
+h1 a, h2 a {
+  color: #2e1709;
+  text-decoration: none;
 }
diff --git a/styles/_mediaqueries.scss b/styles/_mediaqueries.scss
@@ -0,0 +1,72 @@
+@use './breakpoints' as br;
+@use 'sass:map';
+
+// Below mobile (< 320px)
+@mixin media-below-mobile {
+  @media (max-width: #{map.get(br.$breakpoints, xs) - 1}) {
+	@content;
+  }
+}
+
+// Mobile and below (< 640px) — includes below-mobile + mobile
+@mixin media-mobile-and-below {
+  @media (max-width: #{map.get(br.$breakpoints, sm) - 1}) {
+	@content;
+  }
+}
+
+// Mobile only (320px – 639px)
+@mixin media-mobile-only {
+  @media (min-width: #{map.get(br.$breakpoints, xs)}) and (max-width: #{map.get(br.$breakpoints, sm) - 1}) {
+	@content;
+  }
+}
+
+// Tablet and above (≥ 640px)
+@mixin media-tablet-and-above {
+  @media (min-width: #{map.get(br.$breakpoints, sm)}) {
+	@content;
+  }
+}
+
+// Tablet only (640px – 1023px)
+@mixin media-tablet-only {
+  @media (min-width: #{map.get(br.$breakpoints, sm)}) and (max-width: #{map.get(br.$breakpoints, md) - 1}) {
+	@content;
+  }
+}
+
+// Tablet and below (< 1024px)
+@mixin media-tablet-and-below {
+  @media (max-width: #{map.get(br.$breakpoints, md) - 1px}) {
+	@content;
+  }
+}
+
+// Desktop and above (≥ 1024px)
+@mixin media-desktop-and-above {
+  @media (min-width: #{map.get(br.$breakpoints, md)}) {
+	@content;
+  }
+}
+
+// Desktop only (1024px – 1439px)
+@mixin media-desktop-only {
+  @media (min-width: #{map.get(br.$breakpoints, md)}) and (max-width: #{map.get(br.$breakpoints, lg) - 1}) {
+	@content;
+  }
+}
+
+// Desktop and below (< 1440px)
+@mixin media-desktop-and-below {
+  @media (max-width: #{map.get(br.$breakpoints, lg) - 1}) {
+	@content;
+  }
+}
+
+// Above desktop (≥ 1440px)
+@mixin media-above-desktop {
+  @media (min-width: #{map.get(br.$breakpoints, lg)}) {
+	@content;
+  }
+}
diff --git a/styles/_post.scss b/styles/_post.scss
@@ -0,0 +1,53 @@
+@use 'mediaqueries' as md;
+@use 'fonts' as font;
+
+.post {
+  h1 {
+	font-family: font.$font-heading;
+	font-size: clamp(3rem, 7vw, 4rem)
+  }
+}
+
+.post-content {
+  display: block;
+
+  p {
+	font-size: 1rem;
+	margin-bottom: 10px;
+
+	&:last-child {
+	  margin-bottom: 0;
+	}
+  }
+
+  .image {
+	width: 300px;
+	float: right;
+	padding: 0 0 20px 20px;
+  }
+
+}
+
+.sources {
+  background: #2e1709;
+  color: #E0C9A6;
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  list-style: none;
+  margin: 20px 0;
+  @include md.media-tablet-and-below {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+  }
+
+  li {
+	display: flex;
+	gap: 20px;
+	justify-content: center;
+	align-items: center;
+  }
+}
diff --git a/styles/_reset.scss b/styles/_reset.scss
@@ -12,6 +12,7 @@
 @media (prefers-reduced-motion: no-preference) {
   html {
 	interpolate-size: allow-keywords;
+
   }
 }
 
diff --git a/styles/main.scss b/styles/main.scss
@@ -1,9 +1,11 @@
 @use 'reset';
-@use 'variable';
+@use 'base';
 @use 'typography';
 @use 'hr';
 @use 'fonts';
 @use 'links';
 @use 'layout';
 @use 'header';
 @use 'cards';
+@use 'post';
+@use 'breakpoints';
