prep to merge with main

Author: joeshoop

web/_includes/base.njk

@@ -12,8 +12,8 @@
 		{{ content | safe }}
 	</main>
 	<footer>
-			<form class="theme-control">
-
+		<div class="theme-control">
+			<form>
 				<label for="hue-slider">hue </label>
 				<input
 					type="range"
@@ -31,8 +31,8 @@
 					value="35"
 					min="10"
 					max="200" />
-					
 			</form>
+		</div>
 		<p>{{ metadata.tagline }}</p>
 		<p>{{ metadata.description }}</p>
 	</footer>

web/_src/discipline.njk

@@ -12,8 +12,8 @@ permalink: /discipline/{{ discipline.slug }}/index.html
 
 <article class="discipline flow" >
   <section>
-    <p class="--text-sm --text-muted">Discipline</p>
     {% basicHero discipline.heroImage %}
+    <p class="--text-sm --text-muted">Discipline</p>
     <h1>{{ discipline.title }}</h1>
     <p>{{ discipline.metaDescription }}</p>
     {{ discipline.overview | safe }}
@@ -22,7 +22,7 @@ permalink: /discipline/{{ discipline.slug }}/index.html
     <h2 class="--mb-md">{{ discipline.title | safe }} Methods</h2>
     <ul>
       {% for method in discipline.methods %}
-        <li>
+        <li class="method">
           <h3><a href="/method/{{ method.slug }}/">{{ method.title }}</a></h3>
           <p>{{ method.metaDescription }}</p>
         </li>

web/_src/index.njk

@@ -10,7 +10,7 @@ layout: base.njk
 <h2>Disciplines</h2>
 <ul>
   {% for discipline in disciplines %}
-    <li class="discipline">
+    <li class="discipline --pb-sm">
       <a href="discipline/{{ discipline.slug }}" tabindex="0">{{ discipline.title }}</a>
     </li>
   {% endfor %}

web/_src/method.njk

@@ -6,16 +6,23 @@ pagination:
   size: 1
 permalink: /method/{{ method.slug }}/index.html
 ---
-<div class="--py-lg">
+<div class="nav">
   <p><a href="/">↖ back to index</a></p> {# temporary #}
 </div>
 
 <article class="flow">
-  <section class="hero"> 
+
+  <section class="hero">
+    <div class="hero-group">
+      <p class="label">Method</p>
+      <h1>{{ method.title }}</h1>
+    </div>
+
+    <p class="hero-description">{{ method.metaDescription | safe }}</p>
     {% basicHero method.heroImage %}
-    <h1>{{ method.title }}</h1>
-    <p>{{ method.overview | safe }}</p>
+    <p class="--pt-md">{{ method.overview | safe }}</p>
   </section>
+
   <section class="preparation boxed">  
     <h2>Preparation</h2>
     <ul>    
@@ -61,7 +68,7 @@ permalink: /method/{{ method.slug }}/index.html
     <h2>Next Steps</h2>
     <ul>    
       {% for method in method.continueMethods.slice(0,6) %}
-        <li>
+        <li class="method --pb-sm">
           <a href="/method/{{ method.slug }}/">{{ method.title }}</a>
           <p>{{ method.metaDescription }}</p>
         </li>

web/_src/r/css/_theme.css

@@ -174,16 +174,11 @@ a:hover {
 }
 
 h1 {
-	font-family: var(--font-display);
-	font-size: var(--font-xl);
+	font-family: var(--font-sans);
+	font-size: var(--font-2xl);
 	color: var(--text-strong);
-	font-weight: 500;
-	margin-top: var(--spacing-xl);
-	margin-bottom: var(--spacing-xl);
-	text-align: center;
+	font-weight: 700;
 	font-variation-settings: "wght" 700;
-	letter-spacing: clamp(0em, 1vw + 1rem, -0.3em);
-	text-transform: uppercase;
 }
 
 h2 {
@@ -193,6 +188,7 @@ h2 {
 	font-weight: 700;
 	letter-spacing: clamp(0em, 1vw + 1rem, -0.02em);
 	margin-bottom: var(--spacing-sm);
+	border-top:1px solid var(--border-muted)
 }
 
 h3 {

web/_src/r/css/main.css

@@ -45,59 +45,47 @@ article>*+*
 .flow>*+* {
 	margin-top: var(--spacing-lg);
 }
-
-.discipline a {
-	background: var(--bg-muted);
-	display: flex;
-	width:auto;
-	padding:var(--spacing-sm);
-	text-decoration: none;
-}
-
-.discipline a:hover {
-	background: var(--bg-strong);
-}
 
 input {
 	accent-color: oklch(from var(--color-base) 50% calc(var(--chroma) + 0.05) var(--hue));
 }
 
 .theme-control {
 	position: fixed;
-	top: 80px;
+	bottom: 0;
 	right: 0;
 }
 
-/* TODO need to make these change with light dark mode */
-
-section.boxed {
-	padding: var(--spacing-sm) var(--spacing-md);
-}
-
-section.preparation {
-	background: var(--color-prep);
-	color: oklch(from var(--color-base) 5% c calc(var(--hue) - 90));
-}
-
-section.steps {
-	background: var(--color-steps);
-}
-
-section.outcomes {
-	background: var(--color-outcomes);
-}
-
-section.resources {
-	background: var(--bg-strong);
-}
-
-section.next-steps {
-	background: var(--bg-muted);
-}
-
-section.references {
-	background: var(--bg-muted);
-}
+ol {
+	list-style: none;
+	counter-reset: steps-counter;
+	margin-top:var(--spacing-md);
+  }
+  
+  ol li {
+	counter-increment: steps-counter;
+	/* display: flex; */
+	flex-direction:row;
+	gap:var(--spacing-sm);
+	padding-left:var(--spacing-lg);
+	position:relative;
+	padding-bottom:var(--spacing-xs);
+  }
+  
+  ol li::before {
+	content: counter(steps-counter);
+	border:0.1em solid var(--text-default);
+	border-radius:100%;
+	position:absolute;
+	top:0;
+	left:0;
+	display:flex;
+	justify-content: center;
+	align-items: center;
+	flex-basis:auto;
+	width:var(--spacing-md);
+	height:var(--spacing-md);
+  }
 
 /* Buttons */
 /* The colors for these need to be abstracted a bit to be more adaptable between dark and light mode */
@@ -132,11 +120,9 @@ section.references {
 	padding: var(--spacing-sm) var(--spacing-lg);
 }
 
-/* --primary colors won't change between dark and light mode */
-/*  */
 .button.--strong {
-	background: var(--primary-500);
-	color: var(--primary-50);
+	background: var(--text-strong);
+	color: var(--bg-strong);
 }
 
 .button.--muted {
@@ -158,27 +144,13 @@ section.references {
 	filter: none;
 }
 
-.card {
-	cursor: pointer;
-	display: flex;
-	background: var(--bg-strong);
-	box-shadow: var(--shadow-md);
-	border-radius: var(--spacing-xs);
-}
-
-.card:hover {
-	filter: contrast(110%);
-	filter: brightness(110%);
-}
-
 .container {
 	position: relative;
 	width: 100%;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-
 /* Network */
 
 #network-graph {
@@ -226,4 +198,33 @@ section.references {
     border-radius: 4px;
     pointer-events: none;
     display: none;
+}
+
+.label {
+	font-size: var(--font-sm);
+	color:var(--text-muted);
+	text-transform:uppercase;
+	letter-spacing:0.05em;
+	font-weight:600;
+}
+
+.hero-group {
+	border-top:2px solid var(--border-default);
+	border-bottom:1px solid var(--border-muted);
+	padding:1rem 0 1rem 0;
+	text-align:center;
+}
+
+.hero-description {
+	color:var(--text-muted);
+	font-size: var(--font-lg);
+	margin:1rem 0;
+}
+
+.nav  {
+	padding:0.5rem 0;
+}
+
+.nav a:not(:hover) {
+	text-decoration:none;
 }