diff options
| -rw-r--r-- | _data/metadata.js | 1 | ||||
| -rw-r--r-- | _includes/layouts/base.njk | 14 | ||||
| -rw-r--r-- | content/index.md | 2 | ||||
| -rw-r--r-- | public/fru-banner.png | bin | 0 -> 53693 bytes | |||
| -rw-r--r-- | public/fru-cheatsheet.png | bin | 0 -> 537844 bytes | |||
| -rw-r--r-- | public/global.css | 64 |
6 files changed, 77 insertions, 4 deletions
diff --git a/_data/metadata.js b/_data/metadata.js index 0de832b..0bcd6ed 100644 --- a/_data/metadata.js +++ b/_data/metadata.js @@ -1,2 +1,3 @@ export const title = "Light PF Does Ultimate"; export const language = "en"; +export const banner = "test"; diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 4f9054c..522a786 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -13,14 +13,20 @@ <body> <header> - <h1>Light PF Does Ultimate</h1> + <h1>LPDU</h1> <nav> - <a href="/" title="homepage">Home</a> | - <a href="/about" title="about lpdu.net">About lpdu.net</a> + <a href="/" title="Home">Home</a> + <a href="/fru" title="FRU">FRU</a> + <a href="/about" title="About">About</a> </nav> </header> <main> - <h2>{{ title }}</h2> + {% if title %} + <div class="banner"> + <img src="{{ banner }}" class="banner-background"> + <span class="banner-title">{{title}}</span> + </div> + {% endif %} {{ content | safe }} </main> <footer> diff --git a/content/index.md b/content/index.md index 00c97f1..030a2d0 100644 --- a/content/index.md +++ b/content/index.md @@ -2,6 +2,8 @@ [Overview](/fru) +## Phase by Phase + - [Phase 1: Fatebreaker](/fru/p1) - [Phase 2: Usurper of Frost](/fru/p2) - [Phase 3: Oracle of Darkness](/fru/p3) diff --git a/public/fru-banner.png b/public/fru-banner.png Binary files differnew file mode 100644 index 0000000..aa97c53 --- /dev/null +++ b/public/fru-banner.png diff --git a/public/fru-cheatsheet.png b/public/fru-cheatsheet.png Binary files differnew file mode 100644 index 0000000..c755dec --- /dev/null +++ b/public/fru-cheatsheet.png diff --git a/public/global.css b/public/global.css new file mode 100644 index 0000000..0c5ce91 --- /dev/null +++ b/public/global.css @@ -0,0 +1,64 @@ +body { + margin: 0; + font-family: sans; +} + +header { + background: #171717; + color: #fff; + overflow: hidden; + padding: 0 1em; + display: flex; + align-items: center; + gap: 2em; + height: 4rem; +} + +header h1 { + margin: 1rem 0; + line-height: 1; +} + +header nav { + display: flex; + height: 4rem; + align-items: stretch; +} + +header nav a { + display: block; + height: 100%; + padding: 0 1rem; + line-height: 4rem; + color: #fff; + text-decoration: none; +} + +header nav a:hover { + background: #272727; +} + +.banner { + text-align: center; + position: relative; + background-color: #333; + color: #fff; + overflow: hidden; + padding: 3em 0; +} + +.banner .banner-background { + display: block; + width: 100%; + height: 100%; + position: absolute; + inset: 0; + filter: blur(20px) brightness(50%); + object-fit: cover; +} + +.banner .banner-title { + font-size: 3em; + position: relative; + z-index: 100; +} |
