Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Functionality to add hero image to the homepage #579

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Functionality to add hero image to the homepage #579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 19 additions & 46 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,58 +12,14 @@

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="{{ '/assets/css/custom.css' | relative_url }}">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<style>
body {
padding-bottom: 20px;
}
p a.anchor {
display: block;
position: relative;
top: -50px;
visibility: hidden;
}
</style>
<style>
.flash-message {
padding: 1em;
margin-bottom: 1em;
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;
}
</style>
</head>

<body>
Expand Down Expand Up @@ -98,6 +54,23 @@
{% endif %}
<!-- Main jumbotron for a primary marketing message or call to action -->

<!-- Hero Image Section -->
{% if page.hero_image %}
<div class="jumbotron" style="background: url('{{ page.hero_image | relative_url }}') no-repeat center center; background-size: cover; color: white; text-align: center; padding: 100px 20px; position: relative;">
<div class="container">
{% if page.hero_header %}
<h1 class="display-3" style="font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);">{{ page.hero_header }}</h1>
{% endif %}
{% if page.hero_paragraph %}
<p class="lead" style="text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);">{{ page.hero_paragraph }}</p>
{% endif %}
{% if page.hero_button_text and page.hero_button_url %}
<a href="{{ page.hero_button_url }}" class="btn btn-lg btn-primary" style="font-weight: bold;">{{ page.hero_button_text }}</a>
{% endif %}
</div>
</div>
{% endif %}

<div class="container">

{{ content }}
Expand Down
83 changes: 83 additions & 0 deletions assets/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ layout: default
title: CF Conventions Home Page
flash_message: "The CF Conventions have won the <a href='https://www.agu.org/user-profile?cstkey=0fc4a399-6049-4787-8dc4-c57c91b8a26f' target='_blank'>AGU Open Science Recognition Prize</a> 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
Expand Down
Loading