Add basics for home page

- Banner - Map
Theming and Logo
2024-03-12 09:23:23 +00:00 · 2024-03-11 10:55:43 +00:00 · 2024-03-05 21:13:57 +00:00 · 2024-03-05 09:42:02 +00:00
12 changed files with 22 additions and 137 deletions
@@ -1,5 +1,3 @@
 /build/
 /.direnv/
 .DS_Store
 /latex.out/
 built.tar.gz
@@ -1,15 +1,13 @@
 <!doctype html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}{% endblock title %}</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 	<link href="/static/theme.css" rel="stylesheet">
 </head>
 <body>
 	<nav class="navbar navbar-expand-md bg-dark navbar-dark">
-		<a class="navbar-brand ms-2" href="/home.html">
+		<a class="navbar-brand ms-2" href="/">
 			<img src="/static/logo.png" alt="Langley Logo" height="34">
 			Langley
 		</a>
@@ -18,7 +16,7 @@
 		</button>
 		<div class="collapse navbar-collapse" id="nav-collapse">
 			<ul class="navbar-nav">
-				<li class="nav-item ms-2"><a class="nav-link {% block home_active %}{% endblock %}" href="/home.html">Home</a></li>
+				<li class="nav-item ms-2"><a class="nav-link {% block home_active %}{% endblock %}" href="/">Home</a></li>
 				<li class="nav-item ms-2"><a class="nav-link {% block history_active %}{% endblock %}" href="/history.html">History</a></li>
 				<li class="nav-item ms-2"><a class="nav-link {% block visit_active %}{% endblock %}" href="/visit.html">Visit</a></li>
 			</ul>
@@ -18,9 +18,6 @@
          simple-http-server
          watchexec
          (python3.withPackages (ps: with ps; [jinja2]))
          latexrun
          texlive.combined.scheme-full
          ansifilter
        ];
      };
    });
@@ -19,34 +19,3 @@ serve: build
 watch:
 	watchexec --restart -- just serve
 log:
 	#!/usr/bin/env bash
 	set -exuo pipefail
 	{
 		cat <<EOP
 	\documentclass{article}
 	\usepackage[utf8]{inputenc}
 	\usepackage{color}
 	\usepackage[margin=0.25in]{geometry}
 	\usepackage{hyperref}
 	\newcommand{\ws}[1]{\textcolor[rgb]{0,0,0}{#1}}
 	\DeclareUnicodeCharacter{22EE}{│}
 	\usepackage{pmboxdraw}
 	\begin{document}
 	\ttfamily
 	\section*{}
 	EOP
 		git log -p --format=tformat:'(((RULE)))%h: %s%nBy %aN <%aE> at %ai%n%b%n' -n 5 \
 		| delta --light -w 110 --plus-style '"#339933" bold' --plus-emph-style '"#339933"' --minus-style 'red bold' --minus-emph-style 'red'  --zero-style 'gray dim' --no-gitconfig --line-numbers --syntax-theme none \
 		| ansifilter --latex -f \
 		| sed -e '0,/(((RULE)))/s///' -e 's/(((RULE)))/\\hrule\n\\section*{}/g'
 		echo '\hrule'
 		echo '\end{document}'
 	} > build/commits.tex 
 	latexrun -o build/commits.pdf build/commits.tex
 	rm build/commits.tex
 codio: build log
 	tar c build/ | gzip > built.tar.gz
@@ -2,19 +2,4 @@
 {% block title %}History{% endblock %}
 {% block history_active %}active{% endblock %}
 {% block main %}
 <div class="container mt-3">
  <p>
    Langley was founded by Jacob Anthes, a German who moved to and bought land
    in the area in 1881. In 1890, he gave his land to the newly-formed Langley
    Land and Improvement Company, which officially founded the town of Langley
    in 1891. A dock was soon built, along with a general store and post office
    run by Jacob Anthes. In 1898, the school district was founded.
  </p>
  <p>
    Langley was incorporated as a self-governing town in 1913, and a fire station
    and a jail were soon constructed.
  </p>
  Information from <a href="https://www.langleywa.org/visitors/history_of_langley.php">Langley's official history page</a>.
  See there for more information.
 </div>
 {% endblock %}
@@ -1,24 +0,0 @@
 {% extends "base.html" %}
 {% block title %}Home{% endblock %}
 {% block home_active %}active{% endblock %}
 {% block main %}
 <div class="container-fluid bg-dark text-light text-center">
  <hr class="my-0">
  <div class="pt-4 pb-2">
    <h1 class="display-1">Langley</h1>
    <span class="fst-italic">The Village by The Sea</span>
    <p>Founded in 1891</p>
  </div>
 </div>
 <main class="pt-2 container">
  <p>Langley is a small town on Whidbey Island in Washington, USA.</p>
  <p>As of the 2020 Census, the population was 1147.</p>
 </main>
 <div class="container-md mt-2 text-end">
  <iframe
    src="https://www.openstreetmap.org/export/embed.html?bbox=-127.02392578125001%2C46.32796494040748%2C-117.79541015625001%2C49.688954878870305&amp;layer=mapnik&amp;marker=48.035855735787315%2C-122.40966796875"
    style="height: 50vh; width: 100%;"
  ></iframe>
    <a href="https://www.openstreetmap.org/?mlat=48.036&amp;mlon=-122.410#map=8/48.036/-122.410"><small>View Larger Map</small></a>
 </div>
 {% endblock %}
@@ -1 +1,21 @@
 {% extends "base.html" %}
 {% block title %}Home{% endblock %}
 {% block home_active %}active{% endblock %}
 {% block main %}
 <div class="container-fluid bg-dark text-light text-center">
  <hr class="my-0">
  <div class="py-4">
    <h1 class="display-1">Langley</h1>
    <span class="fst-italic">The Village by The Sea</span>
    <br><span>Incorporated 1913</span>
  </div>
  <hr class="my-0">
 </div>
 <div class="container-md mt-2 text-end">
  <iframe
    src="https://www.openstreetmap.org/export/embed.html?bbox=-127.02392578125001%2C46.32796494040748%2C-117.79541015625001%2C49.688954878870305&amp;layer=mapnik&amp;marker=48.035855735787315%2C-122.40966796875"
    style="height: 50vh; width: 100%;"
  ></iframe>
    <a href="https://www.openstreetmap.org/?mlat=48.036&amp;mlon=-122.410#map=8/48.036/-122.410"><small>View Larger Map</small></a>
 </div>
 {% endblock %}
@@ -2,36 +2,5 @@
 {% block title %}Visit{% endblock %}
 {% block visit_active %}active{% endblock %}
 {% block main %}
 <div class="container-md mt-3">
  <div class="row justify-content-around">
    <div class="col-md-7 align-self-center">
      The annual Mystery Weekend at the end of February is a great way
      to explore Langley as many locals take on roles in the mystery and
      businesses hand out clues. There are also prizes to be won for guessing
      the murderer correctly.
    </div>
    <div class="col-md-5">
      <figure class="figure container">
        <img src="static/mysteryposter.jpg" alt="The poster for the 2024 Mystery Weekend" class="figure-img img-fluid visit-img">
        <figcaption class="figure-caption">The poster for the 2024 Mystery Weekend, courtesy Langley Chamber of Commerce</figcaption>
      </figure>
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-md-5">
      <figure class="figure container">
        <img src="static/orcas.jpg" alt="Orcas resident near Whidbey Island" class="figure-img img-fluid visit-img">
        <figcaption class="figure-caption">Orcas resident near Whidbey Island, courtesy NOAA</figcaption>
      </figure>
    </div>
    <div class="col-md-7 align-self-center">
      The annual Welcome the Whales festival in April and the
      <a href="https://www.orcanetwork.org/langley-whale-center">Langley Whale Center</a>
      celebrate the cetaceans in the Puget Sound around Whidbey Island. These are
      primarily orcas, but there is a small pod of grey whales inhabiting the area,
      and humpbacks can sometimes be seen.
    </div>
  </div>
 </div>
 {% endblock %}
@@ -1,23 +0,0 @@
 # CS1534CA3
 Benjamin Soroos, Student ID 52317014
 ## Design Decisions
 I didn't decide to do anything particularly unusual with regard to layout or
 navigation - a static navbar, collapsing on mobile, is possibly the most common
 form of responsive navigation, and the required 7:5 columnar layout on the visit
 page ended up being a quite typical way of attaching images to small paragraphs
 of text.
 As I have very little ability to judge the aesthetics of color combinations, I
 used a single background/accent color, which is the purple used by the city of
 Langely on their website and elsewhere.
 ## Challenges Faced
 I didn't face any particular technical challenges, but judging aesthetics proved
 quite difficult (not at all surprisingly). I'm still unsure if the banner on the
 home page qualifies as 'attention-grabbing'.
 Also, 'static map' didn't seem to be well-defined, so for that reason and
 because it's difficult to find a single scale of map which usefully shows the
 location of Langley to people unfamiliar with maps of the Pacific North-West, I
 inserted a dynamic map instead.
@@ -2,7 +2,3 @@
 	--bs-dark: #270042;
 	--bs-dark-rgb: 39, 0, 66; 
 }
 .visit-img {
 	max-height: 300px;
 }
Author	SHA1	Message	Date
bluepython508	638e4498da	Add basics for home page - Banner - Map	2024-03-12 09:23:23 +00:00
bluepython508	50f3101850	Theming and Logo - Set dark color to Langely's purple - Add Langley seal as navbar brand	2024-03-11 10:55:43 +00:00
bluepython508	92ad40d32d	Basic page setup - Add bootstrap - Add other pages - (responsive) navbar with links to each page	2024-03-05 21:13:57 +00:00
bluepython508	d6ef3d511c	Initial Setup Tooling: nix/direnv to ensure dependencies are present jinja-based templating to avoid duplication of common sections of pages (header and footer, primarily) auto-rebuilding server for rapid iteration	2024-03-05 09:42:02 +00:00