@amsterdam/design-system-css 0.1.7 → 0.1.9

package/src/top-task-link/top-task-link.scss

@@ -26,7 +26,7 @@
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
   line-height: var(--amsterdam-top-task-link-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-label-wide-font-size);
   }
 
@@ -47,7 +47,7 @@
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
   line-height: var(--amsterdam-top-task-link-description-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-description-wide-font-size);
   }
 

package/src/unordered-list/unordered-list.scss

@@ -31,7 +31,7 @@
   line-height: var(--amsterdam-unordered-list-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-unordered-list-wide-font-size);
   }
 

package/utils/breakpoint.scss

@@ -4,7 +4,18 @@
  */
 
 /*
-  The breakpoint is 854px / 16 = 53.375rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+ * CSS Custom properties cannot be used inside media queries.
+ * We to resort to Sass variables for our breakpoint values.
+ */
+
+/**
+ * The breakpoint for typography is 854px = 53.375rems.
+ * @deprecated To be replaced with the grid breakpoints.
 */
-$amsterdam-breakpoint: 53.375rem;
+$amsterdam-breakpoint-typography: 53.375rem;
+
+/** The breakpoint at which medium screens start. */
+$amsterdam-breakpoint-medium: 36rem;
+
+/** The breakpoint at which wide screens start. */
+$amsterdam-breakpoint-wide: 68rem;

package/dist/footer/footer.css

@@ -1 +0,0 @@
-.amsterdam-footer__top{background-color:var(--amsterdam-footer-top-background-color);padding-block:2.5rem;padding-inline:2rem}@media screen and (width > 53.375rem){.amsterdam-footer__top{grid-template-columns:repeat(var(--amsterdam-page-grid-column-count-wide), 1fr)}}.amsterdam-footer__column{display:flex;flex-direction:column;gap:2.5rem}.amsterdam-footer__bottom{padding-block:.5rem;padding-inline:2rem}/*# sourceMappingURL=footer.css.map */

package/dist/footer/footer.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/footer/footer.scss"],"names":[],"mappings":"AAOA,uBACE,8DACA,qBACA,oBAGF,sCACE,uBACE,iFAIJ,0BACE,aACA,sBACA,WAGF,0BACE,oBACA","file":"footer.css"}

package/dist/grid/page-grid.css

@@ -1 +0,0 @@
-.amsterdam-page-grid{column-gap:var(--amsterdam-page-grid-column-gap);display:grid;grid-template-columns:repeat(var(--amsterdam-page-grid-column-count-narrow), 1fr);max-width:var(--amsterdam-page-grid-max-width)}@media screen and (width > 53.375rem){.amsterdam-page-grid{grid-template-columns:repeat(var(--amsterdam-page-grid-column-count-wide), 1fr)}}/*# sourceMappingURL=page-grid.css.map */

package/dist/grid/page-grid.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/grid/page-grid.scss"],"names":[],"mappings":"AAOA,qBACE,iDACA,aACA,kFACA,+CAGF,sCACE,qBACE","file":"page-grid.css"}

package/src/footer/footer.scss

@@ -1,29 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-.amsterdam-footer__top {
-  background-color: var(--amsterdam-footer-top-background-color);
-  padding-block: 2.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
-}
-
-@media screen and (width > $amsterdam-breakpoint) {
-  .amsterdam-footer__top {
-    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
-  }
-}
-
-.amsterdam-footer__column {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-}
-
-.amsterdam-footer__bottom {
-  padding-block: 0.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
-}

package/src/grid/README.md

@@ -1,11 +0,0 @@
-# Page grid
-
-Onder alle pagina’s en schermen ligt hetzelfde grid. Het grid is responsive, dus de precieze breedte van een kolom is afhankelijk van de schermbreedte.
-
-De maximale breedte van het grid is 1440 pixels. In een later stadium bieden we een grid van 1920 aan.
-
-Op schermen tot 854 pixels breed bestaat het grid uit 4 kolommen, op bredere schermen worden dat er 12. Het grid staat horizontaal gecentreerd op de pagina.
-
-De witruimte tussen de kolommen is ook flexibel: die groeit lineair van 8 pixels bij een breedte van 320 naar 24 pixels bij een breedte van 1440.
-
-Pagina-elementen worden op het grid geplaatst en beslaan een bepaald aantal kolommen.

package/src/grid/page-grid.scss

@@ -1,19 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-.amsterdam-page-grid {
-  column-gap: var(--amsterdam-page-grid-column-gap);
-  display: grid;
-  grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-narrow), 1fr);
-  max-width: var(--amsterdam-page-grid-max-width);
-}
-
-@media screen and (width > $amsterdam-breakpoint) {
-  .amsterdam-page-grid {
-    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
-  }
-}