patek/patek-logo-custom-element
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed calc()s.

Browse Source 
The magic I planned to make didn't work anyway.
This commit is contained in:
Greenscreener 2019-07-08 15:37:18 +02:00
parent ebd34d56ae
commit ccb25e5302
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
patekLogo.js
View File

@ -37,14 +37,11 @@ class PatekLogo extends HTMLElement {
this.shadow.innerHTML = ` this.shadow.innerHTML = `
<style> <style>
@import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css'; @import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css';
svg, #titleText, #subtitleText {
--logo-scale: 1;
}
svg > * { svg > * {
fill: currentColor; fill: currentColor;
} }
svg { svg {
height: calc(2em * var(--logo-scale)); height: 2em;
} }
#titleText, #subtitleText { #titleText, #subtitleText {
font-family: 'Fira Code'; font-family: 'Fira Code';
@ -62,16 +59,14 @@ class PatekLogo extends HTMLElement {
visibility: hidden; visibility: hidden;
} }
#titleText { #titleText {
--font-size: 1; font-size: 1em;
font-size: calc(1em * var(--font-size) * var(--logo-scale)); right: 1.1em;
right: calc(1.1em / var(--font-size) * var(--logo-scale)); bottom: 1.5em;
bottom: calc(1.5em / var(--font-size) * var(--logo-scale));
} }
#subtitleText { #subtitleText {
--font-size: 0.6; font-size: 0.6em;
font-size: calc(1em * var(--font-size) * var(--logo-scale)); top: 1.583333333em;
top: calc(0.95em / var(--font-size) * var(--logo-scale)); right: 3.31666666em;
right: calc(2.05em / var(--font-size) * var(--logo-scale));
} }
#wrapper { #wrapper {
position: relative; position: relative;
@ -88,7 +83,6 @@ class PatekLogo extends HTMLElement {
} }
</style> </style>
`; `;
// The magic with the --scale variable doesn't work, but I left it in there just in case we would want to somehow use it later.
const wrapper = document.createElement("span"); const wrapper = document.createElement("span");
wrapper.setAttribute('id','wrapper'); wrapper.setAttribute('id','wrapper');
wrapper.innerHTML += `<span id="titlePlaceholder">${typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"}</span>`; wrapper.innerHTML += `<span id="titlePlaceholder">${typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"}</span>`;