UI refresh
This commit is contained in:
parent
6ff3db09c5
commit
7109b3435d
10 changed files with 140 additions and 23 deletions
|
|
@ -11,6 +11,10 @@ pub fn furigana_to_html(text: &str) -> String {
|
|||
// so { needs to be escaped as \{
|
||||
// Curly brace literals \{ need to have their backslash escaped as \\{
|
||||
// TODO: Modify so <span lang="ja"> only wraps continuous sections of furigana
|
||||
if text.trim().is_empty() {
|
||||
// Don't return empty <span lang="ja"> if text is empty
|
||||
return String::new();
|
||||
}
|
||||
let re = Regex::new(r"\[([^\]]*)\]\{([^\\}]*)}").unwrap();
|
||||
format!(
|
||||
"<span lang=\"ja\">{}</span>",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use "sass:color"
|
||||
|
||||
$bg: #FFFDF3
|
||||
$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)}
|
||||
$fg: #011627
|
||||
$bg: #fefdfa
|
||||
$bg0: #fefefa
|
||||
$fg: #1a1110
|
||||
|
|
@ -1,6 +1,38 @@
|
|||
#challenge
|
||||
padding: 1em
|
||||
@use "_theme" as *
|
||||
|
||||
$wave: 10px
|
||||
$wave_scale: 2
|
||||
|
||||
#challenge
|
||||
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.125)
|
||||
z-index: 1
|
||||
background: #3f313a
|
||||
|
||||
iframe
|
||||
background: black
|
||||
width: 100%
|
||||
aspect-ratio: 16/9
|
||||
margin: 0
|
||||
|
||||
#challenge-description, footer
|
||||
padding: 1em
|
||||
|
||||
#challenge-content
|
||||
padding: 1em
|
||||
padding-top: calc(1em - $wave)
|
||||
padding-bottom: calc(1em - $wave)
|
||||
font-size: 1.25em
|
||||
$shadow: #1a1110
|
||||
$shadow-size: 1px
|
||||
text-shadow: calc(-1 * $shadow-size) calc(-1 * $shadow-size) 0 $shadow, calc(-1 * $shadow-size) 0px 0 $shadow, calc(-1 * $shadow-size) $shadow-size 0 $shadow, 0px $shadow-size 0 $shadow, $shadow-size $shadow-size 0 $shadow, $shadow-size 0px 0 $shadow, $shadow-size calc(-1 * $shadow-size) 0 $shadow, 0px calc(-1 * $shadow-size) 0 $shadow;
|
||||
background: #23191e
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
||||
a:hover
|
||||
text-decoration: none
|
||||
border-bottom: 3px solid
|
||||
a
|
||||
&.noun
|
||||
color: #a6e3a1
|
||||
|
|
@ -18,4 +50,22 @@ a
|
|||
color: #f9e2af
|
||||
|
||||
&.phrase
|
||||
color: #fab387
|
||||
color: #fab387
|
||||
|
||||
.wave
|
||||
--size: #{$wave}
|
||||
--R: calc(var(--size)*1.28)
|
||||
|
||||
mask: radial-gradient(var(--R) at 50% calc(1.8*var(--size)),#000 99%,#0000 101%) calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%, radial-gradient(var(--R) at 50% calc(-.8*var(--size)),#0000 99%,#000 101%) 50% var(--size)/calc(4*var(--size)) 100% repeat-x
|
||||
background: #23191e
|
||||
$height: calc($wave * 2)
|
||||
height: $height
|
||||
flex-shrink: 0
|
||||
|
||||
&.wave-bottom
|
||||
transform: scaleY(-1) scaleX($wave_scale)
|
||||
|
||||
&.wave-top
|
||||
transform: scaleX($wave_scale) translateX($wave * $wave_scale)
|
||||
margin-top: -$height
|
||||
pointer-events: none
|
||||
|
|
@ -12,10 +12,13 @@ body
|
|||
height: 100vh
|
||||
box-sizing: border-box
|
||||
padding: 2em
|
||||
background: $bg0
|
||||
color: var(--fg)
|
||||
background: #2b2028
|
||||
color: var(--bg)
|
||||
font-size: 1.25em
|
||||
|
||||
b, strong
|
||||
color: white
|
||||
|
||||
input[type=number]
|
||||
background: var(--bg)
|
||||
color: var(--fg)
|
||||
|
|
@ -27,6 +30,7 @@ input[type=number]
|
|||
appearance: textfield
|
||||
|
||||
a
|
||||
color: #9fe2bf
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
|
|
@ -38,5 +42,30 @@ a
|
|||
h1
|
||||
text-align: center
|
||||
|
||||
&:first-child
|
||||
margin-top: 0
|
||||
:first-child
|
||||
margin-top: 0
|
||||
|
||||
margin-bottom: 0
|
||||
|
||||
.avatar
|
||||
border-radius: 100%
|
||||
display: inline
|
||||
height: 2em
|
||||
vertical-align: middle
|
||||
background: #5e595d
|
||||
|
||||
button
|
||||
border: none
|
||||
color: inherit
|
||||
font: inherit
|
||||
background: #3f313a
|
||||
border: 3px solid #1a1110
|
||||
border-radius: 0.25em
|
||||
box-shadow: 0px 2px #1a1110
|
||||
cursor: pointer
|
||||
|
||||
&:active
|
||||
box-shadow: none
|
||||
transform: translateY(2px)
|
||||
background: transparent
|
||||
color: #3f313a
|
||||
|
|
@ -5,8 +5,10 @@ nav
|
|||
--fg: #{$bg}
|
||||
background: var(--bg)
|
||||
color: var(--fg)
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125)
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5)
|
||||
display: flex
|
||||
align-items: center
|
||||
z-index: 2
|
||||
|
||||
.dropdown
|
||||
position: relative
|
||||
|
|
@ -51,5 +53,8 @@ nav
|
|||
cursor: pointer
|
||||
|
||||
.icon
|
||||
height: 1.5em
|
||||
vertical-align: middle
|
||||
height: 1em
|
||||
vertical-align: middle
|
||||
|
||||
nav .icon
|
||||
height: 1.5em
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
background: var(--bg)
|
||||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.125)
|
||||
border: none
|
||||
border-radius: 4px
|
||||
|
||||
#content
|
||||
width: 100%
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
grid-template-areas: "nav nav" "challenge submissions"
|
||||
grid-template-columns: 30em auto
|
||||
grid-template-rows: min-content auto
|
||||
overflow: hidden
|
||||
border: 4px solid $fg
|
||||
|
||||
#nav
|
||||
grid-area: nav
|
||||
|
|
@ -31,10 +30,10 @@
|
|||
grid-area: submissions
|
||||
|
||||
#challenge, #submissions
|
||||
overflow: scroll
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 1em
|
||||
|
||||
footer
|
||||
margin-top: auto
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
@use "_theme" as *
|
||||
|
||||
#submissions
|
||||
background: #3f313a
|
||||
grid-area: submissions
|
||||
background: rgba(0, 0, 0, 0.125)
|
||||
padding: 1em
|
||||
|
||||
& > div
|
||||
|
|
@ -13,7 +15,9 @@
|
|||
gap: $gap
|
||||
|
||||
& > figure
|
||||
background: rgba(0, 0, 0, 0.125)
|
||||
background: #5c4f57
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125)
|
||||
border-radius: 0.5em
|
||||
padding: $gap
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
|
|
@ -23,6 +27,7 @@
|
|||
text-align: center
|
||||
|
||||
& > img
|
||||
border-radius: 0.5em
|
||||
width: 100%
|
||||
cursor: pointer
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div id="content">
|
||||
<nav id="nav">{% block nav %}{% include "nav" %}{% endblock %}</nav>
|
||||
<div id="challenge">
|
||||
<div>{% block content %}{% endblock %}</div>
|
||||
{% block content %}{% endblock %}
|
||||
<footer>
|
||||
{% block content_copyright %}
|
||||
Copyright {% include "copyright-years" %} Tegaki Tuesday. All rights reserved. 字ちゃん mascot art by <a href="https://twitter.com/bellumela" target="_blank">@bellumela</a>.
|
||||
|
|
@ -55,7 +55,11 @@
|
|||
{% if profile_user %}
|
||||
<a href="/{{ submission.challenge }}">#{{ submission.challenge }}</a>
|
||||
{% else %}
|
||||
{% if not author.deleted %}<a href="/users/{{ author.name }}" target="_blank">{% endif %}{{ author.username }}{% if author.deleted %} (deleted account){% else %}</a>{% endif %}
|
||||
{% if not author.deleted %}
|
||||
<a href="/users/{{ author.name }}" target="_blank">
|
||||
{% endif %}
|
||||
<img src="{{ author.avatar }}" alt="{{ author.username }}'s avatar" class="avatar"> {{ author.username }}
|
||||
{% if author.deleted %} (deleted account){% else %}</a>{% endif %}
|
||||
{% endif %}
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
{% extends "base" %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
|
||||
{% if content.youtube %}
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ content.youtube }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
{% endif %}
|
||||
<div class="wave wave-top"></div>
|
||||
<div id="challenge-content">
|
||||
{% if content.japanese %}
|
||||
<div lang="ja">
|
||||
<script>
|
||||
|
|
@ -15,7 +19,19 @@
|
|||
kyujitai = !kyujitai;
|
||||
}
|
||||
</script>
|
||||
<a href="https://en.wikipedia.org/wiki/Ky%C5%ABjitai" target="_blank">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
|
||||
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
|
||||
<button>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" />
|
||||
</svg>
|
||||
</button>
|
||||
<br>
|
||||
<br>
|
||||
{% for line in content.japanese %}
|
||||
{% for subline in line %}
|
||||
<p>
|
||||
|
|
@ -35,6 +51,9 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="wave wave-bottom"></div>
|
||||
<div id="challenge-description">
|
||||
{{ content.text | safe }}
|
||||
{% if content.translation %}
|
||||
<p>
|
||||
|
|
@ -52,4 +71,5 @@
|
|||
{%- if content.suggester -%}
|
||||
<p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
{% block content %}
|
||||
<div style="text-align: center">
|
||||
<img src="{{ profile_user.avatar }}" alt="{{ profile_user.username }}" style="border-radius: 100%">
|
||||
<br>
|
||||
<img src="{{ profile_user.avatar }}" alt="{{ profile_user.username }}" class="avatar" style="font-size: 6em">
|
||||
<h1><a href="https://discord.com/users/{{ profile_user.id }}">{{ profile_user.username }}</a>'s submissions</h1>
|
||||
{{ submissions | length }} images
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue