Skip to main content

Flesh out the README; expand slightly

ID
d2dc240
date
2024-07-15 08:35:50+00:00
author
Alex Chan <alex@alexwlchan.net>
parent
cef3dbc
message
Flesh out the README; expand slightly
changed files
4 files, 37 additions, 4 deletions

Changed files

README.md (215) → README.md (1659)

diff --git a/README.md b/README.md
index 91c922b..61fc56b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # web-page-template
 
-This is the one-column layout I use as a starting point when I design new web pages.
+This is a template I use as a starting point when I create new HTML pages.
 
 <table>
   <tr>
@@ -8,3 +8,31 @@ This is the one-column layout I use as a starting point when I design new web pa
     <td><img src="screenshot.png"></td>
   </tr>
 </table>
+
+Features:
+
+*   My preferred one-column layout for content, which puts a header/footer at the top and puts the content in the middle.
+*   The standard `<meta>` tags I want on every HTML page.
+*   An example of how to use `<script>` and `<link>` tags to load external files (because I always forget the exact syntax)
+
+## Usage
+
+Copy the contents of `TEMPLATE.html` into a new HTML file.
+
+I have a text expansion snippet in Alfred that inserts this template: when I type `!html`, I get this HTML template.
+
+## Motivation
+
+This layout isn't perfect, but it's pretty good and covers a wide variety of use cases.
+I prefer it to the default browser styles you get in a completely new HTML file.
+
+I used to copy the HTML and CSS from project-to-project, but it was difficult to know what was part of my basic layout, and what was project-specific.
+I also had no canonical definition of this basic layout, and I didn't apply fixes and improvements consistently.
+
+Creating a single template gives me something a canonical version that's easier to copy/paste.
+It's also allowed me to look at this template more carefully, and make sure I'm following best practices.
+
+## Useful reading
+
+*   [The Surprising Truth About Pixels and Accessibility](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/), by Josh Comeau (2023).
+    This helped me understand the difference between pixels and ems/rems for measurements, and when to use which.

index.html (1586) → TEMPLATE.html (1787)

diff --git a/index.html b/TEMPLATE.html
similarity index 92%
rename from index.html
rename to TEMPLATE.html
index 76f1ef5..9de0da4 100644
--- a/index.html
+++ b/TEMPLATE.html
@@ -12,8 +12,8 @@
 
   <style>
     :root {
-      --header-background-color: LightGreen;
-      --footer-background-color: PowderBlue;
+      --header-background-color: LightSkyBlue;
+      --footer-background-color: LightSkyBlue;
 
       --max-width: 34rem;
       --padding:   1em;
@@ -56,6 +56,11 @@
 
   <main>
     <p>
+      <!--
+        These repeated alphabets are here to help me judge line lengths
+        once I've selected fonts -- I typically aim for between 2½ to 3½
+        alphabets on a line.
+      -->
       abcdefghijklm nopqrstuvwxyz
       abcdefghijklm nopqrstuvwxyz
       abcdefghijklm nopqrstuvwxyz

create_alfred_snippet.sh (1398) → create_alfred_snippet.sh (1401)

diff --git a/create_alfred_snippet.sh b/create_alfred_snippet.sh
index dd14ace..a10d132 100755
--- a/create_alfred_snippet.sh
+++ b/create_alfred_snippet.sh
@@ -27,7 +27,7 @@ pushd $(mktemp -d)
 EOF
 
   # Get the HTML template as a JSON-escaped string
-  snippet=$(jq -R -s '.' < "$ROOT/index.html")
+  snippet=$(jq -R -s '.' < "$ROOT/TEMPLATE.html")
 
   # This is an arbitrary choice of ID; it just has to be used consistently
   snippet_id="$(uuidgen)"

screenshot.png (45216) → screenshot.png (50189)

diff --git a/screenshot.png b/screenshot.png
index 6077e13..502f34e 100644
Binary files a/screenshot.png and b/screenshot.png differ