diff options
| -rw-r--r-- | static/hero.jpeg | bin | 0 -> 477217 bytes | |||
| -rw-r--r-- | static/index.css | 38 | ||||
| -rw-r--r-- | views/base.html | 1 | ||||
| -rw-r--r-- | views/index.html | 14 |
4 files changed, 51 insertions, 2 deletions
diff --git a/static/hero.jpeg b/static/hero.jpeg Binary files differnew file mode 100644 index 0000000..fb2967c --- /dev/null +++ b/static/hero.jpeg 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; +} diff --git a/views/base.html b/views/base.html index be43d69..e105d0c 100644 --- a/views/base.html +++ b/views/base.html @@ -3,6 +3,7 @@ <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/static/base.css" rel="stylesheet"> + {% block head %}{% endblock %} </head> <body> <header class="navbar"> diff --git a/views/index.html b/views/index.html index e98e8e5..5c2c206 100644 --- a/views/index.html +++ b/views/index.html @@ -1,7 +1,17 @@ {% extends "base.html" %} +{% block head %} + {# Since the background image is declared in the CSS, we can improve + loading times by instructing the browser to start loading the image + *before* it has even parsed the CSS. #} + <link rel="preload" as="image" href="/static/hero.jpeg"> + <link rel="stylesheet" href="/static/index.css"> +{% endblock %} + {% block content %} - <h1>Index</h1> - <p class="important">Welcome to my awesome homepage.</p> + <div class="hero"> + <h1 class="hero__title">Blind</h1> + <p class="hero__subtitle">An epic guild for epic gamers</p> + </div> {% endblock %} |
