diff --git a/games.html b/games.html index f4c9182..683ab70 100644 --- a/games.html +++ b/games.html @@ -30,13 +30,27 @@ -
+ - + + + +

Welcome to our comprehensive list of games featuring Blupi, also known as Speedy Eggbert. Created by Daniel Roux, these games span various genres including educational, puzzle, and strategy. This collection showcases the diversity and charm of Blupi games, highlighting the creativity and innovation behind each title.

@@ -76,8 +90,8 @@
- + diff --git a/index.html b/index.html index 2df9e70..5749c3e 100644 --- a/index.html +++ b/index.html @@ -34,13 +34,27 @@ -
+ - + + + +

Who is Blupi?

@@ -75,8 +89,8 @@
- + diff --git a/styles.css b/styles.css index 2115c4e..35e162c 100644 --- a/styles.css +++ b/styles.css @@ -5,27 +5,79 @@ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern and readable font */ color: #333; /* Dark gray text color for good contrast */ line-height: 1.6; /* Improved text readability */ - margin: 0; + margin: auto; + max-width: 1000px; } /* Style for the main banner */ #main_banner { background-color: #ffeb3b; /* Light yellow for a prominent banner */ margin: 0; - padding: 20px; /* More space for better appearance */ + padding: 15px; /* More space for better appearance */ text-align: center; /* Center text */ - border-radius: 12px; /* Rounded corners for a modern look */ + border-top-left-radius: 12px; /* Rounded corners for a modern look */ + border-top-right-radius: 12px; /* Rounded corners for a modern look */ + box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Soft shadow for emphasis */ font-size: 2em; /* Increased font size for importance */ font-weight: bold; /* Highlight text */ color: #333; /* Dark gray text color for contrast */ } +/* Combined Breadcrumb and Hierarchical Navigation Panel */ +#breadcrumb_hierarchy_panel { + padding: 10px; + background-color: #ffffff; /* Light yellow background */ + font-size: 0.9em; + margin-bottom: 20px; + border-radius: 8px; /* Rounded corners for a modern look */ + font-weight: normal; + border: 0px solid #ffa967; + box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Soft shadow for emphasis */ +} + +#breadcrumb_hierarchy_panel a { + color: #f57f17; /* Dark yellow color for links */ + text-decoration: none; +} + +#breadcrumb_hierarchy_panel a:hover { + text-decoration: underline; + color: #e65100; /* Darker yellow color on hover */ +} + +#breadcrumb_hierarchy_panel span { + color: #795548; /* Brown color for the current page */ +} + +/* Hierarchical Navigation Panel */ +#hierarchy_panel { + display: inline-block; /* Inline layout */ + padding-top: 10px; +} + +#hierarchy_panel a { + color: #f57f17; /* Dark yellow color for links */ + text-decoration: none; +} + +#hierarchy_panel a:hover { + text-decoration: underline; + color: #e65100; /* Darker yellow color on hover */ +} + +#hierarchy_panel a + a::before { + content: "|"; + color: #f57f17; /* Dark yellow color for separators */ + margin: 0 8px; +} + /* Style for navigation menu */ nav { padding: 15px; background-color: #fff3e0; /* Light orange background for navigation */ - border-radius: 8px; /* Rounded corners for a modern look */ + border-bottom-left-radius: 8px; /* Rounded corners for a modern look */ + border-bottom-right-radius: 8px; /* Rounded corners for a modern look */ border-bottom: 3px solid #ffca28; /* Light yellow bottom border */ margin-bottom: 20px; /* Space below navigation */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for separation */ @@ -87,8 +139,21 @@ footer { color: #333; /* Dark gray text color for contrast */ } -/* Responsive design for navigation menu on small screens */ +/* Responsive design for navigation menu and banner on small screens */ @media (max-width: 768px) { + #main_banner { + font-size: 1.5em; /* Smaller font size for the banner on smaller screens */ + padding: 10px; /* Reduce padding for better fit */ + } + + nav { + padding: 10px; /* Reduce padding for navigation on smaller screens */ + } + + nav a { + font-size: 0.9em; /* Smaller font size for navigation links */ + } + nav ul { flex-direction: column; /* Stack list items vertically on smaller screens */ align-items: center; /* Center align list items */ diff --git a/websites.html b/websites.html index dfde53e..5284b99 100644 --- a/websites.html +++ b/websites.html @@ -3,7 +3,7 @@ - Blupi: Comprehensive List of Websites Related to the Iconic Character + Blupi: Comprehensive List of related Websites @@ -26,22 +26,36 @@
-

Blupi: Comprehensive List of Websites Related to the Iconic Character

+

Blupi: Comprehensive List of related Websites

-
+
- + + + +

Related Websites

Discover a curated list of websites related to Blupi, also known as Speedy Eggbert. These resources include fan sites, official pages, and other valuable information about this beloved platformer game character created by Daniel Roux:

- +
- +