Footer is now an Object to respect React logic. Adapted game board to diminish with screen reducing
This commit is contained in:
quentin
parent
8325c2b1cd
commit
c98a076952
24
index.html
24
index.html
@ -9,29 +9,5 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<footer>
|
||||
<div class="middle">
|
||||
<h2>Let's keep in touch !</h2>
|
||||
<p>If these projects or my profile interests you feel free to contact me through any of the social links on the right.</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="mail-to">
|
||||
<p><b>Mail: </b><a class="link" href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></p>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="socials">
|
||||
<a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank"><img class="social" src="src/assets/icons/linkedin.svg" alt="Quentin's LinkedIN"/></a>
|
||||
</div>
|
||||
<div class="socials">
|
||||
<a href="https://git.quentin-leblanc.ch/quentin" target="_blank"><img class="social" src="src/assets/icons/git-alt.svg" alt="Quentin's Git"/></a>
|
||||
</div>
|
||||
|
||||
<div class="socials">
|
||||
<a href="https://www.instagram.com/th3wh1t3q/" target="_blank"><img class="social" src="src/assets/icons/square-instagram.svg" alt="Quentin's Instagram"/></a>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 0;
|
||||
padding: 2rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#play-button {
|
||||
@ -20,6 +23,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
@ -2,6 +2,7 @@ import './App.css'
|
||||
import Game from "./objects/Game/Game.tsx";
|
||||
import { useState } from "react";
|
||||
import { colors } from "./objects/Color.ts";
|
||||
import Footer from "./objects/Footer/Footer.tsx";
|
||||
|
||||
// From MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
|
||||
function getRandomInt(min: number, max: number) {
|
||||
@ -37,6 +38,7 @@ function App() {
|
||||
<h1>Mastermind</h1>
|
||||
<button id={"play-button"} onClick={() => setIsPlaying(true)}><b>Play</b></button>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -47,6 +49,7 @@ function App() {
|
||||
<h1>Mastermind</h1>
|
||||
<Game combination={generateCombination(nColors)} nColors={nColors} nLines={nLines}></Game>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -30,6 +30,8 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -46,6 +48,7 @@ button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
@ -53,23 +56,6 @@ button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
}
|
||||
|
||||
footer .middle {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
footer .middle h2,p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -78,35 +64,6 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mail-to p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer .right {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
margin-right: 50px;
|
||||
grid-column-gap: 0;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-rows: 1fr 1fr;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .right .mail-to {
|
||||
grid-column-end: span 7;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
footer .right .socials {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
@ -131,12 +88,7 @@ footer .right .socials {
|
||||
button {
|
||||
background-color: #1a1a1a;;
|
||||
}
|
||||
footer {
|
||||
background-color: #4C585B;
|
||||
}
|
||||
.social {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
@ -150,25 +102,6 @@ footer .right .socials {
|
||||
:root {
|
||||
font-size: clamp(0.75rem, -0.61rem + 0.86vw , 1rem);
|
||||
}
|
||||
|
||||
footer .right {
|
||||
margin-left: 2%;
|
||||
display: grid;
|
||||
padding: 0;
|
||||
overflow: scroll;
|
||||
grid-column-gap: 0;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-rows: 1fr 1fr;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .right .socials {
|
||||
width: clamp(16px, 0.6rem + 0.86vw, 32px);
|
||||
height: clamp(16px, 0.6rem + 0.86vw, 32px);
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 256px) {
|
||||
|
||||
77
src/objects/Footer/Footer.css
Normal file
77
src/objects/Footer/Footer.css
Normal file
@ -0,0 +1,77 @@
|
||||
footer {
|
||||
position: sticky;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
bottom: 0;
|
||||
height: 10em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
footer .middle {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
footer .middle h2,p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mail-to p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer .right {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
margin-right: 50px;
|
||||
grid-column-gap: 0;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-rows: 1fr 1fr;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .right .mail-to {
|
||||
grid-column-end: span 7;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
footer .right .socials {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
footer .right {
|
||||
margin-left: 2%;
|
||||
display: grid;
|
||||
padding: 0;
|
||||
overflow: scroll;
|
||||
grid-column-gap: 0;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-rows: 1fr 1fr;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .right .socials {
|
||||
width: clamp(16px, 0.6rem + 0.86vw, 32px);
|
||||
height: clamp(16px, 0.6rem + 0.86vw, 32px);
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
footer {
|
||||
background-color: #4C585B;
|
||||
}
|
||||
.social {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
39
src/objects/Footer/Footer.tsx
Normal file
39
src/objects/Footer/Footer.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import "./Footer.css"
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="middle">
|
||||
<h2>Let's keep in touch !</h2>
|
||||
<p>If these projects or my profile interests you feel free to contact me through any of the social links on the
|
||||
right.</p>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="mail-to">
|
||||
<p><b>Mail: </b><a className="link" href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></p>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div className="socials">
|
||||
<a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank"><img className="social"
|
||||
src="src/assets/icons/linkedin.svg"
|
||||
alt="Quentin's LinkedIN"/></a>
|
||||
</div>
|
||||
<div className="socials">
|
||||
<a href="https://git.quentin-leblanc.ch/quentin" target="_blank"><img className="social"
|
||||
src="src/assets/icons/git-alt.svg"
|
||||
alt="Quentin's Git"/></a>
|
||||
</div>
|
||||
|
||||
<div className="socials">
|
||||
<a href="https://www.instagram.com/th3wh1t3q/" target="_blank"><img className="social"
|
||||
src="src/assets/icons/square-instagram.svg"
|
||||
alt="Quentin's Instagram"/></a>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -11,9 +11,17 @@
|
||||
}
|
||||
|
||||
#drop-zone {
|
||||
width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#drop-zone {
|
||||
width: calc(500px*80%);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user