commit fabda6e6c3a9a0c143ed4e514569f4247bd18ec1
parent 1cf2a3002cb9e4543f32c86699a4e724d78f9bab
Author: therealFIGBERT <figbert@figbert.com>
Date: Thu, 11 Jun 2020 13:44:24 -0700
:sparkles: Update website for txtodo v2.0 and MacOS release
Diffstat:
11 files changed, 109 insertions(+), 58 deletions(-)
diff --git a/public/app-dark.png b/public/app-dark.png
Binary files differ.
diff --git a/public/app-light.png b/public/app-light.png
Binary files differ.
diff --git a/public/iphone-dark.png b/public/iphone-dark.png
Binary files differ.
diff --git a/public/iphone-light.png b/public/iphone-light.png
Binary files differ.
diff --git a/public/moon.svg b/public/moon.svg
@@ -1 +0,0 @@
-<svg width="24" height="24" fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" xmlns="http://www.w3.org/2000/svg"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
-\ No newline at end of file
diff --git a/public/multidevice-dark.png b/public/multidevice-dark.png
Binary files differ.
diff --git a/public/multidevice-light.png b/public/multidevice-light.png
Binary files differ.
diff --git a/public/sun.svg b/public/sun.svg
@@ -1 +0,0 @@
-<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
-\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,61 +1,56 @@
<script>
import DownloadIcon from "./DownloadIcon.svelte";
- let backgroundColor, textColor, linkColor, appearenceImg, appearenceAlt, phoneImg, borderColor;
+ let phoneImg, multideviceImg;
let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
$: if (isDarkMode) {
- backgroundColor = "bg-background-dark";
- textColor = "text-white";
- linkColor = "text-link-dark";
- appearenceImg = "./moon.svg";
- appearenceAlt = "switch to light mode";
- phoneImg = "app-dark.png";
- borderColor = "border-gray-800";
+ phoneImg = "iphone-dark.png";
+ multideviceImg = "multidevice-dark.png";
} else {
- backgroundColor = "bg-background-light";
- textColor = "text-black";
- linkColor = "text-link-light";
- appearenceImg = "./sun.svg";
- appearenceAlt = "switch to dark mode";
- phoneImg = "app-light.png";
- borderColor = "border-gray-400";
- }
-
- let toggleMode = () => {
- isDarkMode = !isDarkMode
+ phoneImg = "iphone-light.png";
+ multideviceImg = "multidevice-light.png"
}
</script>
-<main>
- <div class="{backgroundColor} min-h-screen w-screen pb-24">
- <div class="pl-5 sm:pl-6 md:pl-8 lg:pl-10">
- <header>
- <button class="float-right m-4" on:click={toggleMode}>
- <img src={appearenceImg} alt={appearenceAlt} class="w-5 sm:w-5 md:w-6 lg:w-8">
- </button>
- <h1 class="{textColor} antialiased font-sans font-hairline tracking-wider text-3xl sm:text-4xl md:text-5xl lg:text-6xl">txtodo</h1>
- </header>
- <div class="flex flex-col lg:flex-row items-center justify-between">
- <div class="mt-16 pb-16 w-7/12 md:w-1/2 lg:w-2/5">
- <h2 class="{textColor} antialiased font-sans font-light tracking-wider text-xs sm:text-sm md:text-base lg:text-lg text-center lg:text-left"><span class="font-bold">txtodo</span> is a minimalist open-source todo list app made by <a href="https://figbert.com/" class="{linkColor}" target="_blank" rel="noopener noreferrer">figbert</a> and inspired by <a href="https://jeffhuang.com/productivity_text_file/" class="{linkColor}" target="_blank" rel="noopener noreferrer">jeff huang.</a></h2>
- <h3 class="text-subtext antialiased font-sans font-light tracking-wider text-xs sm:text-sm md:text-base lg:text-lg text-center lg:text-left">it lists short-term tasks to help you get things done without overthinking it. plus, it's lightweight, open-source, and built with swiftui.</h3>
- <p class="text-subtext antialiased font-sans font-light tracking-wider text-xs mt-8 text-center lg:text-left">txtodo does not track you: it is entirely offline. the only app analytics i receive are provided by the app store. this site uses <a href="https://www.goatcounter.com/" class="text-blue-700">goatcounter</a> for anonymous analytics.</p>
- <div class="mt-8 flex flex-col lg:flex-row items-center lg:items-start">
- <div class="inline-block align-middle mb-3 lg:mb-0 lg:mr-2"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./apple-dark.svg", "./apple-light.svg"]} alt="apple logo" label="download from the app store" link="https://apps.apple.com/us/app/txtodo/id1504609185"/></div>
- <div class="inline-block align-middle"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./github-dark.svg", "./github-light.svg"]} alt="Github logo" label="view the code" link="https://github.com/therealFIGBERT/txtodo"/></div>
- </div>
- </div>
- <img src={phoneImg} alt="txtodo on an iPhone" class="h-auto w-64 object-cover mr-0 lg:mr-32 lg:transform" style="--transform-rotate: 8deg;"/>
- </div>
- </div>
- <div class="mt-16 p-5 border-2 {borderColor} rounded shadow-2xl {textColor} font-thin text-left mx-auto max-w-md md:max-w-lg lg:max-w-xl transform" style="--transform-rotate: -2deg;">
- <div class="text-xs sm:text-sm md:text-base lg:text-lg">
- <p class="opacity-50 {textColor} mb-2">hello,</p>
- <p class="mb-2">i'm <a href="https://figbert.com/" class="{linkColor}" target="_blank" rel="noopener noreferrer">figbert</a> – the developer of txtodo. it's nice to meet you!</p>
- <p class="mb-2">txtodo is built to remedy the problems i've found with the task managers of today – namely, the overwhelming buildup of tasks that we procrastinate, delay, and postpone. the longer the tasks sit in our todo, the less likely they are to be completed.</p>
- <p class="mb-2">with txtodo, this problem is gone – because those delayed tasks are too. it lists short-term tasks to help you get things done, and anything unfinished at the end of the day is discarded so you can start fresh tomorrow.</p>
- <p class="mb-2">feel free to reach out to me with feedback, appreciation, or just to chat at <a href="mailto:txtodo@figbert.com" class="{linkColor}" rel="noopener noreferrer">txtodo@figbert.com</a>.</p>
- </div>
+<header>
+ <section class="bg-black text-white text-center py-1 text-xs lg:text-lg">txtodo v2.0 out now!</section>
+ <h1 class="pl-5 lg:pl-10 font-hairline text-3xl lg:text-6xl">txtodo</h1>
+</header>
+<main class="w-full sm:w-1/2 lg:w-full mx-0 sm:mx-auto lg:mx-0 grid grid-cols-1 lg:grid-cols-2 grid-rows-4 lg:grid-rows-2 gap-6">
+ <section id="ios">
+ <h2 class="text-xs lg:text-lg text-center lg:text-left">
+ <span class="font-bold">txtodo</span> is a minimalist open-source todo list app made by
+ <a href="https://figbert.com/" target="_blank" rel="noopener noreferrer">figbert</a>
+ and inspired by
+ <a href="https://jeffhuang.com/productivity_text_file/" target="_blank" rel="noopener noreferrer">jeff huang.</a>
+ </h2>
+ <h3 class="text-xs lg:text-lg text-center lg:text-left">
+ it lists short-term tasks to help you get things done without overthinking it. plus, it's lightweight, open-source, and built with swiftui.
+ </h3>
+ <div class="mt-8 flex flex-col lg:flex-row items-center lg:items-start">
+ <div class="inline-block align-middle mb-3 lg:mb-0 lg:mr-2"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./apple-dark.svg", "./apple-light.svg"]} alt="apple logo" label="download the ios app" link="https://apps.apple.com/us/app/txtodo/id1504609185"/></div>
+ <div class="inline-block align-middle mb-3 lg:mb-0 lg:mr-2"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./apple-dark.svg", "./apple-light.svg"]} alt="apple logo" label="download the macos app" link="https://apps.apple.com/us/app/txtodo-companion/id1517267304"/></div>
+ <div class="inline-block align-middle"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./github-dark.svg", "./github-light.svg"]} alt="github logo" label="view my code" link="https://github.com/therealFIGBERT/txtodo"/></div>
</div>
+ </section>
+ <img src={phoneImg} alt="txtodo running on an iPhone" class="h-auto w-full sm:w-2/3"/>
+ <img id="two-img" src={multideviceImg} alt="txtodo running on an iPhone, iPad, and Macbook"/>
+ <section id="mac two-text">
+ <h2 class="text-xs lg:text-lg text-center lg:text-left">
+ txtodo v2.0 brings your tasks to the cloud! now you can install txtodo on your phone and computer for a seamless cross-platform experience.
+ </h2>
+ <h3 class="text-xs lg:text-lg text-center lg:text-left">
+ your tasks are secured with icloud end-to-end encryption, so your todo stays just that: yours.
+ </h3>
+ </section>
+</main>
+<section id="note" class="mt-16 mb-12 lg:mb-24 p-5 border-2 rounded shadow-2xl text-left mx-auto max-w-md lg:max-w-xl transform">
+ <div class="text-xs lg:text-lg">
+ <p class="opacity-50">hello,</p>
+ <p>i'm <a href="https://figbert.com/" target="_blank" rel="noopener noreferrer">figbert</a> – the developer of txtodo. it's nice to meet you!</p>
+ <p>txtodo is built to remedy the problems i've found with the task managers of today – namely, the overwhelming buildup of tasks that we procrastinate, delay, and postpone. the longer the tasks sit in our todo, the less likely they are to be completed.</p>
+ <p>with txtodo, this problem is gone – because those delayed tasks are too. it lists short-term tasks to help you get things done, and anything unfinished at the end of the day is discarded so you can start fresh tomorrow.</p>
+ <p>feel free to reach out to me with feedback, appreciation, or just to chat at <a href="mailto:txtodo@figbert.com" rel="noopener noreferrer">txtodo@figbert.com</a>.</p>
</div>
-</main>
-\ No newline at end of file
+</section>
+<footer id="privacy" class="mb-2 text-center" style="color: var(--subtext-color); font-size: .5rem;">txtodo does not track you. the only app analytics i receive are automatically provided by the app store. this site uses <a href="https://www.goatcounter.com/">goatcounter</a> for anonymous analytics.</footer>
diff --git a/src/DownloadIcon.svelte b/src/DownloadIcon.svelte
@@ -8,5 +8,5 @@
<a href={link} class="w-32 h-10 rounded-lg border border-{isDarkMode ? "2" : "4"} border-{isDarkMode ? "white" : "black"} border-solid flex items-center" target="_blank" rel="noopener noreferrer">
<img src={isDarkMode ? srcPair[0] : srcPair[1]} alt={alt} class="w-5 my-1 mx-2"/>
- <p class="{isDarkMode ? "text-white" : "text-dark"} text-xs leading-snug">{label}</p>
-</a>
-\ No newline at end of file
+ <p class="text-xs leading-snug" style="color: var(--text-color);">{label}</p>
+</a>
diff --git a/src/main.css b/src/main.css
@@ -1,3 +1,65 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
+
+:root {
+ --text-color: #1C1C1E;
+ --subtext-color: #8E8E93;
+ --link-color: #007AFF;
+ --bg-color-main: #F2F2F7;
+ --border-color: #CBD5E0;
+}
+
+body {
+ color: var(--text-color);
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-weight: 300;
+ letter-spacing: 0.05em;
+ background-color: var(--bg-color-main);
+ min-height: 100vh;
+ width: 100vw;
+ overflow-x: hidden;
+}
+
+a {
+ color: var(--link-color);
+}
+
+h3 {
+ color: var(--subtext-color);
+}
+
+main > * {
+ place-self: center;
+ padding: 0 4rem;
+}
+
+#note {
+ border-color: var(--border-color);
+ --transform-rotate: -2deg;
+}
+
+#note p {
+ margin-bottom: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text-color: #F2F2F7;
+ --link-color: #0A84FF;
+ --bg-color-main: #1C1C1E;
+ --border-color: #2D3748;
+ }
+}
+
+@media (max-width: 1024px) {
+ #two-img {
+ grid-row-start: 4;
+ }
+ #two-text {
+ grid-row-start: 3;
+ }
+ main > * {
+ padding: 0 .5rem;
+ }
+}
