Squash WCUS customizations

.gitignore

@@ -28,4 +28,7 @@ infection.json
 docker-compose.yml
 Homestead.yaml
 
+# WCUS Additions
+/web/.well-known
+templates copy/
 resources/config/config_production.yml

config/docker.yml.dist

@@ -46,7 +46,11 @@ talk:
     framework: Framework
     ibmi: IBMi
     javascript: JavaScript
-    personal: Personal Skills
+    business: Business
+    mentalhealth: Mental Health
+    bestpractices: Best Practices
+    contributing: Contributing
+    accessibility: Accessibility
     security: Security
     testing: Testing
     uiux: UI/UX

resources/assets/sass/abstracts/variables.scss

@@ -0,0 +1,25 @@
+/**
+ * Breakpoint variables
+ */
+$phone-only: "screen and (max-width: 599px)";
+$tablet-portrait-down: "screen and (max-width: 781px)";
+$tablet-portrait-up: "screen and (min-width: 782px)";
+$tablet-landscape-down: "screen and (max-width: 899px)";
+$tablet-landscape-up: "screen and (min-width: 900px)";
+$desktop-up: "screen and (min-width: 1200px)";
+
+/**
+ * Color Variables
+ */
+$textmain: #2f2f2f;
+$white: #ffffff;
+$off-white: #FFFFFA;
+$cardinal: #BD2B2E;
+$blue: #003B63;
+$bright-blue: #003988;
+$black: #303030;
+
+$light-brown: #9E8B7E;
+
+$header: 'Nunito', sans-serif;
+$body: 'Nunito Sans', sans-serif;

resources/assets/sass/app.scss

@@ -7,6 +7,11 @@
  */
 @tailwind preflight;
 
+/**
+ * Custom variables
+ */
+@import "abstracts/variables";
+
 /**
  * Here you would import any custom component classes; stuff that you'd
  * want loaded *before* the utilities so that the utilities can still
@@ -15,7 +20,6 @@
  * @import "my-components/foo";
  * @import "my-components/bar";
  */
-
 @import "components/buttons";
 
 /**
@@ -146,3 +150,12 @@ div:empty {
     min-width: 20rem;
   }
 }
+
+/**
+ * WordCamp US customizations
+ */
+@import "components/accessibility";
+@import "components/base";
+@import "components/wordcamp";
+@import "components/landing";
+@import "components/account";

resources/assets/sass/components/_accessibility.scss

@@ -0,0 +1,37 @@
+/* Text meant only for screen readers. */
+.screen-reader-text {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+
+  &:focus {
+    background-color: white;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    clip-path: none;
+    color: black;
+    display: block;
+    font-weight: bold;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000; /* Above WP toolbar. */
+  }
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+  outline: 0;
+}

resources/assets/sass/components/_account.scss

@@ -0,0 +1,61 @@
+.account-banner {
+  padding: 30px;
+  background: $blue;
+  color: $white;
+
+  h2 {
+    color: $white;
+  }
+
+  .account-banner__links {
+    a {
+      color: $white;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $white;
+      }
+    }
+  }
+
+  .btn { 
+    &:hover,
+    &:active,
+    &:focus {
+      color: $blue;
+    }
+  }
+
+  @media screen and (max-width: 960px) {
+    flex-wrap: wrap;
+
+    .account-banner__actions {
+      margin-top: 1em;
+      width: 100%;
+      text-align: left;
+
+      p {
+        margin-bottom: 0;
+      }
+
+      .btn {
+        margin-bottom: 1em;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .talk-list__item {
+    display: block;
+
+    & > div {
+      width: 100%;
+    }
+
+    div + div {
+      margin-top: 1.5em;
+    }
+  }
+}

resources/assets/sass/components/_base.scss

@@ -0,0 +1,147 @@
+body {
+  background-color: $off-white;
+  font-family: $body;
+  font-size: 18px;
+  line-height: 1.555555;
+  padding-bottom: 90px;
+}
+
+h1, h2, h3 {
+  font-family: $header;
+}
+
+h2 {
+  color: $bright-blue;
+  font-size: 32px;
+}
+
+h3 {
+  margin: 30px 0 20px;
+  color: $bright-blue;
+  font-size: 24px;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+ul {
+  margin-bottom: 1em;
+}
+
+a {
+  color: $blue;
+  font-weight: 600;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $cardinal;
+  }
+}
+
+label {
+  color: $black;
+  font-size: 18px;
+}
+
+input[type="text"], input[type="email"], input[type="password"] {
+  margin-bottom: 1em;
+}
+
+.site-header {
+  padding: 30px 0;
+
+  a {
+    color: $cardinal;
+    font-weight: bold;
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $blue;
+      border-color: currentColor;
+    }
+
+    &.active {
+      border-color: currentColor;
+    }
+
+    & + a {
+      margin-left: 2em;
+    }
+  }
+
+  .site-title a {
+    margin:  auto;
+    display: block;
+    width: 167px;
+    height: 181px;
+    text-decoration: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-bottom: none !important;
+  }
+
+  .account-navigation {
+    justify-content: flex-end;
+  }
+
+  .info-navigation,
+  .account-navigation {
+    @media #{$tablet-portrait-down} {
+      display: block;
+      padding: 30px;
+      text-align: center;
+
+      a {
+        display: block;
+        margin: 0 0 1em;
+      }
+    }
+  }
+
+  .page-inner:not(.page-dashboard) & {
+    border-bottom: 3px dotted $light-brown;
+    margin-bottom: 90px;
+  }
+
+  @media screen and (max-width: 550px) {
+    flex-wrap: wrap;
+
+    .site-title {
+      min-width: 100%;
+    }
+
+    .info-navigation,
+    .account-navigation {
+      order: 2;
+      padding-bottom: 0;
+    }
+  }
+
+  @media screen and (max-width: 380px) {
+    .info-navigation,
+    .account-navigation {
+      min-width: 100%;
+    }
+    .account-navigation {
+      padding-top: 0;
+    }
+  }
+}
+
+.page-content {
+  margin: 0 auto;
+  padding: 0 30px;
+  max-width: 870px;
+
+  .page-title {
+    margin: 0 0 40px;
+    text-transform: uppercase;
+    font-weight: 800;
+    color: $black;
+  }
+}

resources/assets/sass/components/_buttons.scss

@@ -1,35 +1,66 @@
 .btn {
   @apply .py-3 .px-6 .rounded;
+  white-space: nowrap;
+  display: inline-block;
+  font-family: $header;
+  font-size: 18px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-decoration: none;
 }
 
+.btn-small {
+  font-size: 16px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+// This class doesn't seem to work.
 .btn-sm {
   @apply .py-2 .px-3 .rounded .text-sm;
+  white-space: nowrap;
 }
 
 .btn-disabled {
   @apply .bg-grey .text-white .border-2 .border-grey;
+  white-space: nowrap;
 }
 
 .btn-brand {
   @apply .bg-brand .text-white .border-2 .border-brand;
+  white-space: nowrap;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $white;
+    background: darken( $cardinal, 10% );
+    border-color: darken( $cardinal, 10% );
+  }
 }
 
 .btn-white {
   @apply .bg-white .text-brand .border-2 .border-white;
+  white-space: nowrap;
 }
 
 .btn-white-o {
   @apply .border-2 .border-white .text-white;
+  white-space: nowrap;
 
-  &:hover {
+  &:hover,
+  &:focus {
     @apply .bg-white .text-brand;
   }
 }
 
 .btn-brand-o {
   @apply .border-2 .border-brand .text-brand;
+  white-space: nowrap;
 
-  &:hover {
+  &:hover,
+  &:focus {
     @apply .bg-brand .text-white;
   }
 }