@mdn/fred 0.1.0 → 0.2.0

package/components/curriculum/module-list.css

@@ -177,6 +177,7 @@
           width: 100%;
           min-width: 15rem;
           max-width: 20rem;
+          height: 100%;
 
           padding: 0;
 
@@ -213,7 +214,7 @@
 
             padding: var(--spacing);
 
-            font-weight: var(--font-body-strong-weight);
+            font-weight: var(--font-weight-bold);
 
             background-color: var(--curriculum-bg-color-list-item-header);
 
@@ -240,16 +241,15 @@
           > section {
             display: flex;
 
+            flex-grow: 1;
             flex-direction: column;
 
             align-items: center;
             justify-content: space-between;
 
-            height: 11rem;
-
             padding: var(--spacing);
 
-            font-size: var(--type-smaller-font-size);
+            font-size: var(--font-size-normal);
 
             p {
               margin: 0;
@@ -258,7 +258,7 @@
             }
 
             p:last-child {
-              font-weight: 600;
+              font-weight: var(--font-weight-bold);
               color: var(--curriculum-color-topic);
             }
           }

package/components/curriculum/module.css

@@ -32,7 +32,7 @@
         margin: 0;
         margin-top: 0.5rem;
 
-        font-size: var(--type-smaller-font-size);
+        font-size: var(--font-size-normal);
 
         color: var(--curriculum-color-topic);
 
@@ -53,7 +53,7 @@
         margin: 0;
         margin-bottom: 0.25rem;
 
-        font-size: var(--type-smaller-font-size);
+        font-size: var(--font-size-normal);
 
         color: var(--curriculum-module-label-color);
 
@@ -84,7 +84,7 @@
             font-size: 0.5rem;
             font-weight: bold;
 
-            line-height: 1.7;
+            line-height: var(--font-line-content);
             vertical-align: super;
 
             color: var(--text-primary);

package/components/curriculum/shared.css

@@ -8,7 +8,7 @@
   .curriculum-sidebar,
   .toc,
   .curriculum-content {
-    padding-top: 3rem;
+    padding-top: 2rem;
     padding-bottom: 3rem;
   }
 
@@ -30,13 +30,13 @@
       margin-bottom: 2rem;
 
       font-size: var(--font-size-largest);
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
 
       line-height: 1.2;
     }
 
     h2 {
-      margin: 4rem 0 0.5rem;
+      margin: 2rem 0 0.5rem;
       font-size: var(--font-size-larger);
       font-weight: 500;
     }
@@ -53,12 +53,6 @@
     h4,
     h5,
     h6 {
-      a:link,
-      a:visited {
-        color: var(--text-primary);
-        text-decoration: none;
-      }
-
       a:hover,
       a:focus {
         text-decoration: underline;
@@ -67,37 +61,6 @@
       a:active {
         background-color: transparent;
       }
-
-      a[href^="#"]:not(.button) {
-        text-decoration: none;
-
-        &::before {
-          display: inline-block;
-          visibility: hidden;
-
-          width: 0.8em;
-
-          margin-left: -0.8em;
-
-          font-size: 0.7em;
-
-          line-height: 1;
-
-          color: var(--color-text-secondary);
-
-          text-decoration: none;
-
-          content: "#";
-        }
-
-        &:hover {
-          text-decoration: underline;
-
-          &::before {
-            visibility: visible;
-          }
-        }
-      }
     }
   }
 
@@ -115,11 +78,9 @@
 
   .curriculum-content {
     a:not(.button) {
-      color: var(--text-link);
-
       &:link,
       &:visited {
-        text-decoration: underline;
+        /* text-decoration: underline; */
 
         &.button {
           text-decoration: none;
@@ -128,11 +89,11 @@
 
       &:hover,
       &:focus {
-        text-decoration: none;
+        text-decoration: underline;
       }
 
       &:visited:not([href^="#"]) {
-        color: var(--text-visited);
+        color: var(--color-link-visited);
       }
     }
 
@@ -150,7 +111,7 @@
   &.curriculum-overview,
   &.curriculum-module {
     .curriculum-content {
-      > header > h1 {
+      > h1 {
         margin-bottom: 2rem;
 
         > span {
@@ -169,6 +130,12 @@
         margin-top: 2rem;
       }
 
+      code {
+        padding: 0.125rem 0.25rem;
+        background: var(--color-background-secondary);
+        border-radius: 0.25em;
+      }
+
       blockquote.curriculum-notes {
         padding: 1rem;
         margin: 1rem;
@@ -204,7 +171,7 @@
       p.curriculum-outcomes {
         display: flex;
         margin-bottom: 0.5rem;
-        font-weight: var(--font-body-strong-weight);
+        font-weight: var(--font-weight-bold);
 
         &::before {
           display: block;

package/components/curriculum/sidebar.css

@@ -1,342 +1,114 @@
-.curriculum-content-container .sidebar {
+.curriculum-content-container .left-sidebar {
   position: sticky;
   top: var(--sticky-header-height);
 
-  max-height: calc(100vh - var(--sticky-header-height));
+  padding-bottom: 3rem;
 
-  overflow-y: auto;
+  overflow-wrap: anywhere;
 
-  color: var(--text-secondary);
-
-  /* li > em {
-    display: inline-block;
-
-    padding: 0.25rem 0.5rem;
-
-    font-variation-settings: normal;
-    font-style: normal;
-    font-weight: 600;
-
-    background-color: var(--background-toc-active);
-    border-left: 2px solid var(--category-color);
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  } */
-
-  .backdrop {
-    display: none;
-  }
-
-  &-heading {
+  ol {
+    padding: 0;
     margin: 0;
-
-    font-size: var(--font-size-small);
-    font-weight: 400;
-
-    color: var(--text-primary);
-
-    letter-spacing: 1.5px;
+    list-style: none;
   }
 
-  /* highlight of current page in sidebar */
-  li > em {
-    display: inline-block;
-
-    padding: 0.25rem 0.5rem;
-
-    font-variation-settings: normal;
-    font-style: normal;
-    font-weight: 600;
-
-    hyphens: auto;
-
-    background-color: var(--background-toc-active);
-    border-left: 2px solid var(--category-color);
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
-
-  a {
-    display: inline-block;
-
-    padding: 0.25rem;
-
-    color: var(--text-secondary);
-
-    hyphens: auto;
+  details {
+    width: 100%;
 
-    text-decoration: none;
+    &[open] {
+      > summary {
+        margin-bottom: 0.5rem;
 
-    &:hover,
-    &:focus {
-      text-decoration: underline;
+        &::before {
+          transform: rotate(90deg);
+        }
+      }
     }
-  }
 
-  li.section {
-    display: flex;
-
-    margin-top: 1.5rem;
+    summary {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
 
-    font-size: var(--type-base-font-size-rem);
-    font-weight: var(--font-body-strong-weight);
+      &::before {
+        display: inline-block;
 
-    letter-spacing: 0.02rem;
+        flex-shrink: 0;
 
-    &.no-link {
-      padding: 0.25rem;
-    }
-  }
+        width: 1rem;
+        height: 1rem;
 
-  li:first-of-type strong {
-    margin-top: unset;
-  }
+        margin: 0.25rem;
 
-  ol {
-    font-size: var(--font-size-small);
+        content: "";
 
-    ol,
-    ul {
-      padding-left: 0.5rem;
-    }
+        background-color: currentcolor;
 
-    li {
-      .icon {
-        margin-right: 0.01em;
+        mask-image: url("../icon/chevron-right.svg");
+        mask-size: cover;
       }
 
-      &.no-bullet {
-        display: block;
-        font-weight: var(--font-body-strong-weight);
-        list-style-type: none;
-      }
-    }
-  }
-
-  .sidebar-actions {
-    position: sticky;
-    top: 0;
-    z-index: var(--z-index-main-header);
-
-    height: 0;
-
-    padding-bottom: 4rem;
-
-    ~ .sidebar-inner-nav {
-      margin-top: 0.5rem;
-    }
-
-    @media (--screen-small-and-narrower) {
-      position: unset;
-      top: unset;
-
-      height: unset;
-
-      padding-bottom: unset;
-      margin-top: unset;
+      &:hover {
+        background-color: var(--color-background-secondary);
 
-      ~ .sidebar-inner-nav {
-        margin-top: unset;
+        &:has(a:hover) {
+          /* Don't highlight, as link click doesn't toggle. */
+          background-color: unset;
+        }
       }
     }
-  }
-
-  /* This is for sidebars where there is no sub-heading
-   * for example: https://developer-mozilla.org/en-US/docs/Web/HTML/Element/progress
-   */
-  .sidebar-heading ~ ol,
-  .sidebar-heading ~ div > ol {
-    margin-top: 1rem;
-  }
-
-  summary,
-  li {
-    margin-bottom: 0.5rem;
-  }
-
-  summary {
-    font-size: var(--font-size-small);
-    cursor: pointer;
-  }
-
-  code {
-    padding: 0.125rem;
-
-    font-family: var(--font-code);
-    font-size: var(--font-size-small);
-
-    line-height: 1.2;
-
-    word-wrap: break-word;
-    white-space: normal;
-
-    background-color: initial;
-    border-radius: var(--elem-radius);
-  }
-
-  details {
-    margin: 0.75rem 0;
 
     ol {
-      padding-left: 0.75rem;
+      padding-left: 1.5rem;
     }
   }
 
-  .icon {
-    align-self: center;
-
-    width: 14px;
-    height: 14px;
-
-    margin-right: -0.25rem;
-
-    background-size: 14px;
-
-    mask-size: 14px;
-  }
-
-  /* icons in sidebars */
-  .icon-experimental,
-  .icon-nonstandard {
-    background-color: var(--icon-information);
-  }
-
-  .icon-deprecated {
-    background-color: var(--icon-critical);
-  }
-
-  /* apply drawer styles only to the sizes that need them. */
-  @media (--screen-small-and-narrower) {
-    position: fixed;
-    top: var(--offset);
-    right: 0;
-    left: 0;
-
-    height: 100vh;
-    max-height: 100vh;
-
-    transform: translateX(-100%);
-
-    .sidebar-inner {
-      position: relative;
-
-      display: grid;
-
-      width: 80vw;
-      max-width: 20rem;
-      height: var(--max-height);
-      max-height: var(--max-height);
-
-      padding: 1rem;
-
-      overflow: hidden; /* animations look janky if scrollbars are present */
-      overflow: auto;
-
-      background: var(--background-primary);
-      border-right: 1px solid var(--border-primary);
-
-      transform: translateX(-100%);
-
-      transition: 0.2s linear transform;
-
-      will-change: transform;
-
-      .sidebar-inner-nav {
-        display: contents;
-        padding-bottom: 3rem;
-        mask-image: linear-gradient(
-          to bottom,
-          rgb(0 0 0) 0% calc(100% - 3rem),
-          rgb(0 0 0 / 0%) 100%
-        );
-      }
-
-      /* screen height place limit */
-      @media (height >= 44rem) {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-
-        .sidebar-inner-nav {
-          display: block;
-          overflow: auto;
-        }
-      }
-
-      .place {
-        grid-row: 2/3;
-
-        align-self: center;
-        justify-self: center;
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
 
-        margin-bottom: 0;
-      }
+    &:not(:last-child) {
+      margin-bottom: 0.5rem;
     }
 
-    .backdrop {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-
-      display: flex;
-
-      width: 100%;
-
-      cursor: default;
-
-      background: rgb(0 0 0 / 30%);
-      border-radius: 0;
-
-      opacity: 0;
-
-      transition: opacity 0.2s linear;
-
-      will-change: opacity;
-    }
+    &.section {
+      font-weight: var(--font-weight-bold);
 
-    &.is-animating {
-      transform: translateX(0);
+      &:not(:first-child) {
+        margin-top: 1em;
+      }
     }
+  }
 
-    &.is-expanded {
-      transform: translateX(0);
-
-      /* no transition on this one, just show it. */
+  a,
+  span:not(.highlight-container) {
+    display: inline-flex;
+    padding-block: 0.25rem;
+  }
 
-      .sidebar-inner {
-        transform: translateX(0);
-      }
+  a {
+    color: var(--color-text-primary);
 
-      .backdrop {
-        opacity: 1;
-      }
+    &:hover {
+      color: var(--color-area-link);
     }
-  }
 
-  @media (--screen-small-and-narrower) {
-    .place {
-      display: none;
+    &:not(:hover) {
+      text-decoration: none;
     }
   }
 
-  @media (--screen-small-and-narrower) {
-    position: relative;
-    display: flex;
-  }
+  em {
+    display: inline-flex;
 
-  @media (--screen-medium-and-narrower), (height >= 44rem) {
-    display: block;
-    overflow: auto;
-  }
+    align-items: center;
 
-  @media (--screen-xlarge-and-narrower) {
-    position: sticky;
-    top: var(--sticky-header-height);
+    padding-inline: 0.5rem;
 
-    max-height: calc(100vh - var(--sticky-header-height));
+    font-style: normal;
 
-    overflow-y: auto;
+    background-color: var(--background-toc-active);
+    border-left: 2px solid var(--category-color);
   }
 }

package/components/curriculum/toc.css

@@ -1,31 +1,21 @@
 .curriculum-content-container {
-  .toc {
-    position: sticky;
-    top: var(--sticky-header-height);
-
-    max-height: calc(100vh - var(--sticky-header-height));
-
-    overflow-y: auto;
-
+  .curriculum-layout__toc {
     .document-toc {
       padding: 0;
       margin-bottom: 2rem;
 
       .document-toc-heading {
-        margin: 0 0 1rem;
+        padding: 0.75em 0;
 
-        font-size: var(--font-size-normal);
-        font-weight: 400;
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-normal);
 
         line-height: var(--font-line-content);
-
-        letter-spacing: 1.5px;
       }
 
       .document-toc-list {
-        --toc-header-font-size: var(--font-size-small);
         padding-left: 0;
-        font-size: var(--font-size-small);
+        font-size: var(--font-size-normal);
         list-style: none;
 
         li {
@@ -36,20 +26,16 @@
       .document-toc-link {
         display: inline-block;
 
-        padding: 0.5rem 1rem;
+        padding: 0.25rem 0.5rem;
 
-        color: var(--color-text-secondary);
+        color: var(--color-text-primary);
 
         text-decoration: none;
 
         border-left: 2px solid var(--color-border-primary);
 
-        &:hover {
-          color: var(--text-link);
-        }
-
         &[aria-current]:not([aria-current=""], [aria-current="false"]) {
-          font-weight: 600;
+          font-weight: var(--font-weight-bold);
 
           color: var(--text-primary);
 
@@ -68,7 +54,7 @@
         padding: 0;
         margin: 0;
 
-        font-size: var(--toc-header-font-size, var(--font-size-large));
+        font-size: var(--font-size-normal);
         font-weight: normal;
       }