diff --git a/website/assets/GitHub_Invertocat_White.svg b/website/assets/GitHub_Invertocat_White.svg new file mode 100755 index 0000000..527ba11 --- /dev/null +++ b/website/assets/GitHub_Invertocat_White.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/assets/kofi_symbol.png b/website/assets/kofi_symbol.png new file mode 100644 index 0000000..f31847d Binary files /dev/null and b/website/assets/kofi_symbol.png differ diff --git a/website/index.html b/website/index.html index f801da3..bcab039 100644 --- a/website/index.html +++ b/website/index.html @@ -48,7 +48,7 @@

Bazaar

class="inline-block bg-[#1c71d8] text-white font-semibold px-8 py-3 rounded-full transition border-4 border-[#1c71d8] hover:shadow-[0_0_0_4px_#1c71d8,inset_0_0_0_4px_#1c71d8] dark:bg-[#3584e4] dark:border-[#3584e4] dark:hover:shadow-[0_0_0_4px_#3584e4,inset_0_0_0_4px_#3584e4]"> Get it on Flathub - Support @@ -180,4 +180,4 @@

Try - + \ No newline at end of file diff --git a/website/output.css b/website/output.css index eb717a8..249e774 100644 --- a/website/output.css +++ b/website/output.css @@ -18,14 +18,19 @@ --text-sm--line-height: calc(1.25 / 0.875); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-semibold: 600; + --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -0.025em; --leading-relaxed: 1.625; + --radius-xl: 0.75rem; + --radius-4xl: 2rem; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); @@ -181,30 +186,39 @@ } } @layer utilities { - .visible { - visibility: visible; - } .absolute { position: absolute; } - .fixed { - position: fixed; - } .relative { position: relative; } .inset-0 { inset: calc(var(--spacing) * 0); } - .start { - inset-inline-start: var(--spacing); - } .top-0 { top: calc(var(--spacing) * 0); } .left-0 { left: calc(var(--spacing) * 0); } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } .mx-auto { margin-inline: auto; } @@ -226,12 +240,18 @@ .mb-8 { margin-bottom: calc(var(--spacing) * 8); } - .contents { - display: contents; + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } + .ml-3 { + margin-left: calc(var(--spacing) * 3); } .flex { display: flex; } + .grid { + display: grid; + } .hidden { display: none; } @@ -247,26 +267,26 @@ .h-5 { height: calc(var(--spacing) * 5); } - .h-24 { - height: calc(var(--spacing) * 24); + .h-10 { + height: calc(var(--spacing) * 10); } .h-32 { height: calc(var(--spacing) * 32); } - .h-36 { - height: calc(var(--spacing) * 36); - } .h-48 { height: calc(var(--spacing) * 48); } - .min-h-\[250px\] { - min-height: 250px; + .h-\[100vh\] { + height: 100vh; } - .min-h-\[300px\] { - min-height: 300px; + .h-fit { + height: fit-content; } - .min-h-\[400px\] { - min-height: 400px; + .h-full { + height: 100%; + } + .h-min { + height: min-content; } .min-h-\[500px\] { min-height: 500px; @@ -274,18 +294,21 @@ .min-h-screen { min-height: 100vh; } + .w-3 { + width: calc(var(--spacing) * 3); + } .w-5 { width: calc(var(--spacing) * 5); } - .w-24 { - width: calc(var(--spacing) * 24); + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-10 { + width: calc(var(--spacing) * 10); } .w-32 { width: calc(var(--spacing) * 32); } - .w-36 { - width: calc(var(--spacing) * 36); - } .w-48 { width: calc(var(--spacing) * 48); } @@ -322,6 +345,9 @@ .flex-col { flex-direction: column; } + .flex-row { + flex-direction: row; + } .flex-wrap { flex-wrap: wrap; } @@ -337,15 +363,30 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .gap-8 { + gap: calc(var(--spacing) * 8); + } + .gap-10 { + gap: calc(var(--spacing) * 10); + } .gap-12 { gap: calc(var(--spacing) * 12); } .overflow-hidden { overflow: hidden; } + .rounded-4xl { + border-radius: var(--radius-4xl); + } .rounded-full { border-radius: calc(infinity * 1px); } + .rounded-xl { + border-radius: var(--radius-xl); + } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -358,6 +399,9 @@ border-top-style: var(--tw-border-style); border-top-width: 1px; } + .border-\[\#000000\] { + border-color: #000000; + } .border-\[\#1c71d8\] { border-color: #1c71d8; } @@ -367,12 +411,18 @@ .border-\[\#251f32\]\/30 { border-color: color-mix(in oklab, #251f32 30%, transparent); } + .border-\[\#FF5A16\] { + border-color: #FF5A16; + } .border-\[\#deddda\] { border-color: #deddda; } .border-\[\#f06292\] { border-color: #f06292; } + .bg-\[\#000000\] { + background-color: #000000; + } .bg-\[\#1c71d8\] { background-color: #1c71d8; } @@ -382,6 +432,9 @@ .bg-\[\#251f32\]\/10 { background-color: color-mix(in oklab, #251f32 10%, transparent); } + .bg-\[\#FF5A16\] { + background-color: #FF5A16; + } .bg-\[\#f6f5f4\] { background-color: #f6f5f4; } @@ -473,6 +526,10 @@ --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); @@ -510,6 +567,10 @@ .opacity-7 { opacity: 7%; } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; @@ -551,6 +612,14 @@ } } } + .hover\:shadow-\[0_0_0_4px_\#000000\,inset_0_0_0_4px_\#000000\] { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 0 0 4px var(--tw-shadow-color, #000000), inset 0 0 0 4px var(--tw-shadow-color, #000000); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .hover\:shadow-\[0_0_0_4px_\#1c71d8\,inset_0_0_0_4px_\#1c71d8\] { &:hover { @media (hover: hover) { @@ -567,6 +636,14 @@ } } } + .hover\:shadow-\[0_0_0_4px_\#FF5A16\,inset_0_0_0_4px_\#FF5A16\] { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 0 0 4px var(--tw-shadow-color, #FF5A16), inset 0 0 0 4px var(--tw-shadow-color, #FF5A16); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .hover\:shadow-\[0_0_0_4px_\#f06292\,inset_0_0_0_4px_\#f06292\] { &:hover { @media (hover: hover) { @@ -575,6 +652,11 @@ } } } + .md\:inset-0 { + @media (width >= 48rem) { + inset: calc(var(--spacing) * 0); + } + } .md\:block { @media (width >= 48rem) { display: block; @@ -585,6 +667,11 @@ display: none; } } + .md\:h-\[100vh\] { + @media (width >= 48rem) { + height: 100vh; + } + } .md\:min-h-\[400px\] { @media (width >= 48rem) { min-height: 400px; @@ -595,6 +682,16 @@ width: calc(1 / 2 * 100%); } } + .md\:w-fit { + @media (width >= 48rem) { + width: fit-content; + } + } + .md\:w-full { + @media (width >= 48rem) { + width: 100%; + } + } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; @@ -605,6 +702,54 @@ flex-direction: row-reverse; } } + .md\:rounded-4xl { + @media (width >= 48rem) { + border-radius: var(--radius-4xl); + } + } + .md\:shadow-lg { + @media (width >= 48rem) { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + .lg\:rounded-4xl { + @media (width >= 64rem) { + border-radius: var(--radius-4xl); + } + } + .lg\:shadow-lg { + @media (width >= 64rem) { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + .xl\:inset-0 { + @media (width >= 80rem) { + inset: calc(var(--spacing) * 0); + } + } + .xl\:h-fit { + @media (width >= 80rem) { + height: fit-content; + } + } + .xl\:w-fit { + @media (width >= 80rem) { + width: fit-content; + } + } + .xl\:rounded-4xl { + @media (width >= 80rem) { + border-radius: var(--radius-4xl); + } + } + .xl\:shadow-lg { + @media (width >= 80rem) { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } .dark\:border-\[\#3d3d3d\] { @media (prefers-color-scheme: dark) { border-color: #3d3d3d; @@ -630,16 +775,6 @@ background-color: #1d1d20; } } - .dark\:bg-\[\#1e1e1e\] { - @media (prefers-color-scheme: dark) { - background-color: #1e1e1e; - } - } - .dark\:bg-\[\#2a2a2a\] { - @media (prefers-color-scheme: dark) { - background-color: #2a2a2a; - } - } .dark\:bg-\[\#2e2e32\] { @media (prefers-color-scheme: dark) { background-color: #2e2e32; @@ -660,36 +795,12 @@ background-color: color-mix(in oklab, #deddda 10%, transparent); } } - .dark\:from-\[\#1a3a4a\] { - @media (prefers-color-scheme: dark) { - --tw-gradient-from: #1a3a4a; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - } .dark\:from-\[\#2f3d9f\] { @media (prefers-color-scheme: dark) { --tw-gradient-from: #2f3d9f; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } - .dark\:from-\[\#a3423a\] { - @media (prefers-color-scheme: dark) { - --tw-gradient-from: #a3423a; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - } - .dark\:to-\[\#1a3a2a\] { - @media (prefers-color-scheme: dark) { - --tw-gradient-to: #1a3a2a; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - } - .dark\:to-\[\#7a2f34\] { - @media (prefers-color-scheme: dark) { - --tw-gradient-to: #7a2f34; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - } .dark\:to-\[\#682889\] { @media (prefers-color-scheme: dark) { --tw-gradient-to: #682889; @@ -721,6 +832,18 @@ color: #ffffff; } } + .dark\:brightness-0 { + @media (prefers-color-scheme: dark) { + --tw-brightness: brightness(0%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + } + .dark\:invert { + @media (prefers-color-scheme: dark) { + --tw-invert: invert(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + } .dark\:hover\:border-\[\#deddda\] { @media (prefers-color-scheme: dark) { &:hover { @@ -848,128 +971,128 @@ syntax: "*"; inherits: false; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@property --tw-blur { +@property --tw-shadow { syntax: "*"; inherits: false; + initial-value: 0 0 #0000; } -@property --tw-brightness { +@property --tw-shadow-color { syntax: "*"; inherits: false; } -@property --tw-contrast { - syntax: "*"; +@property --tw-shadow-alpha { + syntax: ""; inherits: false; + initial-value: 100%; } -@property --tw-grayscale { +@property --tw-inset-shadow { syntax: "*"; inherits: false; + initial-value: 0 0 #0000; } -@property --tw-hue-rotate { +@property --tw-inset-shadow-color { syntax: "*"; inherits: false; } -@property --tw-invert { - syntax: "*"; +@property --tw-inset-shadow-alpha { + syntax: ""; inherits: false; + initial-value: 100%; } -@property --tw-opacity { +@property --tw-ring-color { syntax: "*"; inherits: false; } -@property --tw-saturate { +@property --tw-ring-shadow { syntax: "*"; inherits: false; + initial-value: 0 0 #0000; } -@property --tw-sepia { +@property --tw-inset-ring-color { syntax: "*"; inherits: false; } -@property --tw-drop-shadow { +@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; + initial-value: 0 0 #0000; } -@property --tw-drop-shadow-color { +@property --tw-ring-inset { syntax: "*"; inherits: false; } -@property --tw-drop-shadow-alpha { - syntax: ""; +@property --tw-ring-offset-width { + syntax: ""; inherits: false; - initial-value: 100%; + initial-value: 0px; } -@property --tw-drop-shadow-size { +@property --tw-ring-offset-color { syntax: "*"; inherits: false; + initial-value: #fff; } -@property --tw-shadow { +@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@property --tw-shadow-color { +@property --tw-outline-style { syntax: "*"; inherits: false; + initial-value: solid; } -@property --tw-shadow-alpha { - syntax: ""; +@property --tw-blur { + syntax: "*"; inherits: false; - initial-value: 100%; } -@property --tw-inset-shadow { +@property --tw-brightness { syntax: "*"; inherits: false; - initial-value: 0 0 #0000; } -@property --tw-inset-shadow-color { +@property --tw-contrast { syntax: "*"; inherits: false; } -@property --tw-inset-shadow-alpha { - syntax: ""; +@property --tw-grayscale { + syntax: "*"; inherits: false; - initial-value: 100%; } -@property --tw-ring-color { +@property --tw-hue-rotate { syntax: "*"; inherits: false; } -@property --tw-ring-shadow { +@property --tw-invert { syntax: "*"; inherits: false; - initial-value: 0 0 #0000; } -@property --tw-inset-ring-color { +@property --tw-opacity { syntax: "*"; inherits: false; } -@property --tw-inset-ring-shadow { +@property --tw-saturate { syntax: "*"; inherits: false; - initial-value: 0 0 #0000; } -@property --tw-ring-inset { +@property --tw-sepia { syntax: "*"; inherits: false; } -@property --tw-ring-offset-width { - syntax: ""; +@property --tw-drop-shadow { + syntax: "*"; inherits: false; - initial-value: 0px; } -@property --tw-ring-offset-color { +@property --tw-drop-shadow-color { syntax: "*"; inherits: false; - initial-value: #fff; } -@property --tw-ring-offset-shadow { +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { syntax: "*"; inherits: false; - initial-value: 0 0 #0000; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { @@ -992,20 +1115,6 @@ --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; - --tw-outline-style: solid; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -1020,6 +1129,20 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; } } } diff --git a/website/package-lock.json b/website/package-lock.json index 561ae9c..d48b863 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1366,9 +1366,9 @@ } }, "node_modules/brace-expansion": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz", - "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz", + "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==", "dev": true, "license": "MIT", "dependencies": { @@ -1626,15 +1626,15 @@ } }, "node_modules/concurrently": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz", - "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==", + "version": "9.2.3", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.3.tgz", + "integrity": "sha512-ihjs0E2SxvDgq/MK418hX6YycQgKhsqxpbZuZbHo0yKfqDWdymWMjWYIpCIzqDDLLKClHlXev8whW/8WXmJ0BA==", "dev": true, "license": "MIT", "dependencies": { "chalk": "4.1.2", "rxjs": "7.8.2", - "shell-quote": "1.8.3", + "shell-quote": "1.8.4", "supports-color": "8.1.1", "tree-kill": "1.2.2", "yargs": "17.7.2" @@ -3440,9 +3440,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -3924,9 +3924,9 @@ } }, "node_modules/shell-quote": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz", - "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==", + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.4.tgz", + "integrity": "sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==", "dev": true, "license": "MIT", "engines": { diff --git a/website/support/index.html b/website/support/index.html new file mode 100644 index 0000000..af8a8b9 --- /dev/null +++ b/website/support/index.html @@ -0,0 +1,89 @@ + + + + + + + + + Support - Bazaar + + + +
+ + + + + + + +
+
+ Heart shaped object +

+ Support Bazaar

+

+ Support the devs and keep Bazaar alive +

+
+ + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file