Skip to content

Commit

Permalink
Merge pull request #54 from fielddaylab/feature/FD-70-2
Browse files Browse the repository at this point in the history 
Partially pre-review redesign staging
  • Loading branch information
@jwisc
jwisc authored Sep 18, 2024
2 parents 0d0bc6a + dc1b5c8 commit 412724c
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 24 deletions.
63 changes: 54 additions & 9 deletions assets/css/styles_ver3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17656,28 +17656,47 @@ tbody tr {
transform: scaleX(-1);
}
.home-page #complextopics .container {
margin-top: auto;
max-height: 643px;
}
.home-page .workshop-container {
.home-page .observation-tank-container {
position: relative;
width: 100%;
}
.home-page .workshop {
.home-page .observation-tank {
position: relative;
width: 100%;
height: 60vw;
min-height: 400px;
max-height: 643px;
background-image: url(../img/home/border-bottom.png), url(../img/home/Workshop_Background.png);
background-size: 25px, cover;
background-image: url(../img/home/border-bottom.png), url(../img/home/ObservationTank_Background.png);
background-size: 25px, 150%;
background-repeat: repeat-x, no-repeat;
background-position: bottom, top;
background-position: bottom, 50% 65%;
text-align: center;
padding-top: 5em;
display: flex;
justify-content: center;
overflow: hidden;
}
@media (max-width: 472px) {
.home-page .observation-tank {
background-position: bottom, top;
}
}
.home-page .otter1 {
position: relative;
width: 73px;
height: 63px;
top: 30%;
left: 20%;
}
.home-page .otter2 {
position: relative;
width: 63px;
height: 55px;
top: 10%;
right: 10%;
}
@media (min-width: 576px) {
.home-page .lead .section-img {
margin-top: -8em;
Expand All @@ -17697,6 +17716,14 @@ tbody tr {
.home-page .modeling-room .modeling-reel {
left: calc(50% + 21.5vw);
}
.home-page .otter1 {
width: 145px;
height: 125px;
}
.home-page .otter2 {
width: 125px;
height: 110px;
}
}
@media (min-width: 768px) {
.home-page .flex-lg-row {
Expand Down Expand Up @@ -17771,6 +17798,14 @@ tbody tr {
width: max(24vw, 166px);
margin-left: calc(max(24vw, 166px) * -0.2);
}
.home-page .otter1 {
width: 193px;
height: 166px;
}
.home-page .otter2 {
width: 166px;
height: 146px;
}
}
@media (min-width: 1600px) {
.home-page .flex-xxl-row {
Expand Down Expand Up @@ -17829,11 +17864,11 @@ tbody tr {
background-size: 9px, 9px;
border-bottom: none;
}
.home-page .workshop {
background-image: url(../img/home/border-left.png), url(../img/home/border-right.png), url(../img/home/Workshop_Background.png);
.home-page .observation-tank {
background-image: url(../img/home/border-left.png), url(../img/home/border-right.png), url(../img/home/ObservationTank_Background.png);
background-size: 9px, 9px, cover;
background-repeat: repeat-y, repeat-y, no-repeat;
background-position: left, right, top;
background-position: left, right, center;
}
.home-page .modeling-monitor {
top: 205px;
Expand All @@ -17853,6 +17888,16 @@ tbody tr {
top: 315px;
width: max(5%, 53px);
}
.home-page .otter1 {
width: 145px;
height: 125px;
top: 40%;
}
.home-page .otter2 {
width: 125px;
height: 110px;
top: 25%;
}
}
@media (min-width: 2100px) {
.home-page section.ship-room {
Expand Down
Binary file added assets/img/home/ObservationTank_Background.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/img/home/Workshop_Background.png
View file
Binary file not shown.
Binary file added assets/img/home/gamer-kid.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/home/otter1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/home/otter2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 53 additions & 8 deletions assets/scss/_home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -579,25 +579,43 @@
#complextopics .container {
margin-top: auto;
}
.workshop-container {
.observation-tank-container {
position: relative;
width: 100%;
}
.workshop {
.observation-tank {
position: relative;
width: 100%;
height: 60vw;
min-height: 400px;
max-height: 643px;
background-image: url(../img/home/border-bottom.png), url(../img/home/Workshop_Background.png);
background-size: 25px, cover;
background-image: url(../img/home/border-bottom.png), url(../img/home/ObservationTank_Background.png);
background-size: 25px, 150%;
background-repeat: repeat-x, no-repeat;
background-position: bottom,top;
background-position: bottom,50% 65%;
text-align: center;
padding-top: 5em;
display: flex;
justify-content: center;
overflow: hidden;

@media (max-width: 472px) {
background-position: bottom, top;
}
}
.otter1 {
position: relative;
width:73px;
height:63px;
top: 30%;
left: 20%;
}
.otter2 {
position: relative;
width:63px;
height:55px;
top: 10%;
right: 10%;
}

@media (min-width: 576px) {
Expand All @@ -619,6 +637,14 @@
.modeling-room .modeling-reel {
left: calc(50% + 21.5vw);
}
.otter1 {
width: 145px;
height: 125px;
}
.otter2 {
width: 125px;
height: 110px;
}
}
@media (min-width: 768px) {
.flex-lg-row {
Expand All @@ -627,6 +653,7 @@
.flex-lg-reverse {
flex-direction: row-reverse;
}

}
@media (min-width: 992px) {
.flex-lg-reverse {
Expand Down Expand Up @@ -695,6 +722,14 @@
margin-left: calc(max(24vw, 166px) * -.2);
}
}
.otter1 {
width: 193px;
height: 166px;
}
.otter2 {
width: 166px;
height: 146px;
}
}
@media (min-width: 1600px) {
.flex-xxl-row {
Expand Down Expand Up @@ -753,11 +788,11 @@
background-size: 9px, 9px;
border-bottom: none;
}
.workshop {
background-image: url(../img/home/border-left.png), url(../img/home/border-right.png), url(../img/home/Workshop_Background.png);
.observation-tank {
background-image: url(../img/home/border-left.png), url(../img/home/border-right.png), url(../img/home/ObservationTank_Background.png);
background-size: 9px, 9px, cover;
background-repeat: repeat-y, repeat-y, no-repeat;
background-position: left, right, top;
background-position: left, right, center;
}
.modeling-monitor {
top: 205px;
Expand All @@ -777,6 +812,16 @@
width: max(5%, 53px);
}
}
.otter1 {
width: 145px;
height: 125px;
top: 40%;
}
.otter2 {
width: 125px;
height: 110px;
top: 25%;
}
}
@media (min-width: 2100px) {
section.ship-room {
Expand Down
21 changes: 14 additions & 7 deletions redesign.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,22 @@
</section>
<div class="bottom-frame"></div>
<section id="complextopics" class="ship-room lead d-flex flex-col flex-xxl-reverse">
<div class="workshop-container">
<div class="workshop">
<div class="observation-tank-container">
<div class="observation-tank">
<img class="otter1 floatslow" src="assets/img/home/otter1.png" alt="cute otters floating in an observation tank" />
<img class="otter2 float" src="assets/img/home/otter2.png" />
</div>
</div>
<div class="container hero-text">
<h4>Games explore complex topics.</h4>
<p>It's hard to communicate super complex topics in a short time frame. Games turn complicated topics into fun,
hands-on experiences that actually reach people. Our games get millions of plays.
</p>
<div class="container d-flex flex-col flex-lg-reverse flex-xxl-col">
<div class="section-img">
<!-- <img src="assets/img/home/gamer-kid.png" alt="a person standing tall with a tablet in hand"> -->
</div>
<div class="hero-text">
<h4>Games explore complex topics.</h4>
<p>It's hard to communicate super complex topics in a short time frame. Games turn complicated topics into fun,
hands-on experiences that actually reach people. Our games get millions of plays.
</p>
</div>
</div>
</section>
<div class="bottom-frame z1"></div>
Expand Down

0 comments on commit 412724c

Please sign in to comment.