From e11a12421204b14e12ec0a47e7dc99d611051dea Mon Sep 17 00:00:00 2001 From: Miodec Date: Thu, 26 Aug 2021 14:27:51 +0100 Subject: [PATCH] updated logo --- src/js/theme-controller.js | 63 ++++++++++++++----------------------- src/sass/style.scss | 56 ++++++++++++++++++++++++++------- static/images/fav.png | Bin 0 -> 3605 bytes static/index.html | 62 +++++++++++++++++++++++++++++++++--- 4 files changed, 125 insertions(+), 56 deletions(-) create mode 100644 static/images/fav.png diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 474a9b11f..14354f305 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -6,6 +6,8 @@ import Config from "./config"; import * as UI from "./ui"; import tinycolor from "tinycolor2"; +const domtoimage = require("dom-to-image"); + let isPreviewingTheme = false; export let randomTheme = null; @@ -22,38 +24,17 @@ export const colorVars = [ ]; async function updateFavicon(size, curveSize) { - let maincolor, bgcolor; - - bgcolor = await ThemeColors.get("bg"); - maincolor = await ThemeColors.get("main"); - - if (bgcolor == maincolor) { - bgcolor = "#111"; - maincolor = "#eee"; - } - - var canvas = document.createElement("canvas"); - canvas.width = size; - canvas.height = size; - let ctx = canvas.getContext("2d"); - ctx.beginPath(); - ctx.moveTo(0, curveSize); - //top left - ctx.quadraticCurveTo(0, 0, curveSize, 0); - ctx.lineTo(size - curveSize, 0); - //top right - ctx.quadraticCurveTo(size, 0, size, curveSize); - ctx.lineTo(size, size - curveSize); - ctx.quadraticCurveTo(size, size, size - curveSize, size); - ctx.lineTo(curveSize, size); - ctx.quadraticCurveTo(0, size, 0, size - curveSize); - ctx.fillStyle = bgcolor; - ctx.fill(); - ctx.font = "900 " + (size / 2) * 1.2 + "px Roboto Mono"; - ctx.textAlign = "center"; - ctx.fillStyle = maincolor; - ctx.fillText("mt", size / 2 + size / 32, (size / 3) * 2.1); - $("#favicon").attr("href", canvas.toDataURL("image/png")); + setTimeout(() => { + console.log("fav"); + domtoimage + .toPng(document.querySelector(".logo .icon")) + .then(function (dataUrl) { + // console.log(dataUrl); + // ctx.drawImage(dataUrl, 0, 0); + // $('body').prepend(canvas); + $("#favicon").attr("href", dataUrl); + }); + }, 125); } function clearCustomTheme() { @@ -78,7 +59,7 @@ let loadStyle = function (name) { }); }; -export function apply(themeName) { +export function apply(themeName, isPreview = false) { clearCustomTheme(); let name = "serika_dark"; @@ -121,18 +102,20 @@ export function apply(themeName) { } catch (e) { console.log("Analytics unavailable"); } - ThemeColors.get().then((colors) => { - $(".keymap-key").attr("style", ""); - ChartController.updateAllChartColors(); - updateFavicon(32, 14); - $("#metaThemeColor").attr("content", colors.bg); - }); + if (!isPreview) { + ThemeColors.get().then((colors) => { + $(".keymap-key").attr("style", ""); + ChartController.updateAllChartColors(); + updateFavicon(128, 32); + $("#metaThemeColor").attr("content", colors.bg); + }); + } }); } export function preview(themeName) { isPreviewingTheme = true; - apply(themeName); + apply(themeName, true); } export function set(themeName) { diff --git a/src/sass/style.scss b/src/sass/style.scss index e95795030..a4a395dfd 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -8,6 +8,8 @@ @import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); + :root { --roundness: 0.25rem; --font: "Roboto Mono"; @@ -1661,7 +1663,7 @@ label.checkbox { line-height: 2.3rem; font-size: 2.3rem; /* text-align: center; */ - transition: 0.25s; + // transition: 0.25s; padding: 0 5px; display: grid; grid-auto-flow: column; @@ -1672,18 +1674,41 @@ label.checkbox { user-select: none; .logo { - margin-bottom: 0.6rem; + // margin-bottom: 0.6rem; + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5rem; + + .icon { + width: 2.5rem; + display: grid; + align-items: center; + background-color: transparent; + // margin-bottom: 0.15rem; + svg path { + transition: 0.25s; + fill: var(--main-color); + } + } + .text { + .top { + position: absolute; + left: 0.25rem; + top: -0.1rem; + font-size: 0.65rem; + line-height: 0.65rem; + color: var(--sub-color); + transition: 0.25s; + } + position: relative; + font-size: 2rem; + margin-bottom: 0.4rem; + font-family: "Lexend Deca"; + transition: 0.25s; + } white-space: nowrap; user-select: none; - .top { - font-size: 0.65rem; - line-height: 0.65rem; - margin-bottom: -0.4rem; - margin-left: -0.1rem; - color: var(--sub-color); - } - .bottom { margin-left: -0.15rem; color: var(--main-color); @@ -1769,8 +1794,17 @@ label.checkbox { opacity: 0 !important; } - .logo .bottom { + .icon svg path { + fill: var(--sub-color) !important; + } + + .logo .text { color: var(--sub-color) !important; + // opacity: 0 !important; + } + + .logo .top { + opacity: 0 !important; } .config { diff --git a/static/images/fav.png b/static/images/fav.png new file mode 100644 index 0000000000000000000000000000000000000000..04f65850dc1d01c56c4023275fe5fd6ebd509f8c GIT binary patch literal 3605 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 literal 0 HcmV?d00001 diff --git a/static/index.html b/static/index.html index 954f150e5..6c9639e60 100644 --- a/static/index.html +++ b/static/index.html @@ -15,7 +15,7 @@ - +