sartography
/
sartography-website
mirror of https://github.com/sartography/sartography-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes responsive design issues

This commit is contained in:
Aaron Louie 2019-10-21 22:56:43 -04:00
parent f6b68049df
commit d79d12bc4c
5 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/footer/footer.component.html
View File

@ -7,7 +7,7 @@
<span class="footer-logo" inlineSVG="/assets/logo/Sartography-Logo-Horizontal-White.svg"></span> <span class="footer-logo" inlineSVG="/assets/logo/Sartography-Logo-Horizontal-White.svg"></span>
</div> </div>
<div fxFlex="50%" [@scrollAnimation]="state"> <div [@scrollAnimation]="state">
<address class="mat-body-1"> <address class="mat-body-1">
Sartography<br> Sartography<br>
c/o Staunton Makerspace<br> c/o Staunton Makerspace<br>
@ -19,5 +19,5 @@
</div> </div>
<p>Copyright &copy; {{today | date:'yyyy'}} Sartography LLC. All Rights Reserved.</p> <p gdColumn="span 2" class="copyright">Copyright &copy; {{today | date:'yyyy'}} Sartography LLC. All Rights Reserved.</p>
</footer> </footer>

7
src/app/footer/footer.component.scss
View File

@ -2,6 +2,7 @@
footer { footer {
background-color: $brand-gray; background-color: $brand-gray;
color: white;
::ng-deep .footer-logo svg { ::ng-deep .footer-logo svg {
max-width: 100%; max-width: 100%;
@ -9,8 +10,12 @@ footer {
} }
address { address {
color: white;
font-style: normal; font-style: normal;
a { color: white; } a { color: white; }
} }
.copyright {
text-align: center;
color: $brand-gray-light-1;
}
} }

8
src/app/team/team.component.scss
View File

@ -1,7 +1,7 @@
h1 { h1, .team {
margin: 80px;
}
.team {
padding: 80px; padding: 80px;
max-width: 1280px; 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%; }
} }

1
src/app/welcome/welcome.component.html
View File

@ -24,3 +24,4 @@
</div> </div>
<div class="bg-welcome" [@scrollAnimation]="state" fxFlex.gt-md="50%"></div> <div class="bg-welcome" [@scrollAnimation]="state" fxFlex.gt-md="50%"></div>
</div> </div>
<div class="bg-welcome-xs" [@scrollAnimation]="state" fxShow fxHide.gt-md></div>

26
src/app/welcome/welcome.component.scss
View File

@ -1,17 +1,16 @@
.bg-welcome { .bg-welcome {
z-index: 0; z-index: 0;
height: 100vh;
width: 100%; width: 100%;
background: linear-gradient( background-color: white;
to right, background-image: url("/assets/images/welcome.jpg");
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 1) 10%,
rgba(255, 255, 255, 0) 50%
),
url("/assets/images/welcome.jpg");
background-size: cover; background-size: cover;
background-position: center right; 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 { .color-tile {
@ -19,3 +18,12 @@
width: 72px; width: 72px;
margin: 10px; 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;
}