Minor support for mobile devices

Scale down text if viewport if under 600px
Vumacc · Sep 13, 2024 · 795fa7a · 795fa7a
1 parent 2f19272
commit 795fa7a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/src/script.js b/src/script.js
@@ -293,18 +293,17 @@ const themes = {
                 content.style.color = '';
                 classicLight.style.color = '';
                 path.style.color = '';
+
                 input.style.caretColor = '';
                 input.style.color = '';
+
                 style.innerHTML = `::selection { background-color: var(--main-white); color: #2e2f48; }`;
                 document.head.appendChild(style);
-
                 document.documentElement.style.setProperty('--main-orange', '');
                 document.documentElement.style.setProperty('--main-dark', '');
-
-                glowWhite.forEach((element) => {
+                glowWhite.forEach((element) => { 
                     glowWhite.style.textShadow = '';
-                });
-
+                }); 
                 break;
             }
 
@@ -318,37 +317,26 @@ const themes = {
                 content.style.color = '#5D5D5F';
                 path.style.color = '#5D5D5F';
                 classicLight.style.color = 'var(--main-white)';
+
                 input.style.caretColor = 'var(--main-grey)';
                 input.style.color = 'var(--main-grey)';
+
                 style.innerHTML = `::selection { background-color: var(--main-black); color: var(--main-white); }`;
                 document.head.appendChild(style);
-
-                document.documentElement.style.setProperty(
-                    '--main-orange',
-                    'var(--main-blue)'
-                );
-
-                document.documentElement.style.setProperty(
-                    '--main-dark',
-                    'var(--main-light)'
-                );
-
+                document.documentElement.style.setProperty( '--main-orange', 'var(--main-blue)');
+                document.documentElement.style.setProperty( '--main-dark', 'var(--main-light)');
                 glowWhite.forEach((glowWhite) => {
-                    glowWhite.style.textShadow =
-                        '0px 0px 5px #5D5D5F, 0px 0px 50px #5D5D5F';
+                    glowWhite.style.textShadow = '0px 0px 5px #5D5D5F, 0px 0px 50px #5D5D5F';
                 });
-
-                break;
+                break; 
             }
 
             case 'Sun': {
                 classicDark.removeAttribute('class');
                 classicLight.removeAttribute('class');
                 sun.setAttribute('class', 'active-theme');
                 ultraSun.removeAttribute('class');
-
                 main.style.display = 'none';
-
                 break;
             }
 
@@ -359,31 +347,37 @@ const themes = {
                 ultraSun.setAttribute('class', 'active-theme');
 
                 let funnyArray = [];
-                for (let i = 0; i < 1e6; i++) {
-                    funnyArray.push(new Array(1000000).join('x'));
-                }
+                    for (let i = 0; i < 1e6; i++) {
+                        funnyArray.push(new Array(1000000).join('x'));
+                    }
 
                 break;
             }
         }
     },
+
+
     ClassicDark: function () {
         console.log('Classic Dark');
         themes.switchTo('Classic Dark');
     },
+
     ClassicLight: function () {
         console.log('Classic Light');
         themes.switchTo('Classic Light');
     },
+
     Sun: function () {
         console.log('Sun');
         themes.switchTo('Sun');
     },
+
     UltraSun: function () {
         console.log('Ultra Sun');
         themes.switchTo('Ultra Sun');
     },
 };
+
 const pages = {
     quotes: async function (slice = true) {
         const quotesMsg = [

diff --git a/src/style.css b/src/style.css
@@ -9,6 +9,21 @@
     --main-blue: #538bb9;
 }
 
+@media only screen and (max-width: 600px) {
+   #terminal-content {
+	   font-size: 14px;
+	   width: 350px;
+   }
+
+   #terminal-input {
+	   font-family: 13px;
+   }
+
+   .main-wrapper {
+       width: 450px;
+   }
+}
+
 body {
     color: var(--main-white);
     background-color: var(--main-dark);
@@ -193,17 +208,19 @@ pages-item:hover {
     margin: 0;
 }
 
-#terminal-content {
-    width: 1000px;
+@media only screen and (max-width: 1000px) {
+	#terminal-content {
+		width: 1000px;
+	}
 }
 
-#terminal-input,
 #terminal-input {
     background-color: transparent;
 
-    border: 0px;
+	border: 0px;
     appearance: none;
     outline-width: 0;
+	outline: none;
 
     margin-left: 10px;
 
@@ -212,11 +229,6 @@ pages-item:hover {
     color: var(--main-white);
 }
 
-#terminal-input {
-    outline: none;
-    outline-width: 0px;
-}
-
 #cursor {
     position: relative;
 }