Merge pull request #5 from stifskere/dev

feat: footer and project desc responsiveness
stifskere · Apr 13, 2024 · 33ab744 · 33ab744
2 parents c0fe8d2 + 4d6c615
commit 33ab744
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 19 deletions.
diff --git a/src/app/page.css b/src/app/page.css
@@ -259,10 +259,10 @@ body {
 
 /*footer section*/
 footer {
-    height: 40vh;
+    height: 400px;
 
     @media (orientation: portrait) {
-        height: 130vh;
+        height: 1200px;
     }
 
     position: relative;
@@ -275,8 +275,6 @@ footer {
         rgba(0, 0, 0, 0.50) 90%,
         transparent 100%
     );
-
-
 }
 
 .footer-content {
@@ -303,16 +301,22 @@ footer {
 }
 
 .footer-content > img {
-    height: 20vw;
-    width: 20vw;
+    height: 10vw;
+    width: 10vw;
 
-    max-width: 230px;
-    max-height: 230px;
+    max-width: 192px;
+    max-height: 192px;
 
     @media (orientation: portrait) {
         height: 150px;
         width: 150px;
     }
+
+    @media (max-width: 1070px) {
+        @media (orientation: landscape) {
+            display: none;
+        }
+    }
 }
 
 .footer-content > div {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -15,6 +15,7 @@ import Box from "@/components/box";
 import PageSelector from "@/components/page-selector";
 import Repository from "@/components/repository";
 import FooterList from "@/components/footer-list";
+import FooterContact from "@/components/footer-contact";
 
 import logo from "../../public/logo.png";
 
@@ -115,14 +116,7 @@ export default function Home(): ReactElement {
 			<div className="footer-content">
 				<Image unoptimized src={logo} alt="logo"/>
 				<div>
-					<FooterList title="Find me">
-						{[
-							{
-								content: "Email me",
-								href: "mailto:contact@memw.es"
-							}
-						]}
-					</FooterList>
+					<FooterContact />
 					<FooterList title="About this">
 						{[
 							{

diff --git a/src/components/footer-contact/index.css b/src/components/footer-contact/index.css
@@ -0,0 +1,92 @@
+
+.footer-contact {
+    color: white;
+
+    display: flex;
+    flex-direction: column;
+
+    gap: 15px;
+
+    font-size: 1.1em;
+}
+
+@media (orientation: portrait) {
+    .footer-contact > h1 {
+        align-self: center;
+    }
+}
+
+.contact-input {
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    gap: 10px;
+
+    font-size: 1.2em;
+
+    position: relative;
+}
+
+.contact-input > svg {
+    position: absolute;
+
+    left: 90%;
+
+    /*cursor: pointer;*/
+
+    color: #606060;
+
+    transition: color 0.2s;
+}
+
+/*.contact-input > svg:hover {*/
+/*    color: white;*/
+/*}*/
+
+.contact-input > input {
+    background-color: black;
+
+    border: #606060 solid;
+    border-width: 0 0 1px 0;
+
+    height: 30px;
+
+    color: white;
+
+    outline: none;
+
+    padding-left: 10px;
+
+    transition: border-color 0.2s;
+
+    width: 250px;
+}
+
+/*.contact-input > input:focus,*/
+/*.contact-input > input:hover {*/
+/*    border-color: white;*/
+/*}*/
+
+.contact-alternative {
+    color: #676767;
+
+    font-size: 0.7em;
+}
+
+.contact-alternative > p > a {
+    transition: color 0.2s, text-shadow 0.2s;
+
+    color: #676767;
+
+    text-decoration: none;
+
+    cursor: pointer;
+}
+
+.contact-alternative > p > a:hover {
+    color: white;
+
+    text-shadow: 0 0 5px;
+}
diff --git a/src/components/footer-contact/index.tsx b/src/components/footer-contact/index.tsx
@@ -0,0 +1,17 @@
+import {ReactElement} from "react";
+import {IoIosSend} from "react-icons/io";
+
+import "./index.css";
+
+export default function FooterContact(): ReactElement {
+	return <div className="footer-contact">
+		<h1>Get in touch</h1>
+		<div className="contact-input">
+			<input disabled={true} type="email" placeholder="My email is unavailable..."/>
+			<IoIosSend/>
+		</div>
+		<div className="contact-alternative">
+			<p>But you can WhatsApp at <a href="https://wa.me/message/L7BNFIDQU44CN1">(+34) 611 080 006</a>.</p>
+		</div>
+	</div>;
+}
diff --git a/src/components/repository/index.css b/src/components/repository/index.css
@@ -19,9 +19,11 @@
 
     cursor: pointer;
 
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @media (orientation: landscape) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 
     @media (orientation: portrait) {
         font-size: 1em;
@@ -114,6 +116,8 @@
 
 .repository > p {
     margin-right: 50px;
+
+    text-wrap: initial;
 }
 
 .repository-data,