mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-27 14:54:05 -06:00
💄 in progress in case my pc trolls
This commit is contained in:
ransurf
Matthew Wong
parent
a3ebdf89fb
commit
936f43dbe4
@ -292,6 +292,16 @@ hr {
|
||||
}
|
||||
|
||||
.singlePage {
|
||||
|
||||
.index-container {
|
||||
width: 120%;
|
||||
margin-left: -10%;
|
||||
@media all and (max-width: 1200px) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
padding: 0 16px;
|
||||
}
|
||||
padding: 4em 25vw;
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
:root {
|
||||
--light: #faf8f8;
|
||||
--dark: #141021;
|
||||
--secondary: #284b63;
|
||||
// --secondary: #284b63;
|
||||
--tertiary: #84a59d;
|
||||
--visited: #afbfc9;
|
||||
--primary: #f28482;
|
||||
@ -14,7 +14,8 @@
|
||||
[saved-theme="dark"] {
|
||||
--light: #1e1e21 !important;
|
||||
--dark: #fbfffe !important;
|
||||
--secondary: #6b879a !important;
|
||||
// --secondary: #6b879a !important;
|
||||
--secondary: #06b6d4 !important;
|
||||
--visited: #4a575e !important;
|
||||
--tertiary: #84a59d !important;
|
||||
--primary: #f58382 !important;
|
||||
|
||||
67
assets/styles/index.scss
Normal file
67
assets/styles/index.scss
Normal file
@ -0,0 +1,67 @@
|
||||
.index-container {
|
||||
margin-top: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 32px;
|
||||
&-title {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
margin: 4px 4px;
|
||||
}
|
||||
}
|
||||
.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: 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;
|
||||
|
||||
&-title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin: 12px 4px;
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 4px 4px;
|
||||
}
|
||||
|
||||
&-big {
|
||||
//flex grow ratio 1:2
|
||||
flex-grow: 2;
|
||||
}
|
||||
&-small {
|
||||
//flex grow ratio 1:2
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
$base-color: rgb(20, 20, 20);
|
||||
$base-color-light: rgb(104, 104, 104);
|
||||
$primary-color: rgb(40, 75, 98);
|
||||
$secondary-color: rgb(73, 144, 191);
|
||||
$secondary-color: var(--secondary);
|
||||
$secondary-color-active: #00c7eb;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@ -57,6 +58,7 @@ $secondary-color: rgb(73, 144, 191);
|
||||
gap: 32px;
|
||||
margin-top: 32px;
|
||||
background-color: $base-color;
|
||||
transition: filter 0.5s;
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
@ -71,10 +73,13 @@ $secondary-color: rgb(73, 144, 191);
|
||||
&-label {
|
||||
margin-bottom: 0px;
|
||||
color: white;
|
||||
filter: drop-shadow(0 0 2px black);
|
||||
font-size: 28px;
|
||||
}
|
||||
&-price {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
filter: drop-shadow(0 0 2px black);
|
||||
}
|
||||
|
||||
&-body {
|
||||
@ -100,23 +105,25 @@ $secondary-color: rgb(73, 144, 191);
|
||||
margin: 0px 24px;
|
||||
}
|
||||
li:before {
|
||||
content: '\2713';
|
||||
content: "\2713";
|
||||
display: inline-block;
|
||||
color: green;
|
||||
padding: 0 6px 0 0;
|
||||
}
|
||||
}
|
||||
:hover {
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:hover {
|
||||
|
||||
filter: drop-shadow(0 0 8px black);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Grey list item */
|
||||
.price .grey {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* The "Sign Up" button */
|
||||
.button {
|
||||
background-color: #284b63;
|
||||
@ -126,6 +133,10 @@ $secondary-color: rgb(73, 144, 191);
|
||||
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%
|
||||
@ -138,4 +149,11 @@ $secondary-color: rgb(73, 144, 191);
|
||||
|
||||
.premium {
|
||||
background-color: $secondary-color;
|
||||
&-btn {
|
||||
background-color: $secondary-color;
|
||||
&:hover{
|
||||
background-color: $secondary-color-active;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,41 +2,128 @@
|
||||
id: home
|
||||
title: Home
|
||||
---
|
||||
<div class="row" style="margin-top: 2em; margin-bottom: 2em">
|
||||
<article class="col-6">
|
||||
<h1 id="quick-notes-arent-quick-in-obsidian" style="margin: 0">Quick Notes aren't "[[posts/put-quick-notes-into-obsidian-from-anywhere|quick]]" in Obsidian</h1>
|
||||
<p>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]].</p>
|
||||
|
||||
<article class="index-container">
|
||||
<div class="hero">
|
||||
<h1 class="hero-title" >Quick Notes Aren't "[[posts/put-quick-notes-into-obsidian-from-anywhere|Quick]]" Enough in Obsidian</h1>
|
||||
<p class="hero-subtitle">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]].</p>
|
||||
<p class="hero-subtitle">How speedy? Try it yourself:</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="row">
|
||||
<div class="embed">
|
||||
<style scoped>
|
||||
.embed-size {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.embed-size {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.embed-size {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.embed-size {
|
||||
width: 320px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<iframe id=flutter-container class="embed-size" width=800 height=500 src="https://my.fleetingnotes.app/" ></iframe>
|
||||
<div style="display: flex; justify-content: center; margin-bottom: 16px">
|
||||
<a href="/download" class="button">Try it free</a>
|
||||
<a href="/download" class="button premium-btn">Try the webapp instead</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<h2 class="feature-title">Capture Ideas Anytime, Anywhere</h2>
|
||||
<p class="feature-subtitle">Create and sync your fleeting notes on different platforms:</p>
|
||||
<ul>
|
||||
<li>Highlight and save using the <a href="https://chrome.google.com/webstore/detail/fleeting-notes/gcplhmogdjioeaenmehmapbdonklmdnc">Chrome</a> or <a href="https://addons.mozilla.org/en-CA/firefox/addon/fleeting-notes/">Firefox</a> extension</li>
|
||||
<li>Take notes on the go with the <a href="https://apps.apple.com/gb/app/fleeting-notes/id1615226800">iOS</a> or <a href="https://play.google.com/store/apps/details?id=com.fleetingnotes">Android</a> app</li>
|
||||
<li>Access your notes on any device using the <a href="https://my.fleetingnotes.app/">web app</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<h2 class="feature-title">Easily keep track of any source</h2>
|
||||
<p class="feature-subtitle"></p>
|
||||
<ul class="feature-list">
|
||||
<li>Cloud hosting for attachments</li>
|
||||
<li>Automatically include URLs upon note creation</li>
|
||||
<li>Include YouTube timestamps when watching on the web</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<div class="col-6">
|
||||
{{< youtube iXLyEvTZp9I >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 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)
|
||||
<div class="feature">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h2 class="feature-title">Made for Obsidian MD</h2>
|
||||
<p class="feature-subtitle">Use the [[Fleeting Notes plugin]] to seamlessly sync and process your notes</p>
|
||||
<ul>
|
||||
<li>Import your links and start connecting your notes</li>
|
||||
<li>Choose your syncing type (delete after sync, two-way)</li>
|
||||
<li>Run commmands to embed unprocessed or same source notes</li>
|
||||
<li>Create your own note template with metadata</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{< youtube iXLyEvTZp9I >}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h2 class="feature-title">Do what you want with your notes</h2>
|
||||
<p class="feature-subtitle">We value your privacy and security :)</p>
|
||||
<ul>
|
||||
<li><a href="/posts/end-to-end-encryption-in-fleeting-notes">Enable end-to-end encryption</a></li>
|
||||
<li>100% of your notes are stored locally with optional sync</li>
|
||||
<li>Share links to your notes with anyone</li>
|
||||
<li>Export all notes into Markdown or JSON</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{< youtube iXLyEvTZp9I >}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### 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
|
||||
<div class="feature">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h2></h2>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### 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
|
||||
<div>
|
||||
<script type="text/javascript" src="https://testimonial.to/js/iframeResizer.min.js"></script><iframe id="testimonialto-testimonial-light" src="https://embed.testimonial.to/w/testimonial?theme=light&card=base" frameborder="0" scrolling="no" width="100%"></iframe><script type="text/javascript">iFrameResize({log: false, checkOrigin: false}, "#testimonialto-testimonial-light");</script>
|
||||
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Remember everything, achieve anything.<br><br>That's what Building a Second Brain <a href="https://twitter.com/fortelabs?ref_src=twsrc%5Etfw">@fortelabs</a> promises:<br>A life-changing productivity system to make the most of your knowledge.<br><br>Here are the principles to start building one 👇</p>— John Mavrick (@johnmavrick_yt) <a href="https://twitter.com/johnmavrick_yt/status/1553206657341177856?ref_src=twsrc%5Etfw">July 30, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
## Questions? Contact Me.
|
||||
|
||||
- Email me at: ithinkwong@gmail.com
|
||||
- Join the [discord channel](https://discord.gg/xrj6yuGNmx)
|
||||
@ -65,7 +65,7 @@
|
||||
</ul>
|
||||
<a
|
||||
href="https://payments.fleetingnotes.app"
|
||||
class="button button-cta premium"
|
||||
class="button button-cta premium-btn"
|
||||
>Try it for free</a
|
||||
>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user