SSL certificates, more styles improvements and sharing WIP

client/src/components/Code/index.css

@@ -7,6 +7,13 @@
   background: var(--black);
 }
 
+@media (max-width: 768px) {
+	.code-container {
+		min-width: 0px;
+		max-width: 80%;
+	}
+}
+
 .pending, .space {
   color: gray;
 }

client/src/components/Code/index.tsx

@@ -32,6 +32,7 @@ function Code({ code, loaded }: CodeProps) {
 
       if (!loaded) return;
       if (KEYS_TO_DISABLE.includes(event.key)) return;
+      if (characters.length === code.length) return;
       if (!startedTyping) setStartedTyping(true);
 
       const char = code[characters.length];

client/src/components/Footer/index.css

@@ -2,7 +2,13 @@ footer {
   text-align: center;
 
 	width: 100%;
-	min-height: 5vh;
+	padding: 1rem 0rem;
+
+	position: fixed;
+	bottom: 0;
+	left: 0;
+
+	background: var(--background);
 }
 
 footer a {

client/src/components/Stats/index.css

@@ -10,3 +10,20 @@
 
   background: var(--black);
 }
+
+.share {
+	all: unset;
+	cursor: pointer;
+
+  background: var(--crimson);
+	color: var(--white);
+
+	border-radius: 0.75rem;
+	box-shadow: none;
+
+	padding: 1rem 2rem;
+	font-size: 1.25rem;
+	font-weight: bold;
+
+	text-decoration: none;
+}

client/src/components/Stats/index.tsx

@@ -1,18 +1,33 @@
+import { useParams } from "react-router";
+
 import { useTypingContext } from "contexts/typing";
 
-import './index.css';
 import { renderTimer } from "./utils";
 
+import './index.css';
+
 type StatsProps = {
   loaded: boolean;
 }
 
 function Stats({ loaded }: StatsProps) {
   const {
+    startedTyping,
     timer,
     score,
     accuracy,
   } = useTypingContext();
+  const { lang } = useParams();
+
+  async function share() {
+    if (navigator.share) {
+      await navigator.share({
+        title: 'Touch Programming',
+        text: `I just Practiced The ${lang} Language on Touch Programming! I did ${score} WPM with ${accuracy}% accuracy. Try it out!`,
+        url: window.location.href,
+      });
+    }
+  }
 
   if (!loaded) return;
 
@@ -21,6 +36,11 @@ function Stats({ loaded }: StatsProps) {
       {renderTimer(timer)}
       <p>WPM: {Math.round(score)}</p>
       <p>Accuracy: {Math.round(accuracy)}%</p>
+      {Boolean(navigator.share) && !startedTyping && score > 0 && (
+        <button className='share' onClick={share}>
+          Share
+        </button>
+      )}
     </div>
   )
 }

client/src/index.css

@@ -70,7 +70,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .app {
-  min-height: 95vh;
+  min-height: 100vh;
 }
 
 @media (min-width: 1441px) {

client/src/pages/Home/index.css

@@ -5,7 +5,8 @@
 
 @media (max-width: 768px) {
 	.home-container {
-		padding: 0rem 1rem;
+		padding: 0rem;
+		word-break: break-word;
 	}
 }
 
@@ -55,6 +56,20 @@ header .cta {
 	text-decoration: none;
 }
 
+@media (max-width: 768px) {
+	header h1 {
+		font-size: 2.5rem;
+	}
+
+	header p {
+		font-size: 1.25rem;
+	}
+
+	header .cta {
+		font-size: 1rem;
+	}
+}
+
 .features {
   padding: 2.5rem 1.25rem;
 

client/src/pages/Languages/index.css

@@ -5,7 +5,8 @@
 
 @media (max-width: 768px) {
   .languages-container {
-    padding: 0rem 1rem;
+    padding: 0rem;
+    word-break: break-word;
   }
 }
 
@@ -26,11 +27,17 @@ header h1 {
 }
 
 header span {
-	color: var(--crimson);
+  color: var(--crimson);
+}
+
+@media (max-width: 768px) {
+	header h1 {
+		font-size: 2.5rem;
+	}
 }
 
 .languages-wrapper {
-	padding: 2.5rem 1.25rem;
+  padding: 2.5rem 1.25rem;
 
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

client/src/pages/Typing/index.css

@@ -1,10 +1,18 @@
 .typing-container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
 
-	margin-bottom: 1rem;
+  padding: 0rem 3rem;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+	.typing-container {
+		padding: 0rem;
+		word-break: break-word;
+	}
 }
 
 header {
@@ -22,9 +30,9 @@ header h1 {
 
   color: var(--crimson);
 
-	text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 header span {
-	color: var(--crimson);
+  color: var(--crimson);
 }

client/src/pages/Typing/index.tsx

@@ -12,9 +12,9 @@ import './index.css';
 
 function Typing() {
   const isMobile = isMobileBrowser();
-  const { lang } = useParams();
   const [code, setCode] = useState<string>('');
   const [loaded, setLoaded] = useState<boolean>(false);
+  const { lang } = useParams();
 
   useEffect(() => {
     if (isMobile) return;