Initial commit

14 files changed, 411 insertions, 0 deletions

diff --git a/assets/sass/@primer/css/marketing/README.md b/assets/sass/@primer/css/marketing/README.md
new file mode 100644
index 0000000..44f2885
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "marketing"
+generated: true
+---
+
+# Primer CSS: `marketing` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/marketing/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/marketing.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/marketing/buttons/button.scss b/assets/sass/@primer/css/marketing/buttons/button.scss
new file mode 100644
index 0000000..a0de3fa
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/buttons/button.scss
@@ -0,0 +1,100 @@
+.btn-mktg {
+  display: inline-block;
+  padding: $spacer-3 $spacer-4;
+  font-size: $h5-size;
+  font-weight: $font-weight-semibold;
+  color: $text-white;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  // stylelint-disable-next-line primer/colors
+  background-color: $blue-mktg;
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style $blue-mktg;
+  border-radius: $border-radius;
+  transition: $transition-time / 2;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  &:hover {
+    text-decoration: none;
+    background-color: $bg-blue;
+    border-color: $border-blue;
+  }
+
+  &:focus {
+    outline: 0;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    pointer-events: none; // Disable hover styles
+    cursor: default;
+    opacity: 0.65;
+  }
+}
+
+.btn-primary-mktg {
+  // stylelint-disable-next-line primer/colors
+  background-color: $green-mktg;
+  // stylelint-disable-next-line primer/borders
+  border-color: $green-mktg;
+
+  &:hover {
+    background-color: $bg-green;
+    // stylelint-disable-next-line primer/borders
+    border-color: $green-500;
+  }
+
+  &:focus {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
+  }
+}
+
+.btn-large-mktg {
+  // stylelint-disable-next-line primer/spacing
+  padding: 20px $spacer-5;
+  font-size: $h4-size;
+}
+
+.btn-outline-mktg {
+  // stylelint-disable-next-line primer/colors
+  color: $blue-mktg;
+  // stylelint-disable-next-line primer/colors
+  background-color: rgba($white, 0);
+  // stylelint-disable-next-line primer/borders
+  border-color: rgba($blue-mktg, 0.5);
+
+  &:hover {
+    color: $text-blue;
+    text-decoration: none;
+    // stylelint-disable-next-line primer/colors
+    background-color: rgba($white, 0);
+    // stylelint-disable-next-line primer/borders
+    border-color: rgba($blue-mktg, 1);
+  }
+}
+
+@mixin btn-transparent-active {
+  color: $gray-800;
+  background-color: $white;
+  background-image: none;
+  border-color: $white;
+}
+
+.btn-transparent {
+  color: $text-white;
+  background-color: transparent;
+  background-image: none;
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style $white-fade-50;
+
+  &:hover,
+  &:active {
+    @include btn-transparent-active;
+  }
+}
diff --git a/assets/sass/@primer/css/marketing/buttons/index.scss b/assets/sass/@primer/css/marketing/buttons/index.scss
new file mode 100644
index 0000000..6ff5227
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/buttons/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import "../support/index.scss";
+@import "./button.scss";
diff --git a/assets/sass/@primer/css/marketing/index.scss b/assets/sass/@primer/css/marketing/index.scss
new file mode 100644
index 0000000..c84f8a5
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/index.scss
@@ -0,0 +1,14 @@
+/*!
+ * @primer/css/marketing
+ * http://primer.style/css
+ *
+ * Released under MIT license. Copyright (c) 2019 GitHub Inc.
+ */
+
+// Global requirements
+@import "./support/index.scss";
+
+// marketing specific css modules
+@import "./type/index.scss";
+@import "./buttons/index.scss";
+@import "./utilities/index.scss";
diff --git a/assets/sass/@primer/css/marketing/support/index.scss b/assets/sass/@primer/css/marketing/support/index.scss
new file mode 100644
index 0000000..8c8e479
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/support/index.scss
@@ -0,0 +1,2 @@
+@import "../../support/index.scss";
+@import "./variables.scss";
diff --git a/assets/sass/@primer/css/marketing/support/variables.scss b/assets/sass/@primer/css/marketing/support/variables.scss
new file mode 100644
index 0000000..7d0ec1c
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/support/variables.scss
@@ -0,0 +1,77 @@
+$marketing-font-path: "/fonts/" !default;
+
+// Type
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: $font-weight-semibold;
+  src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: $font-weight-bold;
+  src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff");
+  font-display: swap;
+}
+
+$font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Builds upon @primer/css/support/variables/typography.scss
+$h000-size: 64px !default;
+$h000-size-mobile: 48px !default;
+
+// Colors
+$green-mktg: mix($green-500, $green-400, 50%) !default;
+$blue-mktg: mix($blue-400, $blue-500, 42%) !default;
+
+// Animations
+$transition-time: 0.4s !default;
+
+// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
+// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
+// 80, 96, etc.
+$spacer-7:  $spacer * 6 !default;  // 48px
+$spacer-8:  $spacer * 8 !default;  // 64px
+$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-10: $spacer * 12 !default; // 96px
+$spacer-11: $spacer * 14 !default; // 112px
+$spacer-12: $spacer * 16 !default; // 128px
+
+$marketing-spacers: (
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+) !default;
+
+$marketing-all-spacers: map-merge(
+  (
+    0: 0,
+    1: $spacer-1,
+    2: $spacer-2,
+    3: $spacer-3,
+    4: $spacer-4,
+    5: $spacer-5,
+    6: $spacer-6,
+  ),
+  $marketing-spacers,
+) !default;
+
+$marketing-position-variants: (
+  "": "",
+  md: "-md",
+  lg: "-lg",
+) !default;
diff --git a/assets/sass/@primer/css/marketing/type/index.scss b/assets/sass/@primer/css/marketing/type/index.scss
new file mode 100644
index 0000000..5ddc98f
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/type/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import "../support/index.scss";
+@import "./typography.scss";
diff --git a/assets/sass/@primer/css/marketing/type/typography.scss b/assets/sass/@primer/css/marketing/type/typography.scss
new file mode 100644
index 0000000..63667fd
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/type/typography.scss
@@ -0,0 +1,103 @@
+// Headings
+
+.h000-mktg,
+.h00-mktg,
+.h0-mktg,
+.h1-mktg,
+.h2-mktg,
+.h3-mktg,
+.h4-mktg,
+.h5-mktg,
+.h6-mktg,
+.lead-mktg {
+  font-family: $font-mktg;
+  font-weight: $font-weight-semibold;
+}
+
+@mixin h000-mktg {
+  font-size: $h000-size-mobile !important;
+  @include breakpoint(md) { font-size: $h000-size !important; }
+}
+
+.h000-mktg { @include h000-mktg; }
+
+@mixin h00-mktg {
+  font-size: $h00-size-mobile !important;
+  @include breakpoint(md) { font-size: $h00-size !important; }
+}
+
+.h00-mktg { @include h00-mktg; }
+
+@mixin h0-mktg {
+  font-size: $h0-size-mobile !important;
+  @include breakpoint(md) { font-size: $h0-size !important; }
+}
+
+.h0-mktg { @include h0-mktg; }
+
+@mixin h1-mktg {
+  font-size: $h1-size-mobile !important;
+  @include breakpoint(md) { font-size: $h1-size !important; }
+}
+
+.h1-mktg { @include h1-mktg; }
+
+@mixin h2-mktg {
+  font-size: $h2-size-mobile !important;
+  @include breakpoint(md) { font-size: $h2-size !important; }
+}
+
+.h2-mktg { @include h2-mktg; }
+
+@mixin h3-mktg {
+  font-size: $h3-size-mobile !important;
+  @include breakpoint(md) { font-size: $h3-size !important; }
+}
+
+.h3-mktg { @include h3-mktg; }
+
+.h4-mktg {
+  font-size: $h4-size !important;
+}
+
+.h5-mktg {
+  font-size: $h5-size !important;
+}
+
+.h6-mktg {
+  font-size: $h6-size !important;
+}
+
+// Big opening paragraphs
+@mixin lead-mktg {
+  font-size: $h3-size;
+  font-weight: $font-weight-normal;
+}
+
+.lead-mktg { @include lead-mktg; }
+
+// Pullquote
+
+@mixin pullquote {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: $spacer;
+  margin-bottom: $spacer-4;
+  font-family: $mono-font;
+  font-size: $h4-size;
+  line-height: 1.4;
+  color: $text-gray;
+  border-left: 3px solid $border-color;
+
+  @include breakpoint(md) {
+    padding-left: $spacer * 1.5;
+    margin-bottom: $spacer-5;
+    margin-left: (-$spacer * 1.5) - 3px;
+    font-size: 18px;
+    line-height: $lh-default;
+  }
+}
+
+.pullquote {
+  @include pullquote;
+}
diff --git a/assets/sass/@primer/css/marketing/utilities/borders.scss b/assets/sass/@primer/css/marketing/utilities/borders.scss
new file mode 100644
index 0000000..1a95e48
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/utilities/borders.scss
@@ -0,0 +1,4 @@
+// Marketing border utilities
+
+// XXX If you're looking for responsive border utilities, they've moved to
+// ../../utilities/borders.scss
diff --git a/assets/sass/@primer/css/marketing/utilities/filters.scss b/assets/sass/@primer/css/marketing/utilities/filters.scss
new file mode 100644
index 0000000..062140f
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/utilities/filters.scss
@@ -0,0 +1,3 @@
+.grayscale {
+  filter: grayscale(100%);
+}
diff --git a/assets/sass/@primer/css/marketing/utilities/index.scss b/assets/sass/@primer/css/marketing/utilities/index.scss
new file mode 100644
index 0000000..4ba10ef
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/utilities/index.scss
@@ -0,0 +1,7 @@
+@import "../support/index.scss";
+// utilities
+@import "./filters.scss";
+@import "./borders.scss";
+@import "./layout.scss";
+@import "./margin.scss";
+@import "./padding.scss";
diff --git a/assets/sass/@primer/css/marketing/utilities/layout.scss b/assets/sass/@primer/css/marketing/utilities/layout.scss
new file mode 100644
index 0000000..c17f5f5
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/utilities/layout.scss
@@ -0,0 +1,29 @@
+// Layout utilities
+// stylelint-disable block-opening-brace-space-before
+
+// Responsive utilities to position content
+// No utilities for sm and xl breakpoints
+@each $breakpoint, $variant in $marketing-position-variants {
+  @include breakpoint($breakpoint) {
+    @each $scale, $size in $marketing-all-spacers {
+      .top#{$variant}-#{$scale}     { top: $size !important; }
+      .right#{$variant}-#{$scale}   { right: $size !important; }
+      .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
+      .left#{$variant}-#{$scale}    { left: $size !important; }
+
+      .top#{$variant}-n#{$scale}     { top: -$size !important; }
+      .right#{$variant}-n#{$scale}   { right: -$size !important; }
+      .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
+      .left#{$variant}-n#{$scale}    { left: -$size !important; }
+    }
+  }
+}
+
+// Negative offset columns
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @for $offset from 1 through 7 {
+      .offset#{$variant}-n#{$offset} { margin-left: -($offset / 12 * 100%); }
+    }
+  }
+}
diff --git a/assets/sass/@primer/css/marketing/utilities/margin.scss b/assets/sass/@primer/css/marketing/utilities/margin.scss
new file mode 100644
index 0000000..61cde8d
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/utilities/margin.scss
@@ -0,0 +1,17 @@
+// Margin spacer utilities for marketing
+// Utilities only added for y-direction margin (i.e. top & bottom)
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $scale, $size in $marketing-all-spacers {
+
+      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
+      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
+
+      .my#{$variant}-#{$scale} {
+        margin-top: $size !important;
+        margin-bottom: $size !important;
+      }
+    }
+  }
+}
diff --git a/assets/sass/@primer/css/marketing/utilities/padding.scss b/assets/sass/@primer/css/marketing/utilities/padding.scss
new file mode 100644
index 0000000..906e148
--- /dev/null
+++ b/assets/sass/@primer/css/marketing/utilities/padding.scss
@@ -0,0 +1,24 @@
+// Padding spacer utilities for marketing
+// stylelint-disable block-opening-brace-space-before
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $scale, $size in $marketing-all-spacers {
+      // Set a #{$size} padding for all sides
+      .p#{$variant}-#{$scale}   { padding: #{$size} !important; }
+      // Set a #{$size} padding to the top
+      .pt#{$variant}-#{$scale}  { padding-top: #{$size} !important; }
+      // Set a #{$size} padding to the right
+      .pr#{$variant}-#{$scale}  { padding-right: #{$size} !important; }
+      // Set a #{$size} padding to the bottom
+      .pb#{$variant}-#{$scale}  { padding-bottom: #{$size} !important; }
+      // Set a #{$size} padding to the left
+      .pl#{$variant}-#{$scale}  { padding-left: #{$size} !important; }
+      // Set a #{$size} padding to the top & bottom
+      .py#{$variant}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}