src/app/components/home/home.style.scss
@import '~@code.gov/code-gov-style/_sass/_variables';
.banner {
&.large {
.banner-content {
padding-top: 100px;
position: absolute;
top: 50%;
/* adds some additional spacing between sections */
.indented {
@media screen and (max-width: $medium-screen) {
margin-top: 5rem;
}
@media screen and (min-height: 800px) and (min-width: $medium-screen) {
margin-top: 10rem;
}
@media screen and (max-height: 800px) and (min-width: $medium-screen) {
margin-top: 2rem;
}
}
.banner-subtitle {
@media screen and (max-width: 1200px) {
display: none;
}
}
.banner-subsection {
height: 14rem;
@media screen and (min-height: 800px) and (min-width: $medium-screen) {
height: 17rem;
}
.banner-subsection-content {
@include center-vertically();
.banner-subsection-content-padder {
.buttons {
padding-top: 7px;
}
}
}
@media screen and (max-width: $medium-screen) {
&#banner-subsection-engage {
display: none;
}
}
@media screen and (min-width: 1200px) {
&:first-child {
.banner-subsection-content-padder {
padding-right: 80px;
}
}
&:last-child {
.banner-subsection-content-padder {
padding-left: 80px;
}
}
}
}
//div between Search and Open Tasks
.vertical-row {
@media screen and (min-width: $medium-screen) {
display: inline-block;
height: 17rem;
width: 3px;
background: $color-white;
position: relative;
}
}
}
}
}
//Help Wanted styles between Banner and Our Mission (About) sections on homepage
.help-wanted {
h2 {
margin-top: -1rem;
margin-bottom: -2rem;
}
p {
font-size: 1.2em;
line-height: 1em;
max-width: 75rem;
margin: 2rem 2rem 3.5rem 3rem;
}
.buttons {
margin-top: -3rem;
}
//start here
//set to 599px
@media screen and (max-width: $medium-screen) {
display: none;
}
//save for changing mobile
@media screen and (min-width: $small-screen) {
h2 {
margin-top: -1rem;
margin-bottom: -2rem;
}
p {
font-size: 1.2em;
line-height: 1em;
max-width: 75rem;
margin: 2rem 2rem 3.5rem 3rem;
}
}
button {
margin-top: 2em;
}
}
.help-wanted-mobile {
@media screen and (min-width: $medium-screen) {
display: none;
}
h2 {
font-size: 1.5em;
margin-top: 2em;
margin-bottom: -0.5em;
}
p {
font-size: 1em;
line-height: 1.5em;
max-width: 75rem;
margin: 2rem 2rem 0.5rem 3rem;
}
.buttons {
//set to 600px
@media screen and (min-width: $medium-screen) {
display: none;
}
//set to 480px
//@media screen and (max-width: $small-screen) {
//margin-top: 5.5rem;
//margin-bottom: 5.5rem;
//}
}
button {
max-width: 170px;
width: 44%;
}
}
//Questions section
.questions {
p {
margin: 3rem auto 2rem;
max-width: 75rem;
font-size: 1.2em;
padding-top: 4em;
}
img {
max-width: 4%;
max-height: 4%;
}
a {
color: #23C0BA;
text-decoration: underline;
&:hover {
color: $brand-teal;
}
}
@media screen and (min-width: $medium-screen) {
display: none;
}
//set to 480px
@media screen and (max-width: $small-screen) {
display: none;
}
}
//Questions section for mobile
.questions-mobile {
p {
margin: 4rem 2.5rem -1.5rem;
max-width: 75rem;
font-size: .9em;
text-align: left;
}
img {
max-width: 5%;
max-height: 5%;
}
.second-line {
margin: 1.25rem -0.5rem 8.5rem 4.5rem;
}
a {
color: #23C0BA;
text-decoration: underline;
&:hover {
color: $brand-teal;
}
}
//set to 481px
@media screen and (min-width: $small-screen) {
display: none;
}
}
//aka Our Mission section of homepage
.about {
padding-top: 4rem;
header {
margin: 0 auto;
text-align: center;
h2 {
font-size: 1.75em;
margin: 0 auto;
max-width: 17em;
text-transform: uppercase;
@media screen and (min-width: $small-screen) {
font-size: 2em;
}
@media screen and (min-width: $medium-screen) {
font-size: 3em;
}
}
p {
font-size: 1em;
margin-top: 2rem;
@media screen and (min-width: $medium-screen) {
font-size: 1.5em;
}
}
}
}
.about-actions {
margin-top: 2em;
padding: 0;
@media screen and (min-width: $small-screen) {
font-size: 1.1em;
}
@media screen and (min-width: $medium-screen) {
margin-top: 4em;
}
h2 {
font-size: 1.3em;
margin-top: 0;
@media screen and (min-width: $small-screen) {
font-size: 2.5em;
}
}
li {
margin-bottom: 2rem;
padding-left: 3rem;
padding-right: 3rem;
position: relative;
i {
font-size: 1.2em;
}
}
p {
font-size: 0.95em;
@media screen and (min-width: $small-screen) {
font-size: 1.1em;
}
}
a {
text-decoration: none;
}
}
.about-action {
text-align: center;
@media screen and (min-width: $medium-screen) {
@include width-third();
}
> a > img {
padding: 1rem;
transition: 0.2s transform;
}
> a:focus,
> a:hover {
text-decoration: none;
> img {
transform: scale(1.1);
}
}
}
@keyframes zoomOutOnBackground {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1.0);
}
}
.featured-projects {
text-align: center;
#featured-projects-title {
background: white;
color: $featured-dark;
h2 {
color: $featured-dark;
margin-top: 0;
padding-bottom: 0;
}
}
h2 {
color: $color-white;
font-size: 1.75em;
margin-bottom: 2rem;
padding-top: 4rem;
padding-bottom: 2rem;
text-align: center;
text-transform: uppercase;
@media screen and (min-width: $small-screen) {
font-size: 2em;
}
@media screen and (min-width: $medium-screen) {
font-size: 3em;
}
}
}
.featured-project {
text-align: left;
position: relative;
.indented {
height: 45rem;
overflow: hidden;
position: relative;
@media screen and (max-width: 400.5px) {
height: 52rem;
}
img {
display: none;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
@media screen and (min-width: $small-screen) {
display: block;
}
}
.featured-project-info {
left: 0;
padding: 3rem 5rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
@media screen and (min-width: $small-screen) {
left: auto;
padding: 3rem 4rem;
width: 50%;
}
.fp-short-name {
font-size: 3rem;
font-weight: bold;
}
.fp-verbose-name {
font-size: 2rem;
font-weight: bold;
}
.fp-developed-by {
color: lightgray;
font-size: 1.5rem;
font-weight: bold;
}
.buttons {
text-align: center;
@media screen and (min-width: $small-screen) {
text-align: left;
}
span {
a {
text-decoration: none;
}
}
}
button {
font-size: 0.8em;
margin-bottom: 0;
margin-left: 1rem;
margin-right: 0;
margin-top: 0;
max-width: 170px;
width: 44%;
&:first-child {
margin-left: 0;
margin-right: 0.5rem;
}
@media screen and (min-width: $large-screen) {
font-size: 1em;
}
}
}
}
&:nth-of-type(odd) {
background: $featured-dark;
color: $color-white;
button, h3, h4, p {
color: $color-white;
}
> div {
text-align: left;
> div {
text-align: left;
}
}
}
&:nth-of-type(even) {
background: $featured-light;
color: $color-white;
> div {
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: 50%;
text-align: right;
> div {
text-align: left;
.featured-project-info {
.fp-short-name {
color: $color-gray-dark
}
.fp-verbose-name {
color: $color-gray-dark;
}
.fp-developed-by {
color: darkgray;
}
}
}
}
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.8em;
padding-bottom: 2rem;
padding-top: 2rem;
}
p {
padding-bottom: 1rem;
padding-top: 1rem;
}
button {
margin-left: 10px;
}
}
.press {
background-attachment: scroll;
background-image: url('./assets/img/american_flag_1920x1280_gradient.jpg');
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
// HACK: This is a hack to prevent ugliness on iOS
@media screen and (min-width: 768px) {
background-attachment: fixed;
}
h2 {
color: $color-white;
margin-bottom: 2rem;
text-align: center;
}
}
.press-container {
@include clearfix;
margin: 0 auto;
max-width: 43em;
}
.press-links {
margin-top: 2em;
text-align: center;
@media screen and (min-width: $medium-screen) {
margin-top: 0;
}
.press-logo {
max-height: 3em;
@media screen and (min-width: $small-screen) {
max-height: 4em;
}
}
li {
display: inline-block;
margin-bottom: 0.5em;
margin-left: 2rem;
&:first-of-type {
margin-left: 0;
}
}
}
.press-logo {
backface-visibility: visible;
transition: all 0.2s ease;
transform-style: preserve-3d;
transform: translate3d(0,0,0);
-webkit-perspective: 1000;
&:hover {
transform: translateY(-2px);
}
}
img.chat {
height: 30px;
vertical-align: middle;
}
#issue-banner-subsection-subtitle {
max-width: 100%;
width: 100%;
}
#issue-link {
color: $brand-teal;
&:hover {
text-decoration: none;
}
}