more formatting previews

Hsterts · Nov 11, 2022 · 3507975 · 3507975
1 parent 0834059
commit 3507975
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git a/assets/js/fumen-canvas.js b/assets/js/fumen-canvas.js
@@ -12,9 +12,6 @@ var colors = {
 	Empty: { normal: '#f3f3ed' },
 };
 
-gridToggle = false;
-transparency_four = true;
-
 function draw(fumenPage, numrows, numcols, cellSize, gridToggle, gridColor, transparency_four, background) {
 	var field = fumenPage.field;
 	var operation = fumenPage.operation;
@@ -49,6 +46,8 @@ function draw(fumenPage, numrows, numcols, cellSize, gridToggle, gridColor, tran
 
 	if (!transparency_four) {
 		context.fillStyle = background;
+	} else {
+		context.fillStyle = '#00000000';
 	}
 
 	context.fillRect(0, 0, width, height);
@@ -134,8 +133,8 @@ function fumencanvas(container) {
 	if(container.getAttribute('height') != null) {var height = container.getAttribute('height')} else {var height = 5};
 	if(container.getAttribute('width') != null) {var width = container.getAttribute('width')} else {var width = 10};
 	if(container.getAttribute('size') != null) {var cellSize = container.getAttribute('size')} else {var cellSize = 22};
-	if(container.getAttribute('grid') != null) {var gridColor = container.getAttribute('grid'); gridToggle = true} else {gridToggle = false};
-	if(container.getAttribute('background') != null) {var background = container.getAttribute('background'); transparency_four = false} else {transparency_four = true};
+	if(container.getAttribute('grid') != null) {var gridColor = container.getAttribute('grid'); var gridToggle = true} else {var gridToggle = false};
+	if(container.getAttribute('background') != null) {var background = container.getAttribute('background'); var transparency_four = false} else {var transparency_four = true};
 	container.innerHTML = '';
 
 	var fumenCodes = [];

diff --git a/assets/styles/custom.scss b/assets/styles/custom.scss
@@ -94,4 +94,9 @@ img.imageOutput {
   font-family: Karla, Arial;
   font-size: 20px;
   font-weight: 600;
+}
+
+#header-options{
+  display: flex;
+  flex-direction: row;
 }
diff --git a/assets/styles/darkmode.scss b/assets/styles/darkmode.scss
@@ -45,7 +45,7 @@
 
 .spinmode {
   float: right;
-  padding: 1em;
+  padding: 0 1em 0 1em;
   min-width: 30px;
   position: relative;
 
@@ -58,7 +58,7 @@
     box-sizing: border-box;
   }
 
-  & svg {
+  & span {
     opacity: 0;
     position: absolute;
     width: 20px;

diff --git a/layouts/partials/darkmode.html b/layouts/partials/darkmode.html
@@ -18,10 +18,10 @@
     <input class='toggle' id='spin-toggle' type='checkbox' tabindex="-1">
     <label id="toggle-label-180" for='spin-toggle' tabindex="-1">
         <title>Turn on 180 rotations (mostly affects percentages)</title>
-        <span class = 'text-logo'>90</span>
+        <span id = '90Icon' class = 'text-logo'>90</span>
     </label>
     <label id="toggle-label-90" for='spin-toggle' tabindex="-1">
         <title>Turn off 90 rotations (mostly affects percentages)</title>
-        <span class = 'text-logo'>180</text>
+        <span id = '180Icon' class = 'text-logo'>180</text>
     </label>
 </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,7 +1,7 @@
 <header>
     {{ $config := cond (eq $.Site.Language.Lang "en") "config" (printf "config.%s" $.Site.Language.Lang) }}
     <h1 id="page-title"><a href="{{ "" | absLangURL }}">{{ ( index $.Site.Data $config ).page_title | default $.Site.Data.config.page_title }}</a></h1>
-    <div>
+    <div id="header-options">
       <div id="search-icon">
         <p>{{ i18n "search" }}</p>
         <svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">{{ i18n "search_icon" }}</title><desc id="desc">{{ i18n "icon_search" }}</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>