FUCK
This commit is contained in:
Pablo Moyano
parent
a8f61d97ea
commit
f57e2d5b1c
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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="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-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="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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,65 +1,11 @@
|
|||
@tailwind base;
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Researcher';
|
||||
src: url('/fonts/Researcher.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
@ -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")],
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue