From 7a7b2a6415e09fcaf596bad5c52fd9572633b073 Mon Sep 17 00:00:00 2001 From: Linnnus Date: Wed, 27 Mar 2024 14:20:24 +0100 Subject: Move styles and images into subfolder See the updates to the README for a description of the new layout. Note that the /static/ prefix has also been removed from URLs. It felt kind of like we were leaking implementation details. The fact that these files are staic doesn't concern the consumer of the service. --- static/base.css | 62 ----------------------------- static/base.jpeg | Bin 92603 -> 0 bytes static/crew.jpeg | Bin 261527 -> 0 bytes static/hero.jpeg | Bin 477217 -> 0 bytes static/images/base.jpeg | Bin 0 -> 92603 bytes static/images/crew.jpeg | Bin 0 -> 261527 bytes static/images/hero.jpeg | Bin 0 -> 477217 bytes static/index.css | 104 ------------------------------------------------ static/styles/base.css | 62 +++++++++++++++++++++++++++++ static/styles/index.css | 104 ++++++++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 166 insertions(+), 166 deletions(-) delete mode 100644 static/base.css delete mode 100644 static/base.jpeg delete mode 100644 static/crew.jpeg delete mode 100644 static/hero.jpeg create mode 100644 static/images/base.jpeg create mode 100644 static/images/crew.jpeg create mode 100644 static/images/hero.jpeg delete mode 100644 static/index.css create mode 100644 static/styles/base.css create mode 100644 static/styles/index.css (limited to 'static') diff --git a/static/base.css b/static/base.css deleted file mode 100644 index f9b1ae6..0000000 --- a/static/base.css +++ /dev/null @@ -1,62 +0,0 @@ -/* - * This file will contain the styles that are to be applied to the WHOLE site. - * - * No page-specific settings should go in this file. - */ - -* { - box-sizing: border-box; -} - -html, body { - padding: 0; - margin: 0; - - font-family: Helvetica, Arial, sans-serif; - - color: white; - background-color: #2a2626; -} - -/* Sticky footer - * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers - */ -body { - min-height: 100vh; - display: grid; - grid-template-rows: auto 1fr auto; -} - -.navbar { - /* A lot of spacing gives a kind of modern look. */ - padding: 1.5rem; - - /* Make the navbar slightly darker than the default background color to "lift it up". */ - background-color: #1c1c1c; - - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; -} - -.navbar__links { - list-style: none; - padding: 0; - - display: flex; - flex-direction: row; - gap: 1.5em; -} - -.navbar__location { - /* remove default link styling */ - color: inherit; - text-decoration: none; -} - -footer { - text-align: center; - font-size: small; - margin: 1rem; -} diff --git a/static/base.jpeg b/static/base.jpeg deleted file mode 100644 index c51aca5..0000000 Binary files a/static/base.jpeg and /dev/null differ diff --git a/static/crew.jpeg b/static/crew.jpeg deleted file mode 100644 index 9f93e76..0000000 Binary files a/static/crew.jpeg and /dev/null differ diff --git a/static/hero.jpeg b/static/hero.jpeg deleted file mode 100644 index fb2967c..0000000 Binary files a/static/hero.jpeg and /dev/null differ diff --git a/static/images/base.jpeg b/static/images/base.jpeg new file mode 100644 index 0000000..c51aca5 Binary files /dev/null and b/static/images/base.jpeg differ diff --git a/static/images/crew.jpeg b/static/images/crew.jpeg new file mode 100644 index 0000000..9f93e76 Binary files /dev/null and b/static/images/crew.jpeg differ diff --git a/static/images/hero.jpeg b/static/images/hero.jpeg new file mode 100644 index 0000000..fb2967c Binary files /dev/null and b/static/images/hero.jpeg differ diff --git a/static/index.css b/static/index.css deleted file mode 100644 index 3f07a45..0000000 --- a/static/index.css +++ /dev/null @@ -1,104 +0,0 @@ -/* - * 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; -} - -.achievements { - padding: 2rem 1rem; - - /* Use a dark and twisted color to make this band stand out as a separate element. */ - background-color: #6e1818; - - /* Disperse achievements evenly horisontally */ - display: flex; - justify-content: space-around; - align-items: center; -} - -.achievements__item { - /* Stack the two children vertically */ - display: flex; - flex-direction: column; - align-items: center; -} - -.achievements__number { - /* Numbers should be big and attention grabbing */ - font-size: 2rem; - font-style: bold; -} - -.achievements__text { -} - -.boxes { - /* The columns should be aligned in the center. - * N.B. margin matches padding of achievements. */ - max-width: 600px; - margin: 2rem auto; -} - -.boxes__column { - --gap: 1rem; - width: calc(50% - var(--gap) / 2); -} - -.boxes__column--right { - float: right; -} - -.boxes__column--left { - float: left; - margin-right: var(--gap); -} - -.boxes__item { - -} - -.boxes__header { - -} - -.boxes__body-text { - line-height: 1.5; -} - -.boxes__image { - max-width: 100%; - height: auto; -} \ No newline at end of file diff --git a/static/styles/base.css b/static/styles/base.css new file mode 100644 index 0000000..f9b1ae6 --- /dev/null +++ b/static/styles/base.css @@ -0,0 +1,62 @@ +/* + * This file will contain the styles that are to be applied to the WHOLE site. + * + * No page-specific settings should go in this file. + */ + +* { + box-sizing: border-box; +} + +html, body { + padding: 0; + margin: 0; + + font-family: Helvetica, Arial, sans-serif; + + color: white; + background-color: #2a2626; +} + +/* Sticky footer + * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers + */ +body { + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; +} + +.navbar { + /* A lot of spacing gives a kind of modern look. */ + padding: 1.5rem; + + /* Make the navbar slightly darker than the default background color to "lift it up". */ + background-color: #1c1c1c; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.navbar__links { + list-style: none; + padding: 0; + + display: flex; + flex-direction: row; + gap: 1.5em; +} + +.navbar__location { + /* remove default link styling */ + color: inherit; + text-decoration: none; +} + +footer { + text-align: center; + font-size: small; + margin: 1rem; +} diff --git a/static/styles/index.css b/static/styles/index.css new file mode 100644 index 0000000..22e6dd0 --- /dev/null +++ b/static/styles/index.css @@ -0,0 +1,104 @@ +/* + * 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(/images/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; +} + +.achievements { + padding: 2rem 1rem; + + /* Use a dark and twisted color to make this band stand out as a separate element. */ + background-color: #6e1818; + + /* Disperse achievements evenly horisontally */ + display: flex; + justify-content: space-around; + align-items: center; +} + +.achievements__item { + /* Stack the two children vertically */ + display: flex; + flex-direction: column; + align-items: center; +} + +.achievements__number { + /* Numbers should be big and attention grabbing */ + font-size: 2rem; + font-style: bold; +} + +.achievements__text { +} + +.boxes { + /* The columns should be aligned in the center. + * N.B. margin matches padding of achievements. */ + max-width: 600px; + margin: 2rem auto; +} + +.boxes__column { + --gap: 1rem; + width: calc(50% - var(--gap) / 2); +} + +.boxes__column--right { + float: right; +} + +.boxes__column--left { + float: left; + margin-right: var(--gap); +} + +.boxes__item { + +} + +.boxes__header { + +} + +.boxes__body-text { + line-height: 1.5; +} + +.boxes__image { + max-width: 100%; + height: auto; +} \ No newline at end of file -- cgit v1.2.3