0e53038840
changed portrait with something closer to the final image changed filler text to something readable (turns out the translation of lorel ipsum sounds kinda dodgy) added more rows to the grid and fixed their size, now to start adding items to the page!
76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
@import url("reset.css");
|
|
|
|
@font-face{
|
|
font-family:"roboto";
|
|
font-weight: 100;
|
|
src: url("Fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
|
|
}
|
|
|
|
*{
|
|
color: #FCC42F;
|
|
font-family: "roboto";
|
|
|
|
}
|
|
|
|
body{
|
|
margin: 20;
|
|
background-color: #221A0F;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-template-rows: repeat(50, 1fr);
|
|
gap: 1vh;
|
|
height: 400vh;
|
|
}
|
|
|
|
|
|
h1, h2, h3{
|
|
background-color: #ffa500;
|
|
background: radial-gradient(#E39823 40%, #8D5001);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
h1{
|
|
font-size: 5vw;
|
|
padding-left: 6;
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
grid-row-start: 3;
|
|
grid-row-end: 6;
|
|
}
|
|
|
|
h2{
|
|
font-size: 1vw;
|
|
padding: 5;
|
|
grid-column-start: 2;
|
|
grid-column-end: 12;
|
|
grid-row-start: 14;
|
|
grid-row-end: 19;
|
|
}
|
|
|
|
.titleScreenArea{ /*the large empty space around the title*/
|
|
grid-column-start: 1;
|
|
grid-column-end: 13;
|
|
grid-row-start: 4;
|
|
grid-row-end: 8;
|
|
}
|
|
|
|
.mainImage{ /*image between first and second paragraph, only image on page but using class just incase i need another one later*/
|
|
grid-column-start: 5;
|
|
grid-column-end: 10;
|
|
grid-row-start: 20;
|
|
grid-row-end: 27;
|
|
object-fit: fill;
|
|
display: block;
|
|
}
|
|
|
|
.orangeBack{ /*for anything that isnt a <h> tag*/
|
|
background-color: #ffa500;
|
|
background: radial-gradient(#E39823 40%, #8D5001);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|