From ac3b1d77acd911c139fce173790b0780aa1cdc5d Mon Sep 17 00:00:00 2001 From: aleenaloves Date: Thu, 2 Mar 2023 16:04:01 -0600 Subject: [PATCH 1/4] fixed tiles. todo: fix theme --- .../wai-aria-practices/homepage.css | 18 ++++++------ content-assets/wai-aria-practices/styles.css | 29 ++++++++++++------- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/content-assets/wai-aria-practices/homepage.css b/content-assets/wai-aria-practices/homepage.css index e847f4089..fb5a88b31 100644 --- 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 index a64b8a96f..77852a8f7 100644 --- a/content-assets/wai-aria-practices/styles.css +++ b/content-assets/wai-aria-practices/styles.css @@ -2,7 +2,7 @@ .page-practices .standalone-resource__main, .default-grid.with-gap.leftcol .standalone-resource__prevnext, body:not(.has-sidebar) .leftcol .standalone-resource__main { - grid-column: 2/10; + grid-column: 2/10 !important; } @@ -38,7 +38,7 @@ 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 +91,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 +145,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 +179,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 +517,7 @@ footer + .info { margin-bottom: 10px; } -@media (max-width: 767px) { +@media (max-width: 47.5em) { #ex1 .page .body { display: block; } @@ -786,13 +795,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 +815,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; From 8bb66fa1fc2f75a2427cdc039f5390c7ceda9644 Mon Sep 17 00:00:00 2001 From: aleenaloves Date: Mon, 6 Mar 2023 09:55:47 -0600 Subject: [PATCH 2/4] fixed(?) navbar --- content-assets/wai-aria-practices/styles.css | 22 +++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css index 77852a8f7..c976df855 100644 --- a/content-assets/wai-aria-practices/styles.css +++ b/content-assets/wai-aria-practices/styles.css @@ -830,4 +830,24 @@ body.page-about main { .read-this-first .text { margin-right: 2em; } -} \ No newline at end of file +} + + +/* hack for fixing navbar on pages, has to stay at the end */ + + div.default-grid.with-gap.leftcol { + display: grid !important; + } + + nav.box.nav-hack.sidebar.standalone-resource__sidebar { + margin-left: 32px; + } + + @media screen and (max-width: 35em) { + div.default-grid.with-gap.leftcol { + display: block !important; + } + nav.box.nav-hack.sidebar.standalone-resource__sidebar { + margin-left: 0px; + } + } \ No newline at end of file From 722f74a6923b03a6b2a122e61f4e16486484d545 Mon Sep 17 00:00:00 2001 From: aleenaloves Date: Mon, 6 Mar 2023 09:58:08 -0600 Subject: [PATCH 3/4] navbar issue was already fixed by change from px --> em --- content-assets/wai-aria-practices/styles.css | 23 ++------------------ 1 file changed, 2 insertions(+), 21 deletions(-) diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css index c976df855..df2a1340b 100644 --- a/content-assets/wai-aria-practices/styles.css +++ b/content-assets/wai-aria-practices/styles.css @@ -38,6 +38,7 @@ a.skip-main:focus, a.skip-main:active { .standalone-resource__sidebar { margin-bottom: 24px; } + @media (min-width: 60em) { .standalone-resource__sidebar { position: sticky; @@ -830,24 +831,4 @@ body.page-about main { .read-this-first .text { margin-right: 2em; } -} - - -/* hack for fixing navbar on pages, has to stay at the end */ - - div.default-grid.with-gap.leftcol { - display: grid !important; - } - - nav.box.nav-hack.sidebar.standalone-resource__sidebar { - margin-left: 32px; - } - - @media screen and (max-width: 35em) { - div.default-grid.with-gap.leftcol { - display: block !important; - } - nav.box.nav-hack.sidebar.standalone-resource__sidebar { - margin-left: 0px; - } - } \ No newline at end of file +} \ No newline at end of file From a37ac09398bfc61678f605cf9957ff4651b31ad7 Mon Sep 17 00:00:00 2001 From: aleenaloves Date: Mon, 6 Mar 2023 10:27:44 -0600 Subject: [PATCH 4/4] removing unneccesary changes --- content-assets/wai-aria-practices/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css index df2a1340b..71dafb494 100644 --- a/content-assets/wai-aria-practices/styles.css +++ b/content-assets/wai-aria-practices/styles.css @@ -2,7 +2,7 @@ .page-practices .standalone-resource__main, .default-grid.with-gap.leftcol .standalone-resource__prevnext, body:not(.has-sidebar) .leftcol .standalone-resource__main { - grid-column: 2/10 !important; + grid-column: 2/10; }