Updated header, footer and forum post view.

assets/less/classes/container.less

@@ -45,7 +45,8 @@
             width: 100%;
             height: 100%;
             mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
-            background: url('/clouds.png') fixed;
+            -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+            background: var(--background-pattern);
             background-color: var(--accent-colour);
             background-blend-mode: multiply;
         }

assets/less/classes/footer.less

@@ -1,10 +1,5 @@
 .footer {
-    background: linear-gradient(0deg, var(--accent-colour), transparent) repeat-x;
     flex: 0 0 auto;
-    text-align: center;
-    font-size: .9em;
-    line-height: 1.5em;
-    padding: 1em 0;
 
     &__link {
         color: inherit;
@@ -14,4 +9,26 @@
             text-decoration: underline;
         }
     }
+
+    &__wrapper {
+        max-width: var(--site-max-width);
+        margin: 0 auto;
+        text-align: center;
+        font-size: .9em;
+        line-height: 1.5em;
+        padding: 1em 0;
+    }
+
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
+        -webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
+        background: var(--background-pattern);
+        background-color: var(--accent-colour);
+        background-blend-mode: multiply;
+    }
 }

assets/less/classes/forum/post.less

@@ -47,6 +47,8 @@
 
     &__info {
         background-image: linear-gradient(90deg, var(--user-colour), transparent);
+
+        &__content {
             min-width: 150px;
             text-align: center;
             display: flex;
@@ -55,6 +57,21 @@
             padding: 15px;
             flex: 0 0 auto;
             margin-right: 4px;
+        }
+
+        &__background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
+            -webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
+            background: var(--background-pattern);
+            background-color: var(--accent-colour);
+            background-blend-mode: multiply;
+        }
+
 
         @media (max-width: @site-mobile-width) {
             background-image: linear-gradient(180deg, var(--user-colour), transparent);

assets/less/classes/header.less

@@ -1,6 +1,19 @@
 .header {
     flex: 0 0 auto;
-    background: linear-gradient(0deg, transparent, var(--accent-colour)) repeat-x;
+    margin-bottom: 4px;
+
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+        -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+        background: var(--background-pattern);
+        background-color: var(--accent-colour);
+        background-blend-mode: multiply;
+    }
 
     &__wrapper {
         margin: 0 auto;

assets/less/main.less

@@ -8,6 +8,7 @@
     --background-image: initial;
     --background-colour: #111;
     --background-colour-translucent: #111E;
+    --background-pattern: url('/images/clouds.png') fixed;
 
     --text-colour: #fff;
     --text-colour-inverted: #000;

templates/_layout/footer.twig

@@ -0,0 +1,18 @@
+<footer class="footer">
+    <div class="footer__background"></div>
+    <div class="footer__wrapper">
+        {% autoescape false %}
+        <div class="footer__copyright">
+            {{ 'https://flash.moe'|html_link('Flashwave', 'footer__link') }} 2013-{{
+            ''|date('Y') }} /
+            {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_tag())|html_link(git_tag(), 'footer__link') }}
+            # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__link') }}
+            {% if constant('MSZ_DEBUG') or current_user.user_id|default(0) == 1 %}
+                / SQL Queries: {{ sql_query_count()|number_format }}
+                / Took: {{ startup_time()|number_format(5) }} seconds
+                / Render: {{ startup_time(constant('MSZ_TPL_RENDER'))|number_format(5) }} seconds
+            {% endif %}
+        </div>
+        {% endautoescape %}
+    </div>
+</footer>

templates/_layout/header.twig

@@ -1,6 +1,7 @@
 {% set in_manage = manage_menu is defined %}
 
 <nav class="header">
+    <div class="header__background"></div>
     <div class="header__wrapper">
         <div class="header__icons">
             <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu">

templates/forum/macros.twig

@@ -292,8 +292,10 @@
     {% set is_original_post = is_original_post|default(false) %}
     {% set is_original_poster = is_original_poster|default(false) %}
 
-    <div class="container forum__post" id="p{{ post.post_id }}">
+    <div class="container forum__post" id="p{{ post.post_id }}" style="{{ post.poster_colour|html_colour('--accent-colour') }}">
-        <div class="forum__post__info" style="{{ post.poster_colour|html_colour }}">
+        <div class="forum__post__info">
+            <div class="forum__post__info__background"></div>
+            <div class="forum__post__info__content">
                 {% if post.poster_id is not null %}
                     <a class="avatar forum__post__avatar"
                         style="background-image:url('/profile.php?u={{ post.poster_id }}&amp;m=avatar');"
@@ -314,6 +316,7 @@
                     <div class="forum__post__username">Deleted User</div>
                 {% endif %}
             </div>
+        </div>
 
         <div class="forum__post__content">
             <div class="forum__post__details">

templates/master.twig

@@ -26,21 +26,7 @@
             {% endblock %}
         </div>
 
-        <footer class="footer">
+        {% include '_layout/footer.twig' %}
-            {% autoescape false %}
-            <div class="footer__copyright">
-                {{ 'https://flash.moe'|html_link('Flashwave', 'footer__link') }} 2013-{{
-                ''|date('Y') }} /
-                {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_tag())|html_link(git_tag(), 'footer__link') }}
-                # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__link') }}
-                {% if constant('MSZ_DEBUG') or current_user.user_id|default(0) == 1 %}
-                    / SQL Queries: {{ sql_query_count()|number_format }}
-                    / Took: {{ startup_time()|number_format(5) }} seconds
-                    / Render: {{ startup_time(constant('MSZ_TPL_RENDER'))|number_format(5) }} seconds
-                {% endif %}
-            </div>
-            {% endautoescape %}
-        </footer>
 
         <script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
         <script>