Webmaster/old2-ieeeucsd-org
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

testing

Browse source
This commit is contained in:
chark1es 2023-10-17 13:53:43 -07:00
parent 4fa1e52980
commit 03de67defa
5 changed files with 184 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,5 +1,5 @@
{
"name": "",
"name": "ieeeucsd",
"type": "module",
"version": "0.0.1",
"scripts": {

BIN
public/backgrounds/fa21qp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 689 KiB

77
src/components/global/Navbar.astro
View file

@ -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-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="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 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>

11
src/pages/index.astro
View file

@ -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>

26
tailwind.config.mjs
View file

@ -2,10 +2,11 @@
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
"./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: {
@ -50,6 +51,9 @@ module.exports = {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
ieee: {
blue: "#00629B",
},
},
borderRadius: {
lg: "var(--radius)",
@ -72,5 +76,15 @@ module.exports = {
},
},
},
plugins: [require("tailwindcss-animate")],
}
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
},
};