Skip to content

Commit fbee83f

Browse files
Gui-FernandesBRGui-FernandesBR
authored
Merge pull request #15 from RocketPy-Team/fix/layout-flexbox-grid-issue-8
fix: replace absolute layout with flexbox and grid (resolves #8)
2 parents f87da81 + f05fb1f commit fbee83f

14 files changed

Lines changed: 1447 additions & 346 deletions

‎.github/copilot-instructions.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# RocketPy Team Website - AI Coding Agent Instructions
2+
3+
## Project Overview
4+
This is a **static marketing website** for RocketPy (rocketpy.org) - an open-source rocket trajectory simulator. The site is deployed via GitHub Pages and consists of pure HTML/CSS with no JavaScript framework.
5+
6+
## Architecture & Structure
7+
8+
### Core Pages
9+
- `index.html` - Main landing page with project overview, features, and social links
10+
- `about.html` - Team member profiles page (currently has placeholder content)
11+
12+
### Styling Approach
13+
- **No CSS framework** - All styles are custom CSS, no Bootstrap/Tailwind usage
14+
- `css/main.css` - Global styles and layout for index page (1000+ lines)
15+
- `css/footer.css` - Shared footer component styles
16+
- `about-css/main.css` - Styles specific to the about page
17+
- Font Awesome icons loaded via local files in `css/font-awesome/`
18+
19+
### Design System
20+
- **Custom class naming**: Uses verbose positional class names (e.g., `v33_2`, `v37_87`, `v35_22`)
21+
- These appear to be from a design tool export (likely Figma)
22+
- Classes combine position, layout, and content styling
23+
- **Typography**: Primary fonts are "Ruda" (body) and "Nasalization" (headings) loaded from Google Fonts
24+
- **Color scheme**: Dark blue/space theme with gradients (`rgba(33, 35, 50, 0.65)`, `rgba(3, 11, 40, 1)`)
25+
26+
### Image Assets
27+
- Background images referenced in CSS (e.g., `url("../images/Default Background.png")`)
28+
- Images use cryptic names from design tool exports (`v35_22.png`, `v73_37.png`)
29+
- Favicon and logo files in `images/` directory
30+
31+
## Development Workflow
32+
33+
### Code Formatting
34+
```bash
35+
npm run format # Runs Prettier on all HTML, CSS, JS files
36+
```
37+
Only dev dependency is Prettier (v3.3.3). Always format before committing.
38+
39+
### Deployment
40+
- **Automatic deployment** via GitHub Actions (`.github/workflows/static.yml`)
41+
- Triggers on push to `master` branch
42+
- No build step - deploys entire repository as-is to GitHub Pages
43+
- Site URL: https://rocketpy.org
44+
45+
## Conventions & Patterns
46+
47+
### HTML Structure
48+
1. **External resource loading**: Pages load multiple Google Fonts, Bootstrap CDN (only for CSS grid), and Font Awesome
49+
2. **Inline onclick handlers**: Used sparingly (e.g., simulate button redirects to `https://app.rocketpy.org/`)
50+
3. **Footer**: Consistent footer component across pages with team info, social links, and company details
51+
52+
### CSS Patterns
53+
1. **Absolute positioning**: Heavy use of absolute positioning with `top`/`left` percentages for layout
54+
2. **Background images**: Applied directly via CSS `background: url()` properties
55+
3. **Responsive considerations**: Limited mobile responsiveness - appears optimized for desktop viewing
56+
4. **Fixed dimensions**: Many elements use fixed widths (e.g., `width: 600px`) rather than responsive units
57+
58+
### Asset Management
59+
- No image optimization pipeline - images stored directly in `images/` and `about-images/`
60+
- Custom font file (`nasalization-rg.otf`) in root directory
61+
- `node_modules/` gitignored but `package-lock.json` committed
62+
63+
## Integration Points
64+
65+
### External Services
66+
- **Documentation**: Links to `docs.rocketpy.org` (hosted elsewhere)
67+
- **Simulation app**: Links to `https://app.rocketpy.org/` (separate application)
68+
- **GitHub repository**: Main project at `github.com/RocketPy-Team/RocketPy`
69+
- **Social media**: Instagram, LinkedIn, YouTube, Discord links throughout
70+
71+
### Key Links to Preserve
72+
- Academic paper: `ascelibrary.org/doi/10.1061/(ASCE)AS.1943-5525.0001331`
73+
- Documentation examples: `docs.rocketpy.org/en/latest/examples/index.html`
74+
- Discord invite: `discord.com/invite/b6xYnNh`
75+
76+
## Common Tasks
77+
78+
### Adding New Content
79+
- Text content is inline in HTML - edit directly in `<span>` elements
80+
- Maintain class naming pattern for consistency with existing design-tool-exported structure
81+
- Footer updates require changes in both `index.html` and `about.html`
82+
83+
### Styling Changes
84+
- Check both `css/main.css` and page-specific CSS files
85+
- Many styles are tightly coupled to specific class names
86+
- Background and decorative divs (empty `<div class="v##_##"></div>`) control layout sections
87+
88+
### About Page Work
89+
- Currently has incomplete/placeholder content with team member sections
90+
- Images for team members go in `about-images/`
91+
- Follow the nested structure pattern already present for team member cards

‎.gitignore‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,19 @@
1-
node_modules/
1+
# Dependency directories
2+
node_modules/
3+
4+
# Build output
5+
dist/
6+
7+
# OS files
8+
.DS_Store
9+
Thumbs.db
10+
11+
# IDE files
12+
.vscode/
13+
.idea/
14+
*.swp
15+
*.swo
16+
17+
# Logs
18+
*.log
19+
npm-debug.log*

‎_headers‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Cache-Control Headers Configuration
2+
# This file is used to configure caching for GitHub Pages
3+
4+
# Images - cache for 1 year
5+
*.png
6+
Cache-Control: public, max-age=31536000, immutable
7+
8+
*.jpg
9+
Cache-Control: public, max-age=31536000, immutable
10+
11+
*.jpeg
12+
Cache-Control: public, max-age=31536000, immutable
13+
14+
*.webp
15+
Cache-Control: public, max-age=31536000, immutable
16+
17+
*.svg
18+
Cache-Control: public, max-age=31536000, immutable
19+
20+
*.ico
21+
Cache-Control: public, max-age=31536000, immutable
22+
23+
# Fonts - cache for 1 year
24+
*.woff
25+
Cache-Control: public, max-age=31536000, immutable
26+
27+
*.woff2
28+
Cache-Control: public, max-age=31536000, immutable
29+
30+
*.ttf
31+
Cache-Control: public, max-age=31536000, immutable
32+
33+
*.otf
34+
Cache-Control: public, max-age=31536000, immutable
35+
36+
*.eot
37+
Cache-Control: public, max-age=31536000, immutable
38+
39+
# CSS and JS - cache for 1 week with revalidation
40+
*.css
41+
Cache-Control: public, max-age=604800, must-revalidate
42+
43+
*.js
44+
Cache-Control: public, max-age=604800, must-revalidate
45+
46+
# HTML - cache for 1 hour with revalidation
47+
*.html
48+
Cache-Control: public, max-age=3600, must-revalidate

‎about-css/main.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1395,3 +1395,107 @@ body {
13951395
border-bottom-right-radius: 50px;
13961396
overflow: hidden;
13971397
}
1398+
1399+
/* ============================================
1400+
RESPONSIVE DESIGN FOR ABOUT PAGE
1401+
============================================ */
1402+
1403+
/* Tablets and mobile devices */
1404+
@media (max-width: 1024px) {
1405+
.v89_33 {
1406+
height: auto;
1407+
min-height: 100vh;
1408+
position: relative;
1409+
}
1410+
1411+
/* Reset all absolutely positioned elements to flow layout */
1412+
.v89_136,
1413+
.v89_137,
1414+
.v89_138,
1415+
.v89_139,
1416+
.v89_140,
1417+
.v89_141,
1418+
.v89_142,
1419+
.v89_143,
1420+
.v89_144,
1421+
.v89_145,
1422+
.v89_146,
1423+
.v89_147,
1424+
.v89_148,
1425+
.v89_149,
1426+
.v89_150,
1427+
.v89_151,
1428+
.v89_152,
1429+
.v89_153,
1430+
.v89_154,
1431+
.v89_155,
1432+
.v89_156,
1433+
.v89_157,
1434+
.v89_158,
1435+
.v89_159,
1436+
.v89_160,
1437+
.v89_161,
1438+
.v89_162,
1439+
.v89_163,
1440+
.v89_164,
1441+
.v89_165,
1442+
.v89_166,
1443+
.v89_167,
1444+
.v89_168,
1445+
.v89_169 {
1446+
position: relative;
1447+
left: auto;
1448+
right: auto;
1449+
top: auto;
1450+
width: 90%;
1451+
max-width: 500px;
1452+
margin: 15px auto;
1453+
display: block;
1454+
}
1455+
1456+
/* Team member profile images */
1457+
.v89_140,
1458+
.v89_145,
1459+
.v89_152,
1460+
.v89_159,
1461+
.v89_166 {
1462+
width: 150px;
1463+
height: 150px;
1464+
margin: 20px auto;
1465+
}
1466+
1467+
/* Social media icons */
1468+
.v89_138,
1469+
.v89_143,
1470+
.v89_150,
1471+
.v89_157,
1472+
.v89_164 {
1473+
width: 35px;
1474+
height: 35px;
1475+
margin: 10px auto;
1476+
}
1477+
}
1478+
1479+
/* Mobile phones */
1480+
@media (max-width: 768px) {
1481+
body {
1482+
font-size: 12px;
1483+
}
1484+
1485+
.v89_137,
1486+
.v89_142,
1487+
.v89_147,
1488+
.v89_154,
1489+
.v89_161 {
1490+
font-size: 14px;
1491+
padding: 0 10px;
1492+
}
1493+
1494+
.v89_141,
1495+
.v89_148,
1496+
.v89_155,
1497+
.v89_162,
1498+
.v89_169 {
1499+
font-size: 14px;
1500+
}
1501+
}

‎about.html‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,46 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<link
5-
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
6-
rel="stylesheet"
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Meet the RocketPy team - dedicated engineers and developers building open-source rocket simulation software for the aerospace community."
79
/>
8-
<link
9-
href="https://fonts.googleapis.com/css?family=Nasalization&display=swap"
10-
rel="stylesheet"
10+
<meta property="og:title" content="RocketPy Team - About Us" />
11+
<meta
12+
property="og:description"
13+
content="Meet the team behind RocketPy rocket trajectory simulator"
14+
/>
15+
<meta property="og:type" content="website" />
16+
<meta property="og:url" content="https://rocketpy.org/about.html" />
17+
<meta
18+
property="og:image"
19+
content="https://rocketpy.org/images/logo-white.png"
1120
/>
21+
<meta name="twitter:card" content="summary_large_image" />
22+
<meta name="twitter:title" content="RocketPy Team - About Us" />
23+
<meta
24+
name="twitter:image"
25+
content="https://rocketpy.org/images/logo-white.png"
26+
/>
27+
<link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
28+
<link rel="manifest" href="./manifest.json" />
29+
<meta name="theme-color" content="#030B28" />
30+
31+
<!-- Preconnect to external domains -->
32+
<link rel="preconnect" href="https://fonts.googleapis.com" />
33+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
34+
35+
<!-- Consolidated Google Fonts -->
1236
<link
13-
href="https://fonts.googleapis.com/css?family=Ruda&display=swap"
37+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Ruda:wght@400;700&display=swap"
1438
rel="stylesheet"
1539
/>
40+
1641
<link href="./about-css/main.css" rel="stylesheet" />
1742
<link href="./css/main.css" rel="stylesheet" />
18-
<title>Document</title>
43+
<title>About the Team - RocketPy</title>
1944
</head>
2045

2146
<body>

‎css/footer.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);
1+
/* Open Sans font loaded in HTML head for better performance */
22

33
* {
4-
font-family: Open Sans;
4+
font-family: "Open Sans", sans-serif;
55
}
66

77
.footer-distributed {

0 commit comments

Comments
 (0)