Make news indicator visible as an icon on mobile

wlclass · Dec 22, 2019 · fe28154 · fe28154
1 parent 555b836
commit fe28154
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/app.js b/src/app.js
@@ -125,7 +125,9 @@ const $status_size = $(E("div")).addClass("status-coordinates").appendTo($status
 const $news_indicator = $(`
 	<a class='news-indicator' href='#project-news'>
 		<img src='images/winter/present.png' width='24' height='22' alt=''/>
-		<strong>New!</strong>&nbsp;Holiday theme, and better history and mobile support
+		<span class='not-the-icon'>
+			<strong>New!</strong>&nbsp;Holiday theme, and better history and mobile support
+		</span>
 	</a>
 `);
 $news_indicator.on("click auxclick", (event)=> {

diff --git a/styles/layout.css b/styles/layout.css
@@ -509,6 +509,16 @@ html, body, .jspaint {
 .news-indicator > img {
 	margin-right: 5px;
 }
+@media (max-width: 500px) {
+	.news-indicator > img {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+	.news-indicator .not-the-icon {
+		display: none;
+	}
+}
 
 [touch-action="none"] {
 	touch-action: none;