diff --git a/src/index.html b/src/index.html index b1552f6..2d65c02 100644 --- a/src/index.html +++ b/src/index.html @@ -7,39 +7,86 @@ Clipboard -
-
- -

A history of everything you copy

-
-

- Cliboard allows you to track and organize everything you copy. -

-

- Instantly access your clipboard on all your devices. -

-
-
- - -
-
- - +
+
+ +

A history of everything you copy

+
+

+ Cliboard allows you to track and organize everything you copy. +

+

+ Instantly access your clipboard on all your devices. +

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

Keep track of your snippets

+

+ Clipboard instantly stores any item you copy in the cloud, meaning you + can access +
+ your snippets immediately on all your devices. Our Mac and iOS apps +
+ will help you organize everything. +

+
+
+ - +
+
+
+

Quick Search

+

+ Easily search your snippets by content, category, web address, + application, and more. +

+
+
+

iCloud Sync

+

+ Instatly saves and syncs snippets across all your devices. +

+
+
+

Completely History

+

+ Retrieve any snippets from the first moment you started using + the app. +

+
+
-
+
diff --git a/src/output.css b/src/output.css index 04009ed..0f52c60 100644 --- a/src/output.css +++ b/src/output.css @@ -588,61 +588,41 @@ video { position: relative; } -.bottom-0{ - bottom: 0px; -} - -.-bottom-12{ - bottom: -3rem; -} - -.-bottom-24{ - bottom: -6rem; -} - -.-bottom-0{ - bottom: -0px; -} - -.left-1\/2{ - left: 50%; -} - -.-top-0{ - top: -0px; +.-bottom-20{ + bottom: -5rem; } -.top-1\/2{ - top: 50%; +.mx-auto{ + margin-left: auto; + margin-right: auto; } -.bottom-1\/2{ - bottom: 50%; +.mt-12{ + margin-top: 3rem; } -.right-1\/2{ - right: 50%; +.mb-12{ + margin-bottom: 3rem; } -.right-0{ - right: 0px; +.mt-24{ + margin-top: 6rem; } -.right-0\.5{ - right: 0.125rem; +.mt-20{ + margin-top: 5rem; } -.-bottom-20{ - bottom: -5rem; +.mt-16{ + margin-top: 4rem; } -.mx-auto{ - margin-left: auto; - margin-right: auto; +.mt-5{ + margin-top: 1.25rem; } -.mt-12{ - margin-top: 3rem; +.mt-3{ + margin-top: 0.75rem; } .flex{ @@ -665,6 +645,35 @@ video { height: 100vh; } +.h-full{ + height: 100%; +} + +.h-auto{ + height: auto; +} + +.h-max{ + height: -moz-max-content; + height: max-content; +} + +.h-\[600px\]{ + height: 600px; +} + +.h-1\/2{ + height: 50%; +} + +.max-h-\[400px\]{ + max-height: 400px; +} + +.max-h-\[600px\]{ + max-height: 600px; +} + .w-28{ width: 7rem; } @@ -673,28 +682,24 @@ video { width: 1.5rem; } -.translate-x-1\/2{ - --tw-translate-x: 50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.w-64{ + width: 16rem; } -.translate-y-1\/2{ - --tw-translate-y: 50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.w-96{ + width: 24rem; } -.-translate-x-1\/2{ - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.w-full{ + width: 100%; } -.-translate-y-1\/2{ - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.max-w-\[800px\]{ + max-width: 800px; } -.transform{ - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.max-w-\[600px\]{ + max-width: 600px; } .grid-cols-2{ @@ -717,32 +722,128 @@ video { align-items: center; } -.gap-3{ - gap: 0.75rem; +.justify-end{ + justify-content: flex-end; } -.gap-6{ - gap: 1.5rem; +.justify-center{ + justify-content: center; } -.gap-2{ - gap: 0.5rem; +.justify-between{ + justify-content: space-between; } .gap-4{ gap: 1rem; } +.gap-5{ + gap: 1.25rem; +} + +.gap-6{ + gap: 1.5rem; +} + +.gap-12{ + gap: 3rem; +} + +.gap-24{ + gap: 6rem; +} + +.gap-20{ + gap: 5rem; +} + +.gap-16{ + gap: 4rem; +} + +.overflow-hidden{ + overflow: hidden; +} + +.rounded-lg{ + border-radius: 0.5rem; +} + +.rounded-xl{ + border-radius: 0.75rem; +} + +.rounded-2xl{ + border-radius: 1rem; +} + +.border{ + border-width: 1px; +} + +.bg-primary{ + --tw-bg-opacity: 1; + background-color: rgb(50 50 50 / var(--tw-bg-opacity)); +} + +.bg-primary\/5{ + background-color: rgb(50 50 50 / 0.05); +} + +.bg-primary\/15{ + background-color: rgb(50 50 50 / 0.15); +} + +.bg-primary\/10{ + background-color: rgb(50 50 50 / 0.1); +} + +.bg-white{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.object-cover{ + -o-object-fit: cover; + object-fit: cover; +} + +.pl-12{ + padding-left: 3rem; +} + +.pr-12{ + padding-right: 3rem; +} + .text-center{ text-align: center; } +.text-sm{ + font-size: 0.875rem; + line-height: 1.25rem; +} + .text-primary{ --tw-text-opacity: 1; color: rgb(50 50 50 / var(--tw-text-opacity)); } -.title{ +.shadow-2xl{ + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl{ + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.title-4xl{ font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; @@ -750,6 +851,14 @@ video { color: rgb(50 50 50 / var(--tw-text-opacity)); } +.title-xl{ + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(50 50 50 / var(--tw-text-opacity)); +} + .text{ font-size: 1.125rem; line-height: 1.75rem;