Major redesign

author: ElDoc-s <A01255172@tec.mx> 2026-07-01 01:41:10 -0700
committer: ElDoc-s <A01255172@tec.mx> 2026-07-01 01:41:10 -0700
commit: 95fe9ec7b1b51f449a0c0b733fe05798c8c12024 (patch)
tree: 552932989c8ee8a39d2aa8579bf9dde90481679c
parent: 7a2e995593a2ae7467094e5207ca95a53490adf8 (diff)
11 files changed, 177 insertions, 107 deletions
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..125609c
--- /dev/null
+++ b/about.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="britons.css?v=6">
+		<meta http-equiv="content-type" content="text/html; charset=windows-1252">
+		<meta name="author" content="Jodian Buenaventura">
+		<meta name="keywords" content="/hmofa/, furry, hmofa, tech, writing, index">
+		<meta name="description" content="About the owner of El Arriero.">
+		<link rel="icon" type="image/x-icon" href="fig.ico">
+		<title>El Arriero - Contact</title>
+	</head>
+	
+	<body>
+		<header>	
+			<h1><a class="title" href="index.html">El Arriero</a><i>Fig, to my heart, you are the eternal hope.</i></h1>
+		</header>
+		<nav>
+			<a href="about.html"><img src="icons/user-business.png" alt="User Business"> About</a>
+			<a href="contact.html"><img src="icons/mail.png" alt="Mail Arrow"> Contact</a>
+			<a href="changelog.html"><img src="icons/new-text.png" alt="NEW!"> Changelog</a>
+			<a href="https://wiki.elarriero.org/"><img src="icons/book-open-text-image.png" alt="Encyclopedia"> Wiki</a>
+			<a href="https://press.elarriero.org"><img src="icons/newspaper.png" alt="Newspaper"> Writing</a>
+		</nav>	
+		<h2>About Me</h2>
+		<p>You may know me online as FigAnon or El Arriero. Some of my friends call me Jodian <small>(pronounced Joe-dee-ann)</small>. I'm the guy who made and draws 
+		<a href="fig.html">Fig</a>. I haven't drawn a proper portrait of myself, so just imagine the "Unknown Civil Servant" from
+		<a href="https://www.ndemiccreations.com/en/51-rebel-inc" title="Developer page of the game.">Rebel Inc: Escalation</a> <img src="icons/globe--arrow.png" alt="Outgoing link">, one of my favorite games.</p>
+		<p>I do traditional art with some fine and affordable tools. Unfortunately I can't display most of my art because of web provider guidelines.</p>
+		<ul>
+			<li>Pentel Graphgear 1000 with Staedtler Mars 0.5mm HB lead</li>
+			<li>STAEDTLER Mars Technico 780 with their appropriate 2mm 2H lead</li>
+			<li>Derwent Academy Graphite Pencils ranging from 5H-6B</li>
+			<li>Unknown Chinese sketchbook</li>
+			<li>Generic printer paper</li>
+		</ul>
+		
+		<p>Apart from drawing, I'm a techie, so my computers are well maintained.</p>
+		<dl>
+			<dt>My Desktop, Fig:</dt>
+			<dd>She runs <a href="https://www.gentoo.org/" title="Gentoo Linux homepage">Gentoo</a> <img src="icons/globe--arrow.png" alt="Outgoing link"> (x86_64) with a custom kernel. I've noticed a ~10% performance gain compared to the standard kernel options. It certainly was worth the headache of figuring everything out. I've had this install running since January 2024.</dd>
+			<dt>My Laptop, Adelaide:</dt>
+			<dd>She's made to be a reliable backup. So I have her dualbooting <a href="https://linuxmint.com/" title="Linux Mint homepage">Linux Mint 22</a> <img src="icons/globe--arrow.png" alt="Outgoing link"> and 
+			<a href="http://toastytech.com/evil/" title="Internet Explorer is EVIL!">Windows 11</a> <img src="icons/globe--arrow.png" alt="Outgoing link"> (unfortunately). You just never know when you're gonna need Windows.
+			 I haven't booted into it since last year so it's not like I'm sacrificing much. She's always there for when I bork my computer after her yearly update.</dd>
+		</dl>
+		
+		<hr>
+		<a title="Oh, you're a cute one ain'tcha, Anonie?" href="media/figsmoke.png"><img src="media/smoke.webp" alt="Fig" class="fig"></a>
+		<a href="https://www.restorebritain.org.uk/" title="Visit to save Britain from the Thousand Year Starmerreich!">
+			<img src="media/restorebritain.gif" alt="RESTORE BRITAIN!">
+		</a>	
+	
+		<a href="https://www.youtube.com/watch?v=5iyxJ72G0lM" title="Brexit means Brexit">
+			<img src="media/eu_anim.gif" alt="EUistan Flag">	
+		</a>	
+	</body>
+</html>
+
diff --git a/britons.css b/britons.css
index 391fa40..16d4c09 100644
--- a/britons.css
+++ b/britons.css
@@ -5,11 +5,10 @@ background-image: url(media/bg.gif);
 }
 
 body {
-	
 	font-size: 100%;
 	font-family: "Liberation Serif", "Times New Roman";
 	display: block;
-	background-color: whitesmoke;
+	background-color: rgba(255, 255, 255, 0.8);
 	
 	padding: 2%;
 	padding-top: 1%;
@@ -21,66 +20,57 @@ body {
 
 small {
 	font-style: italic;
-	color: gray;
+	color: gray;	
+}
+
+h1 {
+	margin: 0%;
 }
 
-.title {
+h1 a	{
 
-	font-size: 250%;<img src="fig.ico" alt="" />
+	font-size: 125%;
 	color: var(--main-fg-color);
 	font-weight: bold;
-	
+	text-decoration: none;
 }
-
-header i {
+h1 i {
+	font-size: 75%;
+	color: darkolivegreen;
 	margin-left: 5%;
-	font-size: 125%;
+	text-decoration: underline;
 }
-
-.navbar {
+nav {
 	display: flex;
-	justify-content: space-evenly; ;
-	margin-top: 1%;
+	justify-content: flex-start; 
+	flex-wrap: wrap;
 
 }
-
-.content {
-	width: 80%;
-	background-color: whitesmoke;
-}
-
-.content figcaption {
-	font-style: italic;
-	text-align: center;
-}
-
-.content figcaption a {
-	text-align: center;
-	font-style: normal;
-}
-
-.content img {
-	display: block;
-	margin: auto;
-	max-width: 35%;
-	padding: 1%;
+nav a {
+	margin-top: 0;
+	padding: 0.5% 4%;
+	text-decoration: none;
+	color: white;
+	background-color: var(--main-fg-color);
+	font-weight: bold;
 	
 }
-
+nav a:hover {
+	background-color: var(--main-ac-color);
+	color: white;
+}
 .fig {
 	position: fixed;
 	bottom: 0%;
 	right: -2%;
-	opacity: 0.25;
+	opacity: 1;
 	transition: opacity 0.25s ease-in;
-	z-index: 1;
+	z-index: -1;
 	width: 25%;
 }
-
 .fig:hover {
-	opacity: 1;
+	z-index: 5;
 }
-
 .eu {
 	position: absolute;
 	right: 0%;
@@ -88,13 +78,30 @@ header i {
 	opacity: 1;
 	scale: 25%;
 }
-
 .eu:hover {
 	animation: spin 5s linear infinite;
 }
-
-
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+/*
+figure {
+  	margin-left: auto;
+  	max-width: 25%;
+	float: right;
+	background-color: white;
+	padding: 1%;
+}
+*/
+
+figure {
+	float: right;
+	clear: right;
+	max-width: 25%;
+	
+}
+
+figure img {
+	max-width: 100%;
+}
+\ No newline at end of file
diff --git a/changelog.html b/changelog.html
index bfe1f63..ac6096c 100644
--- a/changelog.html
+++ b/changelog.html
@@ -2,32 +2,38 @@
 <html lang="en">
 	<head>
 	
-		<link rel="stylesheet" href="britons.css?v=5">
+		<link rel="stylesheet" href="britons.css?v=6">
 		<meta http-equiv="content-type" content="text/html; charset=windows-1252">
-		<meta name="author" content="Jodian Buenaventura" >
+		<meta name="author" content="Jodian Buenaventura">
 		<meta name="keywords" content="/hmofa/, hmofa, tech, writing, index, british, furry">
-		<meta name="description" content="Main page of a waifur and British website.">
+		<meta name="description" content="Changelog for the El Arriero website.">
 		<link rel="icon" type="image/x-icon" href="fig.ico">
 		<title>El Arriero</title>
 		
 	</head>
 	
 	<body>
-	
-		<header role="banner">
-			<a class="title" href="index.html" title="The Muleteer">El Arriero</a> 
-			<i class="tagline">Home of the Britishly Mediocre</i>
-			<div class="navbar" role="navigation">
-				<a href="contact.html">(<img src="icons/mail--arrow.png" alt="Mail Arrow">) Contact Me</a>
-				<a href="changelog.html">(<img src="icons/new-text.png" alt="New!">) Changelog</a>
-				<a href="https://wiki.elarriero.org/">(<img src="icons/book-open-text-image.png" alt="Book Image">) Wiki</a>
-				<a href="https://press.elarriero.org/">(<img src="icons/newspaper.png" alt="Newspaper">) The Press</a>
-			</div>
+		<header>	
+			<h1><a class="title" href="index.html">El Arriero</a><i>Fig, to my heart, you are the eternal hope.</i></h1>
 		</header>
-		
-		<hr>
-		
+		<nav>
+			<a href="about.html"><img src="icons/user-business.png" alt="User Business"> About</a>
+			<a href="contact.html"><img src="icons/mail.png" alt="Mail Arrow"> Contact</a>
+			<a href="changelog.html"><img src="icons/new-text.png" alt="NEW!"> Changelog</a>
+			<a href="https://wiki.elarriero.org/"><img src="icons/book-open-text-image.png" alt="Encyclopedia"> Wiki</a>
+			<a href="https://press.elarriero.org"><img src="icons/newspaper.png" alt="Newspaper"> Writing</a>
+		</nav>	
 		<dl>
+			<dt>01-07-2026</dt>
+				<dd>
+					Major Site Redesign!
+					<ul>
+						<li>Changed header and navbar to be more appealing.</li>
+						<li>Replaced innaccurate website tagline.</li>
+						<li>Added images to index page, making it more lively.</li>
+						<li>Added "About" section.</li>
+					</ul>
+				</dd>
 			<dt>28-06-2026</dt>
 				<dd>
 					<ul>
diff --git a/contact.html b/contact.html
index 56b2e2e..7650e74 100644
--- a/contact.html
+++ b/contact.html
@@ -1,35 +1,32 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<link rel="stylesheet" href="britons.css?v=5">
+		<link rel="stylesheet" href="britons.css?v=6">
 		<meta http-equiv="content-type" content="text/html; charset=windows-1252">
-		<meta name="author" content="Jodian Buenaventura" >
-		<meta name="keywords" content="hmofa, tech, writing, index">
+		<meta name="author" content="Jodian Buenaventura">
+		<meta name="keywords" content="/hmofa/, furry, hmofa, tech, writing, index">
 		<meta name="description" content="Contact information for the owner of El Arriero.">
 		<link rel="icon" type="image/x-icon" href="fig.ico">
 		<title>El Arriero - Contact</title>
 	</head>
 	
 	<body>
-		<header role="banner">
-			<a class="title" href="index.html" title="The Muleteer">El Arriero</a> 
-			<i class="tagline">Home of the Britishly Mediocre</i>
-			<div class="navbar" role="navigation">
-				<a href="contact.html">(<img src="icons/mail--arrow.png" alt="Mail Arrow">) Contact Me</a>
-				<a href="changelog.html">(<img src="icons/new-text.png" alt="New!">) Changelog</a>
-				<a href="https://wiki.elarriero.org/">(<img src="icons/book-open-text-image.png" alt="Book Image">) Wiki</a>
-				<a href="https://press.elarriero.org/">(<img src="icons/newspaper.png" alt="Newspaper">) The Press</a>
-			</div>
+		<header>	
+			<h1><a class="title" href="index.html">El Arriero</a><i>Fig, to my heart, you are the eternal hope.</i></h1>
 		</header>
-		<hr>
-		
+		<nav>
+			<a href="about.html"><img src="icons/user-business.png" alt="User Business"> About</a>
+			<a href="contact.html"><img src="icons/mail.png" alt="Mail Arrow"> Contact</a>
+			<a href="changelog.html"><img src="icons/new-text.png" alt="NEW!"> Changelog</a>
+			<a href="https://wiki.elarriero.org/"><img src="icons/book-open-text-image.png" alt="Encyclopedia"> Wiki</a>
+			<a href="https://press.elarriero.org"><img src="icons/newspaper.png" alt="Newspaper"> Writing</a>
+		</nav>	
 		<h2>How to Contact Me</h2>
 		<ul>
 			<dt>Write to my <a href="mailto:yorkshirefigs@posteo.uk">Email <img src="icons/mail--pencil.png" alt="Email Write!"></a></dt>
-				<dd>I finally got a new address that should be compatible with all services. 
-				Sorry about the arbitrary restrictions from last time. You shouldn't have to deal with them anymore now.</dd>
-			<dt>Future Ideas</dt>
-				<dd>I want people to contact me in other ways, but I haven't thought of anything that wouldn't violate my freedom or be super weird. Maybe I could open a Jami/Tox for the two people left on the planet that still use it.</dd>
+				<dd>I check my email multiple times a day, but responses may take a day or two to come in. I like responding to your messages, so please send me lots!</dd>
+			<dt>Contact Suggestions <img src="icons/question-balloon.png" alt="Question balloon"></dt>
+				<dd>I want people to have the option to contact me many ways, but most options violate our <a href="https://www.gnu.org/philosophy/free-sw.en.html">freedom</a>, or are too inconvenient. If you'd like to suggest a contact method then I'd be glad to look into it.</dd>
 		</ul>
 
 		<a title="Oh, you're a cute one ain'tcha, Anonie?" href="media/figsmoke.png"><img src="media/smoke.webp" alt="Fig" class="fig"></a>
diff --git a/fig.html b/fig.html
index 213e824..3ef2882 100644
--- a/fig.html
+++ b/fig.html
@@ -2,30 +2,27 @@
 <html lang="en">
 	<head>
 	
-		<link rel="stylesheet" href="britons.css?v=5">
+		<link rel="stylesheet" href="britons.css?v=6">
 		<meta http-equiv="content-type" content="text/html; charset=windows-1252">
-		<meta name="author" content="Jodian Buenaventura" >
+		<meta name="author" content="Jodian Buenaventura">
 		<meta name="keywords" content="/hmofa/, hmofa, tech, writing, index, british, furry">
-		<meta name="description" content="Showcasing Fig's origin.">
+		<meta name="description" content="Fig, the nudist husky's origin story.">
 		<link rel="icon" type="image/x-icon" href="fig.ico">
 		<title>El Arriero</title>
 		
 	</head>
 	
 	<body>
-		<header role="banner">
-			<a class="title" href="index.html" title="The Muleteer">El Arriero</a> 
-			<i class="tagline">Home of the Britishly Mediocre</i>
-			<div class="navbar" role="navigation">
-				<a href="contact.html">(<img src="icons/mail--arrow.png" alt="Mail Arrow">) Contact Me</a>
-				<a href="changelog.html">(<img src="icons/new-text.png" alt="New!">) Changelog</a>
-				<a href="https://wiki.elarriero.org/">(<img src="icons/book-open-text-image.png" alt="Book Image">) Wiki</a>
-				<a href="https://press.elarriero.org/">(<img src="icons/newspaper.png" alt="Newspaper">) The Press</a>
-			</div>
+		<header>	
+			<h1><a class="title" href="index.html">El Arriero</a><i>Fig, to my heart, you are the eternal hope.</i></h1>
 		</header>
-		
-		<hr>
-		
+		<nav>
+			<a href="about.html"><img src="icons/user-business.png" alt="User Business"> About</a>
+			<a href="contact.html"><img src="icons/mail.png" alt="Mail Arrow"> Contact</a>
+			<a href="changelog.html"><img src="icons/new-text.png" alt="NEW!"> Changelog</a>
+			<a href="https://wiki.elarriero.org/"><img src="icons/book-open-text-image.png" alt="Encyclopedia"> Wiki</a>
+			<a href="https://press.elarriero.org"><img src="icons/newspaper.png" alt="Newspaper"> Writing</a>
+		</nav>		
 		<h2>A Complete Accident</h2>
 		<p>On the 21st of January, 2026, I worked up the courage to draw for /hmofa/. Practice makes perfect after all.
 		I couldn't get the eyes right, and this was before I bought a <a href="https://www.derwentart.us/" title="Derwent Art store page"> proper set of pencils</a> 
diff --git a/index.html b/index.html
index 83826f1..229e875 100644
--- a/index.html
+++ b/index.html
@@ -2,29 +2,34 @@
 <html lang="en">
 	<head>
 	
-		<link rel="stylesheet" href="britons.css?v=5">
+		<link rel="stylesheet" href="britons.css?v=6">
 		<meta http-equiv="content-type" content="text/html; charset=windows-1252">
-		<meta name="author" content="Jodian Buenaventura" >
+		<meta name="author" content="Jodian Buenaventura">
 		<meta name="keywords" content="/hmofa/, hmofa, tech, writing, index, british, furry">
-		<meta name="description" content="Main page of a waifur and British website.">
+		<meta name="description" content="Main page of a British waifur website.">
 		<link rel="icon" type="image/x-icon" href="fig.ico">
 		<title>El Arriero</title>
 		
 	</head>
 	<body>
-		<header role="banner">
-			<a class="title" href="index.html" title="The Muleteer">El Arriero</a> 
-			<i class="tagline">Home of the Britishly Mediocre</i>
-			<div class="navbar" role="navigation">
-				<a href="contact.html">(<img src="icons/mail--arrow.png" alt="Mail Arrow">) Contact Me</a>
-				<a href="changelog.html">(<img src="icons/new-text.png" alt="New!">) Changelog</a>
-				<a href="https://wiki.elarriero.org/">(<img src="icons/book-open-text-image.png" alt="Book Image">) Wiki</a>
-				<a href="https://press.elarriero.org/">(<img src="icons/newspaper.png" alt="Newspaper">) The Press</a>
-			</div>
+		<header>	
+			<h1><a class="title" href="index.html">El Arriero</a><i>Fig, to my heart, you are the eternal hope.</i></h1>
 		</header>
-		
-		<hr>
-		
+		<nav>
+			<a href="about.html"><img src="icons/user-business.png" alt="User Business"> About</a>
+			<a href="contact.html"><img src="icons/mail.png" alt="Mail Arrow"> Contact</a>
+			<a href="changelog.html"><img src="icons/new-text.png" alt="NEW!"> Changelog</a>
+			<a href="https://wiki.elarriero.org/"><img src="icons/book-open-text-image.png" alt="Encyclopedia"> Wiki</a>
+			<a href="https://press.elarriero.org"><img src="icons/newspaper.png" alt="Newspaper"> Writing</a>
+		</nav>		
+		<figure>
+			<img src="media/fig_hamster.webp" alt="Fig cheerfully looking up at the hamster smoking on her messy scalp.">
+			<figcaption>Fig cheerfully looking up at the hamster smoking on her messy scalp.</figcaption>		
+		</figure>
+		<figure>
+			<img src="media/fig_reclining_censored.webp" alt="Fig reclining with her legs propped up on a fence. She's unknowingly showing off her hairy mound.">
+			<figcaption>Fig reclining with her legs propped up on a fence, inadvertently showing her lady garden.</figcaption>		
+		</figure>
 		<h2>"The Most Britishly Mediocre Thing Ever"</h2>		
 		<dl>
 			<a href="fig.html"><dt>Fig's Origin</dt></a>
diff --git a/media/civil_servant.gif b/media/civil_servant.gif
new file mode 100644
index 0000000..b9bc148
--- /dev/null
+++ b/media/civil_servant.gif
diff --git a/media/fig_hamster.jpg b/media/fig_hamster.jpg
new file mode 100644
index 0000000..41e2567
--- /dev/null
+++ b/media/fig_hamster.jpg
diff --git a/media/fig_hamster.webp b/media/fig_hamster.webp
new file mode 100644
index 0000000..9b6542e
--- /dev/null
+++ b/media/fig_hamster.webp
diff --git a/media/fig_reclining_censored.jpg b/media/fig_reclining_censored.jpg
new file mode 100644
index 0000000..e905528
--- /dev/null
+++ b/media/fig_reclining_censored.jpg
diff --git a/media/fig_reclining_censored.webp b/media/fig_reclining_censored.webp
new file mode 100644
index 0000000..e3e04ef
--- /dev/null
+++ b/media/fig_reclining_censored.webp
author	ElDoc-s <A01255172@tec.mx>	2026-07-01 01:41:10 -0700
committer	ElDoc-s <A01255172@tec.mx>	2026-07-01 01:41:10 -0700
commit	95fe9ec7b1b51f449a0c0b733fe05798c8c12024 (patch)
tree	552932989c8ee8a39d2aa8579bf9dde90481679c
parent	7a2e995593a2ae7467094e5207ca95a53490adf8 (diff)