diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 361a7a569..7c356e9b6 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -7,7 +7,7 @@ } h1, h2, h3, h4, h5, h6, ol, ul, thead { - font-family: Inter; + font-family: Poppins; color: var(--dark); font-weight: revert; margin: revert; @@ -228,7 +228,7 @@ a { color: var(--secondary); &:hover { - color: var(--tertiary) !important; + color: var(--secondary-active) !important; } } @@ -292,6 +292,16 @@ hr { } .singlePage { + + .index-container { + width: 160%; + margin-left: -30%; + @media all and (max-width: 1200px) { + width: 100%; + margin-left: 0; + } + padding: 0 16px; + } padding: 4em 25vw; @media all and (max-width: 1200px) { diff --git a/assets/styles/custom.scss b/assets/styles/custom.scss index 612b80a61..84a6a118d 100644 --- a/assets/styles/custom.scss +++ b/assets/styles/custom.scss @@ -2,7 +2,7 @@ :root { --light: #faf8f8; --dark: #141021; - --secondary: #284b63; + // --secondary: #284b63; --tertiary: #84a59d; --visited: #afbfc9; --primary: #f28482; @@ -14,11 +14,13 @@ [saved-theme="dark"] { --light: #1e1e21 !important; --dark: #fbfffe !important; - --secondary: #6b879a !important; + // --secondary: #6b879a !important; + --secondary: #06b6d4 !important; + --secondary-active: #00c7eb; --visited: #4a575e !important; --tertiary: #84a59d !important; --primary: #f58382 !important; --gray: #d4d4d4 !important; --lightgray: #292633 !important; --outlinegray: #343434 !important; -} \ No newline at end of file +} diff --git a/assets/styles/index.scss b/assets/styles/index.scss new file mode 100644 index 000000000..ca6f3ea93 --- /dev/null +++ b/assets/styles/index.scss @@ -0,0 +1,99 @@ +.index-container { + margin-top: 64px; + display: flex; + flex-direction: column; + padding-top: 32px; +} +.hero { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 24px; + &-title { + text-align: center; + font-size: 48px; + font-weight: 600; + margin: 4px 4px; + } + &-subtitle { + text-align: center; + font-size: 32px; + font-weight: 600; + margin: 4px 4px; + } + &-text { + text-align: center; + font-size: 20px; + font-weight: 600; + margin: 4px 4px; + } +} + +.embed { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 8px; + gap: 32px; + } + +.feature { + + display: flex; + flex-direction: column; + + &-container { + display: flex; + flex-direction: column; + gap: 64px; + @media all and (max-width: 780px) { + gap: 32px; + } + } + + &-title { + font-size: 48px; + font-weight: 600; + margin: 12px 4px; + @media all and (max-width: 780px) { + font-size: 32px; + } + } + + &-subtitle { + font-size: 30px; + font-weight: 600; + margin: 4px 4px; + @media all and (max-width: 780px) { + font-size: 20px; + } + } + + &-image { + height: inherit; + object-fit: cover; + } + + &-list { + li { + color: white; + font-size: 20px; + font-weight: 600; + margin: 4px 4px; + @media all and (max-width: 780px) { + font-size: 16px; + } + } + } + + &-big { + //flex grow ratio 1:2 + flex-grow: 2; + } + &-small { + //flex grow ratio 1:2 + flex-grow: 1; + } +} \ No newline at end of file diff --git a/assets/styles/pricing.scss b/assets/styles/pricing.scss index 063c0ce47..a51cbd5a9 100644 --- a/assets/styles/pricing.scss +++ b/assets/styles/pricing.scss @@ -1,65 +1,159 @@ +$base-color: rgb(20, 20, 20); +$base-color-light: rgb(104, 104, 104); +$primary-color: rgb(40, 75, 98); +$secondary-color: var(--secondary); +$secondary-color-active: var(--secondary-active); + * { - box-sizing: border-box; - } - - /* Create three columns of equal width */ - .pricing-columns { - float: left; - width: 50%; - padding: 8px; - } - - /* Style the list */ - .price { - list-style-type: none; - border: 1px solid #eee; - margin: 0; - padding: 0; - -webkit-transition: 0.3s; - transition: 0.3s; - } - - /* Add shadows on hover */ - .price:hover { - box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) - } - - /* Pricing header */ - .price .header { - background-color: #111; - color: white; - font-size: 25px; - } - - /* List items */ - .price li { - border-bottom: 1px solid #eee; - padding: 20px; + box-sizing: border-box; +} + +.plan-page { + display: flex; + flex-direction: column; + align-items: center; + &-text { text-align: center; + margin: 4px 0; } - - /* Grey list item */ - .price .grey { - background-color: #eee; +} + +.plan-title { + font-size: 48px; + font-weight: 600; + margin: 4px 4px; +} + +/* Style the list */ +.plan-list { + margin: 0; + padding: 0; + -webkit-transition: 0.3s; + transition: 0.3s; +} + +.plan-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + gap: 40px; + //flex-direction colunn for mobile + @media (max-width: 600px) { + flex-direction: column; + gap: 20px; + } +} + +/* Pricing header */ +.plan { + height: 560px; + width: 400px; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 24px; + padding: 0 0 40px 0; + gap: 32px; + margin-top: 32px; + background-color: $base-color; + transition: filter 0.5s; + + &-header { + width: 100%; + border-radius: 24px 24px 0px 0px; + background-color: $primary-color; + display: flex; + flex-direction: column; + align-items: center; + // border-bottom: solid white; + // border-width: 4px; + } + &-label { + margin-bottom: 0px; + color: white; + filter: drop-shadow(0 0 2px black); + font-size: 28px; + } + &-price { font-size: 20px; - color: black; - } - - /* The "Sign Up" button */ - .button { - background-color: #284b63; - border: none; color: white; - padding: 10px 25px; - text-align: center; - text-decoration: none; - font-size: 18px; + filter: drop-shadow(0 0 2px black); + } + + &-body { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 16px; + width: 100%; + padding: 0 24px; + } + + &-list { + width: 100%; + background-color: $base-color; + display: flex; + list-style-type: none; + flex-direction: column; + gap: 12px; + font-size: 1em; + li { + margin: 0px 24px; + } + li:before { + content: "\2713"; + display: inline-block; + color: green; + padding: 0 6px 0 0; + } } - /* Change the width of the three columns to 100% + &:hover { + + filter: drop-shadow(0 0 8px black); + } +} + + +/* Grey list item */ +.price .grey { + font-size: 20px; +} + +/* The "Sign Up" button */ +.button { + background-color: #284b63; + border-radius: 8px; + color: white; + padding: 10px 25px; + text-align: center; + text-decoration: none; + font-size: 18px; + &:hover{ + background-color: #356483; + color: white !important; + } +} + +/* Change the width of the three columns to 100% (to stack horizontally on small screens) */ - @media only screen and (max-width: 600px) { - .pricing-columns { - width: 100%; +@media only screen and (max-width: 600px) { + .pricing-columns { + width: 100%; + } +} + +.premium { + background-color: $secondary-color; + &-btn { + background-color: $secondary-color; + &:hover{ + background-color: $secondary-color-active; + color: white !important; } - } \ No newline at end of file + } +} diff --git a/content/_index.md b/content/_index.md index 7574fcf88..f0e5f6b5e 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,41 +2,126 @@ id: home title: Home --- -
-
-

Quick Notes aren't "[[posts/put-quick-notes-into-obsidian-from-anywhere|quick]]" in Obsidian

-

Take speedy notes in a browser extension, a mobile app, or a web app and [[posts/sync-fleeting-notes-with-obsidian|sync the notes with Obsidian]].

-
- Try it free -
-
-
- {{< youtube iXLyEvTZp9I >}} + +
+
+

Quick Notes Aren't "[[posts/put-quick-notes-into-obsidian-from-anywhere|Quick]]" Enough in Obsidian

+

Take [[posts/writing-connected-and-personalized-blogs/|linked]] and speedy notes in a browser extension, a mobile app, or a web app and [[posts/sync-fleeting-notes-with-obsidian|sync the notes with Obsidian]].

+

How speedy? Try it yourself:

+
+
+ + + +
+
+
+
+
+
+
+
+

Capture Ideas Anytime, Anywhere

+

Create and sync your fleeting notes on different platforms:

+ +
+
+ +
+
+
+
+
+
+ +
+
+

Keep track of any source

+

From links to images to files

+
    +
  • Cloud hosting for attachments
    • +
  • Take notes side by side
    • +
  • Automatically [[posts/best-in-browser-note-taking-and-web-clipping-app-for-obsidian|include URLs]] upon note creation
    • +
  • Include [[posts/best-way-to-take-youtube-notes-for-obsidian|YouTube timestamps]] when watching on the web
    • +
+
+
+
+
+
+
+

Made for Obsidian MD

+

Use the [[posts/sync-fleeting-notes-with-obsidian|Fleeting Notes plugin]] to sync and process notes

+
    +
  • [[notes/How to copy Obsidian links to Fleeting Notes|Import your wikilinks]] and start connecting your notes
    • +
  • Choose your syncing type (delete after sync, two-way)
    • +
  • Run commmands to show unprocessed or same-source notes
    • +
  • Customize your own import note template with metadata
    • +
+
+
+ {{< youtube iXLyEvTZp9I >}} +
+
+
+
+
+
+ +
+
+

Control Your Notes

+

We value your privacy and security :)

+
    +
  • [[/posts/end-to-end-encryption-in-fleeting-notes|Enable end-to-end encryption]]
    • +
  • 100% of your notes are stored locally with optional sync
    • +
  • [[posts/shared-connected-notes|Share links]] to your notes with anyone
    • +
  • Export all notes into Markdown or JSON
    • +
+
+
+
+
+
+ +
+

What our users say:

+ + +
-## Features: -### Quick capture. Anywhere. -Capture notes anywhere with an array of supported platforms and built-in sync between all platforms. -- Chrome & Firefox extension -- Android & iOS app -- Web app -- Desktop app (coming soon) -- Safari extension (coming soon) - -### Full control of your notes -Keep a backup of your notes or sync with other note-taking applications -- 100% of your notes are stored locally with optional sync -- [[posts/end-to-end-encryption-in-fleeting-notes|Support for end-to-end encryption]] -- [[posts/sync-fleeting-notes-with-obsidian|Sync notes with Obsidian]] -- Export all notes in Markdown or JSON - -### Find notes easily -The combination of full-text search and linking makes it easy to find any note. Either search for the note or [[notes/following a train of thought|follow a trail of linked notes]]. -- Links and backlinks -- Full-text search -- History of traversed notes - -## Questions? Contact Me. -- Email me at: ithinkwong@gmail.com -- Join the [discord channel](https://discord.gg/xrj6yuGNmx) \ No newline at end of file +
+

Got any questions? We're here to help.

+

Email us at fleetingnotesapp@gmail.com

+

Join the Discord channel to get in touch with the team and other users.

diff --git a/content/pricing.md b/content/pricing.md index 35a274276..0c3c24bee 100644 --- a/content/pricing.md +++ b/content/pricing.md @@ -1,6 +1,3 @@ --- -title: Pricing --- -Fleeting Notes will always be **100% free offline**. If you're interested in accessing insider builds, [donating](https://ko-fi.com/fleetingnotes) will give you access to those. - {{< pricing-tables >}} \ No newline at end of file diff --git a/content/svg/links.svg b/content/svg/links.svg new file mode 100644 index 000000000..f25bab5f1 --- /dev/null +++ b/content/svg/links.svg @@ -0,0 +1 @@ +link \ No newline at end of file diff --git a/content/svg/secure_file.svg b/content/svg/secure_file.svg new file mode 100644 index 000000000..f3e214555 --- /dev/null +++ b/content/svg/secure_file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/svg/sync.svg b/content/svg/sync.svg new file mode 100644 index 000000000..e6278f605 --- /dev/null +++ b/content/svg/sync.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/config.yaml b/data/config.yaml index 942ff13ab..ad40a77c2 100644 --- a/data/config.yaml +++ b/data/config.yaml @@ -1,5 +1,5 @@ name: Matthew Wong -enableToc: true +enableToc: false openToc: false enableLinkPreview: true enableLatex: true diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 3268c8d80..85923d165 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -9,9 +9,9 @@ {{partial "header.html" .}}
{{if .Title}}

{{ .Title }}

{{end}} -

+

    {{ range (.GetTerms "tags") }}
  • {{ .LinkTitle | humanize }}
    • diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d274190a2..833e40763 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -28,6 +28,9 @@ + + + {{$sass := resources.Match "styles/[!_]*.scss" }} {{$css := slice }} diff --git a/layouts/shortcodes/pricing-tables.html b/layouts/shortcodes/pricing-tables.html index 6fa48a2e5..b8883ecce 100644 --- a/layouts/shortcodes/pricing-tables.html +++ b/layouts/shortcodes/pricing-tables.html @@ -1,25 +1,74 @@ -
    -
    -
      -
    • Free
      • -
    • $ 0 / month

      Get started
      • -
    • Unlimited Notes
      • -
    • Only 1 device logged in at a time
      • -
    • End-to-end encryption
      • -
    • 10 GB attachment upload limit
      • -
    • Blazing fast full-text search
      • -
    • Access to Chrome / Firefox Extension, iOS, Android & Web App
      • -
    • Access to plugin for Obsidian MD sync
      • +
      +

      Pricing

      +
      +

      + Fleeting Notes will always be 100% free offline. +

      +

      + If you're interested in accessing insider builds, + donating will give you + access to those. +

      +
      + +
      +
      +
      +

      Free

      +

      $0/month

      +
      +
      +
        +
      • Unlimited Notes
        • +
      • Only 1 device logged in at a time
        • +
      • + End-to-end encryption +
        • +
      • 10 GB attachment upload limit
        • +
      • Blazing fast full-text search
        • +
      • Browser Extension (Chrome, Firefox)
        • +
      • Android & iOS App
        • +
      • + Access to + plugin + for Obsidian MD sync +
      + Get started +
      -
      -
      \ No newline at end of file +
      +