godotengine / godot-website

The code for the official Godot Engine website. A static site built using Jekyll.
https://godotengine.org
MIT License
292 stars 143 forks source link

Add GodotCon 2023 banner #746

Closed Calinou closed 9 months ago

Calinou commented 10 months ago

This reuses the design from https://github.com/godotengine/godot-website/pull/316.

Preview

Screenshot 2023-11-03 at 08-21-07 Godot Engine - Free and open source 2D and 3D game engine

In the future, we should investigate a design that's more easily seen on wide displays (example on a 4K display at 100% scale):

Screenshot 2023-11-03 at 08-16-59 Godot Engine - Free and open source 2D and 3D game engine

coppolaemilio commented 10 months ago

Looks nice! I tried it out quickly but it is covering some of the nav buttons:

image

Not sure if it can start under the nav so it never covers it?

YuriSizov commented 10 months ago

Could hide it behind the header.

image image

Edit: Though maybe there is no winning :)

image

Here's the diff just in case


diff --git a/_includes/footer.html b/_includes/footer.html
index 6b54eb62..95a48251 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,5 +1,9 @@
 </main>

+<a href="https://conference.godotengine.org/" class="current-event-banner">
+   GodotCon 2023!
+</a>
+
 <footer>
    <div class="container flex footer-container">
        <div id="copyright">
diff --git a/_includes/header.html b/_includes/header.html
index 4c3fdc4d..eaed4868 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,20 +1,5 @@
 <input type="checkbox" id="nav_toggle_cb">
 <header>
-   <a href="https://conference.godotengine.org/" style="
-       position: absolute;
-       top: 2.65rem;
-       right: -3.65rem;
-       transform: rotateZ(45deg);
-       z-index: 9999;
-       padding: 0.5rem 3.5rem;
-       background-color: #f36a7f;
-       box-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.3);
-       color: black;
-       text-decoration: none;
-       font-weight: 700;
-   ">
-       GodotCon 2023!
-   </a>
    <div class="container flex align-center">
        <div id="nav_head">
            <a href="/" id="logo-link">
diff --git a/_layouts/default.html b/_layouts/default.html
index 68c38b70..31b482d7 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -21,7 +21,7 @@
    <link rel="alternate" type="application/rss+xml" title="Godot News" href="/rss.xml">
    <link rel="icon" href="/assets/favicon.png" sizes="any">
    <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
-   <link rel="stylesheet" href="/assets/css/main.css?109">
+   <link rel="stylesheet" href="/assets/css/main.css?110">
    <link rel="stylesheet" href="/assets/css/tobii.min.css">
    <link rel="preload" as="font" href="/assets/fonts/Montserrat-Bold.woff2" crossorigin>
    <link rel="preload" as="font" href="/assets/fonts/Montserrat-ExtraBold.woff2" crossorigin>
diff --git a/assets/css/main.css b/assets/css/main.css
index 44fa7a7b..e430a55a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1468,3 +1468,17 @@ section.sponsors .grid {
 .sponsor-empty:hover {
   background-color: #8484841c;
 }
+
+.current-event-banner {
+  position: absolute;
+  top: 4.75rem;
+  right: -4rem;
+  transform: rotateZ(45deg);
+  padding: 0.5rem 3.5rem 0.5rem 8.5rem;
+  z-index: 1;
+  background-color: var(--fund-color);
+  box-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.3);
+  color: black;
+  text-decoration: none;
+  font-weight: 700;
+}
mhilbrunner commented 9 months ago

I think we can close this at this point :)

coppolaemilio commented 9 months ago

Yes, but we would need to find a place where to add this sort of banners for future events. Probably a bar under the current nav.