diff --git a/deathsite/deathsite.py b/deathsite/deathsite.py
index c3afa9c..ed7a681 100644
--- a/deathsite/deathsite.py
+++ b/deathsite/deathsite.py
@@ -7,10 +7,10 @@ import datetime
# constants
TWITCH_USERNAME = "Death916"
YOUTUBE_URL = "https://www.youtube.com/@916HS"
-YOUTUBE_EMBED_URL = "https://www.youtube.com/embed/D43Ks8fxoz4"
+YOUTUBE_EMBED_URL = "https://www.youtube.com/embed/D43Ks8fxoz4"
-#styles
+# styles
NAV_BUTTON_STYLE = {
"color": "#f8f9fa",
@@ -21,15 +21,17 @@ NAV_BUTTON_STYLE = {
"_hover": {
"background_color": "#ffc107",
"color": "#212529",
- "text_decoration": "none", # Override link hover underline
+ "text_decoration": "none", # Override link hover underline
},
}
+
class State(rx.State):
current_page: str = "Home"
- page_title: str = "Death916's Site" # Added page_title attribute
+ page_title: str = "Death916's Site" # Added page_title attribute
current_time: str = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
def update_time(self):
self.current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
@@ -52,9 +54,10 @@ def navigation_button(text: str) -> rx.Component:
State.current_page == text,
{**NAV_BUTTON_STYLE, **active_style_dict},
NAV_BUTTON_STYLE,
- )
+ ),
)
+
def header() -> rx.Component:
"""Site header and navigation."""
return rx.box(
@@ -65,78 +68,123 @@ def header() -> rx.Component:
navigation_button("Videos"),
navigation_button("Blog"),
navigation_button("Projects"),
-
- spacing="4", # Spacing between nav items
+ spacing="4", # Spacing between nav items
justify="center",
align="center",
),
width="100%",
- bg="#212529", # Dark background
+ bg="#212529", # Dark background
padding="1.5em 0",
- border_bottom="3px solid #6f42c1", # Dark purple accent border
- align="center", # Center heading and nav horizontally
+ border_bottom="3px solid #6f42c1", # Dark purple accent border
+ align="center", # Center heading and nav horizontally
),
)
-
+
+
+def footer() -> rx.Component:
+ return rx.box(
+ rx.text(
+ f"© {datetime.datetime.now().year} Death916 - Powered by Reflex",
+ color="#6c757d",
+ font_size="0.9em",
+ ),
+ padding="0.5em", # Reduced padding
+ border_top="1px solid #dee2e6",
+ width="100%",
+ text_align="center", # Center the text
+ position="sticky", # Stick to the bottom
+ bottom="0", # Stick to the bottom
+ bg="", #
+ )
+
def home():
return rx.box(
rx.vstack(
- rx.heading("Home Page", size="3", color="#ffffff"),
- rx.text("This is the home page content.", color="#ffffff"),
- padding="2em",
- spacing="1",
- align_items="start", # Align content to the start (left)
+ rx.container(
+ rx.vstack(
+ rx.heading(
+ "Welcome to my domain",
+ color="#ffffff",
+ style={"text_align": "center"},
+ ),
+ rx.text(
+ "This is a personal site for my projects and streams. Never really made a full site for myself before so this will be a work in progress.",
+ color="#ffffff",
+ style={"text_align": "center"},
+ ),
+ spacing="1",
+ width="100%",
+ align_items="center",
+ justify="center",
+ ),
+ padding="2em",
+ width="100%",
+ align_items="center",
+ justify="center",
+ ),
+ align_items="center", # Center content horizontally
+ justify="center", # Center content vertically
+ width="100%",
),
rx.vstack(
rx.heading("Whats New:", size="2", color="#ffffff"),
- rx.text("Latest Stream: ", color="#ffffff"),
- rx.link(
- "Twitch Stream",
- href=f"https://www.twitch.tv/{TWITCH_USERNAME}",
- color="#ffffff",
- is_external=True,
- ),
rx.html(
f"""
-
+
"""
),
- align_items="start", # Align content to the start (left)
+ rx.text("Latest Stream: ", color="#ffffff"),
+ rx.link(
+ "Twitch Stream",
+ href=f"https://www.twitch.tv/{TWITCH_USERNAME}",
+ color="#ffffff",
+ is_external=True,
),
- align_items="start", # Align content to the start (left)
- width="100%", # Take up full width
+ align_items="start", # Align content to the start (left)
+ ),
+ align_items="start", # Align content to the start (left)
+ width="100%", # Take up full width
+ )
+
+
+def page_content(content):
+ ## Wraps the content in a box with a dark background and padding
+ return rx.box(
+ rx.vstack(
+ content,
+ align_items="center",
+ justify="center",
+ width="100%",
+ ),
+ width="100%",
)
def projects():
- return rx.box(
+ return page_content(
rx.vstack(
rx.heading("Projects Page", size="3", color="#ffffff"),
rx.text("This is the projects page content.", color="#ffffff"),
padding="2em",
spacing="1",
- align_items="start", # Align content to the start (left)
- ),
- align_items="start", # Align content to the start (left)
- width="100%", # Take up full width
+ )
)
+
def blog():
- return rx.box(
+ return page_content(
rx.vstack(
rx.heading("Blog Page", size="3", color="#ffffff"),
rx.text("This is the blog page content.", color="#ffffff"),
padding="2em",
spacing="1",
- align_items="start", # Align content to the start (left)
- ),
- align_items="start", # Align content to the start (left)
- width="100%", # Take up full width
+ )
)
+
def videos():
- return rx.box(
+ return page_content(
rx.vstack(
rx.heading("Videos Page", size="3", color="#ffffff"),
rx.text("NEWEST VIDEOS:", color="#ffffff"),
@@ -148,17 +196,14 @@ def videos():
),
padding="2em",
spacing="1",
- align_items="start", # Align content to the start (left)
- ),
- align_items="start", # Align content to the start (left)
- width="100%", # Take up full width
-
+ )
)
+
def index():
return rx.box(
header(),
- rx.container(
+ rx.box(
rx.cond(
State.current_page == "Home",
home(),
@@ -172,26 +217,39 @@ def index():
State.current_page == "Projects",
projects(),
rx.vstack(
- rx.heading("Welcome to My Personal Site", size="1", color="#ffffff"),
- rx.text("This is a personal site for my projects and streams.", color="#ffffff"),
+ rx.heading(
+ "Welcome to My Personal Site",
+ size="1",
+ color="#ffffff",
+ ),
+ rx.text(
+ "This is a personal site for my projects and streams.",
+ color="#ffffff",
+ ),
rx.text(f"Current time: {State.current_time}", color="#ffffff"),
padding="2em",
spacing="2",
- align_items="start", # Align content to the start (left)
),
- )
- )
- )
+ ),
+ ),
+ ),
),
- # Take up full width
- align_items="start", # Align content to the start (left)
+ width="100%",
+ flex_grow="1", # Allow the content to grow and push the footer down
),
- # Take up full width
+ footer(),
+ width="100%",
+ display="flex",
+ flex_direction="column",
+ min_height="100vh", # Ensure the box takes up at least the full viewport height
)
-
+
app = rx.App()
app.add_page(
index,
title=State.page_title,
)
+
+
+# TODO add guild page