Skip to content

Commit

Permalink
Merge pull request #8 from sphere-province-games/dev
Browse files Browse the repository at this point in the history 
Add new photos and tablet css
  • Loading branch information
Jared Bowman committed Apr 3, 2024
2 parents e17d75f + 47d23a5 commit 3ff9c94
Show file tree
Hide file tree
Showing 7 changed files with 579 additions and 311 deletions.
298 changes: 4 additions & 294 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,9 @@ main .main-container .main-block .videos-container iframe {
}

main .main-container .main-block .images-container {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
margin: 10px 0;
text-align: left;
Expand All @@ -294,6 +297,7 @@ main .main-container .main-block .images-container h2 {

main .main-container .main-block .images-container img {
width: 400px;
margin: 10px 0;
}

main .main-container .main-block .logo-icon-container {
Expand Down Expand Up @@ -367,298 +371,4 @@ main .main-container .main-block .credits-container .content-block p {
text-align: left;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.2rem;
}

/* FOR HEADER */
@media only screen and (max-width: 430px) {
header {
display: block;
}

header .container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}

header .container .logo {
display: block;
}

header .container .logo img {
width: 150px;
padding: 10px 0;
}

header .container .links {
display: none;
}

header .menu {
display: none;
position: absolute;
top: 35px;
width: 100%;
justify-content: center;
align-items: center;
}

header .menu .close-btn {
position: absolute;
top: 35px;
left: 30px;
scale: 2;
}

header .menu .menu-links {
display: block;
}

header .menu .menu-links ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
list-style: none;
gap: 10px;
}

header .menu .menu-links ul a {
font-family: 'Demora', 'Impact', 'monospace';
font-size: 23px;
}

header .menu .menu-links ul a:link {
text-decoration: none;
color: black;
}

header .menu .menu-links ul a:hover {
color: black;
cursor: pointer;
}

header .menu .menu-links ul a:visited {
color: black;
}
}

/* FOR CONTENT */
@media only screen and (max-width: 430px) {
.content {
display: block;
margin: auto;
}

.content .content-title {
position: relative;
}

.content .content-title #title-image {
width: 100%;
height: 350px;
}

.content .content-title .content-title-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.content .content-title .content-title-text #title-text {
color: white;
font-family: "Mandalore";
font-size: 70px;
letter-spacing: 5px;
}
}

/* FOR MAIN */
@media only screen and (max-width: 430px) {
main {
display: block;
padding: 10px;
}

main .main-container {
margin: unset;
}

main .main-container .main-splitter-1 {
display: block;
margin: 100px 0;
}

main .main-container .main-splitter-1 section {
margin: 0 10px;
}

main .main-container .main-splitter-1 section .main-title {
font-family: "Demora";
font-size: 40px;
}

main .main-container .main-splitter-1 section .main-title hr {
border: 10px solid black;
border-radius: 20px;
margin: 15px;
}

main .main-container .main-splitter-1 section .main-content {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.5em;
line-height: 1.5em;
vertical-align: middle;
text-align: center;
}

main .main-container .main-splitter-1 section .main-content img {
width: 275px;
}

main .main-container .main-splitter-1 section .main-content ul {
display: inline-block;
text-align: left !important;
}

main .main-container .main-splitter-1 section .main-content li {
margin-left: 10px;
text-align: left;
}

main .main-container .main-splitter-2 {
display: block;
flex-direction: row-reverse;
align-items: center;
margin: 100px 0;
}

main .main-container .main-splitter-2 section {
margin: 0 10px;
}

main .main-container .main-splitter-2 section .main-title {
font-family: "Demora";
font-size: 40px;
}

main .main-container .main-splitter-2 section .main-title hr {
border: 10px solid black;
border-radius: 20px;
margin: 15px;
}

main .main-container .main-splitter-2 section .main-content {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.5em;
line-height: 1.5em;
vertical-align: middle;
text-align: center;
}

main .main-container .main-splitter-2 section .main-content img {
width: 275px;
}

main .main-container .main-faq {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 100px 0;
}

main .main-container .main-faq h1 {
font-family: "Demora";
font-size: 70px;
}

main .main-container .main-faq section {
margin: 10px 0;
}

main .main-container .main-faq section h2 {
font-family: "Demora";
font-size: 30px;
text-align: left;
}

main .main-container .main-faq section p {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.5em;
text-align: left;
}

main .main-container .main-block {
display: flex;
justify-content: center;
flex-direction: column;
}

main .main-container .main-block-line {

}

main .main-container .main-block .factsheet-container {
width: 100%;
}

main .main-container .main-block .factsheet-container .fact {
margin: 10px 0;
}

main .main-container .main-block .factsheet-container .fact h2 {
text-align: left;
}

main .main-container .main-block .factsheet-container .fact p {
text-align: left;
}

main .main-container .main-block .description-container {
width: 100%;
margin: 10px 0;
text-align: left;
}

main .main-container .main-block .description-container h2 {
text-align: left;
}

main .main-container .main-block .description-container p {
text-align: left;
}

main .main-container .main-block .description-container ul {
display: inline-block;
text-align: left;
margin-left: 10px;
}

main .main-container .main-block .videos-container {
width: unset;
text-align: unset;
}

main .main-container .main-block .videos-container iframe {
width: 350px;
}

main .main-container .main-block .images-container {
width: unset;
}

main .main-container .main-block .logo-icon-container {
width: unset;
}

main .main-container .main-block .about-container {
width: unset;
}

main .main-container .main-block .credits-container {
width: unset;
}
}
Loading

0 comments on commit 3ff9c94

Please sign in to comment.