feat(how-much): added how much browser do you want section
5
.astro/settings.json
Normal file
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1731292924393
|
||||
}
|
||||
}
|
1
.astro/types.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
14
package.json
|
@ -3,8 +3,8 @@
|
|||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"dev": "astro dev --port 3000",
|
||||
"start": "astro preview",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
|
@ -12,20 +12,26 @@
|
|||
"format": "prettier --check ./src"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/tailwind": "3.1.1",
|
||||
"astro": "2.1.3",
|
||||
"@astrojs/tailwind": "5.1.2",
|
||||
"astro": "4.16.10",
|
||||
"autoprefixer": "10.4.14",
|
||||
"postcss": "8.4.21",
|
||||
"postcss-import": "^16.1.0",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"sharp": "^0.33.5",
|
||||
"tailwindcss": "3.2.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^3.6.2",
|
||||
"@fontsource/dm-sans": "^5.1.0",
|
||||
"@fontsource/inter": "^5.1.0",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"clsx": "^2.1.1",
|
||||
"react": "^19.0.0-beta",
|
||||
"react-dom": "^19.0.0-beta",
|
||||
"tailwind-merge": "^2.5.4"
|
||||
}
|
||||
}
|
||||
|
|
3142
pnpm-lock.yaml
generated
BIN
public/Redrawn_v1_Barebones.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
1
public/placeholder.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/Redrawn_v1_Barebones.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/collapsed.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/compact.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/split.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/standard.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
3
src/components/footer.astro
Normal file
|
@ -0,0 +1,3 @@
|
|||
<footer class="h-40">
|
||||
<p>Work in progress - coming soon</p>
|
||||
</footer>
|
|
@ -7,7 +7,7 @@ import Navbar from "./navbar.astro";
|
|||
<header>
|
||||
<Navbar />
|
||||
<section>
|
||||
<LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
|
||||
<LanguageIcon class="dark:text-primary-dark h-7 w-7 text-primary" />
|
||||
<a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
|
||||
</section>
|
||||
</header>
|
||||
|
@ -20,7 +20,7 @@ import Navbar from "./navbar.astro";
|
|||
}
|
||||
|
||||
section {
|
||||
@apply flex items-center gap-4;
|
||||
@apply flex items-center gap-10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,28 +1,64 @@
|
|||
---
|
||||
// src/components/hero.astro
|
||||
import DownloadIcon from "./icons/download-icon.astro";
|
||||
import '@fontsource/dm-sans/700.css';
|
||||
import browserImage from "@/assets/Redrawn_v1_Barebones.png";
|
||||
import "@fontsource/dm-sans/700.css";
|
||||
import { Image } from "astro:assets";
|
||||
---
|
||||
|
||||
<section id="hero" class="section flex flex-col md:flex-row gap-md items-center">
|
||||
<div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
|
||||
<h2 class="md:text-center drop-shadow-md">Stay focused, browse faster</h2>
|
||||
<p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
|
||||
<section id="hero">
|
||||
<h2>Stay focused, browse faster</h2>
|
||||
<p class="description">
|
||||
Zen is beautifully designed, privacy-focused, and packed with features. We
|
||||
care about your experience, not your data.
|
||||
</p>
|
||||
<div class="center flex flex-col gap-sm">
|
||||
<div class="download">
|
||||
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
|
||||
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
|
||||
<p>Available on Windows, Mac, and Linux</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
|
||||
<img
|
||||
src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
|
||||
alt="Zen Logo"
|
||||
class="w-full rounded-lg drop-shadow-glow"
|
||||
/>
|
||||
<figcaption class="text-md text-muted/95">
|
||||
Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
|
||||
<div class="hero__image">
|
||||
<Image src={browserImage} alt="Zen Logo" />
|
||||
<figcaption>
|
||||
Your experience using Zen may change over time, as new features are added,
|
||||
improved and adjusted with upstream Firefox updates. User discretion is
|
||||
advised.
|
||||
</figcaption>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@tailwind base;
|
||||
@layer base {
|
||||
section {
|
||||
@apply section flex flex-col items-center gap-md;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply drop-shadow-md md:text-center;
|
||||
}
|
||||
|
||||
.description {
|
||||
@apply max-w-prose text-xl text-muted drop-shadow-sm md:text-center;
|
||||
}
|
||||
|
||||
.download {
|
||||
@apply center flex flex-col gap-sm;
|
||||
}
|
||||
|
||||
.download p {
|
||||
@apply text-muted/95;
|
||||
}
|
||||
|
||||
.hero__image {
|
||||
@apply flex flex-1 flex-col gap-4;
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply w-full rounded-lg;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@apply text-muted/95;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
140
src/components/how-much/index.astro
Normal file
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import compactImage from "@/assets/modes/compact.png";
|
||||
import collapsedImage from "@/assets/modes/collapsed.png";
|
||||
import standardImage from "@/assets/modes/standard.png";
|
||||
import splitImage from "@/assets/modes/split.png";
|
||||
import "./styles.css";
|
||||
|
||||
type ModesOptions = "compact" | "collapsed" | "standard" | "split";
|
||||
|
||||
const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
|
||||
---
|
||||
|
||||
<section id="how-much">
|
||||
<div>
|
||||
<h3>
|
||||
How <span class="highlight">much</span> browser do you want?
|
||||
</h3>
|
||||
<fieldset id="radio-group">
|
||||
<legend class="sr-only">Choose a view</legend>
|
||||
{
|
||||
modes.map((mode) => (
|
||||
<label for={mode}>
|
||||
<input
|
||||
type="radio"
|
||||
id={mode}
|
||||
name="view"
|
||||
value={mode}
|
||||
checked={mode === "compact"}
|
||||
/>
|
||||
<span>{mode.charAt(0).toUpperCase() + mode.slice(1)}</span>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
</fieldset>
|
||||
<div id="slider-container">
|
||||
<span id="slider-value">🌱</span>
|
||||
<input
|
||||
type="range"
|
||||
id="view-slider"
|
||||
min="0"
|
||||
max="3"
|
||||
value="0"
|
||||
class="w-full"
|
||||
/>
|
||||
<span id="slider-value">🌳</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="image-container">
|
||||
<div id="image-wrapper">
|
||||
{
|
||||
modes.map((mode, index) => (
|
||||
<Image
|
||||
src={
|
||||
[compactImage, collapsedImage, standardImage, splitImage][index]
|
||||
}
|
||||
alt={`${mode} browser view`}
|
||||
id={mode}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div id="carousel-indicators">
|
||||
{
|
||||
modes.map((_, index) => (
|
||||
<span
|
||||
class:list={["indicator", { active: index === 0 }]}
|
||||
data-index={index}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const radioButtons = document.querySelectorAll('input[name="view"]');
|
||||
const imageWrapper = document.getElementById("image-wrapper") as HTMLElement;
|
||||
const indicators = document.querySelectorAll(".indicator");
|
||||
const modeOrder = ["compact", "collapsed", "standard", "split"];
|
||||
let currentIndex = 0;
|
||||
|
||||
const slider = document.getElementById("view-slider") as HTMLInputElement;
|
||||
|
||||
function updateImages(selectedMode: string) {
|
||||
const selectedIndex = modeOrder.indexOf(selectedMode);
|
||||
currentIndex = selectedIndex;
|
||||
const offset = selectedIndex * -100;
|
||||
const mediaQuery = window.matchMedia("(min-width: 1280px)");
|
||||
if (mediaQuery.matches) {
|
||||
imageWrapper.style.transform = `translateY(${offset}%)`;
|
||||
} else {
|
||||
imageWrapper.style.transform = `translateX(${offset}%)`;
|
||||
}
|
||||
updateIndicators();
|
||||
updateRadioButtons();
|
||||
updateSlider();
|
||||
}
|
||||
|
||||
function updateIndicators() {
|
||||
indicators.forEach((indicator, index) => {
|
||||
if (index === currentIndex) {
|
||||
indicator.classList.add("active");
|
||||
} else {
|
||||
indicator.classList.remove("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateRadioButtons() {
|
||||
const selectedRadio = document.querySelector(
|
||||
`input[value="${modeOrder[currentIndex]}"]`
|
||||
) as HTMLInputElement;
|
||||
if (selectedRadio) {
|
||||
selectedRadio.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateSlider() {
|
||||
slider.value = currentIndex.toString();
|
||||
}
|
||||
|
||||
radioButtons.forEach((radio) => {
|
||||
radio.addEventListener("change", (e) => {
|
||||
if (e.target instanceof HTMLInputElement && e.target.checked) {
|
||||
updateImages(e.target.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener("click", () => {
|
||||
updateImages(modeOrder[index]);
|
||||
});
|
||||
});
|
||||
|
||||
slider.addEventListener("input", () => {
|
||||
updateImages(modeOrder[parseInt(slider.value)]);
|
||||
});
|
||||
</script>
|
64
src/components/how-much/styles.css
Normal file
|
@ -0,0 +1,64 @@
|
|||
@tailwind base;
|
||||
|
||||
@layer base {
|
||||
section {
|
||||
@apply grid w-full grid-cols-1 justify-center xl:gap-8 xl:grid-cols-[1fr_2fr];
|
||||
}
|
||||
|
||||
section>div {
|
||||
@apply flex flex-col gap-md rounded-lg p-6;
|
||||
}
|
||||
|
||||
label {
|
||||
@apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100;
|
||||
}
|
||||
|
||||
label span {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
@apply h-4 w-4 text-secondary focus:ring-secondary;
|
||||
}
|
||||
|
||||
#image-container {
|
||||
@apply relative aspect-[1.55/1] overflow-clip rounded-lg;
|
||||
}
|
||||
|
||||
#image-wrapper {
|
||||
@apply absolute inset-0 transition-transform duration-300 ease-in-out flex flex-row xl:flex-col;
|
||||
}
|
||||
|
||||
img {
|
||||
@apply aspect-[1.55/1] object-cover bg-[#272626];
|
||||
}
|
||||
|
||||
#radio-group {
|
||||
@apply hidden flex-col xl:flex;
|
||||
}
|
||||
|
||||
#carousel-indicators {
|
||||
@apply absolute -xl:bottom-4 -xl:left-1/2 transform -translate-x-1/2 flex gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
@apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.indicator.active {
|
||||
@apply w-8 xl:h-8 xl:w-3 bg-opacity-100;
|
||||
}
|
||||
|
||||
#slider-container {
|
||||
@apply w-full xl:hidden grid grid-cols-[auto_1fr_auto] gap-md max-w-xl place-self-center;
|
||||
}
|
||||
|
||||
#view-slider {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
#slider-labels {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
}
|
17
src/components/icons/chevron-left-icon.astro
Normal file
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
import { ny } from "../../lib/utils";
|
||||
const { class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class={ny("w-5 h-5", className)}><path d="m15 18-6-6 6-6"></path></svg
|
||||
>
|
17
src/components/icons/chevron-right-icon.astro
Normal file
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
import { ny } from "../../lib/utils";
|
||||
const { class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class={ny("w-5 h-5", className)}><path d="m9 18 6-6-6-6"></path></svg
|
||||
>
|
1
src/env.d.ts
vendored
|
@ -1 +1,2 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
---
|
||||
import CircleEffect from "../components/circle-effect.astro";
|
||||
import Header from "../components/header.astro";
|
||||
import Footer from "../components/footer.astro";
|
||||
const { title } = Astro.props;
|
||||
import '@fontsource/inter';
|
||||
import "@fontsource/inter";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
@ -21,21 +22,13 @@ import '@fontsource/inter';
|
|||
<body>
|
||||
<div class="container flex min-h-screen flex-col items-center gap-y-4xl">
|
||||
<CircleEffect />
|
||||
<div
|
||||
class="absolute inset-0 -z-10 bg-gradient-to-b from-secondary/20 to-transparent"
|
||||
>
|
||||
</div>
|
||||
<Header />
|
||||
<main class="flex w-full flex-col gap-4"><slot /></main>
|
||||
<main class="flex w-full flex-col gap-40"><slot /></main>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
hsla(22, 96%, 60%, 0.1),
|
||||
transparent 70%
|
||||
),
|
||||
linear-gradient(to bottom, hsla(22, 96%, 60%, 0.05), transparent 50%),
|
||||
linear-gradient(to bottom, hsla(22, 96%, 60%, 0.03), transparent 30%);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
---
|
||||
import HowMuch from "../components/how-much/index.astro";
|
||||
import Hero from "../components/hero.astro";
|
||||
import Layout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<Layout title="Zen Browser">
|
||||
<Hero />
|
||||
<HowMuch />
|
||||
</Layout>
|
||||
|
|
|
@ -16,8 +16,10 @@ module.exports = {
|
|||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "hsl(22, 96%, 60%)",
|
||||
muted: "hsl(22, 96%, 70%)",
|
||||
// primary: "hsl(258, 48%, 23%)",
|
||||
primary: "hsl(0 0% 20%)",
|
||||
secondary: "hsl(22, 96%, 60%)",
|
||||
muted: "hsl(0 0% 30%)",
|
||||
},
|
||||
spacing: {
|
||||
xs: "0.5rem",
|
||||
|
@ -34,9 +36,6 @@ module.exports = {
|
|||
"8xl": "10rem",
|
||||
"9xl": "11rem",
|
||||
},
|
||||
fontSize: {
|
||||
"scale-large": "clamp(3rem, 6vw, 4rem)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
"Inter",
|
||||
|
@ -50,20 +49,26 @@ module.exports = {
|
|||
],
|
||||
dm: ["DM Sans"],
|
||||
},
|
||||
dropShadow: {
|
||||
glow: [
|
||||
"0 0px 5px hsla(22, 96%, 60%, 0.90)",
|
||||
"0 0px 20px hsla(22, 96%, 60%, 0.75)"
|
||||
]
|
||||
}
|
||||
screens: {
|
||||
"-sm": { max: "639px" },
|
||||
"-md": { max: "767px" },
|
||||
"-lg": { max: "1023px" },
|
||||
"-xl": { max: "1279px" },
|
||||
"-2xl": { max: "1535px" },
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
plugin(({ addBase, addComponents, addUtilities, theme }) => {
|
||||
addBase({
|
||||
h2: {
|
||||
"@apply text-scale-large font-bold text-primary": {},
|
||||
|
||||
"@apply text-7xl font-bold text-primary": {},
|
||||
},
|
||||
p: {
|
||||
"@apply text-primary": {},
|
||||
},
|
||||
h3: {
|
||||
"@apply text-5xl font-bold text-primary": {},
|
||||
},
|
||||
});
|
||||
addComponents({
|
||||
|
@ -74,12 +79,14 @@ module.exports = {
|
|||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
},
|
||||
".highlight": {
|
||||
color: theme("colors.secondary"),
|
||||
},
|
||||
".center": {
|
||||
"@apply text-center place-items-center": {},
|
||||
},
|
||||
".btn-base": {
|
||||
"@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white dark:text-black":
|
||||
|
||||
"@apply bg-black text-primary font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white":
|
||||
{},
|
||||
},
|
||||
});
|
||||
|
|
|
@ -1,3 +1,13 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
"extends": "astro/tsconfigs/base",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|