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 = `
<style>
@import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css';
svg, #titleText, #subtitleText {
--logo-scale: 1;
}
svg > * {
fill: currentColor;
}
svg {
height: calc(2em * var(--logo-scale));
height: 2em;
}
#titleText, #subtitleText {
font-family: 'Fira Code';
@ -62,16 +59,14 @@ class PatekLogo extends HTMLElement {
visibility: hidden;
}
#titleText {
--font-size: 1;
font-size: calc(1em * var(--font-size) * var(--logo-scale));
right: calc(1.1em / var(--font-size) * var(--logo-scale));
bottom: calc(1.5em / var(--font-size) * var(--logo-scale));
font-size: 1em;
right: 1.1em;
bottom: 1.5em;
}
#subtitleText {
--font-size: 0.6;
font-size: calc(1em * var(--font-size) * var(--logo-scale));
top: calc(0.95em / var(--font-size) * var(--logo-scale));
right: calc(2.05em / var(--font-size) * var(--logo-scale));
font-size: 0.6em;
top: 1.583333333em;
right: 3.31666666em;
}
#wrapper {
position: relative;
@ -88,7 +83,6 @@ class PatekLogo extends HTMLElement {
}
</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");
wrapper.setAttribute('id','wrapper');
wrapper.innerHTML += `<span id="titlePlaceholder">${typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"}</span>`;