flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated header, footer and forum post view.

Browse source
This commit is contained in:
flash 2018-10-22 22:23:56 +02:00
parent c25c2d76ed
commit a5e9cf8b65
9 changed files with 105 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/less/classes/container.less
View file

@ -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;
}

27
assets/less/classes/footer.less
View file

@ -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;
}
}

17
assets/less/classes/forum/post.less
View file

@ -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);

15
assets/less/classes/header.less
View file

@ -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;

1
assets/less/main.less
View file

@ -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;

18
templates/_layout/footer.twig Normal file
View file

@ -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>

1
templates/_layout/header.twig
View file

@ -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">

7
templates/forum/macros.twig
View file

@ -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="forum__post__info" style="{{ post.poster_colour|html_colour }}">
<div class="container forum__post" id="p{{ post.post_id }}" style="{{ post.poster_colour|html_colour('--accent-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">

16
templates/master.twig
View file

@ -26,21 +26,7 @@
{% endblock %}
</div>
<footer class="footer">
{% 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>
{% include '_layout/footer.twig' %}
<script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
<script>