UI refresh

tegakituesday/src/utils/furigana.rs

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

tegakituesday/styles/sass/_theme.sass

@@ -1,5 +1,5 @@
 @use "sass:color"
 
-$bg: #FFFDF3
+$bg: #fefdfa
-$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)}
+$bg0: #fefefa
-$fg: #011627
+$fg: #1a1110

tegakituesday/styles/sass/challenge.sass

@@ -1,6 +1,38 @@
-#challenge
+@use "_theme" as *
-	padding: 1em
 
+$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

tegakituesday/styles/sass/general.sass

@@ -12,10 +12,13 @@ body
 	height: 100vh
 	box-sizing: border-box
 	padding: 2em
-	background: $bg0
+	background: #2b2028
-	color: var(--fg)
+	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
+:first-child
-		margin-top: 0
+	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

tegakituesday/styles/sass/nav.sass

@@ -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
+	height: 1em
-	vertical-align: middle
+	vertical-align: middle
+
+nav .icon
+	height: 1.5em

tegakituesday/styles/sass/style.sass

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

tegakituesday/styles/sass/submissions.sass

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

tegakituesday/templates/base.html.tera

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

tegakituesday/templates/challenge.html.tera

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

tegakituesday/templates/user.html.tera

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