commit ad7ce7de156869a32bcd0d4834a9eb5cb521804b
parent ac6b0e99a93bb4f3634265b517033bb90e3d81f4
Author: therealFIGBERT <figbertwelner@gmail.com>
Date: Wed, 25 Mar 2020 20:36:31 -0700
:lipstick: Rework phone positioning to fix overlap on small displays
Diffstat:
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/App.svelte b/src/App.svelte
@@ -25,21 +25,21 @@
</script>
<main>
- <div class="bg-no-repeat bg-bottom md:bg-right-bottom bg-bottomcuttof md:bg-rightside bg-fixed {backgroundColor} h-screen w-screen pl-5 sm:pl-6 md:pl-8 lg:pl-10 overflow-hidden" style="background-image: url({phoneImg});">
+ <div class="{backgroundColor} h-screen w-screen pl-5 sm:pl-6 md:pl-8 lg:pl-10 overflow-hidden">
<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="mt-16 pb-16">
- <h2 class="{textColor} antialiased font-sans font-light tracking-wider text-xs sm:text-sm md:text-base lg:text-lg"><span class="font-bold">txtodo</span> is a simple, minimalist open-source todo app<br/>made by <a href="https://figbert.com/" class="{linkColor}">FIGBERT</a> and inspired by <a href="https://jeffhuang.com/productivity_text_file/" class="{linkColor}">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">It manages immediate, short-term tasks<br/>to help you get things done without overthinking them.<br/>Plus, it's entirely open source, and built with SwiftUI.</h3>
- <div class="mt-16 w-2/3 sm:w-1/2 md:w-2/5 lg:w-1/3 flex justify-around">
- <DownloadIcon isDarkMode={isDarkMode} srcPair={["./apple-dark.svg", "./apple-light.svg"]} alt="Apple logo" label="Download from the App Store" link="https://apple.com/"/>
- <DownloadIcon isDarkMode={isDarkMode} srcPair={["./github-dark.svg", "./github-light.svg"]} alt="Github logo" label="View the repo" link="https://github.com/therealFIGBERT/txtodo"/>
+ <div class="flex flex-col lg:flex-row justify-between">
+ <div class="mt-16 pb-16 w-full sm:w-7/12 md:w-1/2 lg:w-1/3">
+ <h2 class="{textColor} antialiased font-sans font-light tracking-wider text-xs sm:text-sm md:text-base lg:text-lg"><span class="font-bold">txtodo</span> is a simple, minimalist open-source todo app made by <a href="https://figbert.com/" class="{linkColor}">FIGBERT</a> and inspired by <a href="https://jeffhuang.com/productivity_text_file/" class="{linkColor}">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">It manages immediate, short-term tasks<br/>to help you get things done without overthinking them. Plus, it's entirely open source, and built with SwiftUI.</h3>
+ <div class="mt-8"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./apple-dark.svg", "./apple-light.svg"]} alt="Apple logo" label="Download from the App Store" link="https://apple.com/"/></div>
+ <div class="mt-4"><DownloadIcon isDarkMode={isDarkMode} srcPair={["./github-dark.svg", "./github-light.svg"]} alt="Github logo" label="View the repo" link="https://github.com/therealFIGBERT/txtodo"/></div>
</div>
+ <img src={phoneImg} alt="txtodo on an iPhone" class="h-auto lg:h-full w-full md:w-2/3 lg:w-auto object-cover mr-0 lg:mr-4"/>
</div>
-
</div>
</main>
\ No newline at end of file
