<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126098960-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-126098960-1');
</script>
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="https://swordscomic.com/media/KargobEmote_t6HfMhO.png"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="webcomic,comic,Fantasy">
<title>Swords | Not Found</title>
<meta name="description" content="" />
<style>
:root {
/* Configurable settings */
/* Base Colors */
--overflow-background: #ECEFF1;
--content-background: #FFFFFF;
--primary-text-color: #212121;
--footer-background-color: #B0BEC5;
/* Tag Colors */
--tag-background-color: #B0BEC5;
--tag-text-color: #212121;
/* Tab Colors */
--tab-inactive-color: #B0BEC5;
--tab-active-color: #EFEFEF;
--tab-text-color: #212121;
/* Debug Areas */
--ad-debug-color: #ffffff00;
/* Images */
--spinner-image: url(/static/comics/default-spinner.png);
--navigation-spritesheet: url(/static/comics/default-sprites.png);
--post-border-image: url(/static/comics/default-container.png);
/* Unconfigurable settings */
--tag-error-color: #B00020;
--default-tag-icon: url(/static/comics/default-tag-icon.png);
/* Padding standards */
--paragraph-padding: 8px;
--tile-size: 105px; /* At current settings, 105px is good for both iPhone size and desktop size */
/* Page sizing */
--comic-max-width: 728px; /* 728px because that fits the widest ad size */
--comic-min-width: 320px; /* 320px because that is the smallest screen (iPhone) */
--overflow-extra-width: 82px; /* Just a comfortable padding for wider screens. */
--spinner-size: 120px;
--navigation-height: 64px;
/* Most common ad sizes globally:
300x250 (Medium Rectangle) - 40%
728x90 (Leaderboard) - 25%
320x50 (Mobile Leaderboard) - 12%
160x600 (Wide Skyscraper) - 12%
300x600 (Half Page) - 5%
Everything else together represents only 6% of ads, and we ignore them.
*/
/* Markdown Styling */
--blockquote-border-color: #00000044;
--blockquote-background-color: #FFFFFF44;
}
/* RESET CSS AND GLOBAL STYLING */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* GLOBAL STYLING */
h1 { font-size: 28px; font-weight: bold; margin-bottom: var(--paragraph-padding); }
h2 { font-size: 20px; margin-top: 20px; font-weight: bold; margin-bottom: var(--paragraph-padding); }
p { font-size: 14px; margin-bottom: var(--paragraph-padding); }
small { font-size: 12px; }
em { font-style: italic; }
strong { font-weight: bold; }
img { vertical-align: bottom; }
blockquote {
border-left: 4px solid var(--blockquote-border-color);
background-color: var(--blockquote-background-color);
padding: calc(var(--paragraph-padding) + 1px) 8px 1px 8px;
margin-bottom: var(--paragraph-padding);
width: auto;
box-sizing: border-box;
}
a:link {
color: var(--primary-text-color);
}
a:visited {
color: var(--primary-text-color);
}
/* GLOBAL STYLING FOR FORM ELEMENTS */
input, select {
font-family: 'ComicFont', 'Arial', sans-serif;
box-sizing: border-box;
vertical-align:top;
height: 32px;
width: 200px;
padding: 6px;
margin: var(--paragraph-padding);
color: var(--primary-text-color);
background-color: var(--blockquote-background-color);
border: 2px solid var(--blockquote-border-color);
}
input:focus, select:focus {
outline: none;
}
input::-webkit-search-cancel-button {
-webkit-appearance: none;
background-image: url(/static/comics/icons/delete.svg);
background-size: contain;
height: 14px;
width: 14px;
margin: 0;
}
select option {
background-color: var(--blockquote-background-color);
border: 2px solid var(--blockquote-border-color);
}
/* CORE PAGE LAYOUT */
html {
height: 100%;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
body {
overflow-x: hidden;
font-family: 'ComicFont', 'Arial', sans-serif;
padding: 0;
margin: 0;
min-width: var(--comic-min-width);
background: var(--overflow-background);
display: flex;
justify-content: center;
color: var(--primary-text-color);
min-height: 100%;
}
.content-background {
background: var(--content-background);
display: flex;
flex-direction: column;
align-items: center;
max-width: calc(var(--comic-max-width) + var(--overflow-extra-width) * 2);
min-width: var(--comic-min-width);
width: 100%;
box-shadow: 0 0 10px #00000088;
}
@media (min-width: 728px) and (orientation:landscape) {
.content-background {
max-width: calc(var(--comic-max-width) * 2 + var(--overflow-extra-width) * 2);
}
}
.content {
width: 100%;
max-width: var(--comic-max-width);
min-width: var(--comic-min-width);
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 728px) and (orientation:landscape) {
.content {
max-width: calc(var(--comic-max-width) * 2 + var(--paragraph-padding) * 2);
}
}
.panel {
position: relative;
max-width: var(--comic-max-width);
min-width: var(--comic-min-width);
width: 100%;
}
@media (min-width: 728px) and (orientation:landscape) {
.panel {
width: calc(50% - var(--paragraph-padding));
margin-left: calc(var(--paragraph-padding) / 2);
margin-right: calc(var(--paragraph-padding) / 2);
}
}
.hidden {
display: none;
}
.center-text {
text-align: center;
}
.content-frame {
box-sizing: border-box;
border: 20px solid transparent;
border-image-source: var(--post-border-image);
border-image-slice: 20 fill;
border-image-repeat: repeat;
margin-bottom: calc(var(--paragraph-padding)*2);
width: 100%;
}
header {
width: 100%;
max-width: var(--comic-max-width);
min-width: var(--comic-min-width);
overflow: hidden;
margin-bottom: calc(var(--paragraph-padding) * 2);
user-select: none;
}
.header-image {
width: 33%;
margin: var(--paragraph-padding);
}
.header-link-container {
display: flex;
flex-wrap: wrap;
}
.header-link {
display: block;
color: white !important;
text-decoration: none;
margin: var(--paragraph-padding);
}
/* FOOTER AND SOCIAL ICONS */
.social-container {
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
max-width: 100%;
}
.social-icon {
width: 24px;
height: 24px;
font-size: 24px;
padding: 8px;
text-align: center;
margin: 8px;
}
footer {
background-color: var(--footer-background-color);
min-height: 100px;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: auto;
text-align: center;
padding-bottom: 0;
}
.footer-content {
padding: 8px;
padding-top: calc(var(--paragraph-padding) * 2);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-subsection {
padding: 8px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
footer a:hover {
color: #978b65;
}
footer a:active {
color: #978b65;
}
/* AD SIZES */
.ad-banner-content {
min-width: 100%;
min-height: 0px;
max-width: var(--comic-max-width);
overflow: hidden;
background-color: var(--ad-debug-color);
margin-bottom: calc(var(--paragraph-padding)*2);
}
.ad-mobile-leaderboard {
min-width: 100%;
min-height: 0px;
background-color: var(--ad-debug-color);
display: inline-block;
margin-bottom: calc(var(--paragraph-padding));
}
/* READER PAGE */
#staff-text {
display: none;
}
#reader-panel {
user-select: none;
}
#comic-image-spinner {
position: absolute;
top: calc(50% - var(--spinner-size) / 2);
left: calc(50% - var(--spinner-size) / 2);
width: var(--spinner-size);
height: var(--spinner-size);
background-image: var(--spinner-image);
background-size: contain;
transition: opacity 0.1s ease-out;
animation: spin 2s linear infinite;
opacity: 0;
}
.page-image-wrapper {
position: relative;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.comic-image {
width: 100%;
height: auto;
transition: opacity 0.5s ease-out
}
#comic-post-date {
margin-bottom: calc(var(--paragraph-padding) * 2);
font-size: 12px;
}
.tab-group {
display: flex;
margin-left: 6px;
height: var(--navigation-height);
align-items: flex-end;
}
.tab {
background-color: var(--tab-inactive-color);
height: 16px;
padding: 6px 12px;
margin-left: 3px;
margin-right: 3px;
margin-bottom: -7px;
z-index: 1;
border: 3px solid black;
border-bottom: 4px solid var(--tab-inactive-color);
user-select: none;
cursor: pointer;
}
.tab.active {
background-color: var(--tab-active-color);
border-bottom: 4px solid var(--tab-active-color);
}
/* NAV BUTTONS */
.navigation-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: var(--navigation-height);
transition: opacity 0.5s ease-out;
}
.navigation-button {
height: var(--navigation-height);
width: calc(var(--navigation-height) * 2);
max-width: calc(var(--navigation-height) * 2);
background: var(--navigation-spritesheet);
background-repeat: no-repeat;
background-size : 400% 200%;
}
/* Shrink the button size on very small screens. */
/* This needs to be anything smaller than calc(--navigation-height * 8), but can't do that in media queries */
@media (max-width: 512px) {
.navigation-wrapper {
height: calc(var(--navigation-height) / 1.5);
}
.navigation-button {
height: calc(var(--navigation-height) / 1.5);
width: calc(var(--navigation-height) * 2 / 1.5);
max-width: calc(var(--navigation-height) * 2 / 1.5);
}
}
.navigation-button:active {
background-position-y: 100%;
}
@media (pointer:fine) { /* If we don't do this in a media query, it gets stuck hovered on touch devices */
.navigation-button:hover {
background-position-y: 100%;
}
}
.navigation-first {
background-position-x: 0;
left: 10%;
}
.navigation-previous {
background-position-x: 33.3%;
left: 30%;
}
.navigation-next {
background-position-x: 66.6%;
left: 50%;
}
.navigation-last {
background-position-x: 100%;
left: 70%;
}
.navigation-random {
background: transparent;
color: white !important;
text-decoration: none;
text-align: center;
line-height: var(--navigation-height);
}
/* COMIC INVITATION SECTION */
.invitation {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: calc(var(--paragraph-padding)*2);
}
.invitation img {
width: 100%;
}
/* TAGS */
#comic-tags {
display: flex;
flex-direction: column;
width: 100%;
font-size: 12px;
}
.tag {
background-color: var(--tag-background-color);
margin: 1px 2px;
padding: 4px;
padding-left: 24px;
height: 16px;
line-height: 16px;
font-size: 12px;
text-align: center;
text-decoration: none;
display: inline-block;
background-image: var(--default-tag-icon);
background-size: 16px 16px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
.tag:hover {
filter: brightness(125%);
}
.tag.error {
background-color: var(--tag-error-color);
}
/* ARCHIVE TILES */
.archive-tile-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.archive-tile {
width: var(--tile-size);
background-color: var(--tag-background-color);
padding: var(--paragraph-padding);
padding-top: calc(var(--tile-size) + var(--paragraph-padding) * 2);
margin: var(--paragraph-padding);
background-image: var(--default-tag-icon);
background-size: var(--tile-size) var(--tile-size);
background-position: var(--paragraph-padding) var(--paragraph-padding);
background-repeat: no-repeat;
text-align: center;
text-decoration: none;
word-wrap: break-word;
font-size: 14px;
}
.archive-tile:hover {
filter: brightness(125%);
}
.archive-tile > strong, .archive-tile > small {
display: block;
}
.archive-tile-short {
padding-top: var(--paragraph-padding);
}
/* ARCHIVE PAGE TABLE */
.archive-page-td-date {
min-width: 128px;
padding-top: 4px;
padding-bottom: 4px;
}
.archive-page-td-title {
border-left: 4px solid var(--blockquote-border-color);
padding-top: 4px;
padding-bottom: 4px;
padding-left: 24px;
}
.archive-chapter-break {
text-align: center;
}
/* TAG DETAIL PAGE */
.tag-detail-header {
display: flex;
align-items: center;
}
.tag-detail-header img {
height: 128px;
width: 128px;
border-right: 4px solid var(--blockquote-border-color);
margin-right: 24px;
padding-right: 24px;
}
#tag-post {
margin-top: 24px;
margin-bottom: 24px;
}
/* GLOBAL INDEX PAGE */
.index-section {
background-color: #CFD8DC;
padding: 24px;
margin: 0;
text-decoration: wavy;
}
.index-section:nth-child(even) {
background-color: #B0BEC5;
}
/* Popup dialogs */
dialog {
padding: 0;
border: none;
}
dialog[open] {
animation: slidein 500ms cubic-bezier(0.25, 0, 0.3, 1) normal;
}
dialog.is-hidden {
animation: minimize 500ms cubic-bezier(0.5, -0.5, 0.1, 1.5) normal;
}
dialog::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(0.25rem);
transition: opacity 0.5s;
opacity: 0;
}
dialog[open]::backdrop {
opacity: 1;
}
dialog.is-hidden::backdrop {
opacity: 0;
}
.dialog-image {
max-width: 95vw;
max-height: 95vh;
object-fit: contain;
}
.dialog-close {
position: absolute;
width: 32px;
height: 32px;
border: 1px solid white;
border-radius: 4px;
background-color: #691b17;
color: white;
font-weight: bold;
top: 4px;
right: 4px;
}
@keyframes slidein {
from {
opacity: 0;
transform: translateY(50%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes minimize {
to {
opacity: 0;
transform: scale(0);
}
}
</style>
<script>
"use strict";
const QUESTS = function () {
function createShareLink(template) {
let uri = encodeURIComponent(window.location.href);
let message = encodeURIComponent("Visit Swords!");
return template.replace("{url}", uri).replace("{message}", message);
}
function makeTile(url="", image="", title="", cta="", share=false) {
return `
<a class="archive-tile" ${ share ? `onclick="QUESTS.share('${ url }')"` : `href="${ url }"` }
rel="noopener"
target="blank" style="background-image: url('${ image }')">
<strong>${ title }</strong>
<small>${ cta }</small>
</a>
`;
}
const initializePage = async function () {
// Fetch the data
const response = await fetch("/comic/data/");
const data = await response.json()
let html;
// Set up the social share links
html = "";
for (let link of data.socialLinks) {
if (!link.shareUrlTemplate) { continue; }
html += makeTile(createShareLink(link.shareUrlTemplate), link.image, link.title, link.shareCta, true);
}
// TODO: If the device supports navigator.share, make a special tile
const shareContainer = document.getElementById("social-share-container");
if (shareContainer !== null) {
shareContainer.innerHTML = html;
}
// Set up the social follow links
html = "";
for (let link of data.socialLinks) {
if (link.followUrl === undefined && link.visitUrl === undefined) { continue; }
if (link.requiresMoney) { continue; }
html += makeTile(link.followUrl || link.visitUrl, link.image, link.title, link.followCta);
}
const followContainer = document.getElementById("social-follow-container");
if (followContainer !== null) {
followContainer.innerHTML = html;
}
// Set up the contribution follow links
html = "";
for (let link of data.socialLinks) {
if (link.followUrl === undefined && link.visitUrl === undefined) { continue; }
if (!link.requiresMoney) { continue; }
html += makeTile(link.followUrl || link.visitUrl, link.image, link.title, link.followCta);
}
const moneyContainer = document.getElementById("social-money-container");
if (moneyContainer !== null) {
moneyContainer.innerHTML = html;
}
};
const share = function (url) {
// TODO: Log this in GA
const options = 'toolbar=0,status=0,resizable=1,width=626,height=436';
window.open(url, 'sharer', options);
return true;
};
const navigatorShare = function (url, title, message) {
if (!navigator.share) {
return false;
}
navigator.share({
url: url,
text: text,
title: title,
});
};
// Run the initialization and then publish any variables that need to be public.
return {
initializePage: initializePage,
share: share,
navigatorShare: navigatorShare,
};
}();
document.addEventListener("DOMContentLoaded", function(event) {
QUESTS.initializePage();
});
function initializePopups() {
// Try to open one after 5 seconds
window.setTimeout(attemptToShowPopup, 5000);
// Clicking on the bg should close it
document.querySelectorAll("dialog").forEach(e => {
e.addEventListener('click', () => closePopup(e));
});
}
function attemptToShowPopup() {
const timeout = 1000 * 60 * 60 * 6; // 6 hours
// Check if we've shown a popup recently
if (sessionStorage.lastInvite != null) {
let timeSinceLastShown = Date.now() - sessionStorage.lastInvite;
if (timeSinceLastShown < timeout) {
return;
}
}
// Try to show the popup
const e = document.querySelector(".dialog-invitation");
if (e === null || e.open) {
return;
}
e.showModal();
sessionStorage.lastInvite = Date.now();
}
function closePopup(e) {
e.classList.add("is-hidden");
e.addEventListener(
"animationend",
function () {
if (e.classList.contains("is-hidden")) {
e.classList.remove("is-hidden");
e.close();
}
},
false
);
}
document.addEventListener("DOMContentLoaded", function(event) {
initializePopups();
});
const secretCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
let currentIndex = 0;
// add keydown event listener
document.addEventListener('keydown', function (e) {
const requiredKey = secretCode[currentIndex];
if (e.key === requiredKey) {
currentIndex++;
// if the last key is reached, activate cheats
if (currentIndex === secretCode.length) {
activateCheats();
currentIndex = 0;
}
} else {
currentIndex = 0;
}
});
function activateCheats() {
console.log("CHEATS ACTIVATED!")
const dialog = document.createElement('dialog');
dialog.innerHTML = `<img class="dialog-image" src="/media/Travel.png"/>`;
document.body.appendChild(dialog);
// Clicking on the bg should close it
dialog.addEventListener('click', () => closePopup(dialog));
// Show it
dialog.showModal();
}
</script>
<style>
@font-face {
font-family: 'ComicFont';
src: url(/media/SwordsII.ttf);
}
:root {
--overflow-background: url(/media/KargobFaintTiles_HwQS7uA.png);
--content-background: #000000aa;
--primary-text-color: black;
--footer-background-color: #585039;
--tag-background-color: #585039;
--tag-text-color: black;
--spinner-image: url(/media/SwordSpin.png);
--navigation-spritesheet: url(/media/navigation_RWjzl9I.png);
--post-border-image: url(/media/default-container_tcG1OnG.png);
--tab-active-color: #978b65;
--tab-text-color: black;
--tab-inactive-color: #585039;
}
</style>
</head>
<body data-discourse-url="https://forum.swordscomic.com/">
<div class="content-background">
<header>
<div>
<a href="/comic/"><img alt="Logo" class="header-image" src="/media/SiteLogo_Tqugtzi.png"/></a>
</div>
<div class="header-link-container">
<a class="header-link" href="https://swordscomic.com/comic/">Comic</a>
<a class="header-link" href="https://swordscomic.com/archive/">Archive</a>
<a class="header-link" href="https://swordscomic.com/archive/Characters/">Characters</a>
<a class="header-link" href="https://swordscomic.com/community/">Community</a>
<a class="header-link" href="https://swordscomic.com/comic/feed/">RSS</a>
</div>
<div class="ad-mobile-leaderboard">
</div>
</header>
<div class="content">
<img class="comic-image" src="/media/404Tv2.png"/>
</div>
<footer>
<div class="footer-subsection">
<p>Swords © 2018-2025 Matthew Wills</p>
<p>Comics Platform © 2018-2025 Thane Brimhall. <a href="https://github.com/pennomi/comics">Fork us on GitHub!</a></p>
</div>
</footer>
</div>
</body>
</html>