nathan/nathanjchapman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update mobile styles

Browse Source
This commit is contained in:
Nathan Chapman 2022-01-11 16:50:38 -07:00
parent d3e71d3cc9
commit fa54520975
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
styles/main.css
View File

@ -17,7 +17,7 @@
/* Screen sizes */ /* Screen sizes */
--large-screen: 1440px; --large-screen: 1440px;
--normal-screen: 1024px; --normal-screen: 1200px;
--tablet-screen: 900px; --tablet-screen: 900px;
--phone-screen: 600px; --phone-screen: 600px;
--small-screen: 300px; --small-screen: 300px;
@ -248,6 +248,8 @@ footer section,
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
gap: 1rem; gap: 1rem;
list-style: none;
} }
.footer__nav ul li:first-child { .footer__nav ul li:first-child {
@ -359,7 +361,7 @@ article section p {
grid-column: 1/8; grid-column: 1/8;
grid-row: 1/13; grid-row: 1/13;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__a .project__figure { .project__a .project__figure {
grid-column: 1/10; grid-column: 1/10;
} }
@ -375,10 +377,10 @@ article section p {
grid-column: 11/13; grid-column: 11/13;
grid-row: 1/3; grid-row: 1/3;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__a .project__description { .project__a .project__description {
grid-column: 10/13; grid-column: 10/13;
grid-row: 1/5;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -404,7 +406,7 @@ article section p {
grid-row: 4; grid-row: 4;
align-self: end; align-self: end;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__b .project__description { .project__b .project__description {
grid-column: 1/4; grid-column: 1/4;
} }
@ -421,7 +423,7 @@ article section p {
grid-column: 5/13; grid-column: 5/13;
grid-row: 1/13; grid-row: 1/13;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__c .project__figure { .project__c .project__figure {
grid-column: 4/13; grid-column: 4/13;
} }
@ -440,9 +442,10 @@ article section p {
grid-row: 11/13; grid-row: 11/13;
align-self: end; align-self: end;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__c .project__description { .project__c .project__description {
grid-column: 1/4; grid-column: 1/4;
grid-row: 8/13;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -466,7 +469,7 @@ article section p {
grid-row: 1/13; grid-row: 1/13;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__d .project__figure_a { .project__d .project__figure_a {
} }
.project__d .project__figure_b { .project__d .project__figure_b {
@ -497,7 +500,7 @@ article section p {
grid-row: 10/13; grid-row: 10/13;
align-self: end; align-self: end;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__d .project__description_a { .project__d .project__description_a {
grid-column: 9/13; grid-column: 9/13;
} }
@ -528,7 +531,7 @@ article section p {
grid-row: 7/13; grid-row: 7/13;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__e .project__figure_a { .project__e .project__figure_a {
grid-column: 1/10; grid-column: 1/10;
} }
@ -558,12 +561,14 @@ article section p {
grid-row: 12; grid-row: 12;
align-self: end; align-self: end;
} }
@media (max-width: 900px) { @media (max-width: 1200px) {
.project__e .project__description_a { .project__e .project__description_a {
grid-column: 10/13; grid-column: 10/13;
grid-row: 9/11;
} }
.project__e .project__description_b { .project__e .project__description_b {
grid-column: 10/13; grid-column: 10/13;
grid-row: 11/13;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {