Fixes responsive design issues
This commit is contained in:
parent
f6b68049df
commit
d79d12bc4c
|
@ -7,7 +7,7 @@
|
|||
<span class="footer-logo" inlineSVG="/assets/logo/Sartography-Logo-Horizontal-White.svg"></span>
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" [@scrollAnimation]="state">
|
||||
<div [@scrollAnimation]="state">
|
||||
<address class="mat-body-1">
|
||||
Sartography<br>
|
||||
c/o Staunton Makerspace<br>
|
||||
|
@ -19,5 +19,5 @@
|
|||
</div>
|
||||
|
||||
|
||||
<p>Copyright © {{today | date:'yyyy'}} Sartography LLC. All Rights Reserved.</p>
|
||||
<p gdColumn="span 2" class="copyright">Copyright © {{today | date:'yyyy'}} Sartography LLC. All Rights Reserved.</p>
|
||||
</footer>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
footer {
|
||||
background-color: $brand-gray;
|
||||
color: white;
|
||||
|
||||
::ng-deep .footer-logo svg {
|
||||
max-width: 100%;
|
||||
|
@ -9,8 +10,12 @@ footer {
|
|||
}
|
||||
|
||||
address {
|
||||
color: white;
|
||||
font-style: normal;
|
||||
a { color: white; }
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
color: $brand-gray-light-1;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
h1 {
|
||||
margin: 80px;
|
||||
}
|
||||
.team {
|
||||
h1, .team {
|
||||
padding: 80px;
|
||||
max-width: 1280px;
|
||||
@media screen and (max-width: 599px) { padding-left: 20px; padding-right: 20px; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding-left: 10%; padding-right: 10%; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { padding-left: 20%; padding-right: 20%; }
|
||||
}
|
||||
|
|
|
@ -24,3 +24,4 @@
|
|||
</div>
|
||||
<div class="bg-welcome" [@scrollAnimation]="state" fxFlex.gt-md="50%"></div>
|
||||
</div>
|
||||
<div class="bg-welcome-xs" [@scrollAnimation]="state" fxShow fxHide.gt-md></div>
|
||||
|
|
|
@ -1,17 +1,16 @@
|
|||
.bg-welcome {
|
||||
z-index: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 1) 10%,
|
||||
rgba(255, 255, 255, 0) 50%
|
||||
),
|
||||
url("/assets/images/welcome.jpg");
|
||||
background-color: white;
|
||||
background-image: url("/assets/images/welcome.jpg");
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
border-left: white 2px solid;
|
||||
|
||||
@media screen and (max-width: 599px) { background-image: none; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { background-image: none; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { background-image: none; }
|
||||
@media screen and (min-width: 1280px) and (max-width: 1919px) { height: 100vh; }
|
||||
@media screen and (min-width: 1920px) and (max-width: 5000px) { height: 100vh; }
|
||||
}
|
||||
|
||||
.color-tile {
|
||||
|
@ -19,3 +18,12 @@
|
|||
width: 72px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.bg-welcome-xs {
|
||||
background-image: url("/assets/images/welcome.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 75% 75%;
|
||||
min-height: 75vh;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue