circle script work!

articles/__init__.py

@@ -64,6 +64,8 @@ def render_article(article_name):
 	# convince this blueprint to return the former. However, as sacrifices go, I don't think it's too bad, and 
 	# that should be the only case when this happens.
 
+        # It also can't find files with hyphens in their name, because they get replaced with underscores.
+
 	# If we didn't find any files, throw up a 404.
 
 	abort(404)

articles/circle_script.article.html

@@ -1,6 +1,6 @@
 <article>
 <style type="text/css">
-table {
+#consonant-grid, #vowel-grid {
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -12,6 +12,15 @@ table > img {
 	width: 50%;
 	height: 50%;
 }
+.example-glyph {
+	width: 20%;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+.vowel-example {
+	display: inline-block;
+}
 </style>
 <h3>An introduction to Circle Script (Version... 3?)</h3>
 <p>Circle script is a writing system that I made up. The fundamental gimmick of it is that words and sentences in it form circles.</p>
@@ -19,8 +28,8 @@ table > img {
 <p>It's largely decorative, has vague intentions at being phonetic, and I like using it in art! The other primary use case is writing cute notes to people I like.</p>
 <h4>Here's the overview of how to read circle script:</h5>
 <p>To read circle script, you start at whatever spot is marked with a little line segment outside the circle, parallel to it. If that's not present, you can usually start at the bottom. Walk around the circle widdershins (counterclockwise) and decode each shape and glyph you encounter, turning them into sounds.</p>
-<img src="/circle_script/circle_script_example_1.jpg" alt="A circle script glyph showing a single word-circle, with a small line outside the circle for a starting-point indicator." />
-<p>If you're reading a whole sentence, you walk around the circle widdershins (counterclockwise), and read each word as you come across it. For each word, you read it starting from the point where it touches the circle that contains it, so you kind of reorient as you go.</p>
+<img src="/circle_script/zagreus.svg" alt="A circle script glyph showing a single word-circle, with a small line outside the circle for a starting-point indicator." class="example-glyph"/>
+<p>If you're reading a whole sentence, you walk around the circle and read each word as you come across it. For each word, you read it starting from the point where it touches the circle that contains it, so you kind of reorient as you go.</p>
 <p>Also, you might have noticed that some of the shapes inside word-circles have lines connecting them. Those are decorative! A lot of the component parts of the circle script writing system have places for lines to come off. These can be connected as you like, but the... proper? I guess? fancy, perhaps? way to use them is to draw connecting lines between words which are conceptually linked. You might use those lines to connect an adjective with the noun it modifies, or the names of two people who care about each other. There's a lot of room for poetic embellishment in drawing lines between words!</p>
 <p>Of course, you can also just draw the lines out in a way that looks cool. :)</p>
 <h4>Okay, now the meat of circle script: How to read words!</h5>
@@ -82,14 +91,77 @@ table > img {
 	</tbody>
 </table>
 <p>If you're familiar with the <a href="https://en.wikipedia.org/wiki/International_Phonetic_Alphabet">international phonetic alphabet</a> this might look somewhat familiar! (Although I've taken some heavy liberties to make this fit into a grid and match with my American understanding of what sounds are similar) Each square in the grid shows the two consonants (one unvoiced, one unvoiced) indicated by that combination of diacritic (above) and shape (from the side). The unvoiced version (on the left, in a grid square) is indicated by the single-line version of the shape, seen on the left side of the grid. The voiced version uses the double-line version, seen on the right side of the grid. I've included the IPA transcription for the consonants, along with an example of that sound in my dialect, which is probably roughly <a href="https://en.wikipedia.org/wiki/General_American_English">General American English</a>.</p>
-<p>Vowels are a little more haphazard. Have you ever really thought about vowels? They're pretty messed up, especially in English. We were all taught the five vowels are a, e, i, o, u, and sometimes y. It turns out that while we have five and a half <em>letters</em> we call vowels, in English, they correspond to anywhere between twelve and fifteen different <em>sounds</em>. And those sounds aren't even necessarily the ones you're thinking of - a lot of the things we think of as individual vowels, like the /i/ in "r<strong>i</strong>ght", are actually diphthongs, composed of two vowels that we run together.</p>
+<p>Vowels are a little more haphazard. Have you ever really thought about vowels? They're pretty messed up, especially in English. We were taught the five vowels are a, e, i, o, u, and sometimes y. It turns out that while we have five and a half <em>letters</em> we call vowels, in English, they correspond to anywhere between twelve and fifteen different <em>sounds</em>. And those sounds aren't even necessarily the ones you're thinking of - a lot of the things we think of as individual vowels, like the /i/ in "r<strong>i</strong>ght", are actually diphthongs, composed of two vowels that we run together.</p>
 <p>Anyway, the vowels are vaguely organized according to whatever I thought made sense, into a handful of "sequences". In general, they're drawn by changing the shape of the overall circle defining a word - as you're drawing that circle, you make a detour to trace out the vowel shape. That overall shape indicates the sequence, and it's narrowed further down by lines or circles drawn on it. Is it lines? Is it circles? Who knows, I haven't decided yet!</p>
 <p>The examples I give are based on my accent, so if there's any confusion, consult a resource like <a href="https://ipachart.com">ipachart.com</a> for recordings of vowels. Several common diphthongs are available as vowel shapes.</p>
-<div id="vowels-container">
-	<div class="vowel-sequence"></div>
-	<div class="vowel-sequence"></div>
-	<div class="vowel-sequence"></div>
-	<div class="vowel-sequence"></div>
+<p>First are three groups of "primary" vowels, which are mostly monophthongs.</p>
+<div id="vowel-grid">
+	<div class="vowel-sequence">
+		<div class="vowel-example">
+			<img src="vowel-beat.svg" />
+			[i], beat
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-bit.svg" />
+			[ɪ], bit
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-but.svg" />
+			[ʌ, ə], but or schwa (unstressed)
+		</div>
+	</div>
+	<div class="vowel-sequence">
+		<div class="vowel-example">
+			<img src="vowel-boot.svg" />
+			[u], boot
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-book.svg" />
+			[ʊ], book
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-box.svg" />
+			[ɑ, a], box or bah
+		</div>
+	</div>
+	<div class="vowel-sequence">
+		<div class="vowel-example">
+			<img src="vowel-bait.svg" />
+			[ɛi, e], bait
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-bet.svg" />
+			[ɛ], bet
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-bat.svg" />
+			[æ], bat
+		</div>
+	</div>
+	<div class="vowel-sequence">
+		<div class="vowel-example">
+			<img src="vowel-boy.svg" />
+			[ɔi, ɔɪ], boy
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-by.svg" />
+			[ai, aɪ], by
+		</div>
+	</div>
+	<div class="vowel-sequence">
+		<div class="vowel-example">
+			<img src="vowel-boat.svg" />
+			[o, ɔu], boat
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-cow.svg" />
+			[au], cow
+		</div>
+		<div class="vowel-example">
+			<img src="vowel-bawk.svg" />
+			[ɔ], bawk
+		</div>
+	</div>
 </div>
 
 

articles/circle_script/vowel-example.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 25.4 75.438"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="vowel-example.svg"
+   inkscape:version="1.0.1 (c497b03c, 2020-09-10)">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient837"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop835" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.2355135"
+     inkscape:cx="21.529103"
+     inkscape:cy="49.565338"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1252"
+     inkscape:window-height="755"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     units="px"
+     width="96px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m -24.118444,47.729487 h 12.307604 c 0,0 7.3545428,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,17.710942 23.714653,17.710942 l 12.907974,0"
+       id="path1423"
+       sodipodi:nodetypes="cczcc" />
+  </g>
+</svg>

articles/circle_script/zagreus.svg

@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="110mm"
+   height="110mm"
+   viewBox="0 0 110 110"
+   version="1.1"
+   id="svg847"
+   inkscape:version="1.0.1 (c497b03c, 2020-09-10)"
+   sodipodi:docname="zagreus.svg">
+  <defs
+     id="defs841" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.90672013"
+     inkscape:cx="173.55193"
+     inkscape:cy="260.2638"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1252"
+     inkscape:window-height="755"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata844">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 54.173205,103.71444 C 71.051535,103.5714 89.356999,90.235548 92.793112,82.861344 100.77359,65.73453 85.709065,55.212414 79.987598,63.222468 74.266129,71.232525 85.34904,84.885809 100.50217,69.071838 106.64524,62.660865 107.6037,40.095717 95.302541,22.931315 88.100612,12.634519 78.034035,5.9142569 66.669826,4.3422549 c 0,0 -6.465508,9.5006771 -16.764149,12.6474841 -10.298644,3.146809 -22.794529,-3.095427 -22.794529,-3.095427 0,0 -0.180145,-0.117346 -4.185172,3.029461 -4.005027,3.146806 -3.790403,3.927502 -3.790403,3.927502 0,0 6.172724,12.022497 3.025917,21.176845 -3.146807,9.154347 -17.5468358,16.76135 -17.5468358,16.76135 0,0 0.3381897,16.831463 9.1569738,26.21977 13.044996,13.887448 23.523247,18.84824 40.401577,18.7052 z"
+       id="path1540"
+       sodipodi:nodetypes="zsssccscscscsz" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 17.243501,63.514742 4.291101,7.313056 -7.437908,4.415952"
+       id="path1542"
+       sodipodi:nodetypes="ccc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.66504,89.014268 15.161889,0.28607 0.286073,8.29613"
+       id="path1544" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 45.79302,91.606188 9.164283,-0.2071 0.207103,5.48821"
+       id="path1546" />
+    <g
+       id="g1603"
+       transform="translate(3.3042585,-7.6296978)">
+      <ellipse
+         style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path1548"
+         cx="48.254879"
+         cy="31.065374"
+         rx="4.4527035"
+         ry="4.4123087" />
+      <ellipse
+         style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path1548-0"
+         cx="48.254879"
+         cy="30.961821"
+         rx="2.5887811"
+         ry="2.5483863" />
+    </g>
+    <ellipse
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1548-4"
+       cx="15.090074"
+       cy="40.762524"
+       rx="4.4527035"
+       ry="4.4123087" />
+    <ellipse
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1548-4-0"
+       cx="79.581009"
+       cy="62.824993"
+       rx="4.4527035"
+       ry="4.4123087" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 83.904577,49.982807 8.64017,-0.292889 c 0,0 -5.795394,-0.257024 -6.042971,-3.912668 -0.18149,-2.679814 1.265679,-3.96238 2.575713,-4.396806 1.613633,-0.535103 3.378404,0.908038 3.378404,0.908038 l 0.270344,-10.305711"
+       id="path1595"
+       sodipodi:nodetypes="ccsscc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 88.297883,23.330076 81.3556,25.328082 c 0,0 3.665362,-4.761921 0.938096,-7.269974 -2.805499,-2.579998 -7.185908,1.792125 -7.185908,1.792125 L 75.557293,13.6648"
+       id="path1597"
+       sodipodi:nodetypes="ccscc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 92.33285,47.623439 c 0,0 -3.927477,-0.226937 -3.666978,-2.836369 0.251468,-2.518981 2.511374,-1.708133 3.983287,-0.160176"
+       id="path1599"
+       sodipodi:nodetypes="csc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 19.565397,66.947242 c 0,0 25.513164,-15.139678 36.867924,-22.569337 11.35476,-7.429658 25.653346,-26.49444 25.653346,-26.49444"
+       id="path1605" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 92.600333,35.826789 c 0,0 -13.036947,0 -21.027332,7.710022 -7.990387,7.710024 -12.756583,5.887654 -15.84059,1.401823"
+       id="path1607" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 52.508219,89.096038 c 0,0 -0.05985,-19.436531 2.663461,-28.036447 2.663463,-8.410934 8.270752,-6.16802 12.336036,-8.831482 4.065285,-2.663463 13.317312,-13.737857 24.812254,-13.457492"
+       id="path1609"
+       sodipodi:nodetypes="cssc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.295644,105.50336 c 5.341827,1.67647 16.446476,1.62886 22.408102,-0.0507"
+       id="path1611"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>

articles/farm_display.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html>
+<head>
+	<style type="text/css">
+	.container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		font-size: xx-large;
+		width: 100%;
+		height: 500px;
+		background: lightblue;
+		top: 0px;
+		bottom: 0px;
+	}
+	#time, #current-temp, #lows, #highs {
+		background: red;
+		position: absolute;
+	}
+	#time {
+		left: 40px;
+		top: 40px;
+	}
+	#current-temp {
+		right: 40px;
+		top: 40px;
+		background: red;
+	}
+	#lows {
+		bottom: 40px;
+		left: 40px;
+	}
+	#highs {
+		bottom: 40px;
+		right: 40px;
+	}
+
+	#top-alert {
+		background: blue;
+	}
+	</style>
+</head>
+<body>
+	<div class="container">
+		<div id="time">
+			10:04 AM
+		</div>
+		<div id="current-temp">
+			big 50F
+		</div>
+		<div id="lows">
+			low of 20F
+		</div>
+		<div id="highs">
+			high of 900F
+		</div>
+		<div id="top-alert">
+			Happy spring!
+		</div>
+		<div id="second-alert">
+			Today is a good day to start planting!
+		</div>
+		<div>
+			There's a frost coming up, probably a long one. It might a good time to do final harvest!
+		</div>
+		<div>
+			Monday is probably going to be the last frost. Get ready to plant!
+		</div>
+		<div>
+			Very high chance of rain today. You won't need to water.
+		</div>
+		<div>
+			Tonight it will go down to 20F. That's below freezing. 
+		</div>
+	</div>
+</body>
+</html>