testing
This commit is contained in:
chark1es
parent
4fa1e52980
commit
03de67defa
5 changed files with 184 additions and 128 deletions
64
package.json
64
package.json
|
|
@ -1,34 +1,34 @@
|
|||
{
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^1.1.2",
|
||||
"@astrojs/react": "^3.0.3",
|
||||
"@astrojs/tailwind": "^5.0.2",
|
||||
"@fontsource-variable/open-sans": "^5.0.16",
|
||||
"@nextui-org/react": "^2.1.13",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"astro": "^3.3.0",
|
||||
"framer-motion": "^10.16.4",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"scss": "^0.2.4",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"daisyui": "^3.9.2",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-astro": "^0.12.0",
|
||||
"sass": "^1.69.3"
|
||||
}
|
||||
"name": "ieeeucsd",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^1.1.2",
|
||||
"@astrojs/react": "^3.0.3",
|
||||
"@astrojs/tailwind": "^5.0.2",
|
||||
"@fontsource-variable/open-sans": "^5.0.16",
|
||||
"@nextui-org/react": "^2.1.13",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"astro": "^3.3.0",
|
||||
"framer-motion": "^10.16.4",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"scss": "^0.2.4",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"daisyui": "^3.9.2",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-astro": "^0.12.0",
|
||||
"sass": "^1.69.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
public/backgrounds/fa21qp.png
Normal file
BIN
public/backgrounds/fa21qp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 689 KiB |
|
|
@ -1,41 +1,74 @@
|
|||
---
|
||||
import logo_with_text from '';
|
||||
---
|
||||
|
||||
<style>
|
||||
.grid-cols-custom {
|
||||
grid-template-columns: 1fr auto 1fr; /* This makes the side columns take up equal space, regardless of content, while the center column takes the width of the content */
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="mt-2">
|
||||
<div class="hidden xl:grid grid-flow-col auto-cols-max justify-center items-center gap-4 h-32 grid-cols-custom">
|
||||
<div class="flex justify-center space-x-12 sm:space-x-14 md:space-x-16 lg:space-x-18">
|
||||
.nav-background {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-image: url("/backgrounds/fa21qp.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 45%;
|
||||
}
|
||||
.nav-background::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; /* Cover the parent */
|
||||
background-color: rgba(
|
||||
0,
|
||||
51,
|
||||
102,
|
||||
0.9
|
||||
); /* This is a guess of the ieee-blue color with 50% opacity, adjust as necessary */
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="nav-background flex-inline max-w-80 mx-auto">
|
||||
<div
|
||||
class="hidden xl:grid grid-flow-col auto-cols-max justify-center items-center gap-4 h-32 grid-cols-custom text-white"
|
||||
>
|
||||
<div
|
||||
class="flex justify-center space-x-12 sm:space-x-14 md:space-x-16 lg:space-x-18"
|
||||
>
|
||||
<!-- Left content here -->
|
||||
<a href="/" class="text-2xl hover:scale-110 transition text-ieee-blue font-bold">Home</a>
|
||||
<a href="/" class="text-2xl text-ieee-blue font-bold">About Us</a>
|
||||
<a href="/" class="text-2xl text-ieee-blue font-bold">Project Space</a>
|
||||
<a href="/" class="text-2xl hover:scale-110 transition font-bold"
|
||||
>Home</a
|
||||
>
|
||||
<a href="/" class="text-2xl font-bold">About Us</a>
|
||||
<a href="/" class="text-2xl font-bold">Project Space</a>
|
||||
<!-- You can add more items here, and they will be centered -->
|
||||
</div>
|
||||
|
||||
<!-- Centered image -->
|
||||
<div class="flex justify-center">
|
||||
<img src="/icons/logo_with_text.svg" alt="description of image" class="h-24" />
|
||||
<img
|
||||
src="/icons/logo_with_text.svg"
|
||||
alt="description of image"
|
||||
class="h-24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-12">
|
||||
<div
|
||||
class="flex justify-center space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-12"
|
||||
>
|
||||
<!-- Right content here -->
|
||||
<a href="/" class="text-2xl text-ieee-blue font-bold">Events</a>
|
||||
<a href="/" class="text-2xl text-ieee-blue font-bold">Projects</a>
|
||||
<a href="/" class="text-2xl text-ieee-blue font-bold">Contact Us</a>
|
||||
<a href="/" class="text-2xl font-bold">Events</a>
|
||||
<a href="/" class="text-2xl font-bold">Projects</a>
|
||||
<a href="/" class="text-2xl font-bold">Contact Us</a>
|
||||
<!-- You can add more items here, and they will be centered -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid xl:hidden items-center h-32" >
|
||||
<div class="flex justify-left">
|
||||
<img src="/icons/logo_with_full_text.svg" alt="description of image" class="h-24 scale-50" />
|
||||
<div class="grid xl:hidden items-center h-32">
|
||||
<div class="flex justify-left content-center">
|
||||
<img
|
||||
src="/icons/logo_with_full_text.svg"
|
||||
alt="description of image"
|
||||
class="h-24 scale-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
|
@ -3,4 +3,13 @@ import Layout from "../layouts/Layout.astro";
|
|||
import Card from "../components/Card.astro";
|
||||
---
|
||||
|
||||
<Layout title="Home" />
|
||||
<Layout title="Home">
|
||||
<iframe
|
||||
src="https://discord.com/widget?id=1041800035370811545&theme=dark"
|
||||
width="350"
|
||||
height="500"
|
||||
allowtransparency="true"
|
||||
frameborder="0"
|
||||
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,90 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./pages/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
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))",
|
||||
},
|
||||
ieee: {
|
||||
blue: "#00629B",
|
||||
},
|
||||
},
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
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",
|
||||
},
|
||||
plugins: [require("daisyui"), require("tailwindcss-animate")],
|
||||
daisyui: {
|
||||
themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
darkTheme: "light", // name of one of the included themes for dark mode
|
||||
base: true, // applies background color and foreground color for root element by default
|
||||
styled: true, // include daisyUI colors and design decisions for all components
|
||||
utils: true, // adds responsive and modifier utility classes
|
||||
rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
|
||||
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
|
||||
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue