aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Startpage logo

Browse source
This commit is contained in:
aronmal 2023-02-04 22:23:28 +00:00
parent b5473c9b92
commit 78c0263444
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 123 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
leaky-ships/pages/dev/index.tsx
View file

@ -10,8 +10,15 @@ export default function Home() {
<button id='navExpand'>
<FontAwesomeIcon icon={faCompass} />
</button>
<div className='flex-row'>
<div id='shield'>
<div id='width'>
<h1>Leaky</h1>
<h1>Ships</h1>
</div>
</div>
</div>
<div className='beforeStartBox'>
<img id='shield' src="/assets/shield.png" alt="Shield Logo" />
{!heWantsToPlay ?
<>
<div id='videoWrapper'>
@ -27,6 +34,6 @@ export default function Home() {
</div>
</div>}
</div>
</div>
</div >
)
}

112
leaky-ships/styles/homepage.scss
View file

@ -1,7 +1,9 @@
@use './mixins/display' as *;
@use './mixins/CP_Font' as *;
#box {
border: 2px solid black;
height: 100vh;
width: 100vw;
min-height: 100vh;
background-color: #282c34;
#navExpand {
@ -21,6 +23,107 @@
}
}
.flex-row {
@include flex-row;
justify-content: center;
#shield {
@include flex-row;
justify-content: center;
height: 250px;
width: 700px;
margin: 5%;
background-image: url("/assets/shield.png");
background-repeat: no-repeat;
background-size: contain;
#width {
@include flex-col;
justify-content: space-between;
h1 {
@include CP_Font;
margin: 3%;
width: 100%;
text-align: center;
font-size: 5.8em;
letter-spacing: 6px;
&:first-child {
border-top: 5px solid black;
}
&:last-child {
border-bottom: 5px solid black;
}
}
}
@media (max-width: 1000px) {
height: 200px;
width: 560px;
#width {
h1 {
font-size: 4.5em;
letter-spacing: 4px;
&:first-child {
border-top: 4px solid black;
}
&:last-child {
border-bottom: 4px solid black;
}
}
}
}
@media (max-width: 800px) {
height: 160px;
width: 450px;
#width {
h1 {
font-size: 3.6em;
letter-spacing: 3px;
&:first-child {
border-top: 3px solid black;
}
&:last-child {
border-bottom: 3px solid black;
}
}
}
}
@media (max-width: 600px) {
height: 100px;
width: 280px;
#width {
h1 {
font-size: 2.4em;
letter-spacing: 2px;
&:first-child {
border-top: 2px solid black;
}
&:last-child {
border-bottom: 2px solid black;
}
}
}
}
}
}
.beforeStartBox {
display: flex;
flex-direction: column;
@ -29,11 +132,6 @@
height: 100%;
width: 100%;
#shield {
width: 450px;
}
#videoWrapper {
display: flex;
align-items: center;

9
leaky-ships/styles/mixins/CP_Font.scss Normal file
View file

@ -0,0 +1,9 @@
@font-face {
font-family: "CP_Font";
src: url("/fonts/cpfont_ote/CP Font.otf") format("opentype");
}
@mixin CP_Font {
font-family: "CP_Font", sans-serif;
}