Styling

The RobTop Games Web project uses a combination of Bootstrap 5, custom CSS files, and Google Fonts to create a cohesive visual design with the signature blue gradient background.

CSS Architecture

The project’s stylesheets are loaded in the following order in Layout.astro:

src/layouts/Layout.astro

<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="/assets/css/Pusab.css" />
<link rel="stylesheet" href="/assets/css/bss-overrides.css" />
<link rel="stylesheet" href="/assets/css/Overlay-Video-Player.css" />
<link rel="stylesheet" href="/assets/css/Responsive-Youtube-Embed.css" />

Stylesheet Order

Bootstrap - Base framework styles
Google Fonts - ABeeZee and Abel fonts
Bootstrap Icons - Icon font library
Custom CSS - Project-specific styles

Custom Stylesheets

The project includes four custom CSS files located in public/assets/css/:

Pusab.css - Custom Font

Defines the custom Pusab font used in the Geometry Dash branding:

public/assets/css/Pusab.css

@font-face {
  font-family: "Pusab";
  src:
    url(../../assets/fonts/Pusab-72e68364ba50615aca23d694f25484c0.woff2) format("woff2"),
    url(../../assets/fonts/Pusab-a7d525c010747804d11ab40b1e8af884.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Usage:

h1 {
  font-family: "Pusab", sans-serif;
}

bss-overrides.css - Bootstrap Overrides

Customizes Bootstrap’s default styles, particularly the body font:

public/assets/css/bss-overrides.css

:root,
[data-bs-theme="light"] {
  --bs-body-font-family: "ABeeZee", sans-serif;
}

This sets ABeeZee as the default font for all body text, overriding Bootstrap’s default font stack.

Overlay-Video-Player.css - Video Components

Styles for video thumbnails with hover effects:

public/assets/css/Overlay-Video-Player.css

.video-thumb {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  transition: 0.2s;
}

.video-thumb:hover {
  transform: scale(1.05);
}

.video-thumb:before {
  content: "";
  position: absolute;
  background: url("../../assets/img/play.svg") no-repeat center center;
  background-size: 6%;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.4));
  opacity: 0;
  transition: 0.2s;
}

.video-thumb:hover:before {
  opacity: 1;
}

Also includes footer text hover animations.

Responsive-Youtube-Embed.css - Video Embeds

Maintains 16:9 aspect ratio for embedded videos:

public/assets/css/Responsive-Youtube-Embed.css

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Fonts

The project uses three font families:

ABeeZee (Body Font)

Source: Google Fonts
Usage: Default body text
Applied via: CSS custom property --bs-body-font-family

/* Automatically applied to all body text */
body {
  font-family: var(--bs-body-font-family); /* "ABeeZee", sans-serif */
}

Abel

Source: Google Fonts
Usage: Available for headings or special text
Apply manually:

.special-heading {
  font-family: "Abel", sans-serif;
}

Pusab (Custom Font)

Source: Local font files
Usage: Geometry Dash branding and logos
Formats: WOFF2 (modern browsers), WOFF (fallback)

.gd-logo {
  font-family: "Pusab", sans-serif;
}

Color Scheme

The site uses a blue gradient background defined inline in the Layout:

src/layouts/Layout.astro

<body
  style="background: linear-gradient(#0281C6, #00385C);
         background-position: center center;
         background-repeat: no-repeat;
         background-size: cover;
         background-attachment: fixed;"
>

Primary Colors

Light Blue: #0281C6 - Top of gradient
Dark Blue: #00385C - Bottom of gradient

Customizing the Gradient

To change the background gradient, edit src/layouts/Layout.astro:

<!-- Example: Purple gradient -->
<body
  style="background: linear-gradient(#8B5CF6, #4C1D95);
         background-position: center center;
         background-repeat: no-repeat;
         background-size: cover;
         background-attachment: fixed;"
>

The gradient is defined with background-attachment: fixed, which keeps it stationary during scrolling. This creates a parallax-like effect but may impact performance on some mobile devices.

Bootstrap Theme

The project uses Bootstrap’s light theme:

<html data-bs-theme="light" lang="en">

Switching to Dark Mode

To enable dark mode, change the theme attribute:

<html data-bs-theme="dark" lang="en">

Or implement a theme toggle using JavaScript:

// Toggle between light and dark
const html = document.documentElement;
const currentTheme = html.getAttribute('data-bs-theme');
html.setAttribute('data-bs-theme', currentTheme === 'light' ? 'dark' : 'light');

Custom Styles Location

To add your own custom styles, you have two options:

Option 1: Add to Existing Files

Edit public/assets/css/bss-overrides.css for general customizations:

:root,
[data-bs-theme="light"] {
  --bs-body-font-family: "ABeeZee", sans-serif;
  
  /* Add your custom CSS variables */
  --custom-primary: #0281C6;
  --custom-spacing: 2rem;
}

/* Add your custom classes */
.custom-card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Option 2: Create New Stylesheet

Create a new CSS file in public/assets/css/:
```
touch public/assets/css/custom.css
```
Add your styles:
public/assets/css/custom.css
```
.my-component {
  /* Your styles */
}
```

Link it in src/layouts/Layout.astro:

<link rel="stylesheet" href="/assets/css/custom.css" />

Responsive Design

The project uses Bootstrap’s responsive grid system and utility classes:

Breakpoints

Bootstrap 5.3 breakpoints:

xs: < 576px
sm: ≥ 576px
md: ≥ 768px
lg: ≥ 992px
xl: ≥ 1200px
xxl: ≥ 1400px

Responsive Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on mobile, half on tablet, third on desktop -->
    </div>
  </div>
</div>

Animation and Transitions

The project uses CSS transitions for smooth interactions:

/* Video thumbnail hover */
.video-thumb {
  transition: 0.2s; /* Fast transition */
}

/* Footer text hover */
.footer-text {
  transition: transform 0.3s ease; /* Smooth transform */
}

Adding Custom Animations

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeIn 0.5s ease-out;
}

Best Practices

CSS Custom Properties: Use CSS variables for colors and repeated values
Mobile First: Design for mobile devices first, then scale up
Performance: Minimize custom CSS to reduce bundle size
Specificity: Keep selectors simple to avoid specificity conflicts
Bootstrap Utilities: Use Bootstrap utility classes when possible instead of custom CSS

Component-Specific Styles

For component-specific styles, use Astro’s scoped styles:

src/components/MyComponent.astro

<div class="custom-component">
  <h2>My Component</h2>
</div>

<style>
  .custom-component {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .custom-component h2 {
    color: white;
  }
</style>

Scoped styles are automatically scoped to the component and won’t affect other elements.

​CSS Architecture

​Stylesheet Order

​Custom Stylesheets

​Fonts

​ABeeZee (Body Font)

​Abel

​Pusab (Custom Font)

​Color Scheme

​Primary Colors

​Customizing the Gradient

​Bootstrap Theme

​Switching to Dark Mode

​Custom Styles Location

​Option 1: Add to Existing Files

​Option 2: Create New Stylesheet

​Responsive Design

​Breakpoints

​Responsive Example

​Animation and Transitions

​Adding Custom Animations

​Best Practices

​Component-Specific Styles

Build docs developers (and LLMs) love

CSS Architecture

Stylesheet Order

Custom Stylesheets

Fonts

ABeeZee (Body Font)

Abel

Pusab (Custom Font)

Color Scheme

Primary Colors

Customizing the Gradient

Bootstrap Theme

Switching to Dark Mode

Custom Styles Location

Option 1: Add to Existing Files

Option 2: Create New Stylesheet

Responsive Design

Breakpoints

Responsive Example

Animation and Transitions

Adding Custom Animations

Best Practices

Component-Specific Styles