From cd1f55e52e204db24712e84738a80609986d7ea9 Mon Sep 17 00:00:00 2001 From: Luke Marsden Date: Fri, 3 Jan 2025 14:17:51 +0100 Subject: [PATCH] added hero image and call to action --- _layouts/default.html | 65 ++++++++++----------------------- assets/css/custom.css | 83 +++++++++++++++++++++++++++++++++++++++++++ index.md | 5 +++ 3 files changed, 107 insertions(+), 46 deletions(-) create mode 100644 assets/css/custom.css diff --git a/_layouts/default.html b/_layouts/default.html index d26f039bc..138f0e9a5 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,58 +12,14 @@ + - + - - - @@ -98,6 +54,23 @@ {% endif %} + + {% if page.hero_image %} +
+
+ {% if page.hero_header %} +

{{ page.hero_header }}

+ {% endif %} + {% if page.hero_paragraph %} +

{{ page.hero_paragraph }}

+ {% endif %} + {% if page.hero_button_text and page.hero_button_url %} + {{ page.hero_button_text }} + {% endif %} +
+
+ {% endif %} +
{{ content }} diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 000000000..d9f5a96f5 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,83 @@ +body { + padding-bottom: 20px; +} + +p a.anchor { + display: block; + position: relative; + top: -50px; + visibility: hidden; +} + +.flash-message { + padding: 1em; + margin-bottom: 0; /* Remove margin below flash message */ + border: 1px solid transparent; + border-radius: 4px; + text-align: center; +} + +.flash-info { + background-color: #d9edf7; + color: #31708f; + border-color: #bce8f1; +} + +.flash-success { + background-color: #dff0d8; + color: #3c763d; + border-color: #d6e9c6; +} + +.flash-warning { + background-color: #fcf8e3; + color: #8a6d3b; + border-color: #faebcc; +} + +.flash-error { + background-color: #f2dede; + color: #a94442; + border-color: #ebccd1; +} + +.hero { + position: relative; + height: 350px; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + color: white; + text-align: center; +} + +.hero-content { + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for better readability */ + padding: 20px; + border-radius: 8px; +} + +.hero h1 { + font-size: 2.5rem; + margin: 0; +} + +.hero p { + font-size: 1.2rem; +} + +.jumbotron { + margin-bottom: 0; + position: relative; +} + +.jumbotron h1, .jumbotron p { + color: white; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); +} + +.jumbotron a.btn { + text-shadow: none; +} \ No newline at end of file diff --git a/index.md b/index.md index f3afa6300..90ae21985 100755 --- a/index.md +++ b/index.md @@ -3,6 +3,11 @@ layout: default title: CF Conventions Home Page flash_message: "The CF Conventions have won the AGU Open Science Recognition Prize for 2024! 🎉" flash_message_type: "success" # Optional: Use 'info', 'success', 'warning', or 'error' +# hero_image: Data/media/images/CF2024_group1.JPG +hero_header: CF Metadata Conventions # Only displays if hero_image is provided +# hero_paragraph: Some words about the CF Conventions # Only displays if hero_image is provided +hero_button_text: View latest release # Only displays if hero_image is provided +hero_button_url: Data/cf-conventions/cf-conventions-1.12/cf-conventions.html # Only displays if hero_image is provided --- # CF Metadata Conventions