Verified Commit d865654b authored by Geoff Pado's avatar Geoff Pado

Create basic new homepage

parent 67e110cd
---
---
<div class="hero-container">
<div class="text-container">
<h1>Scrawl Notes</h1>
<h2>The digital version of writing on your hands</h2>
<p>Scrawl is an app you throw text into. Big ol' sack of text. It's useful for keeping track of stuff you want to remember now, but not, like, forever. Scrawl’s simple one-note (no relation) interface keeps things uncomplicated, and once you've entered something into Scrawl, it's available all kinds of places.</p>
<div class="store-container">
<a href="https://itunes.apple.com/us/app/scrawl/id1229326968?mt=8&at=11lrHm"><img srcset="/images/app-store.png, /images/app-store@2x.png 2x, /images/app-store@3x.png 3x" src="/images/app-store.png" alt="Download on the App Store"/></a>
<a href="https://geo.itunes.apple.com/us/app/scrawl/id1249895598?mt=12&at=11lrHm"><img srcset="/images/mac-app-store.png, /images/mac-app-store@2x.png 2x, /images/mac-app-store@3x.png 3x" src="/images/mac-app-store.png" alt="Download on the Mac App Store"/></a>
</div>
</div>
<div class="image-container">
<img id="hero" src="/images/hero-placeholder.png" alt="Scrawl Notes displaying a bunch of text."/>
</div>
</div>
<hr>
<div class="feature-grid">
<section>
<div class="text-container">
<h3>On Lock</h3>
<p>The lock screen. It’s just the useless screen that scans your face and lets you turn on the flashlight, right? <strong>Wrong.</strong> Turns out, we can stick arbitrary text on it, too! Swipe right (😏) to access your notes, without unlocking your phone and dealing with the world at large.</p>
</div>
</section>
<section>
<div class="text-container">
<h3>Watch Out!</h3>
<p>Want even less space for your notes? Why not put them on your wrist? Scrawl for Apple Watch lets you strap arbitrary text to your arm all day long! You can even edit your notes on the go, if that’s the kind of thing you’re into.</p>
<p>Still too much space? Place extremely tiny bits of your notes directly on your watch face, so you can see them at a glance.</p>
</div>
</section>
<section>
<div class="text-container">
<h3>Immobile</h3>
<p>Turns out, some of us have jobs that require us to sit and stare at a computer all day. Why should that time be devoid of the ability to jot down small text snippets? Scrawl comes in a delicious macOS (and <strong>only</strong> macOS) flavor as well, for all your desktop data storage needs.</p>
</div>
</section>
<section>
<div class="text-container">
<h3>Talking to Yourself</h3>
<p>Are you an over-sharer? Have your favorite Apple-designed digital assistant read or add to your notes out loud. Works with AirPods (not great for sharing), your phone (reasonably okay for sharing), and even HomePod (<strong>great</strong> for sharing).</p>
</div>
</section>
</div>
<hr>
<section>
<div class="text-container">
<h3>The Hard Sell</h3>
<p>Scrawl isn't a complicated app. It's not even a particularly good app. It's just a place to put some text for a bit, and then look at it later. If that doesn't sell you on it, you probably don't want it. But if it <em>does</em> sell you on it: good news! It's free! I'm not even going to sell your information to pay for it! Act quick to take advantage of this unlimited-time offer!</p>
</div>
</section>
# An App to Forget
## Where to keep what you don’t want
### Store Text
Scrawl is an app you throw text into. Big ol' sack of text. It's useful for keeping track of stuff you want to remember now, but not, like, forever. Scrawl’s simple one-note (no relation) interface keeps things uncomplicated. Once you've dumped your meaningless content in Scrawl, it begins to show up in all kinds of weird places.
### Lock Screen
The lock screen. It’s just the useless screen that scans your face and lets you turn on the flashlight, right? **Wrong.** Turns out, we can stick pointless text on it, too! Swipe right (😏) to access your notes, without unlocking your phone and dealing with the world at large.
### Apple Watch
Want even less space for your notes? Why not put them on your wrist? Scrawl for Apple Watch lets you strap arbitrary text to your arm all day long! You can even edit your notes on the go, if that’s the kind of thing you’re into.
Still too much space? Place extremely tiny bits of your notes directly on your watch face, so you can see them at a glance.
### Mac
Speaking of meaningless, some of us have jobs that require us to sit and stare at a computer all day. Why should that time be devoid of the ability to jot down small text snippets? Scrawl comes in a delicious macOS (and **only** macOS) flavor as well, for all your desktop data storage needs.
### Siri
Are you an over-sharer? Have your favorite Apple-designed digital assistant read or add to your notes out loud. Works with AirPods (not great for sharing), your phone (reasonably okay for sharing), and even HomePod (**great** for sharing).
### Pitch
Scrawl isn't a complicated app. It's not even a particularly good app. It's just a place to put some text for a bit, and then look at it later. If that doesn't sell you on it, you probably don't want it. But if it _does_ sell you on it: good news! It's free! I'm not even going to sell your information to pay for it! Act quick to take advantage of this unlimited-time offer!
\ No newline at end of file
......@@ -2,25 +2,25 @@
title: Privacy Policy
---
## TL;DR
### TL;DR
Your data is **yours**, not mine. I don't want it. I can barely handle my own personal issues, let alone everyone else's.
Anyways, here's some more specific details:
## Logging
### Logging
If you visit the Scrawl Notes website (this website!) using a web browser, either a standalone browser or the one included inside the Scrawl Notes app, some metadata about that visit is logged temporarily. This may include: your IP address, some information about the browser making the request (such as OS, browser version, etc.), and the time and date of the request.
I basically never look at these logs, but they're useful for diagnosing issues, and can be used to watch for trends such as where new users are being referred from. These logs are deleted automatically after two weeks.
## Customer Support
### Customer Support
If you [e-mail me](mailto:hello@cocoatype.com), I have the contents of that e-mail and the address that it came from. That's… kinda how e-mail works. I generally keep these e-mails forever because it helps <s>root out the trouble-makers</s> identify problems that multiple customers have had, and so I can send updates if I make changes to Scrawl Notes based on your feedback. If you'd rather I not keep your e-mails, let me know in a follow-up e-mail. I'll delete them and try my best to forget you ever existed.
## Third Party Services
### Third Party Services
### Apple
#### Apple
Hopefully you've heard of these guys. [Apple's privacy policy](https://apple.com/privacy) details how Apple handles your data.
Apple and I share data in two ways:
......@@ -28,10 +28,10 @@ Apple and I share data in two ways:
- Apple may (depending on your iOS settings) collect some analytics about your use of Scrawl Notes and send anonymized bulk reports to me for identifying crashes, general usage trends, etc.
- If you use the iCloud Sync feature of Scrawl Notes (enabled by default), the text of your notes is stored on Apple's servers. I have no access to this data; I can't read it, I can't delete it, I can't even see whether a given user **has** notes stored in iCloud.
### Literally No One Else
#### Literally No One Else
Seriously. That's it.
## Other Information
### Other Information
This privacy policy might change over time. It was last updated on **September 8th, 2020**. A [full change history](https://git.pado.name/scrawl/notes/website/commits/deploy/content/privacy.md) is available if you're into that kind of thing.
......
.image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
margin: 24px 0px; }
img {
margin: auto;
background-size: 100%; }
@media screen and (max-width: 800px) {
img {
max-width: 100%; } }
.right {
text-align: right; }
#hero {
background-image: url("/images/hero.png");
background-image: image-set(url("/images/hero.png") 1x, url("/images/hero@2x.png") 2x, url("/images/hero@3x.png") 3x);
background-size: 100%; }
@media (prefers-color-scheme: dark) {
#hero {
background-image: url("/images/hero-dark.png");
background-image: image-set(url("/images/hero-dark.png") 1x, url("/images/hero-dark@2x.png") 2x, url("/images/hero-dark@3x.png") 3x); } }
.hero-container {
max-width: 1035px;
display: flex;
margin: auto; }
@media screen and (max-width: 800px) {
.hero-container {
flex-direction: column-reverse; } }
.text-container {
display: flex;
flex-direction: column;
justify-content: center; }
hr {
max-width: 400px;
margin: auto;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(255, 59, 48, 0.1), rgba(255, 59, 48, 0.3) 10%, rgba(255, 59, 48, 0.3) 90%, rgba(255, 59, 48, 0.1));
margin: 32px auto; }
@media (prefers-color-scheme: dark) {
hr {
background-image: linear-gradient(to right, rgba(255, 69, 58, 0.1), rgba(255, 69, 58, 0.3) 10%, rgba(255, 69, 58, 0.3) 90%, rgba(255, 69, 58, 0.1)); } }
.feature-grid {
display: grid;
max-width: 1035px;
margin: auto;
grid-template-columns: auto auto;
grid-auto-rows: 1fr;
grid-gap: 16px; }
.feature-grid section {
display: flex;
height: 100%; }
.feature-grid section .text-container {
justify-content: flex-start; }
@media screen and (max-width: 800px) {
.feature-grid {
grid-template-columns: auto;
grid-auto-rows: min-content; } }
section {
max-width: 1035px;
margin: auto; }
@font-face {
font-family: 'Lora';
src: url("/fonts/Lora-Regular.woff2") format("woff2"), url("/fonts/Lora-Regular.woff") format("woff");
font-family: 'Cabin';
src: url("/fonts/Cabin-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'Lora';
src: url("/fonts/Lora-Bold.woff2") format("woff2"), url("/fonts/Lora-Bold.woff") format("woff");
font-weight: bold;
font-family: 'Sniglet';
src: url("/fonts/Sniglet-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal; }
* {
font-family: 'Lora', serif;
font-family: 'Cabin';
line-height: 1.3em;
font-size: 18px;
font-weight: 400;
margin: 0;
color: #222; }
@media (prefers-color-scheme: dark) {
* {
color: #fafafa; } }
color: #f3f0f0; } }
::selection {
background: #ff3b30; }
@media (prefers-color-scheme: dark) {
::selection {
background: #ff453a; } }
h1 {
font-size: 2em; }
font-family: 'Sniglet';
font-size: 48px;
line-height: 48px;
margin-bottom: 6px; }
h2 {
font-size: 1.5em; }
color: #433737;
font-family: 'Sniglet';
font-size: 30px;
line-height: 36px;
margin-bottom: 20px; }
@media (prefers-color-scheme: dark) {
h2 {
color: #f3f0f0; } }
h3 {
margin-top: 16px;
margin-bottom: 6px;
font-size: 24px;
font-family: 'Sniglet';
color: #222; }
@media (prefers-color-scheme: dark) {
h3 {
color: #f3f0f0; } }
p {
margin-bottom: 16px; }
a {
color: #222; }
......@@ -30,14 +124,24 @@ a {
color: #222; }
@media (prefers-color-scheme: dark) {
a {
color: #fafafa; }
color: #f3f0f0; }
a:hover {
color: #fafafa; } }
color: #f3f0f0; } }
html {
background: #fafafa; }
background: #fbf9f9; }
@media (prefers-color-scheme: dark) {
html {
background: #222; } }
background: #120808; } }
body {
border-top: 6px solid #ff3b30; }
@media (prefers-color-scheme: dark) {
body {
border-top-color: #ff453a; } }
#content {
margin-bottom: 48px;
padding: 0px 8px; }
.post {
max-width: 600px;
margin: auto; }
margin: auto;
margin-top: 48px; }
$light-link-hover: #222;
$light-link: #222;
$light-text: #222;
$light-background: #fafafa;
$light-header: #1f1414;
$light-subheader: #433737;
$light-background: #fbf9f9;
$light-accent: #ff3b30;
$dark-link-hover: #fafafa;
$dark-link: #fafafa;
$dark-text: #fafafa;
$dark-background: #222;
\ No newline at end of file
$dark-link-hover: #f3f0f0;
$dark-link: #f3f0f0;
$dark-text: #f3f0f0;
$dark-header: #f3f0f0;
$dark-subheader: #f3f0f0;
$dark-background: #120808;
$dark-accent: #ff453a;
\ No newline at end of file
@import 'mixins';
.image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
margin: 24px 0px;
}
img {
margin: auto;
@include phone {
max-width: 100%;
}
background-size: 100%;
}
.right {
text-align: right;
}
#hero {
background-image: url("/images/hero.png");
background-image: image-set(url("/images/hero.png") 1x,url("/images/hero@2x.png") 2x,url("/images/hero@3x.png") 3x,);
background-size: 100%;
@include dark {
background-image: url("/images/hero-dark.png");
background-image: image-set(url("/images/hero-dark.png") 1x,url("/images/hero-dark@2x.png") 2x,url("/images/hero-dark@3x.png") 3x,);
}
}
.hero-container {
max-width: 1035px;
display: flex;
margin: auto;
@include phone {
flex-direction: column-reverse;
}
}
.text-container {
display: flex;
flex-direction: column;
justify-content: center;
}
@function hr-gradient($color) {
@return linear-gradient(to right, rgba($color, 0.1), rgba($color, 0.3) 10%, rgba($color, 0.3) 90%, rgba($color, 0.1));
}
hr {
max-width: 400px;
margin: auto;
border: 0;
height: 1px;
background-image: hr-gradient($light-accent);
margin: 32px auto;
@include dark {
background-image: hr-gradient($dark-accent);
}
}
.feature-grid {
display: grid;
max-width: 1035px;
margin: auto;
grid-template-columns: auto auto;
grid-auto-rows: 1fr;
grid-gap: 16px;
section {
display: flex;
height: 100%;
.text-container {
justify-content: flex-start;
}
}
@include phone {
grid-template-columns: auto;
grid-auto-rows: min-content;
}
}
section {
max-width: 1035px;
margin: auto;
}
\ No newline at end of file
......@@ -2,4 +2,10 @@
@media (prefers-color-scheme: dark) {
@content;
}
}
@mixin phone() {
@media screen and (max-width: 800px) {
@content;
}
}
\ No newline at end of file
@font-face {
font-family: 'Lora';
src: url('/fonts/Lora-Regular.woff2') format('woff2'),
url('/fonts/Lora-Regular.woff') format('woff');
font-family: 'Cabin';
src: url('/fonts/Cabin-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lora';
src: url('/fonts/Lora-Bold.woff2') format('woff2'),
url('/fonts/Lora-Bold.woff') format('woff');
font-weight: bold;
font-family: 'Sniglet';
src: url('/fonts/Sniglet-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'Lora', serif;
font-family: 'Cabin';
line-height: 1.3em;
font-size: 18px;
font-weight: 400;
margin: 0;
color: $light-text;
@include dark {
......@@ -25,8 +25,50 @@
}
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
::selection {
background: $light-accent;
@include dark { background: $dark-accent; }
}
h1 {
font-family: 'Sniglet';
font-size: 48px;
line-height: 48px;
// color: $light-header;
margin-bottom: 6px;
@include dark {
// color: $dark-header;
}
}
h2 {
color: $light-subheader;
font-family: 'Sniglet';
font-size: 30px;
line-height: 36px;
margin-bottom: 20px;
@include dark {
color: $dark-subheader;
}
}
h3 {
margin-top: 16px;
margin-bottom: 6px;
font-size: 24px;
font-family: 'Sniglet';
color: $light-text;
@include dark {
color: $dark-text;
}
}
p {
margin-bottom: 16px;
}
a {
color: $light-link;
......
@charset 'utf-8';
@import 'colors';
@import 'index';
@import 'mixins';
@import 'type';
......@@ -12,7 +13,21 @@ html {
}
}
body {
border-top: 6px solid $light-accent;
@include dark {
border-top-color: $dark-accent;
}
}
#content {
margin-bottom: 48px;
padding: 0px 8px;
}
.post {
max-width: 600px;
margin: auto;
margin-top: 48px;
}
\ No newline at end of file
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}
<footer>
<div id="footer-content">
<span class="copyright">© 2020 <a href="https://cocoatype.com" aria-label="cocoa type">Cocoatype</a></span>
<span class="links">
<a href="/">Home</a>
<a href="/press/">Press</a>
<a href="/privacy/">Privacy</a>
<a href="/releases/">Releases</a>
<a href="/support/">Support</a>
</span>
</div>
</footer>
Markdown is supported
0% or .
<