phc
/
lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update css

Browse Source
pull/79/head
Jon Eugster 2 years ago
parent 048f3a8c0e
commit 6582d4e625
2 changed files with 86 additions and 68 deletions
Show Stats Download Patch File Download Diff File

81
client/src/components/LandingPage.css
Unescape Escape View File

@ -5,6 +5,10 @@
font-style: normal; font-style: normal;
} */ } */
html {
font-size: 16px;
}
body { body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
} }
@ -18,38 +22,14 @@ a {
zoom: 1.0 ; zoom: 1.0 ;
} }
/* .landing-page { .landing-page {
position: relative; width: 100%;
margin: 20px;
} */
/* p {
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
margin-top: 40px;
margin-bottom: 20px;
}
*/
.title {
font-size: 24px;
font-weight: bold;
padding-top: 15px;
padding-bottom: 5px;
} }
.game-list { .game-list {
display: grid; display: grid;
grid-gap: 25px; grid-gap: 40px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 60px; padding-top: 60px;
@ -66,6 +46,8 @@ h2 {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
justify-self: center; justify-self: center;
font-size: 1rem;
} }
.image { .image {
@ -93,7 +75,7 @@ div.image {
.short-description { .short-description {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
height: 105px; height: 6.5rem;
} }
.game-stats { .game-stats {
display: block; display: block;
@ -120,6 +102,13 @@ div.image {
text-align: right; text-align: right;
} }
.title {
font-size: 1.5rem;
font-weight: bold;
padding-top: 15px;
padding-bottom: 5px;
}
header { header {
border: 1px solid green; border: 1px solid green;
background-repeat: none; background-repeat: none;
@ -143,10 +132,10 @@ header {
#main-title p { #main-title p {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 1.25rem;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
max-width: 600px; max-width: 600px;
font-size: 1.25rem;
} }
#main-title a { #main-title a {
@ -171,23 +160,30 @@ header nav {
footer { footer {
background-color: rgba(0, 133, 162, 1); background-color: rgba(0, 133, 162, 1);
display: flex; /* display: flex;
justify-content: flex-end; flex-direction: row;
justify-content: flex-end; */
padding: 20px; padding: 20px;
} }
footer .link { footer .link {
color: white; color: white;
cursor: pointer; cursor: pointer;
margin-left: 40px;
margin-right: 40px;
} }
.github-link { .github-link {
height: 24px; /* TODO: why do I need that? s*/ height: 24px; /* TODO: why do I need that? s*/
} }
.landing-page > section { .landing-page > section {
padding: 40px; padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
font-size: 1.25rem;
} }
.landing-page > section h2 { .landing-page > section h2 {
@ -202,3 +198,20 @@ footer .link {
.landing-page > section:nth-of-type(even) { .landing-page > section:nth-of-type(even) {
background-color: rgb(255, 255, 255) background-color: rgb(255, 255, 255)
} }
@media screen and (min-width: 1300px) {
.landing-page > section .wrapper {
max-width: 1300px;
margin-left: calc(50% - 650px);
margin-right: calc(50% - 650px);
}
}
/* TODO: Adjust to 180px once there are more than two games */
@media screen and (min-width: 1300px) {
.game-list {
max-width: 1300px;
margin-left: calc(50% - 650px);
margin-right: calc(50% - 650px);
}
}

73
client/src/components/LandingPage.tsx
Unescape Escape View File

@ -105,7 +105,6 @@ function LandingPage() {
</p> </p>
</div> </div>
</header> </header>
<div className="game-list"> <div className="game-list">
<GameTile <GameTile
@ -115,8 +114,7 @@ function LandingPage() {
description=" description="
Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an. Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an.
(Das Spiel befindet sich noch in der Entstehungsphase.) (Das Spiel befindet sich noch in der Entstehungsphase.)"
"
image={coverRobo} image={coverRobo}
language="German" language="German"
/> />
@ -133,46 +131,53 @@ This is a good first introduction to Lean!"
levels="72" levels="72"
language="English" language="English"
/> />
</div> </div>
<section> <section>
<h2>Development notes</h2> <div className="wrapper">
<p> <h2>Development notes</h2>
As this server runs lean on our university machines, it has a capacity of ca. 15-25 <p>
games running simultaneously. We hope to address this limitation in the further future. As this server runs lean on our university machines, it has a capacity of ca. 15-25
</p> games running simultaneously. We hope to address this limitation in the further future.
<p> </p>
Most things about the games and infrastructure is still in development. Feel free to <p>
write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about Most things about the games and infrastructure is still in development. Feel free to
any problems you experience! write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about
</p> any problems you experience!
</p>
</div>
</section> </section>
<section> <section>
<h2>Adding new games</h2> <div className="wrapper">
<p> <h2>Adding new games</h2>
If you consider writing your own game, you should use <p>
the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as If you consider writing your own game, you should use
a template. the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
</p> a template.
<p> </p>
There will be an option to load and run games through the server <p>
directly by specifying a URL, but this is still in development. There will be an option to load and run games through the server
</p> directly by specifying a URL, but this is still in development.
<p> </p>
To add games to this page, you should get in contact as <p>
games will need to be added manually. To add games to this page, you should get in contact as
</p> games will need to be added manually.
</p>
</div>
</section> </section>
<section> <section>
<h2>Funding</h2> <div className="wrapper">
<p> <h2>Funding</h2>
This Server has been developed as part of the <p>
project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at This Server has been developed as part of the
Heinrich-Heine-Universität in Düsseldorf. project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at
</p> Heinrich-Heine-Universität in Düsseldorf.
</p>
</div>
</section> </section>
<footer> <footer>
<a className="link" onClick={openImpressum}>Impressum</a> <a className="link" onClick={openImpressum}>Impressum</a>
{impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null} {impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
</footer> </footer>
{/* <PrivacyPolicy/> */} {/* <PrivacyPolicy/> */}

Write Preview
Loading…
Cancel
Save