This commit is contained in:
Pablo Moyano 2023-10-06 17:42:22 +02:00
parent a8f61d97ea
commit f57e2d5b1c
10 changed files with 1067 additions and 556 deletions

BIN
bun.lockb Executable file

Binary file not shown.

1377
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -12,16 +12,19 @@
"dependencies": {
"@astrojs/react": "^3.0.0",
"@astrojs/tailwind": "^5.0.0",
"@tailwindcss/typography": "tailwindcss/typography",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"astro": "^3.0.8",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"daisyui": "^3.9.2",
"lucide-react": "^0.274.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3",
"tailwindcss-animate": "^1.0.7"
"tailwindcss-animate": "^1.0.7",
"theme-change": "^2.5.0"
}
}

View File

@ -6,7 +6,7 @@ interface Props {
const { text } = Astro.props;
---
<p id="text" data-value={text} class="mt-4 text-center text-white font-mono text-7xl">{text}</p>
<p id="text" data-value={text} class="mt-4 text-center text-white text-7xl font-['Researcher']">{text}</p>
<script>
// Code I stole

View File

@ -6,9 +6,10 @@ interface Props {
const { href, title } = Astro.props;
---
<li>
<a
href={href}
class="text-primary-foreground hover:font-bold px-3 py-2 transition duration-300"
class=""
>{title}
</a>
</li>

View File

@ -6,17 +6,51 @@ import NavItem from "./NavItem.astro";
import foscLogo from '../assets/img/fosc-logo-new.png'
---
<div class="backdrop-blur backdrop-brightness-50 drop-shadow-lg">
<nav class="container flex justify-between items-center h-24">
<div class="navbar backdrop-blur backdrop-brightness-50 drop-shadow-lg">
<Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo"/>
<div class="navbar-start">
<!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->
<a class="btn btn-ghost normal-case text-xl font-['Researcher']">FOSC</a>
</div>
<div class="flex space-x-4">
<NavItem href="/example" title="Cloud" />
<NavItem href="/example" title="Gallery" />
<NavItem href="/example" title="Downloads" />
<NavItem href="/example" title="Blog" />
<div class="navbar-center">
<div class="hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<NavItem href="/example" title="Cloud" />
<NavItem href="/example" title="Gallery" />
<NavItem href="/example" title="Downloads" />
<NavItem href="/example" title="Blog" />
</ul>
</div>
</nav>
<div class="hidden sm:flex">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li>
<a>Parent</a>
<ul class="p-2">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</li>
<li><a>Item 3</a></li>
</ul>
</div>
</div>
</div>
<div class="navbar-end">
<button class="btn btn-ghost" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS">🌚</button>
</div>
</div>

View File

@ -15,6 +15,27 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- Theme manager -->
<script is:inline>
// ☝️ This script prevent the FART effect.
if (localStorage.getItem("theme") === null) {
document.documentElement.setAttribute("data-theme", "light");
} else
document.documentElement.setAttribute(
"data-theme",
localStorage.getItem("theme")
);
// "theme" LocalStorage value is set by the package to remember user preference.
// The value is checked and applyed before rendering anything.
</script>
<script>
import { themeChange } from 'theme-change';
themeChange();
// 👆 you could import the CDN directly instead of these two lines
</script>
</head>
<body>

View File

@ -1,10 +1,11 @@
---
import "@/styles/globals.css";
import { Image } from "astro:assets";
import Navbar from "../components/Navbar.astro";
import HackerText from "../components/HackerText.astro";
// Image imports
import { Image } from "astro:assets";
import foscLogo from "../assets/img/fosc-logo-old.png";
---
@ -20,7 +21,7 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<body class="bg-fixed bg-cover bg-center bg-repeat-y">
<!-- Vertical screen space is initially shared by navbar and splash content, furhter content can be obtained by scrolling -->
<!-- Vertical screen space is initially shared by navbar and splash content, further content can be obtained by scrolling -->
<div class="flex flex-col h-screen">
<Navbar />

View File

@ -2,64 +2,10 @@
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 262.1 83.3% 57.8%;
--radius: 0.5rem;
}
.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 263.4 70% 50.4%;
}
@font-face {
font-family: 'Researcher';
src: url('/fonts/Researcher.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

View File

@ -1,76 +1,18 @@
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: ["class"],
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontFamily: {
mono: ["Researcher", ...defaultTheme.fontFamily.sans],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
plugins: [require("daisyui")],
daisyui: {
themes: [
"light",
"dark",
"black",
"cupcake",
"corporate",
"synthwave",
"retro",
"cyberpunk",
],
},
plugins: [require("tailwindcss-animate")],
}
};