Improved accessibility of newsletter signup

chnm · Jun 10, 2024 · 9822ddc · 9822ddc
1 parent 6b3d6ef
commit 9822ddc
Showing 1 changed file with 76 additions and 68 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -3,118 +3,126 @@
 @tailwind utilities;
 
 @font-face {
-    font-family: 'Atkinson';
-    src: url(/fonts/Atkinson-Hyperlegible-Regular-102a.woff2);
-    font-weight: 400;
+  font-family: 'Atkinson';
+  src: url(/fonts/Atkinson-Hyperlegible-Regular-102a.woff2);
+  font-weight: 400;
 }
 
 @font-face {
-    font-family: 'Atkinson';
-    src: url(/fonts/Atkinson-Hyperlegible-Bold-102a.woff2);
-    font-weight: 700;
+  font-family: 'Atkinson';
+  src: url(/fonts/Atkinson-Hyperlegible-Bold-102a.woff2);
+  font-weight: 700;
 }
 
 @font-face {
-    font-family: 'Atkinson';
-    src: url(/fonts/Atkinson-Hyperlegible-Italic-102a.woff2);
-    font-weight: 400;
-    font-style: italic;
+  font-family: 'Atkinson';
+  src: url(/fonts/Atkinson-Hyperlegible-Italic-102a.woff2);
+  font-weight: 400;
+  font-style: italic;
 }
 
 :root {
-    --three-dimensions-card-left-side-width: 1rem;
-    --font-sans: 'Atkinson', sans-serif;
-    --gmu-green: #006633;
-    --gmu-yellow: #FFCC33;
-    --ucla-blue: #2774AE;
-    --ucla-yellow: #FFD100;
+  --three-dimensions-card-left-side-width: 1rem;
+  --font-sans: 'Atkinson', sans-serif;
+  --gmu-green: #006633;
+  --gmu-yellow: #FFCC33;
+  --ucla-blue: #2774AE;
+  --ucla-yellow: #FFD100;
 }
 
 body {
-    font-family: var(--font-sans);
-    margin: 0 auto;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    line-height: 1.6;
-    font-size: 1.2rem;
+  font-family: var(--font-sans);
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  line-height: 1.6;
+  font-size: 1.2rem;
 }
 
 /* Layout */
 .pad2y {
-    padding-top: 20px;
-    padding-bottom: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .limiter {
-    max-width: 960px;
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-left: auto;
-    margin-right: auto;
+  max-width: 960px;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .container-30 {
-    width: 30%;
-    margin: 0 auto;
+  width: 30%;
+  margin: 0 auto;
 }
 
 /* Typography */
 h2 {
-    color: var(--gmu-green);
+  color: var(--gmu-green);
 }
 
 /* Menu */
-a.nav-element, a:visited.nav-element {
-    color: var(--gmu-green);
-    text-decoration: none;
+a.nav-element,
+a:visited.nav-element {
+  color: var(--gmu-green);
+  text-decoration: none;
 }
 
 a.nav-element:hover {
-    color: #000; 
-    text-decoration: underline;
+  color: #000;
+  text-decoration: underline;
 }
 
 /* Theming */
 .three-dimensions-card {
-    position: relative;
-    border-top: 1px solid var(--gmu-yellow);
-    border-right: 1px solid var(--gmu-yellow);
+  position: relative;
+  border-top: 1px solid var(--gmu-yellow);
+  border-right: 1px solid var(--gmu-yellow);
 }
 
 /* The left side */
 .three-dimensions-card::before {
-    background: #FFCC33;
-    content: '';
-
-    /* Position */
-    top: var(--three-dimensions-card-left-side-width);
-    left: 0px;
-    position: absolute;
-    transform: translate(-100%, 0) skewY(-45deg);
-    transform-origin: left top;
-
-    /* Size */
-    height: 100%;
-    width: var(--three-dimensions-card-left-side-width);
+  background: #FFCC33;
+  content: '';
+
+  /* Position */
+  top: var(--three-dimensions-card-left-side-width);
+  left: 0px;
+  position: absolute;
+  transform: translate(-100%, 0) skewY(-45deg);
+  transform-origin: left top;
+
+  /* Size */
+  height: 100%;
+  width: var(--three-dimensions-card-left-side-width);
 }
 
 /* The bottom side */
 .three-dimensions-card::after {
-    background: #FFCC33;
-    content: '';
-
-    /* Position */
-    bottom: 0px;
-    left: 0px;
-    position: absolute;
-    transform: translate(0, 100%) skewX(-45deg);
-    transform-origin: left top;
-
-    /* Size */
-    height: var(--three-dimensions-card-left-side-width);
-    width: 100%;
+  background: #FFCC33;
+  content: '';
+
+  /* Position */
+  bottom: 0px;
+  left: 0px;
+  position: absolute;
+  transform: translate(0, 100%) skewX(-45deg);
+  transform-origin: left top;
+
+  /* Size */
+  height: var(--three-dimensions-card-left-side-width);
+  width: 100%;
 }
 
 div.three-dimensions-card h2 {
-    margin-top: .5em;
-}
+  margin-top: .5em;
+}
+
+/* Improved accessibility of newsletter sign-up
+ * http://web-accessibility.carnegiemuseums.org/design/color/
+ * */
+#mc_embed_signup .asterisk {
+  color: #cd2026;
+}