+++

stack--2022/9-rpg/font--comics/src/test/index.css → stack--2022/9-rpg/font--comics/src/_test/index.css

@@ -1,6 +1,6 @@
 
 /*********************/
-
+/*
 @font-face {
 	font-family: 'TEST';
 	src: url('Ames-Regular.otf');

stack--2022/9-rpg/font--comics/src/test/index.stories.tsx → stack--2022/9-rpg/font--comics/src/_test/index.stories.tsx

@@ -3,26 +3,27 @@ import { All } from '../__shared/use-cases.stories'
 
 import './index.css'
 
+const KLASS = 'omr⋄font⁚TEST'
 
 export function FontDemoⵧraw() {
 	return `
-<div class="omr⋄font⁚TEST">
+<div class="${KLASS}--raw">
 ${DemoꓽAll()}
 </div>
 	`
 }
 
 export function Calibration() {
 	return `
-<div class="omr⋄font⁚TEST">
+<div class="${KLASS}">
 ${_Norm()}
 </div>
 	`
 }
 
 export function FontDemoⵧCalibrated() {
 	return `
-<div class="omr⋄font⁚TEST">
+<div class="${KLASS}">
 ${DemoꓽAll()}
 </div>
 	`
@@ -31,7 +32,7 @@ ${DemoꓽAll()}
 
 export function UseCases() {
 	return `
-<div class="omr⋄font⁚TEST">
+<div class="${KLASS}">
 ${All()}
 </div>
 	`

stack--2022/9-rpg/font--comics/src/ames--free/index.css

@@ -0,0 +1,35 @@
+
+
+/*********************/
+
+@font-face {
+	font-family: 'Ames--Free--Raw';
+	src: url('regular.otf');
+}
+
+.omr⋄font⁚Ames--Free--raw {
+	font-family: 'Ames--Free--Raw', sans-serif;
+}
+
+/*********************/
+
+@font-face {
+	font-family: 'Ames--Free';
+	src: url('regular.otf');
+	size-adjust: 75%;
+	ascent-override: 87%;
+	descent-override: 20%;
+	line-gap-override: 0%;
+}
+
+.omr⋄font⁚Ames--Free {
+	font-family: 'Ames--Free', sans-serif;
+	--o⋄font-family--main: 'Ames--Free', sans-serif;
+	line-height: 1; /* comic fonts are to be used in small ballons + don't have ascend/descend, hence look better lh1, cf. Blambot tip #7 */
+	/*font-stretch: 150%;*/
+	/*letter-spacing: .02em;*/
+	/*font-synthesis: style small-caps weight position;*/
+	/* font-variant-numeric */
+}
+
+/*********************/

stack--2022/9-rpg/font--comics/src/ames--free/index.stories.tsx

@@ -0,0 +1,39 @@
+import { Normalization as _Norm, DemoꓽAll } from '@offirmo-private/storypad/src/__shared/stories/css/typography/index.stories.ts'
+import { All } from '../__shared/use-cases.stories'
+
+import './index.css'
+
+const KLASS = 'omr⋄font⁚Ames--free'
+
+export function FontDemoⵧraw() {
+	return `
+<div class="${KLASS}--raw">
+${DemoꓽAll()}
+</div>
+	`
+}
+
+export function Calibration() {
+	return `
+<div class="${KLASS}">
+${_Norm()}
+</div>
+	`
+}
+
+export function FontDemoⵧCalibrated() {
+	return `
+<div class="${KLASS}">
+${DemoꓽAll()}
+</div>
+	`
+}
+
+
+export function UseCases() {
+	return `
+<div class="${KLASS}">
+${All()}
+</div>
+	`
+}

stack--2022/9-rpg/font--comics/src/ames--free/license.md

@@ -0,0 +1,11 @@
+https://purastik.net/ames/e.html
+
+LICENSE AGREEMENT
+
+Ames © Päivi Toikka, All Rights Reserved. This font file may not be redistributed without my permission. Ames is a freeware font for independent comic creation and non-profit use only. Basically, this means:
+Anyone may use this font for non-profit projects.
+You may use this font for profit on comics of your own creation.
+You may not use this font for profit on comics that have not been created by you.
+Any other commercial use not listed above is not allowed.
+For other commercial use, please check out Ames Pro.
+If you have questions, please contact me at pjtoikka (at) gmail.com.

stack--2022/9-rpg/font--comics/src/deevad-hand/index.css

@@ -45,7 +45,8 @@
 	font-family: 'DeevadHand', sans-serif;
 	--o⋄font-family--main: 'DeevadHand', sans-serif;
 	line-height: 1; /* comic fonts are to be used in small ballons + don't have ascend/descend, hence look better lh1, cf. Blambot tip #7 */
-	font-stretch: 150%;
+	/*font-stretch: 150%;*/
+	letter-spacing: .02em;
 	/*font-synthesis: style small-caps weight position;*/
 	/* font-variant-numeric */
 }

stack--2022/9-rpg/font--comics/src/deevad-hand/index.stories.tsx

@@ -3,26 +3,27 @@ import { All } from '../__shared/use-cases.stories'
 
 import './index.css'
 
+const KLASS = 'omr⋄font⁚DeevadHand'
 
 export function FontDemoⵧraw() {
 	return `
-<div class="omr⋄font⁚DeevadHand--raw">
+<div class="${KLASS}--raw">
 ${DemoꓽAll()}
 </div>
 	`
 }
 
 export function Calibration() {
 	return `
-<div class="omr⋄font⁚DeevadHand">
+<div class="${KLASS}">
 ${_Norm()}
 </div>
 	`
 }
 
 export function FontDemoⵧCalibrated() {
 	return `
-<div class="omr⋄font⁚DeevadHand">
+<div class="${KLASS}">
 ${DemoꓽAll()}
 </div>
 	`
@@ -31,7 +32,7 @@ ${DemoꓽAll()}
 
 export function UseCases() {
 	return `
-<div class="omr⋄font⁚DeevadHand">
+<div class="${KLASS}">
 ${All()}
 </div>
 	`