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>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,12 +1,15 @@
|
|||||||
#root {
|
#root {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
margin: 0 0;
|
margin: 0 0;
|
||||||
padding: 2rem;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
#play-button {
|
#play-button {
|
||||||
@ -20,6 +23,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import './App.css'
|
|||||||
import Game from "./objects/Game/Game.tsx";
|
import Game from "./objects/Game/Game.tsx";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { colors } from "./objects/Color.ts";
|
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)
|
// From MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
|
||||||
function getRandomInt(min: number, max: number) {
|
function getRandomInt(min: number, max: number) {
|
||||||
@ -37,6 +38,7 @@ function App() {
|
|||||||
<h1>Mastermind</h1>
|
<h1>Mastermind</h1>
|
||||||
<button id={"play-button"} onClick={() => setIsPlaying(true)}><b>Play</b></button>
|
<button id={"play-button"} onClick={() => setIsPlaying(true)}><b>Play</b></button>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -47,6 +49,7 @@ function App() {
|
|||||||
<h1>Mastermind</h1>
|
<h1>Mastermind</h1>
|
||||||
<Game combination={generateCombination(nColors)} nColors={nColors} nLines={nLines}></Game>
|
<Game combination={generateCombination(nColors)} nColors={nColors} nLines={nLines}></Game>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,6 +30,8 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@ -46,6 +48,7 @@ button {
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color 0.25s;
|
transition: border-color 0.25s;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus,
|
button:focus,
|
||||||
@ -53,23 +56,6 @@ button:focus-visible {
|
|||||||
outline: 4px auto -webkit-focus-ring-color;
|
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 {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@ -78,35 +64,6 @@ a:hover {
|
|||||||
text-decoration: underline;
|
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) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
color: #213547;
|
color: #213547;
|
||||||
@ -131,12 +88,7 @@ footer .right .socials {
|
|||||||
button {
|
button {
|
||||||
background-color: #1a1a1a;;
|
background-color: #1a1a1a;;
|
||||||
}
|
}
|
||||||
footer {
|
|
||||||
background-color: #4C585B;
|
|
||||||
}
|
|
||||||
.social {
|
|
||||||
filter: invert(1);
|
|
||||||
}
|
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
@ -150,25 +102,6 @@ footer .right .socials {
|
|||||||
:root {
|
:root {
|
||||||
font-size: clamp(0.75rem, -0.61rem + 0.86vw , 1rem);
|
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) {
|
@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 {
|
#drop-zone {
|
||||||
|
width: 500px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
|
column-gap: 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
#drop-zone {
|
||||||
|
width: calc(500px*80%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user