Make homepage paths absolute to /

This is so that we can load subpaths like /r/something and still
have all the stylesheets and things load. (Otherwise it was always
expecting them to be in the same directory as the current file).
This commit is contained in:
Badri 2022-02-20 15:48:59 +05:30
parent 7cca56eaca
commit 8820f58eeb

View file

@ -24,7 +24,7 @@
<meta property="twitter:image" content="https://fund.snipettemag.com/img/social-thumb.png">
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<!-- Fonts: Fanwood Text, Abhaya Libre, Didact Gothic -->
<link rel="preconnect" href="https://fonts.googleapis.com">
@ -36,7 +36,7 @@
Snipette Analog Fundraiser
</div>
<div class="bg-orange-600 text-center p-10">
<img alt="Snipette" class="text-5xl uppercase font-sans w-full max-w-3xl mx-auto" src="img/header.png"/>
<img alt="Snipette" class="text-5xl uppercase font-sans w-full max-w-3xl mx-auto" src="/img/header.png"/>
<p class="text-5xl text-black lowercase font-heading font-extrabold">Analog <span class="text-yellow-300">for Everyone</span></p>
</div>
@ -121,7 +121,7 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Who we are</h1>
<div class="flex flex-wrap text-xl font-sans">
<img alt="Snipette puppies" src="img/three-pups.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<img alt="Snipette puppies" src="/img/three-pups.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
We are a web and print magazine seeking to explain the world in an easy to understand way. We borrow techniques from fiction to make our non-fiction shine. <a href="https://www.snipettemag.com" target="_blank">Browse our library of 250+ articles here</a>!
</p>
@ -133,9 +133,9 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">What we do</h1>
<div class="flex flex-wrap flex-row md:flex-row-reverse text-xl font-sans">
<img alt="Puppy with a stack of magazines" src="img/stackpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<img alt="Puppy with a stack of magazines" src="/img/stackpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
In order to make our content more accessible, we have been bringing out a print version, Snipette Analog, which is a better medium for long-form articles. <a href="img/Analog-8-preview.pdf" target="_blank">Sample the latest issue here</a>.
In order to make our content more accessible, we have been bringing out a print version, Snipette Analog, which is a better medium for long-form articles. <a href="/img/Analog-8-preview.pdf" target="_blank">Sample the latest issue here</a>.
</p>
</div>
</div>
@ -145,7 +145,7 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Our problem</h1>
<div class="flex flex-wrap text-xl font-sans">
<img alt="People wanting money and money wanting people" src="img/catch-twenty-two.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<img alt="People wanting money and money wanting people" src="/img/catch-twenty-two.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
Digital printing is expensive. Offset printing is more cost-effective, but it only works at scale—1000 copies or more. So we can't bring down costs till we got more subscribers, but we won't get more subscribers till we bring down costs. <a href="https://en.wiktionary.org/wiki/Catch-22" target="_blank">Catch-22</a>.
</p>
@ -157,7 +157,7 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Your Solution</h1>
<div class="flex flex-wrap flex-row md:flex-row-reverse text-xl font-sans">
<img alt="Puppies catching subscribers and money in a safety net" src="img/sheetpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<img alt="Puppies catching subscribers and money in a safety net" src="/img/sheetpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
Here's your chance to pledge to pay the lower rate for our print version. Your donation of ₹500 or more will get you a full years' worth of Snipette, and make it cost-effective for everybody else as well—a win-win situation all round.
</p>
@ -177,7 +177,7 @@
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 src="img/pledgeperson.png"/>
<img width=640 height=480 src="/img/pledgeperson.png"/>
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>You make your pledge, saying how much you're willing to donate to us (or "subscribe", if that's how you prefer to think about it)</p>
@ -190,7 +190,7 @@
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 src="img/phonepup.png"/>
<img width=640 height=480 src="/img/phonepup.png"/>
</div>
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
<p>Once we've collected enough pledges to start operations, we'll reach out to you to make the payment (so be sure to provide us with valid contact details!)</p>
@ -203,7 +203,7 @@
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 src="img/coinpup.png"/>
<img width=640 height=480 src="/img/coinpup.png"/>
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>You can make your payment through Internet Banking, card, UPI, cheque, or any other preferred method</p>
@ -216,7 +216,7 @@
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 src="img/presspup.png"/>
<img width=640 height=480 src="/img/presspup.png"/>
</div>
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
<p>When all the payments have come in, we will be ready to start printing! The first print run will happen 3-6 months after we reach our goal, and every 3 months from then onwards</p>
@ -404,7 +404,7 @@
<details>
<summary class="text-xl hover:cursor-pointer">What's actually inside Snipette Analog?</summary>
<p class="p-5">You will be getting four copies of Snipette Analog, which will collectively contain all the articles that we publish in a year (you can see a sample copy <a href="img/Analog-8-preview.pdf" target="_blank">here</a>). Apart from this, you will also get the perks listed under your chosen tier—details on those are yet to be worked out and we will update you about them once we begin operations.</p>
<p class="p-5">You will be getting four copies of Snipette Analog, which will collectively contain all the articles that we publish in a year (you can see a sample copy <a href="/img/Analog-8-preview.pdf" target="_blank">here</a>). Apart from this, you will also get the perks listed under your chosen tier—details on those are yet to be worked out and we will update you about them once we begin operations.</p>
</details>
<details>