Change logo add-on styles considering different lengths
Change-Id: I244122b679a455f21b2052ece1d6d1d3015af6a0
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index bb61b57..706d898 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -278,7 +278,18 @@
// Media Query for adjusting dynamically added elements (e.g. hint)
const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+
+ // Change styles for different lengths of logo add-on
+ const logoAddon = document.querySelector('.logoaddon');
+ if (logoAddon && logoAddon.textContent.length < 6) {
+ if (!isSmallScreen) {
+ logoAddon.style.right = '0.1rem';
+ } else {
+ logoAddon.style.right = '-0.3rem';
+ }
+ }
+
// Function to toggle the shifted class on elements
function shiftContent() {
// Get elements to perform content shift when sidebar is active
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index c6261e9..e27f1d6 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -36,9 +36,12 @@
position:absolute;
display: block;
font-size: 10pt;
- right: -1rem;
- top: 1.7rem;
+ // right: -1rem;
+ // top: 1.7rem;
// bottom: 4pt;
+ right: -2rem;
+ top: 2.1rem;
+ transform: rotate(-5deg);
// text-align:right;
color: $nearly-white;
// padding: 3pt;
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 8201f8b..ebf31ae 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -298,8 +298,10 @@
.logo > * {
> div.logoaddon {
- right: -1.2rem;
- top: 1.4rem;
+ // right: -1.2rem;
+ // top: 1.4rem;
+ right: -2.4rem;
+ top: 1.6rem;
}
}