working on getting ori.md files working

src/data/pages/about.ori.md

@@ -0,0 +1,5 @@
+---
+title: About
+---
+arstarstarstarst
+why isn't this working

src/data/pages/now.ori.md

@@ -0,0 +1,4 @@
+---
+title: Now
+---
+This is where the now page will be

src/data/pages/subscribe.ori.md

@@ -0,0 +1,4 @@
+---
+title: Subscribe
+---
+It's too early

src/data/pages/support.ori.md

@@ -0,0 +1,5 @@
+---
+title: Support
+---
+pls support me, I need sustainance
+### be here now

src/data/views/all-religions-are-wrong.md

@@ -2,7 +2,7 @@
 title: All religions are wrong
 slug: all-religions-are-wrong
 ---
-# Why I hold this view
+## Why I hold this view
 insert reasons here for why I believe all religions are wrong
-# Why it matters
+## Why it matters
 insert reasons here for why I think it matters

src/data/views/there-is-no-god.md

@@ -2,7 +2,7 @@
 title: There is no god
 slug: there-is-no-god
 ---
-# Why I hold this view
+## Why I hold this view
 insert reasons here for why I believe there is no god
-# Why it matters
+## Why it matters
 insert reasons here for why I think it matters

src/data/views/we-do-not-need-hierarchies.md

@@ -3,7 +3,7 @@ title: We do not need hierarchies
 slug: we-do-not-need-hierarchies
 
 ---
-# Why I hold this view
+## Why I hold this view
 insert reasons here for why I believe hierarchy is bad
-# Why it matters
+## Why it matters
 insert reasons here for why I think it matters

src/data/views/you-should-be-vegan.md

@@ -2,7 +2,7 @@
 title: You should be vegan
 slug: you-should-be-vegan
 ---
-# Why I hold this view
+## Why I hold this view
 insert reasons here for why people should be vegan
-# Why it matters
+## Why it matters
 insert reasons for why this matters

src/site.ori

@@ -4,4 +4,6 @@
     index.html = templates/default.ori.html("Welcome to the index page!")
     views = (views.ori/)
     favicon.ico
+    ...map(data/pages, (page)=>templates/default.ori.html(templates/partials/article.ori.html/(page/())))
+
 }

src/styles/main.css

@@ -1,28 +1,39 @@
 :root {
   /* COLORS */
-  --rich-black: #030303; /*for body background colour*/
+  --rich-black: #030303;
-  --eerie-black: #171717; /* for article background colour*/
+  /*for body background colour*/
-  --charleston-green: #2c2c2c; /*for article background rollover*/
+  --eerie-black: #171717;
-  --dark-medium-gray: #aaa; /* for main body text throughout website*/
+  /* for article background colour*/
-  --platinum: #e9e9e9; /* for titles*/
+  --charleston-green: #2c2c2c;
-  --middle-green: #52aa5e; /* for the main heading and links*/
+  /*for article background rollover*/
-  --turquoise-green: #a0d0a7; /* for links in their hover state*/
+  --dark-medium-gray: #aaa;
-  --amaranth: #ef2d56; /* just for the support heart in its hoverstate */
+  /* for main body text throughout website*/
+  --platinum: #e9e9e9;
+  /* for titles*/
+  --middle-green: #52aa5e;
+  /* for the main heading and links*/
+  --turquoise-green: #a0d0a7;
+  /* for links in their hover state*/
+  --amaranth: #ef2d56;
+  /* just for the support heart in its hoverstate */
 
   /* THEME */
-    /* COLOURS */
+  /* COLOURS */
   --page-title-color: var(--middle-green);
   --link-color: var(--middle-green);
-  --link-hover-color: var(--turquise-green)
+  --link-hover-color: var(--turquise-green) --body-background-color: var(--rich-black);
-  --body-background-color: var(--rich-black);
   --article-background-color: var(--eerie-black);
   --text-color: var(--dark-medium-gray);
   --nav-link-color: var(--text-color);
   --nav-link-color-hover: var(--platinum);
-    /* FONT SIZES */
+  /* FONT SIZES */
   --font-size: 1.7rem;
   --page-title-font-size: 3.6rem;
-  --card-background-hover: var(--charleston-green)
+  --card-background-hover: var(--charleston-green);
+  /* PADDING */
+  --article-padding: 3rem;
+  /* OTHER */
+  --border-radius: 1rem;
 }
 
 
@@ -32,15 +43,15 @@
 
 
 html {
-    font-size: 10px;
+  font-size: 10px;
-    height: 100%;
+  height: 100%;
 }
 
 * {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
 }
 
 body {
@@ -82,15 +93,26 @@ body {
 }
 
 .page-content {
-    padding: 2rem;
+  padding: 2rem;
-    flex-grow:1;
+  flex-grow: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+
+}
+
+.page-content h2 {
+  font-size: 2.4rem;
+  font-weight: 300;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
 }
 
 .site-footer {
   flex-shrink: 0;
-  flex-grow:0;
+  flex-grow: 0;
   width: 100%;
-  text-align:center;
+  text-align: center;
 }
 
 .site-navigation ul {
@@ -99,41 +121,68 @@ body {
   list-style: none;
   font-size: 1.4rem;
 }
-.site-navigation a{
+
+.site-navigation a {
   text-decoration: none;
   color: var(--nav-link-color);
 }
-.site-navigation a:hover{
+
+.site-navigation a:hover {
   text-decoration: none;
   color: var(--nav-link-color-hover);
 }
 
 .main {
-  width:100%;
+  width: 100%;
-  text-align:center;
+  text-align: center;
 }
 
 .view-cards {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
-  gap:3rem;
+  gap: 3rem;
 }
 
 .view-card {
   background: var(--article-background-color);
-  padding: 3rem; /*replace this with a variable */
+  padding: 3rem;
-  border-radius: 1rem;
+  /*replace this with a variable */
+  border-radius: var(--border-radius);
   text-decoration: none;
   color: var(--text-color);
   font-size: 3rem;
   font-weight: 300;
   text-align: center;
-  width: 700px;
+  width: 70rem;
 }
 
 .view-card:hover {
   color: var(--link-color-hover);
-  background-color: var(--card-background-hover)
+  background-color: var(--card-background-hover);
 }
 
+
+.article {
+  background-color: var(--article-background-color);
+  padding: var(--article-padding);
+  border-radius: var(--border-radius);
+  width: 90rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 3rem;
+}
+
+.article-header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.article-title {
+  font-weight: 300;
+  font-size: 2.4rem;
+  color: var(--page-title-color);
+}

src/templates/partials/article.ori.html

@@ -0,0 +1,9 @@
+<article class="article">
+  <header class="article-header">
+    <h1 class="article-title">${ _/title }</h1>
+    <!-- <div class="article-last-updated-date">${ _/slug}</div> -->
+  </header>
+  <section class="article-content">
+    ${ mdHtml(_/@text) }
+  </section>
+</article>

src/templates/partials/navigation.ori.html

@@ -1,6 +1,6 @@
 <nav class="site-navigation">
   <ul>
-    <li><a href="">About</a></li>
+    <li><a href="/about.ori.md">About</a></li>
     <li><a href="">Now</a></li>
     <li><a href="/views">Views</a></li>
     <li><a href="">Subscribe</a></li>

src/views.ori

@@ -1,4 +1,4 @@
 {
  index.html = templates/default.ori.html(templates/partials/view-cards.ori.html(data/views)) 
- ...map(data/views, (view)=>templates/default.ori.html(mdHtml(view)))
+ ...map(data/views, (view)=>templates/default.ori.html(templates/partials/article.ori.html(view)))
 }