From 9637c9a833c5bc99f8944d41f95461af23048ddf Mon Sep 17 00:00:00 2001 From: Linnnus Date: Wed, 20 Mar 2024 18:35:50 +0100 Subject: Add hero image to index --- static/hero.jpeg | Bin 0 -> 477217 bytes static/index.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 static/hero.jpeg create mode 100644 static/index.css (limited to 'static') diff --git a/static/hero.jpeg b/static/hero.jpeg new file mode 100644 index 0000000..fb2967c Binary files /dev/null and b/static/hero.jpeg differ diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..06e60b1 --- /dev/null +++ b/static/index.css @@ -0,0 +1,38 @@ +/* + * This file contains styles specific to the "index" view. The corresponding + * HTML/template file is `views/index.html`. + */ + +.hero { + /* We want the hero at the top to take up a big portion of the screen, + * while still showing that there's more content to be found below. */ + min-height: 50vh; + + /* Put children smack-dab in the center */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + /* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */ + background-image: + radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%), + url(/static/hero.jpeg); + background-size: cover; + + /* TODO: Put some cool image here */ + background-color: purple; + color: white; +} + +.hero__title { + font-size: 5rem; + margin: 1rem; + + /* TODO: Use (subset) font for this very important text. */ +} + +.hero__subtitle { + font-size: large; + font-style: italic; +} -- cgit v1.2.3