Merge pull request #204 from aleenaloves/issue-2606-magnification-fixes

Content Magnification Fixes [resolves aria-practices issue 2606]
w3c · Mar 9, 2023 · f42fd7a · f42fd7a
2 parents 4b01a41 + a37ac09
commit f42fd7a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/content-assets/wai-aria-practices/homepage.css b/content-assets/wai-aria-practices/homepage.css
@@ -8,7 +8,7 @@ body {
   --gutter: 40px;
   --centered-max-width: 700px;
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   body {
     --gutter: 20px;
   }
@@ -103,7 +103,7 @@ h1 {
   bottom: -40px;
   right: 30%;
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   h1 {
     font-size: 24px;
     margin-top: 10px;
@@ -202,7 +202,7 @@ h2 + h3 + p {
   color: #215a9c;
 
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   .detail-3 {
     left: 30%;
   }
@@ -216,7 +216,7 @@ h2 + h3 + p {
     font-size: 26px;
   }
 }
-@media (max-width: 1100px) {
+@media (max-width: 70em) {
   .resource-detail-4 {
     left: -40px;
     bottom: -120px;
@@ -245,7 +245,7 @@ h2 + h3 + p {
 .resource-item:last-child {
   margin-bottom: 60px;
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   .resource-item {
     grid-template-columns: 1fr;
   }
@@ -310,18 +310,18 @@ h2 + h3 + p {
 .collaboration-item a:hover {
   text-decoration: underline;
 }
-@media (max-width: 1000px) {
+@media (max-width: 70em) {
   .detail-5 {
     right: 32px;
     top: 19px;
   }
 }
-@media (max-width: 1050px) {
+@media (max-width: 70em) {
   .work-items {
     grid-template-columns: 1fr 1fr;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   .work-grid-pattern {
     height: 110px;
     bottom: -80px;
@@ -423,7 +423,7 @@ h2 + h3 + p {
 .button-backtotop {
   z-index: 11;
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   .collaboration-items {
     grid-template-columns: 1fr;
   }

diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
@@ -38,7 +38,8 @@ a.skip-main:focus, a.skip-main:active {
 .standalone-resource__sidebar {
   margin-bottom: 24px;
 }
-@media (min-width: 960px) {
+
+@media (min-width: 60em) {
   .standalone-resource__sidebar {
       position: sticky;
       top: 16px;
@@ -91,13 +92,13 @@ ul.tiles {
   row-gap: 50px;
   padding: 0;
 }
-@media screen and (min-width: 800px) {
+@media screen and (min-width: 60em) {
   ul.tiles {
     grid-template-columns: 49% 49%;
     column-gap: 2%;
   }
 }
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 70em) {
   ul.tiles {
     grid-template-columns: 32% 32% 32%;
     column-gap: 2%;
@@ -145,6 +146,15 @@ li.tile img {
   margin-right: 1em;
 }
 
+@media screen and (max-width: 23em) {
+  li.tile h2.tile-name {
+    flex-direction: column;
+  }
+  li.tile h2.tile-name span {
+    margin-top: 0.5em;
+  }
+}
+
 li.tile .tile-introduction {
   float: left;
   border-top: 1px solid var(--line-grey);
@@ -170,7 +180,7 @@ li.tile .tile-introduction {
 .sidebar-left {
   min-width: 0;
 }
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   .sidebar-container {
     display: block;
   }
@@ -508,7 +518,7 @@ footer + .info {
   margin-bottom: 10px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 47.5em) {
   #ex1 .page .body {
     display: block;
   }
@@ -786,13 +796,13 @@ body.page-about main {
   width: 50%;
 }
 
-@media screen and (min-width: 400px) {
+@media screen and (min-width: 23em) {
   .read-this-first img {
     width: 178px;
   }
 }
 
-@media screen and (min-width: 550px) { 
+@media screen and (min-width: 35em) { 
   .read-this-first {
     overflow: visible;
   }
@@ -806,14 +816,14 @@ body.page-about main {
   }
 }
 
-@media screen and (min-width: 610px) { 
+@media screen and (min-width: 35em) { 
   .read-this-first {
     margin-top: 3em;
   }
 
 }
 
-@media screen and (min-width: 945px) { 
+@media screen and (min-width: 60em) { 
   .read-this-first {
     margin-top: 4em;
     padding: 1em;