Skip to content

Commit e78d6ab

Browse files
rodrigonyamrodrigonyam
committed
new changes
0 parents  commit e78d6ab

File tree

8 files changed

+285
-0
lines changed

8 files changed

+285
-0
lines changed

‎README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Camperbot's Blog
2+
3+
Small demo site — static HTML with a simple stylesheet and SVG logo/favicon.
4+
5+
## Files
6+
7+
- `index.html` — main page (includes header linking to `logo.svg`).
8+
- `styles.css` — external stylesheet (extracted from the page).
9+
- `logo.svg` — site logo shown in the header.
10+
- `favicon.svg` — SVG favicon linked in the page.
11+
12+
## Quick Start
13+
14+
Open the site directly (Windows):
15+
16+
```powershell
17+
start .\index.html
18+
```
19+
20+
Or run a minimal local HTTP server (Python 3) and open http://localhost:8000:
21+
22+
```powershell
23+
python -m http.server 8000
24+
```
25+
26+
Then open the URL in your browser.
27+
28+
## Notes
29+
30+
- The favicon uses an SVG (`favicon.svg`). Modern browsers support SVG favicons; if you need an `.ico` for older browsers, convert the SVG to `.ico`.
31+
- To generate a `favicon.ico` with ImageMagick (Windows):
32+
33+
```powershell
34+
magick convert favicon.svg -resize 64x64 favicon.ico
35+
```
36+
37+
- CSS is extracted into `styles.css` for easy editing. Move it into a `css/` folder if you prefer and update the `<link>` in `index.html`.
38+
39+
## Next steps (optional)
40+
41+
- Add an `.ico` fallback for older browsers.
42+
- Add a small `assets/` folder and place images there.
43+
- Commit the changes to git (I can create a small commit message if you want).
44+
45+
---
46+
47+
If you'd like, I can also produce a PNG/ICO favicon, move `styles.css` into a `css/` folder and update the HTML, or create a git commit for these changes.

‎bg-pattern.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎css/styles.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
:root{
2+
--bg: #e8f0f8;
3+
--bg-start: #dce8f5;
4+
--bg-end: #c9ddf0;
5+
--card: #ffffff;
6+
--accent: #1e5a9e;
7+
--accent-hover: #2b6cb0;
8+
--text: #0f2744;
9+
--muted: #5a6c7d;
10+
--shadow: rgba(15,39,68,0.08);
11+
--max-w: 900px;
12+
}
13+
*{box-sizing:border-box}
14+
html,body{height:100%}
15+
body{
16+
margin:0;
17+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
18+
background: linear-gradient(180deg,var(--bg-start),var(--bg-end)), url('../bg-pattern.svg');
19+
background-attachment: fixed, fixed;
20+
background-size: auto, 60px 60px;
21+
background-color:var(--bg); /* fallback */
22+
color:var(--text);
23+
line-height:1.5;
24+
-webkit-font-smoothing:antialiased;
25+
}
26+
.site-header{
27+
max-width:var(--max-w);
28+
margin:20px auto 8px;
29+
padding:8px 16px;
30+
display:flex;
31+
align-items:center;
32+
gap:12px;
33+
}
34+
.logo{width:56px;height:56px;display:block}
35+
main{max-width:var(--max-w);margin:24px auto;padding:0 16px}
36+
h1{font-size:clamp(1.5rem,2.5vw,2rem);margin:0}
37+
38+
nav{background:var(--card);border-radius:8px;padding:12px;margin:12px auto;max-width:var(--max-w);box-shadow:0 1px 2px rgba(2,6,23,0.06)}
39+
nav h2{margin:0 0 8px;font-size:1rem;color:var(--accent)}
40+
nav ul{display:flex;gap:12px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
41+
nav a{color:var(--accent);text-decoration:none;padding:6px 8px;border-radius:6px}
42+
nav a:focus, nav a:hover{background:#dae9f7;outline:none;color:var(--accent-hover)}
43+
44+
article{background:var(--card);margin:16px 0;padding:18px;border-radius:10px;box-shadow:0 6px 18px var(--shadow)}
45+
article h2{margin-top:0;color:var(--text)}
46+
article h3{color:var(--muted);margin-bottom:6px}
47+
p{margin:0 0 12px}
48+
a{color:var(--accent)}
49+
50+
footer{max-width:var(--max-w);margin:24px auto;padding:12px 16px;color:var(--muted);text-align:center}
51+
52+
@media (min-width:800px){nav ul{justify-content:flex-start}}
53+
@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms!important;transition-duration:0.001ms!important}}
54+
:focus{outline:3px solid #bfdcff;outline-offset:2px}

‎favicon.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Camperbot's Blog</title>
7+
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9+
</head>
10+
<body>
11+
<header class="site-header">
12+
<img src="logo.svg" alt="Campana logo" class="logo" width="56" height="56">
13+
<h1>Welcome to Campana's Blog</h1>
14+
</header>
15+
16+
<nav>
17+
<h2>Navigation</h2>
18+
<ul>
19+
<li><a href="#post1">My Journey</a></li>
20+
<li><a href="#post2">Accessibility</a></li>
21+
<li><a href="#post3">Next Steps</a></li>
22+
</ul>
23+
</nav>
24+
25+
<main>
26+
<article>
27+
<h2 id="post1">My Journey Learning to Code</h2>
28+
<p>I decided to start learning to code and it's been a wild ride!</p>
29+
30+
<h3>Early Challenges</h3>
31+
<p>At first, syntax was really confusing. I enjoy html, CSS and JavaScript</p>
32+
33+
<h3>Breakthroughs</h3>
34+
<p>Eventually things started to click. So, I decided to incorporate a bit of C-sharp and will soon be doing Python</p>
35+
</article>
36+
37+
<article>
38+
<h2 id="post2">Accessibility Matters</h2>
39+
<p>Today I learned that not everyone uses the web the same way I do.</p>
40+
41+
<h3>Screen Readers</h3>
42+
<p>These tools help visually impaired users browse websites.</p>
43+
</article>
44+
45+
<article>
46+
<h2 id="post3">What's Next?</h2>
47+
<p>I'm excited to dive into JavaScript and build interactive features!</p>
48+
49+
<h3>Coming soon: My first JavaScript project!</h3>
50+
<p>Stay tuned for some exciting interactive blog features.</p>
51+
</article>
52+
</main>
53+
<footer>
54+
<h2>Contact Me</h2>
55+
<p>Email me at <a href="mailto:[email protected]">[email protected]</a></p>
56+
</footer>
57+
</body>
58+
</html>

‎logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎make_favicon.py‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"""
2+
make_favicon.py
3+
4+
Converts `favicon.svg` into a multi-size `favicon.ico` for older browsers.
5+
6+
Usage:
7+
1) Install dependencies:
8+
pip install pillow cairosvg
9+
10+
2) Run:
11+
python make_favicon.py
12+
13+
This script will produce `favicon.ico` in the current directory.
14+
"""
15+
from pathlib import Path
16+
import sys
17+
18+
SVG = Path(__file__).with_name('favicon.svg')
19+
OUT = Path(__file__).with_name('favicon.ico')
20+
TMP_PNG = Path(__file__).with_name('favicon_tmp.png')
21+
22+
if not SVG.exists():
23+
print(f"Source SVG not found at {SVG}. Put favicon.svg beside this script.")
24+
sys.exit(2)
25+
26+
try:
27+
import cairosvg
28+
except Exception as e:
29+
print("cairosvg is required to convert SVG to PNG. Install with: pip install cairosvg")
30+
sys.exit(2)
31+
32+
try:
33+
from PIL import Image
34+
except Exception:
35+
print("Pillow is required to write the .ico file. Install with: pip install pillow")
36+
sys.exit(2)
37+
38+
# Render SVG to a PNG at 256x256 for quality, then save as multi-size ICO.
39+
print(f"Rendering {SVG} -> temporary PNG ({TMP_PNG})...")
40+
try:
41+
cairosvg.svg2png(url=str(SVG), write_to=str(TMP_PNG), output_width=256, output_height=256)
42+
except Exception as e:
43+
print("Failed to render SVG to PNG:", e)
44+
sys.exit(3)
45+
46+
print("Saving multi-size ICO (256, 128, 64, 32, 16)...")
47+
try:
48+
im = Image.open(TMP_PNG).convert('RGBA')
49+
sizes = [(256,256),(128,128),(64,64),(32,32),(16,16)]
50+
icons = [im.resize(s, Image.LANCZOS) for s in sizes]
51+
# Pillow expects the first image and sizes list when saving ico
52+
icons[0].save(OUT, format='ICO', sizes=[(s[0], s[1]) for s in sizes])
53+
print(f"Created {OUT}")
54+
finally:
55+
try:
56+
TMP_PNG.unlink()
57+
except Exception:
58+
pass

‎styles.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:root{
2+
--bg: #f7f9fc;
3+
--card: #ffffff;
4+
--accent: #2b6cb0;
5+
--muted: #6b7280;
6+
--max-w: 900px;
7+
}
8+
*{box-sizing:border-box}
9+
html,body{height:100%}
10+
body{
11+
margin:0;
12+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
13+
background:var(--bg);
14+
color:#0f172a;
15+
line-height:1.5;
16+
-webkit-font-smoothing:antialiased;
17+
}
18+
.site-header{
19+
max-width:var(--max-w);
20+
margin:20px auto 8px;
21+
padding:8px 16px;
22+
display:flex;
23+
align-items:center;
24+
gap:12px;
25+
}
26+
.logo{width:56px;height:56px;display:block}
27+
main{max-width:var(--max-w);margin:24px auto;padding:0 16px}
28+
h1{font-size:clamp(1.5rem,2.5vw,2rem);margin:0}
29+
30+
nav{background:var(--card);border-radius:8px;padding:12px;margin:12px auto;max-width:var(--max-w);box-shadow:0 1px 2px rgba(2,6,23,0.06)}
31+
nav h2{margin:0 0 8px;font-size:1rem;color:var(--accent)}
32+
nav ul{display:flex;gap:12px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
33+
nav a{color:var(--accent);text-decoration:none;padding:6px 8px;border-radius:6px}
34+
nav a:focus, nav a:hover{background:#e6f0fb;outline:none}
35+
36+
article{background:var(--card);margin:16px 0;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
37+
article h2{margin-top:0;color:#09203f}
38+
article h3{color:var(--muted);margin-bottom:6px}
39+
p{margin:0 0 12px}
40+
a{color:var(--accent)}
41+
42+
footer{max-width:var(--max-w);margin:24px auto;padding:12px 16px;color:var(--muted);text-align:center}
43+
44+
@media (min-width:800px){nav ul{justify-content:flex-start}}
45+
@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms!important;transition-duration:0.001ms!important}}
46+
:focus{outline:3px solid #bfdcff;outline-offset:2px}

0 commit comments

Comments
 (0)