├── src ├── style │ ├── _mixins.scss │ ├── bourbon │ │ ├── css3 │ │ │ ├── _appearance.scss │ │ │ ├── _user-select.scss │ │ │ ├── _box-sizing.scss │ │ │ ├── _inline-block.scss │ │ │ ├── _perspective.scss │ │ │ ├── _backface-visibility.scss │ │ │ ├── _image-rendering.scss │ │ │ ├── _hidpi-media-query.scss │ │ │ ├── _transform.scss │ │ │ ├── _placeholder.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _font-face.scss │ │ │ ├── _transition.scss │ │ │ ├── _columns.scss │ │ │ ├── _keyframes.scss │ │ │ ├── _flex-box.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _animation.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _background-image.scss │ │ │ └── _border-image.scss │ │ ├── addons │ │ │ ├── _hide-text.scss │ │ │ ├── _font-family.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _position.scss │ │ │ ├── _retina-image.scss │ │ │ ├── _size.scss │ │ │ ├── _triangle.scss │ │ │ ├── _prefixer.scss │ │ │ ├── _timing-functions.scss │ │ │ └── _html5-input-types.scss │ │ ├── functions │ │ │ ├── _compact.scss │ │ │ ├── _px-to-em.scss │ │ │ ├── _tint-shade.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _grid-width.scss │ │ │ ├── _transition-property-name.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _modular-scale.scss │ │ │ └── _flex-grid.scss │ │ ├── helpers │ │ │ ├── _shape-size-stripper.scss │ │ │ ├── _gradient-positions-parser.scss │ │ │ ├── _radial-positions-parser.scss │ │ │ ├── _render-gradients.scss │ │ │ ├── _deprecated-webkit-gradient.scss │ │ │ ├── _radial-arg-parser.scss │ │ │ └── _linear-positions-parser.scss │ │ ├── _bourbon-deprecated-upcoming.scss │ │ └── _bourbon.scss │ ├── _layout.scss │ ├── _404.scss │ ├── style.scss │ ├── _inline-copy.scss │ ├── _search-results.scss │ ├── _badge.scss │ ├── _footer.scss │ ├── _about.scss │ └── _copy.scss ├── favicon │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── mstile-150x150.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── browserconfig.xml │ ├── manifest.json │ └── safari-pinned-tab.svg ├── images │ ├── down.svg │ ├── icons │ │ ├── icon-close.svg │ │ ├── icon-markdown-cyan.svg │ │ ├── icon-markdown-navy.svg │ │ ├── icon-markdown-royal.svg │ │ ├── icon-markdown-white.svg │ │ ├── icon-imageurl-cyan.svg │ │ ├── icon-imageurl-navy.svg │ │ ├── icon-imageurl-royal.svg │ │ ├── icon-imageurl-white.svg │ │ ├── icon-copied.svg │ │ ├── icon-search.svg │ │ └── icon-twitter.svg │ ├── face-eyes.svg │ ├── button-view-all.svg │ ├── mark.svg │ ├── badges │ │ ├── made-with-c.svg │ │ ├── made-with-java.svg │ │ ├── made-with-c-plus-plus.svg │ │ ├── fo-real.svg │ │ ├── made-with-go.svg │ │ ├── made-with-meteor.svg │ │ ├── ages-12.svg │ │ ├── made-with-groovy.svg │ │ ├── built-with-love.svg │ │ ├── made-with-elixir.svg │ │ ├── gluten-free.svg │ │ ├── made-with-vue.svg │ │ ├── made-with-julia.svg │ │ ├── kinda-sfw.svg │ │ ├── made-with-rust.svg │ │ ├── not-an-issue.svg │ │ ├── made-with-erlang.svg │ │ ├── fo-shizzle.svg │ │ ├── made-with-javascript.svg │ │ ├── made-with-c-sharp.svg │ │ ├── for-you.svg │ │ ├── as-seen-on-tv.svg │ │ ├── fo-sho.svg │ │ ├── validated-html2.svg │ │ ├── uses-html.svg │ │ ├── ages-20-30.svg │ │ ├── validated-html5.svg │ │ ├── made-with-pug.svg │ │ ├── uses-brains.svg │ │ ├── oooo-kill-em.svg │ │ ├── built-with-grav.svg │ │ ├── uses-git.svg │ │ ├── built-for-android.svg │ │ ├── ages-18.svg │ │ ├── built-by-crips.svg │ │ ├── fixed-bugs.svg │ │ ├── fuck-it-ship-it.svg │ │ ├── made-with-reason.svg │ │ ├── check-it-out.svg │ │ ├── ctrl-c-ctrl-v.svg │ │ └── made-with-ruby.svg │ ├── featured │ │ ├── featured-uses-html.svg │ │ ├── featured-oooo-kill-em.svg │ │ ├── featured-gluten-free.svg │ │ ├── featured-fuck-it-ship-it.svg │ │ └── featured-built-with-love.svg │ ├── contribute.svg │ ├── attr-company.svg │ └── makes-people-smile.svg └── views │ ├── includes │ ├── _mixins.pug │ └── _layout.pug │ └── index.pug ├── .gitignore ├── gulp └── tasks │ ├── favicon.js │ ├── images.js │ ├── styles.js │ ├── pug.js │ └── scripts.js ├── .jshintrc ├── gulpfile.js └── package.json /src/style/_mixins.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .sass-cache 4 | .DS_Store 5 | *.swo 6 | *.swp 7 | *.map 8 | *.log 9 | *.sublime* 10 | -------------------------------------------------------------------------------- /src/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /src/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /gulp/tasks/favicon.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | 3 | gulp.task("favicon", () => gulp.src("src/favicon/*").pipe(gulp.dest("./dist"))); 4 | -------------------------------------------------------------------------------- /src/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingarajsankaravelu/for-the-badge/master/src/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/style/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | color: transparent; 3 | font: 0/0 a; 4 | text-shadow: none; 5 | } 6 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /src/style/_layout.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | @include size(100% auto); 3 | } 4 | 5 | .container { 6 | @include clearfix; 7 | max-width: 800px; 8 | margin: 0 auto; 9 | } 10 | -------------------------------------------------------------------------------- /src/images/down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/_404.scss: -------------------------------------------------------------------------------- 1 | .four-oh-four-badge { 2 | margin-bottom: 55px; 3 | } 4 | 5 | .four-oh-four-heading { 6 | font-weight: 900; 7 | letter-spacing: 3px; 8 | text-transform: uppercase; 9 | color: white; 10 | } 11 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_inline-block.scss: -------------------------------------------------------------------------------- 1 | // Legacy support for inline-block in IE7 (maybe IE6) 2 | @mixin inline-block { 3 | display: inline-block; 4 | vertical-align: baseline; 5 | zoom: 1; 6 | *display: inline; 7 | *vertical-align: auto; 8 | } 9 | -------------------------------------------------------------------------------- /src/images/icons/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_compact.scss: -------------------------------------------------------------------------------- 1 | // Remove `false` values from a list 2 | 3 | @function compact($vars...) { 4 | $list: (); 5 | @each $var in $vars { 6 | @if $var { 7 | $list: append($list, $var, comma); 8 | } 9 | } 10 | @return $list; 11 | } 12 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_perspective.scss: -------------------------------------------------------------------------------- 1 | @mixin perspective($depth: none) { 2 | // none | 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "immed": true, 8 | "newcap": true, 9 | "noarg": true, 10 | "undef": true, 11 | "unused": "vars", 12 | "strict": true, 13 | "jquery": true 14 | } 15 | 16 | -------------------------------------------------------------------------------- /src/images/icons/icon-markdown-cyan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/icons/icon-markdown-navy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/icons/icon-markdown-royal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/icons/icon-markdown-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: 16) { 6 | @return ($pxval / $base) * 1em; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /src/images/icons/icon-imageurl-cyan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/icons/icon-imageurl-navy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/icons/icon-imageurl-royal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/icons/icon-imageurl-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_image-rendering.scss: -------------------------------------------------------------------------------- 1 | @mixin image-rendering ($mode:optimizeQuality) { 2 | 3 | @if ($mode == optimize-contrast) { 4 | image-rendering: -moz-crisp-edges; 5 | image-rendering: -o-crisp-edges; 6 | image-rendering: -webkit-optimize-contrast; 7 | image-rendering: optimize-contrast; 8 | } 9 | 10 | @else { 11 | image-rendering: $mode; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/views/includes/_mixins.pug: -------------------------------------------------------------------------------- 1 | mixin featured-badge(name, color) 2 | .badge 3 | .container 4 | img(src=`images/featured/featured-${name}.svg`) 5 | a.copy.imageurl(class=`${color}` data-clipboard-text=`https://forthebadge.com/images/badges/${name}.svg`) 6 | a.copy.markdown(class=`${color}` data-clipboard-text=`[![forthebadge](https://forthebadge.com/images/badges/${name}.svg)](https://forthebadge.com)`) 7 | -------------------------------------------------------------------------------- /src/images/face-eyes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @function linear-gradient($pos, $gradients...) { 2 | $type: linear; 3 | $pos-type: type-of(nth($pos, 1)); 4 | 5 | // if $pos doesn't exist, fix $gradient 6 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 7 | $gradients: zip($pos $gradients); 8 | $pos: false; 9 | } 10 | 11 | $type-gradient: $type, $pos, $gradients; 12 | @return $type-gradient; 13 | } 14 | -------------------------------------------------------------------------------- /src/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "For The Badge", 3 | "icons": [ 4 | { 5 | "src": "/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, 9 | { 10 | "src": "/android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "background_color": "#ffffff", 17 | "display": "standalone" 18 | } -------------------------------------------------------------------------------- /src/style/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /src/images/icons/icon-copied.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_hidpi-media-query.scss: -------------------------------------------------------------------------------- 1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 2 | @mixin hidpi($ratio: 1.3) { 3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 4 | only screen and (min--moz-device-pixel-ratio: $ratio), 5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 6 | only screen and (min-resolution: #{round($ratio*96)}dpi), 7 | only screen and (min-resolution: #{$ratio}dppx) { 8 | @content; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/images/icons/icon-search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Micro clearfix provides an easy way to contain floats without adding additional markup 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | *zoom: 1; 16 | 17 | &:before, 18 | &:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | &:after { 24 | clear: both; 25 | } 26 | } 27 | 28 | // Acknowledgements 29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) 30 | -------------------------------------------------------------------------------- /src/style/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // These mixins/functions are deprecated 3 | // They will be removed in the next MAJOR version release 4 | //************************************************************************// 5 | @mixin box-shadow ($shadows...) { 6 | @include prefixer(box-shadow, $shadows, spec); 7 | @warn "box-shadow is deprecated and will be removed in the next major version release"; 8 | } 9 | 10 | @mixin background-size ($lengths...) { 11 | @include prefixer(background-size, $lengths, spec); 12 | @warn "background-size is deprecated and will be removed in the next major version release"; 13 | } 14 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | $placeholders: '-webkit-input-placeholder', 2 | '-moz-placeholder', 3 | '-ms-input-placeholder'; 4 | 5 | @mixin placeholder { 6 | @each $placeholder in $placeholders { 7 | @if $placeholder == "-webkit-input-placeholder" { 8 | &::#{$placeholder} { 9 | @content; 10 | } 11 | } 12 | @else if $placeholder == "-moz-placeholder" { 13 | // FF 18- 14 | &:#{$placeholder} { 15 | @content; 16 | } 17 | 18 | // FF 19+ 19 | &::#{$placeholder} { 20 | @content; 21 | } 22 | } 23 | @else { 24 | &:#{$placeholder} { 25 | @content; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/images/icons/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/button-view-all.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/style.scss: -------------------------------------------------------------------------------- 1 | $blue: #26C7D5; 2 | $orange: #E46C17; 3 | 4 | $mobile: 480px; 5 | 6 | @import "normalize"; 7 | @import "bourbon/bourbon"; 8 | @import "mixins"; 9 | 10 | // globals 11 | 12 | *, 13 | *:before, 14 | *:after { 15 | @include box-sizing(border-box); 16 | margin: 0; 17 | } 18 | 19 | body { 20 | font: normal 14px "brandon-grotesque", sans-serif; 21 | } 22 | 23 | a { 24 | text-decoration: none; 25 | } 26 | 27 | strong { 28 | font-weight: bold; 29 | } 30 | 31 | em { 32 | font-style: italic; 33 | } 34 | 35 | // partials 36 | 37 | @import "layout"; 38 | @import "header"; 39 | @import "menu"; 40 | @import "badge"; 41 | @import "copy"; 42 | @import "search-results"; 43 | @import "inline-copy"; 44 | @import "footer"; 45 | 46 | @import "404"; 47 | @import "about"; 48 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /src/style/bourbon/functions/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // This function is required and used by the background-image mixin. 2 | @function radial-gradient($G1, $G2, 3 | $G3: false, $G4: false, 4 | $G5: false, $G6: false, 5 | $G7: false, $G8: false, 6 | $G9: false, $G10: false, 7 | $pos: null, 8 | $shape-size: null) { 9 | 10 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 11 | $G1: nth($data, 1); 12 | $G2: nth($data, 2); 13 | $pos: nth($data, 3); 14 | $shape-size: nth($data, 4); 15 | 16 | $type: radial; 17 | $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 18 | 19 | $type-gradient: $type, $shape-size $pos, $gradient; 20 | @return $type-gradient; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $top: nth($coordinates, 1); 9 | $right: nth($coordinates, 2); 10 | $bottom: nth($coordinates, 3); 11 | $left: nth($coordinates, 4); 12 | 13 | position: $position; 14 | 15 | @if $top == auto { 16 | top: $top; 17 | } 18 | @else if not(unitless($top)) { 19 | top: $top; 20 | } 21 | 22 | @if $right == auto { 23 | right: $right; 24 | } 25 | @else if not(unitless($right)) { 26 | right: $right; 27 | } 28 | 29 | @if $bottom == auto { 30 | bottom: $bottom; 31 | } 32 | @else if not(unitless($bottom)) { 33 | bottom: $bottom; 34 | } 35 | 36 | @if $left == auto { 37 | left: $left; 38 | } 39 | @else if not(unitless($left)) { 40 | left: $left; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/style/_inline-copy.scss: -------------------------------------------------------------------------------- 1 | .inline-copy { 2 | opacity: 1; 3 | display: none; 4 | float: right; 5 | @include size(60px 35px); 6 | @include hide-text; 7 | background-color: #393d43; 8 | background-position: center center; 9 | background-repeat: no-repeat; 10 | cursor: pointer; 11 | transition: background-color 200ms ease, opacity 500ms ease, height 500ms ease; 12 | 13 | &:hover { 14 | background-color: rgba(#292c30, 0.75); 15 | } 16 | 17 | &:active { 18 | background-color: #535a60; 19 | } 20 | 21 | &.imageurl { 22 | background-image: url("../images/icons/icon-imageurl-white.svg"); 23 | margin-right: 10px; 24 | } 25 | 26 | &.markdown { 27 | background-image: url("../images/icons/icon-markdown-white.svg"); 28 | } 29 | 30 | &:focus { 31 | background-color: rgba(#292c30, 0.75); 32 | border: 0; 33 | outline: none; 34 | } 35 | &::-moz-focus-inner { 36 | border: 0; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | 11 | @if $asset-pipeline { 12 | @if $retina-filename { 13 | background-image: image-url("#{$retina-filename}.#{$extension}"); 14 | } 15 | @else { 16 | background-image: image-url("#{$filename}@2x.#{$extension}"); 17 | } 18 | } 19 | 20 | @else { 21 | @if $retina-filename { 22 | background-image: url("#{$retina-filename}.#{$extension}"); 23 | } 24 | @else { 25 | background-image: url("#{$filename}@2x.#{$extension}"); 26 | } 27 | } 28 | 29 | background-size: $background-size; 30 | 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | @if length($size) == 1 { 3 | @if $size == auto { 4 | width: $size; 5 | height: $size; 6 | } 7 | 8 | @else if unitless($size) { 9 | width: $size + px; 10 | height: $size + px; 11 | } 12 | 13 | @else if not(unitless($size)) { 14 | width: $size; 15 | height: $size; 16 | } 17 | } 18 | 19 | // Width x Height 20 | @if length($size) == 2 { 21 | $width: nth($size, 1); 22 | $height: nth($size, 2); 23 | 24 | @if $width == auto { 25 | width: $width; 26 | } 27 | @else if not(unitless($width)) { 28 | width: $width; 29 | } 30 | @else if unitless($width) { 31 | width: $width + px; 32 | } 33 | 34 | @if $height == auto { 35 | height: $height; 36 | } 37 | @else if not(unitless($height)) { 38 | height: $height; 39 | } 40 | @else if unitless($height) { 41 | height: $height + px; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /gulp/tasks/images.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const plumber = require("gulp-plumber"); 3 | const changed = require("gulp-changed"); 4 | const imagemin = require("gulp-imagemin"); 5 | const notify = require("gulp-notify"); 6 | const mozjpeg = require("imagemin-mozjpeg"); 7 | const size = require("gulp-size"); 8 | 9 | const dest = "./dist/images"; 10 | 11 | gulp.task("images", () => 12 | gulp 13 | .src("src/images/**/*.{gif,jpg,png,svg}") 14 | .pipe( 15 | plumber({ 16 | errorHandler: notify.onError({ 17 | title: "Gulp Task Error", 18 | message: "Error: <%= error.message %>", 19 | }), 20 | }) 21 | ) 22 | .pipe( 23 | imagemin([ 24 | imagemin.gifsicle(), 25 | mozjpeg({ 26 | quality: 80, // default is 75 27 | progressive: true, 28 | }), 29 | imagemin.optipng(), 30 | imagemin.svgo(), 31 | ]) 32 | ) 33 | .pipe(size({ showFiles: true })) 34 | .pipe(gulp.dest(dest)) 35 | ); 36 | -------------------------------------------------------------------------------- /src/style/_search-results.scss: -------------------------------------------------------------------------------- 1 | .search-results { 2 | @include clearfix; 3 | overflow: hidden; 4 | @include transition(all 1.0s ease); 5 | max-height: 0; 6 | 7 | @media only screen and (max-width: 650px) { 8 | display: none; 9 | } 10 | 11 | &.expanded { 12 | margin: 20px 0 50px 0; 13 | } 14 | } 15 | 16 | .search-list { 17 | @include size(100% auto); 18 | max-width: 600px; 19 | margin: 0 auto; 20 | padding-left: 0; 21 | list-style: none; 22 | 23 | .inline-copy { 24 | display: block; 25 | opacity: 1; 26 | } 27 | 28 | li { 29 | display: flex; 30 | position: relative; 31 | @include transition(all 0.5s ease-in-out); 32 | @include clearfix; 33 | margin-bottom: 9px; 34 | height: 35px; 35 | width: 100%; 36 | opacity: 1; 37 | 38 | &.not-match { 39 | margin-bottom: 0; 40 | height: 0; 41 | opacity: 0; 42 | 43 | .inline-copy { 44 | height: 0; 45 | opacity: 0; 46 | } 47 | } 48 | } 49 | } 50 | 51 | .view-all-badge { 52 | @include size(auto 35px); 53 | } 54 | 55 | .view-all-copy { 56 | margin-left: auto; 57 | } 58 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_font-face.scss: -------------------------------------------------------------------------------- 1 | // Order of the includes matters, and it is: normal, bold, italic, bold+italic. 2 | 3 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { 4 | @font-face { 5 | font-family: $font-family; 6 | font-weight: $weight; 7 | font-style: $style; 8 | 9 | @if $asset-pipeline == true { 10 | src: font-url('#{$file-path}.eot'); 11 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 12 | font-url('#{$file-path}.woff') format('woff'), 13 | font-url('#{$file-path}.ttf') format('truetype'), 14 | font-url('#{$file-path}.svg##{$font-family}') format('svg'); 15 | } @else { 16 | src: url('#{$file-path}.eot'); 17 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 18 | url('#{$file-path}.woff') format('woff'), 19 | url('#{$file-path}.ttf') format('truetype'), 20 | url('#{$file-path}.svg##{$font-family}') format('svg'); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | @function modular-scale($value, $increment, $ratio) { 2 | @if $increment > 0 { 3 | @for $i from 1 through $increment { 4 | $value: ($value * $ratio); 5 | } 6 | } 7 | 8 | @if $increment < 0 { 9 | $increment: abs($increment); 10 | @for $i from 1 through $increment { 11 | $value: ($value / $ratio); 12 | } 13 | } 14 | 15 | @return $value; 16 | } 17 | 18 | // div { 19 | // Increment Up GR with positive value 20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px 21 | // 22 | // Increment Down GR with negative value 23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px 24 | // 25 | // Can be used with ceil(round up) or floor(round down) 26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px 27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px 28 | // } 29 | // 30 | // modularscale.com 31 | 32 | @function golden-ratio($value, $increment) { 33 | @return modular-scale($value, $increment, 1.618) 34 | } 35 | 36 | // div { 37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px 38 | // } 39 | // 40 | // goldenratiocalculator.com 41 | -------------------------------------------------------------------------------- /src/images/mark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 6 | border-color: transparent; 7 | border-style: solid; 8 | border-width: $size / 2; 9 | 10 | @if $direction == up { 11 | border-bottom-color: $color; 12 | 13 | } @else if $direction == right { 14 | border-left-color: $color; 15 | 16 | } @else if $direction == down { 17 | border-top-color: $color; 18 | 19 | } @else if $direction == left { 20 | border-right-color: $color; 21 | } 22 | } 23 | 24 | @else if ($direction == up-right) or ($direction == up-left) { 25 | border-top: $size solid $color; 26 | 27 | @if $direction == up-right { 28 | border-left: $size solid transparent; 29 | 30 | } @else if $direction == up-left { 31 | border-right: $size solid transparent; 32 | } 33 | } 34 | 35 | @else if ($direction == down-right) or ($direction == down-left) { 36 | border-bottom: $size solid $color; 37 | 38 | @if $direction == down-right { 39 | border-left: $size solid transparent; 40 | 41 | } @else if $direction == down-left { 42 | border-right: $size solid transparent; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/style/_badge.scss: -------------------------------------------------------------------------------- 1 | .badges { 2 | @include transition(all 1s ease); 3 | overflow: hidden; 4 | height: 3200px; 5 | 6 | &.collapsed { 7 | height: 0; 8 | } 9 | } 10 | 11 | .badge { 12 | height: 320px; 13 | padding-top: 100px; 14 | text-align: center; 15 | 16 | @media only screen and (max-width: $mobile) { 17 | padding-top: 135px; 18 | } 19 | 20 | img { 21 | height: 50px; 22 | display: block; 23 | margin: 0 auto 40px auto; 24 | 25 | @media only screen and (max-width: $mobile) { 26 | max-width: 280px; 27 | @include size(auto 35px); 28 | margin-bottom: 0; 29 | } 30 | } 31 | 32 | $beige: #F4F4F0; 33 | 34 | &:first-child { 35 | background-color: $beige; 36 | } 37 | 38 | &:nth-child(2) { 39 | background-color: #C1D72E; 40 | } 41 | 42 | &:nth-child(3) { 43 | background-color: #393D43; 44 | } 45 | 46 | &:nth-child(4) { 47 | background-color: $beige; 48 | } 49 | 50 | &:nth-child(5) { 51 | background-color: #FF7B00; 52 | } 53 | 54 | &:nth-child(6) { 55 | background-color: #263C4A; 56 | } 57 | 58 | &:nth-child(7) { 59 | background-color: $beige; 60 | } 61 | 62 | &:nth-child(8) { 63 | background-color: #26C7D5; 64 | } 65 | 66 | &:nth-child(9) { 67 | background-color: #EA004C; 68 | } 69 | 70 | &:last-child { 71 | background-color: $beige; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/images/badges/made-with-c.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all, 2.0s, ease-in-out); 3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); 4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); 5 | 6 | @mixin transition ($properties...) { 7 | @if length($properties) >= 1 { 8 | @include prefixer(transition, $properties, webkit moz spec); 9 | } 10 | 11 | @else { 12 | $properties: all 0.15s ease-out 0; 13 | @include prefixer(transition, $properties, webkit moz spec); 14 | } 15 | } 16 | 17 | @mixin transition-property ($properties...) { 18 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 19 | -moz-transition-property: transition-property-names($properties, 'moz'); 20 | transition-property: transition-property-names($properties, false); 21 | } 22 | 23 | @mixin transition-duration ($times...) { 24 | @include prefixer(transition-duration, $times, webkit moz spec); 25 | } 26 | 27 | @mixin transition-timing-function ($motions...) { 28 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 29 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 30 | } 31 | 32 | @mixin transition-delay ($times...) { 33 | @include prefixer(transition-delay, $times, webkit moz spec); 34 | } 35 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(columns-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /src/images/badges/made-with-java.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content 2 | @mixin keyframes($name) { 3 | $original-prefix-for-webkit: $prefix-for-webkit; 4 | $original-prefix-for-mozilla: $prefix-for-mozilla; 5 | $original-prefix-for-microsoft: $prefix-for-microsoft; 6 | $original-prefix-for-opera: $prefix-for-opera; 7 | $original-prefix-for-spec: $prefix-for-spec; 8 | 9 | @if $original-prefix-for-webkit { 10 | @include disable-prefix-for-all(); 11 | $prefix-for-webkit: true; 12 | @-webkit-keyframes #{$name} { 13 | @content; 14 | } 15 | } 16 | @if $original-prefix-for-mozilla { 17 | @include disable-prefix-for-all(); 18 | $prefix-for-mozilla: true; 19 | @-moz-keyframes #{$name} { 20 | @content; 21 | } 22 | } 23 | @if $original-prefix-for-opera { 24 | @include disable-prefix-for-all(); 25 | $prefix-for-opera: true; 26 | @-o-keyframes #{$name} { 27 | @content; 28 | } 29 | } 30 | @if $original-prefix-for-spec { 31 | @include disable-prefix-for-all(); 32 | $prefix-for-spec: true; 33 | @keyframes #{$name} { 34 | @content; 35 | } 36 | } 37 | 38 | $prefix-for-webkit: $original-prefix-for-webkit; 39 | $prefix-for-mozilla: $original-prefix-for-mozilla; 40 | $prefix-for-microsoft: $original-prefix-for-microsoft; 41 | $prefix-for-opera: $original-prefix-for-opera; 42 | $prefix-for-spec: $original-prefix-for-spec; 43 | } 44 | -------------------------------------------------------------------------------- /src/images/badges/made-with-c-plus-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_flex-box.scss: -------------------------------------------------------------------------------- 1 | // CSS3 Flexible Box Model and property defaults 2 | 3 | // Custom shorthand notation for flexbox 4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) { 5 | @include display-box; 6 | @include box-orient($orient); 7 | @include box-pack($pack); 8 | @include box-align($align); 9 | } 10 | 11 | @mixin display-box { 12 | display: -webkit-box; 13 | display: -moz-box; 14 | display: box; 15 | } 16 | 17 | @mixin box-orient($orient: inline-axis) { 18 | // horizontal|vertical|inline-axis|block-axis|inherit 19 | @include prefixer(box-orient, $orient, webkit moz spec); 20 | } 21 | 22 | @mixin box-pack($pack: start) { 23 | // start|end|center|justify 24 | @include prefixer(box-pack, $pack, webkit moz spec); 25 | } 26 | 27 | @mixin box-align($align: stretch) { 28 | // start|end|center|baseline|stretch 29 | @include prefixer(box-align, $align, webkit moz spec); 30 | } 31 | 32 | @mixin box-direction($direction: normal) { 33 | // normal|reverse|inherit 34 | @include prefixer(box-direction, $direction, webkit moz spec); 35 | } 36 | 37 | @mixin box-lines($lines: single) { 38 | // single|multiple 39 | @include prefixer(box-lines, $lines, webkit moz spec); 40 | } 41 | 42 | @mixin box-ordinal-group($int: 1) { 43 | @include prefixer(box-ordinal-group, $int, webkit moz spec); 44 | } 45 | 46 | @mixin box-flex($value: 0.0) { 47 | @include prefixer(box-flex, $value, webkit moz spec); 48 | } 49 | 50 | @mixin box-flex-group($int: 1) { 51 | @include prefixer(box-flex-group, $int, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | $prefix-for-webkit: true !default; 5 | $prefix-for-mozilla: true !default; 6 | $prefix-for-microsoft: true !default; 7 | $prefix-for-opera: true !default; 8 | $prefix-for-spec: true !default; // required for keyframe mixin 9 | 10 | @mixin prefixer ($property, $value, $prefixes) { 11 | @each $prefix in $prefixes { 12 | @if $prefix == webkit { 13 | @if $prefix-for-webkit { 14 | -webkit-#{$property}: $value; 15 | } 16 | } 17 | @else if $prefix == moz { 18 | @if $prefix-for-mozilla { 19 | -moz-#{$property}: $value; 20 | } 21 | } 22 | @else if $prefix == ms { 23 | @if $prefix-for-microsoft { 24 | -ms-#{$property}: $value; 25 | } 26 | } 27 | @else if $prefix == o { 28 | @if $prefix-for-opera { 29 | -o-#{$property}: $value; 30 | } 31 | } 32 | @else if $prefix == spec { 33 | @if $prefix-for-spec { 34 | #{$property}: $value; 35 | } 36 | } 37 | @else { 38 | @warn "Unrecognized prefix: #{$prefix}"; 39 | } 40 | } 41 | } 42 | 43 | @mixin disable-prefix-for-all() { 44 | $prefix-for-webkit: false; 45 | $prefix-for-mozilla: false; 46 | $prefix-for-microsoft: false; 47 | $prefix-for-opera: false; 48 | $prefix-for-spec: false; 49 | } 50 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_deprecated-webkit-gradient.scss: -------------------------------------------------------------------------------- 1 | // Render Deprecated Webkit Gradient - Linear || Radial 2 | //************************************************************************// 3 | @function _deprecated-webkit-gradient($type, 4 | $deprecated-pos1, $deprecated-pos2, 5 | $full, 6 | $deprecated-radius1: false, $deprecated-radius2: false) { 7 | $gradient-list: (); 8 | $gradient: false; 9 | $full-length: length($full); 10 | $percentage: false; 11 | $gradient-type: $type; 12 | 13 | @for $i from 1 through $full-length { 14 | $gradient: nth($full, $i); 15 | 16 | @if length($gradient) == 2 { 17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); 18 | $gradient-list: join($gradient-list, $color-stop, comma); 19 | } 20 | @else if $gradient != null { 21 | @if $i == $full-length { 22 | $percentage: 100%; 23 | } 24 | @else { 25 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; 26 | } 27 | $color-stop: color-stop(unquote($percentage), $gradient); 28 | $gradient-list: join($gradient-list, $color-stop, comma); 29 | } 30 | } 31 | 32 | @if $type == radial { 33 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); 34 | } 35 | @else if $type == linear { 36 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); 37 | } 38 | @return $gradient; 39 | } 40 | -------------------------------------------------------------------------------- /gulp/tasks/styles.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const when = require("gulp-if"); 3 | const prefixer = require("autoprefixer"); 4 | const plumber = require("gulp-plumber"); 5 | const changed = require("gulp-changed"); 6 | const sourcemaps = require("gulp-sourcemaps"); 7 | const sass = require("gulp-sass"); 8 | const postcss = require("gulp-postcss"); 9 | const notify = require("gulp-notify"); 10 | const cssnano = require("cssnano"); 11 | const size = require("gulp-size"); 12 | const postcssPresetEnv = require("postcss-preset-env"); 13 | const { argv } = require("yargs"); 14 | 15 | sass.compiler = require("node-sass"); 16 | 17 | // Check if gulp scripts --prod or --production has been added to the task 18 | const production = argv.prod || argv.production; 19 | 20 | const processorsProd = [ 21 | prefixer(), 22 | postcssPresetEnv(), 23 | cssnano({ safe: true }), 24 | ]; 25 | 26 | const processors = [prefixer(), postcssPresetEnv()]; 27 | 28 | gulp.task("styles", () => 29 | gulp 30 | .src("src/style/style.scss") 31 | .pipe( 32 | plumber({ 33 | errorHandler: notify.onError({ 34 | title: "Gulp Task Error", 35 | message: "Error: <%= error.message %>", 36 | }), 37 | }) 38 | ) 39 | .pipe(changed("./dist/css", { hasChanged: changed.compareContents })) 40 | .pipe(when(!production, sourcemaps.init())) 41 | .pipe(sass({ includePaths: ["./node_modules/"] })) 42 | .pipe(when(!production, postcss(processors))) 43 | .pipe(when(production, postcss(processorsProd))) 44 | .pipe(size({ showFiles: true })) 45 | .pipe(when(!production, sourcemaps.write("./", { addComment: false }))) 46 | .pipe(gulp.dest("./dist/css/")) 47 | ); 48 | -------------------------------------------------------------------------------- /src/images/badges/fo-real.svg: -------------------------------------------------------------------------------- 1 | 2 | fo-real 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/images/badges/made-with-go.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($pos, $G1, $G2: false, 2 | $G3: false, $G4: false, 3 | $G5: false, $G6: false, 4 | $G7: false, $G8: false, 5 | $G9: false, $G10: false, 6 | $deprecated-pos1: left top, 7 | $deprecated-pos2: left bottom, 8 | $fallback: false) { 9 | // Detect what type of value exists in $pos 10 | $pos-type: type-of(nth($pos, 1)); 11 | $pos-spec: null; 12 | $pos-degree: null; 13 | 14 | // If $pos is missing from mixin, reassign vars and add default position 15 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 16 | $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; 17 | $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; 18 | $pos: null; 19 | } 20 | 21 | @if $pos { 22 | $positions: _linear-positions-parser($pos); 23 | $pos-degree: nth($positions, 1); 24 | $pos-spec: nth($positions, 2); 25 | } 26 | 27 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 28 | 29 | // Set $G1 as the default fallback color 30 | $fallback-color: nth($G1, 1); 31 | 32 | // If $fallback is a color use that color as the fallback color 33 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 34 | $fallback-color: $fallback; 35 | } 36 | 37 | background-color: $fallback-color; 38 | background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 39 | background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome 40 | background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); 41 | } 42 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const browserSync = require("browser-sync"); 3 | const requireDir = require("require-dir"); 4 | // Let's require all the tasks inside gulp/tasks 5 | requireDir("./gulp/tasks", { 6 | recurse: true, 7 | }); 8 | 9 | // The main building block task 10 | gulp.task( 11 | "build", 12 | gulp.series("pug", "styles", "scripts", "images", "favicon") 13 | ); 14 | 15 | // function to properly reload your browser 16 | function reload(done) { 17 | browserSync.reload(); 18 | done(); 19 | } 20 | 21 | const sendMaps = (req, res, next) => { 22 | const filename = req.url.split("/").pop(); 23 | const extension = filename.split(".").pop(); 24 | 25 | if (extension === "js") { 26 | // res.setHeader('X-SourceMap', '/assets/js/' + filename + '.map'); 27 | } else if (extension === "css") { 28 | res.setHeader("X-SourceMap", `/assets/css/${filename}.map`); 29 | } 30 | 31 | return next(); 32 | }; 33 | 34 | gulp.task("browser-sync", () => 35 | browserSync.init({ 36 | server: { 37 | baseDir: "./dist", 38 | middleware: [sendMaps], 39 | serveStaticOptions: { 40 | extensions: ["html"], 41 | }, 42 | }, 43 | port: 8000, 44 | open: false, 45 | notify: false, 46 | logConnections: false, 47 | }) 48 | ); 49 | 50 | gulp.task("watch", (done) => { 51 | gulp.watch("src/views/**/*.pug", gulp.series("pug", reload)); 52 | gulp.watch("src/style/**/*.scss", gulp.series("styles", reload)); 53 | gulp.watch("src/scripts/**/*.js", gulp.series("scripts", reload)); 54 | gulp.watch("src/images/**/*", gulp.series("images", reload)); 55 | done(); 56 | }); 57 | 58 | gulp.task("serve", gulp.parallel("browser-sync", "watch")); 59 | 60 | gulp.task("default", gulp.series("build", "serve")); 61 | -------------------------------------------------------------------------------- /src/style/bourbon/functions/_flex-grid.scss: -------------------------------------------------------------------------------- 1 | // Flexible grid 2 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 5 | @return percentage($width / $container-width); 6 | } 7 | 8 | // Flexible gutter 9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($gutter / $container-width); 12 | } 13 | 14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 16 | // 17 | // The calculation presumes that your column structure will be missing the last gutter: 18 | // 19 | // -- column -- gutter -- column -- gutter -- column 20 | // 21 | // $fg-column: 60px; // Column Width 22 | // $fg-gutter: 25px; // Gutter Width 23 | // $fg-max-columns: 12; // Total Columns For Main Container 24 | // 25 | // div { 26 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 27 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 28 | // 29 | // p { 30 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 31 | // float: left; 32 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 33 | // } 34 | // 35 | // blockquote { 36 | // float: left; 37 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 38 | // } 39 | // } -------------------------------------------------------------------------------- /src/style/_footer.scss: -------------------------------------------------------------------------------- 1 | hr { 2 | @include size(100% 210px); 3 | background-color: #cccecf; 4 | border: none; 5 | 6 | @media only screen and (max-width: $mobile) { 7 | display: none; 8 | } 9 | } 10 | 11 | footer { 12 | position: relative; 13 | @include size(100% 210px); 14 | padding: 85px 2em; 15 | background: url() #b7b9bb center -100px no-repeat; 16 | 17 | @media only screen and (max-width: $mobile) { 18 | height: 300px; 19 | } 20 | 21 | a { 22 | color: #393d43; 23 | } 24 | } 25 | 26 | .view-all { 27 | display: block; 28 | position: absolute; 29 | top: -125px; 30 | left: 50%; 31 | @include hide-text; 32 | @include size(143px 165px); 33 | margin-left: -71px; 34 | background: url("../images/button-view-all.svg") center center no-repeat; 35 | 36 | @media only screen and (max-width: $mobile) { 37 | display: none; 38 | } 39 | } 40 | 41 | .attr-company { 42 | display: block; 43 | margin: 8px auto; 44 | @include hide-text; 45 | @include size(238px 17px); 46 | background: url("../images/attr-company.svg") center center no-repeat; 47 | 48 | @media only screen and (max-width: $mobile) { 49 | margin-bottom: 40px; 50 | } 51 | } 52 | 53 | .attr-design, 54 | .attr-dev { 55 | float: right; 56 | clear: right; 57 | font-weight: 900; 58 | font-size: 12px; 59 | line-height: 100%; 60 | letter-spacing: 2pt; 61 | text-transform: uppercase; 62 | color: white; 63 | 64 | @media only screen and (max-width: $mobile) { 65 | text-align: center; 66 | } 67 | } 68 | 69 | .attr-design { 70 | margin-bottom: 10px; 71 | } 72 | 73 | .attr-company, 74 | .attr-design, 75 | .attr-dev { 76 | @media only screen and (max-width: $mobile) { 77 | float: none; 78 | display: block; 79 | margin-left: auto; 80 | margin-right: auto; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /src/images/badges/made-with-meteor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/ages-12.svg: -------------------------------------------------------------------------------- 1 | 2 | Ages 12+ 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/badges/made-with-groovy.svg: -------------------------------------------------------------------------------- 1 | 2 | made-with-groovy 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /src/views/includes/_layout.pug: -------------------------------------------------------------------------------- 1 | include ./_mixins 2 | 3 | doctype html 4 | html 5 | head 6 | title For the Badge 7 | meta(charset="UTF-8") 8 | meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1') 9 | link(rel='stylesheet', href='css/style.css?v=2') 10 | link(rel='stylesheet', href='https://use.typekit.net/kif6yxg.css') 11 | 12 | body 13 | .wrapper 14 | 15 | header 16 | block header 17 | 18 | section.menu 19 | block menu 20 | 21 | main.home 22 | block main 23 | 24 | hr 25 | 26 | footer 27 | .container 28 | a.view-all(href='#') View All 29 | a.attr-company(href='https://www.braveux.com', target='_blank') A Brave UX Endeavor 30 | 31 | 32 | script(type='text/javascript'). 33 | try{Typekit.load();}catch(e){} 34 | script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js') 35 | script(type='text/javascript', src='js/bundle.js') 36 | script(type='text/javascript'). 37 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 38 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 39 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 40 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 41 | ga('create', 'UA-54613109-1', 'auto'); 42 | ga('send', 'pageview'); 43 | 44 | //- script(type='text/javascript'). 45 | //- (function(f,b){ 46 | //- var c; 47 | //- f.hj=f.hj||function(){(f.hj.q=f.hj.q||[]).push(arguments)}; 48 | //- f._hjSettings={hjid:20028, hjsv:3}; 49 | //- c=b.createElement("script");c.async=1; 50 | //- c.src="//static.hotjar.com/c/hotjar-20028.js?sv=3"; 51 | //- b.getElementsByTagName("head")[0].appendChild(c); 52 | //- })(window,document); 53 | -------------------------------------------------------------------------------- /src/style/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Custom Helpers 2 | @import "helpers/deprecated-webkit-gradient"; 3 | @import "helpers/gradient-positions-parser"; 4 | @import "helpers/linear-positions-parser"; 5 | @import "helpers/radial-arg-parser"; 6 | @import "helpers/radial-positions-parser"; 7 | @import "helpers/render-gradients"; 8 | @import "helpers/shape-size-stripper"; 9 | 10 | // Custom Functions 11 | @import "functions/compact"; 12 | @import "functions/flex-grid"; 13 | @import "functions/grid-width"; 14 | @import "functions/linear-gradient"; 15 | @import "functions/modular-scale"; 16 | @import "functions/px-to-em"; 17 | @import "functions/radial-gradient"; 18 | @import "functions/tint-shade"; 19 | @import "functions/transition-property-name"; 20 | 21 | // CSS3 Mixins 22 | @import "css3/animation"; 23 | @import "css3/appearance"; 24 | @import "css3/backface-visibility"; 25 | @import "css3/background"; 26 | @import "css3/background-image"; 27 | @import "css3/border-image"; 28 | @import "css3/border-radius"; 29 | @import "css3/box-sizing"; 30 | @import "css3/columns"; 31 | @import "css3/flex-box"; 32 | @import "css3/font-face"; 33 | @import "css3/hidpi-media-query"; 34 | @import "css3/image-rendering"; 35 | @import "css3/inline-block"; 36 | @import "css3/keyframes"; 37 | @import "css3/linear-gradient"; 38 | @import "css3/perspective"; 39 | @import "css3/radial-gradient"; 40 | @import "css3/transform"; 41 | @import "css3/transition"; 42 | @import "css3/user-select"; 43 | @import "css3/placeholder"; 44 | 45 | // Addons & other mixins 46 | @import "addons/button"; 47 | @import "addons/clearfix"; 48 | @import "addons/font-family"; 49 | @import "addons/hide-text"; 50 | @import "addons/html5-input-types"; 51 | @import "addons/position"; 52 | @import "addons/prefixer"; 53 | @import "addons/retina-image"; 54 | @import "addons/size"; 55 | @import "addons/timing-functions"; 56 | @import "addons/triangle"; 57 | 58 | // Soon to be deprecated Mixins 59 | @import "bourbon-deprecated-upcoming"; 60 | -------------------------------------------------------------------------------- /src/images/badges/built-with-love.svg: -------------------------------------------------------------------------------- 1 | 2 | built-with-love 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: false, $G4: false, 4 | $G5: false, $G6: false, 5 | $G7: false, $G8: false, 6 | $G9: false, $G10: false, 7 | $pos: null, 8 | $shape-size: null, 9 | $deprecated-pos1: center center, 10 | $deprecated-pos2: center center, 11 | $deprecated-radius1: 0, 12 | $deprecated-radius2: 460, 13 | $fallback: false) { 14 | 15 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 16 | $G1: nth($data, 1); 17 | $G2: nth($data, 2); 18 | $pos: nth($data, 3); 19 | $shape-size: nth($data, 4); 20 | 21 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 22 | 23 | // Strip deprecated cover/contain for spec 24 | $shape-size-spec: _shape-size-stripper($shape-size); 25 | 26 | // Set $G1 as the default fallback color 27 | $first-color: nth($full, 1); 28 | $fallback-color: nth($first-color, 1); 29 | 30 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 31 | $fallback-color: $fallback; 32 | } 33 | 34 | // Add Commas and spaces 35 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 36 | $pos: if($pos, '#{$pos}, ', null); 37 | $pos-spec: if($pos, 'at #{$pos}', null); 38 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 39 | 40 | background-color: $fallback-color; 41 | background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4 42 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 43 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 44 | } 45 | -------------------------------------------------------------------------------- /src/images/badges/made-with-elixir.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 20 | 21 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: false; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: false; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: false; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: false; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /src/images/featured/featured-uses-html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gulp/tasks/pug.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const fs = require("fs"); 3 | const when = require("gulp-if"); 4 | const notify = require("gulp-notify"); 5 | const pug = require("gulp-pug"); 6 | const data = require("gulp-data"); 7 | const size = require("gulp-size"); 8 | const { argv } = require("yargs"); 9 | 10 | // Check if gulp scripts --prod or --production has been added to the task 11 | const production = argv.prod || argv.production; 12 | const { deploy } = argv; 13 | 14 | const devLocals = { 15 | base: "/", 16 | extension: "", 17 | badges: fs.readdirSync("./src/images/badges"), 18 | productionMode: false, 19 | deployMode: deploy, 20 | }; 21 | 22 | const prodLocals = { 23 | base: "", 24 | extension: ".html", 25 | badges: fs.readdirSync("./src/images/badges"), 26 | productionMode: true, 27 | deployMode: deploy, 28 | }; 29 | 30 | gulp.task("pug", () => 31 | gulp 32 | .src("./src/views/**/!(_)*.pug") 33 | .pipe( 34 | // Get relative path to base directory 35 | data((file) => { 36 | const relativePath = file.history[0].replace(file.base, ""); 37 | const depth = (relativePath.match(/\//g) || []).length - 1; 38 | const relativeRoot = 39 | depth === 0 ? "./" : new Array(depth + 1).join("./../"); 40 | return { 41 | relativeRoot, 42 | }; 43 | }) 44 | ) 45 | .pipe( 46 | when( 47 | !production, 48 | pug({ 49 | pretty: true, 50 | basedir: "./src/views", 51 | locals: devLocals, 52 | }) 53 | ) 54 | ) 55 | .on( 56 | "error", 57 | notify.onError({ 58 | title: "Gulp Task Error", 59 | message: "Error: <%= error.message %>", 60 | }) 61 | ) 62 | .pipe( 63 | when( 64 | production, 65 | pug({ 66 | basedir: "./src/views", 67 | locals: prodLocals, 68 | }) 69 | ) 70 | ) 71 | .on( 72 | "error", 73 | notify.onError({ 74 | title: "Gulp Task Error", 75 | message: "Error: <%= error.message %>", 76 | }) 77 | ) 78 | .pipe(size({ showFiles: true })) 79 | .pipe(gulp.dest("./dist")) 80 | ); 81 | -------------------------------------------------------------------------------- /src/images/badges/gluten-free.svg: -------------------------------------------------------------------------------- 1 | 2 | gluten-free 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/images/badges/made-with-vue.svg: -------------------------------------------------------------------------------- 1 | 2 | made-with-vue 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/favicon/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 29 | 31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/images/contribute.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/made-with-julia.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /src/style/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /src/images/badges/kinda-sfw.svg: -------------------------------------------------------------------------------- 1 | 2 | kinda-sfw 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/style/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | $unquoted-inputs-list: (); 24 | @each $input-type in $inputs-list { 25 | $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); 26 | } 27 | 28 | $all-text-inputs: $unquoted-inputs-list; 29 | 30 | 31 | // Hover Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-hover: (); 34 | @each $input-type in $unquoted-inputs-list { 35 | $input-type-hover: $input-type + ":hover"; 36 | $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); 37 | } 38 | 39 | // Focus Pseudo-class 40 | //************************************************************************// 41 | $all-text-inputs-focus: (); 42 | @each $input-type in $unquoted-inputs-list { 43 | $input-type-focus: $input-type + ":focus"; 44 | $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); 45 | } 46 | 47 | // You must use interpolation on the variable: 48 | // #{$all-text-inputs} 49 | // #{$all-text-inputs-hover} 50 | // #{$all-text-inputs-focus} 51 | 52 | // Example 53 | //************************************************************************// 54 | // #{$all-text-inputs}, textarea { 55 | // border: 1px solid red; 56 | // } 57 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | background-image: _add-prefix($images, webkit); 8 | background-image: _add-prefix($images); 9 | } 10 | 11 | @function _add-prefix($images, $vendor: false) { 12 | $images-prefixed: (); 13 | $gradient-positions: false; 14 | @for $i from 1 through length($images) { 15 | $type: type-of(nth($images, $i)); // Get type of variable - List or String 16 | 17 | // If variable is a list - Gradient 18 | @if $type == list { 19 | $gradient-type: nth(nth($images, $i), 1); // linear or radial 20 | $gradient-pos: null; 21 | $gradient-args: null; 22 | 23 | @if ($gradient-type == linear) or ($gradient-type == radial) { 24 | $gradient-pos: nth(nth($images, $i), 2); // Get gradient position 25 | $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) 26 | } 27 | @else { 28 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) 29 | } 30 | 31 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 32 | $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 33 | $images-prefixed: append($images-prefixed, $gradient, comma); 34 | } 35 | // If variable is a string - Image 36 | @else if $type == string { 37 | $images-prefixed: join($images-prefixed, nth($images, $i), comma); 38 | } 39 | } 40 | @return $images-prefixed; 41 | } 42 | 43 | //Examples: 44 | //@include background-image(linear-gradient(top, orange, red)); 45 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); 46 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); 47 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); 48 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); 49 | -------------------------------------------------------------------------------- /src/images/badges/made-with-rust.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/not-an-issue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/made-with-erlang.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 22 | 23 | -------------------------------------------------------------------------------- /src/images/attr-company.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/fo-shizzle.svg: -------------------------------------------------------------------------------- 1 | 2 | fo-shizzle 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/images/badges/made-with-javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/made-with-c-sharp.svg: -------------------------------------------------------------------------------- 1 | 2 | made-with-c-sharp 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/images/featured/featured-oooo-kill-em.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/for-you.svg: -------------------------------------------------------------------------------- 1 | 2 | for-you 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forthebadge", 3 | "version": "2.0.0", 4 | "description": "For the sake of badges", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "start": "yarn install", 8 | "test": "exit 0", 9 | "dev": "gulp default", 10 | "build": "gulp build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/BraveUX/forthebadge" 15 | }, 16 | "author": "@Brave_UX", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/BraveUX/forthebadge/issues" 20 | }, 21 | "babel": { 22 | "presets": [ 23 | "env" 24 | ] 25 | }, 26 | "keywords": [ 27 | "js", 28 | "sass", 29 | "pug", 30 | "api", 31 | "gulp", 32 | "yarn" 33 | ], 34 | "browserslist": [ 35 | "last 2 versions", 36 | "ie 11" 37 | ], 38 | "homepage": "https://forthebadge.com", 39 | "devDependencies": { 40 | "@babel/core": "^7.11.5", 41 | "@babel/preset-env": "^7.11.5", 42 | "autoprefixer": "^9.8.6", 43 | "browser-sync": "^2.26.12", 44 | "cssnano": "^4.1.10", 45 | "gulp": "^4.0.2", 46 | "gulp-better-rollup": "^4.0.1", 47 | "gulp-changed": "^4.0.2", 48 | "gulp-concat": "^2.6.1", 49 | "gulp-data": "^1.3.1", 50 | "gulp-if": "^3.0.0", 51 | "gulp-imagemin": "^7.1.0", 52 | "gulp-jade": "^1.1.0", 53 | "gulp-load-plugins": "^2.0.4", 54 | "gulp-notify": "^3.2.0", 55 | "gulp-plumber": "^1.2.1", 56 | "gulp-postcss": "^8.0.0", 57 | "gulp-pug": "^4.0.1", 58 | "gulp-rename": "^2.0.0", 59 | "gulp-sass": "^4.1.0", 60 | "gulp-size": "^3.0.0", 61 | "gulp-sourcemaps": "^2.6.5", 62 | "gulp-uglify": "^3.0.2", 63 | "imagemin-mozjpeg": "^9.0.0", 64 | "node-sass": "^4.14.1", 65 | "postcss-preset-env": "^6.7.0", 66 | "require-dir": "^1.2.0", 67 | "rollup": "^2.26.9", 68 | "rollup-plugin-babel": "^4.4.0", 69 | "rollup-plugin-commonjs": "^10.1.0", 70 | "rollup-plugin-eslint": "^7.0.0", 71 | "rollup-plugin-node-resolve": "^5.2.0", 72 | "rollup-plugin-replace": "^2.2.0", 73 | "rollup-plugin-uglify-es": "^0.0.1", 74 | "yargs": "^15.4.1" 75 | }, 76 | "dependencies": { 77 | "acorn": "^8.0.1", 78 | "bl": "2.2.1", 79 | "clipboard": "^2.0.6", 80 | "constantinople": "^4.0.1", 81 | "hoek": "^6.1.3", 82 | "uglify-js": "^3.10.3" 83 | }, 84 | "resolutions": { 85 | "acorn": "^5.7.4", 86 | "constantinople": "^3.1.1", 87 | "clean-css": "^4.1.11", 88 | "uglify-js": "^2.6.0", 89 | "lodash.template": "^4.5.0", 90 | "bl": "^2.2.1" 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/images/badges/as-seen-on-tv.svg: -------------------------------------------------------------------------------- 1 | 2 | as-seen-on-tv 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/style/_about.scss: -------------------------------------------------------------------------------- 1 | .about { 2 | @include transition(all 1s ease); 3 | overflow: hidden; 4 | height: 0; 5 | background-color: #F4F4F0; 6 | text-align: center; 7 | color: #44484D; 8 | 9 | @media only screen and (max-width: $mobile) { 10 | display: none; 11 | height: auto; 12 | padding-top: 50px; 13 | border-bottom: 25px solid $blue; 14 | 15 | &.expanded-mobile { 16 | display: block; 17 | } 18 | 19 | > .container { 20 | width: 90%; 21 | margin: 0 5%; 22 | } 23 | } 24 | 25 | &.expanded { 26 | height: 1180px; 27 | padding: 80px 0 0 0; 28 | } 29 | } 30 | 31 | .about-heading { 32 | margin-bottom: 80px; 33 | font-weight: 900; 34 | font-size: 20px; 35 | letter-spacing: 4pt; 36 | text-transform: uppercase; 37 | 38 | @media only screen and (max-width: $mobile) { 39 | margin-bottom: 60px; 40 | } 41 | } 42 | 43 | .joke-start, 44 | .joke-strikethrough, 45 | .joke-end { 46 | font-weight: 900; 47 | font-size: 40px; 48 | letter-spacing: 10px; 49 | line-height: 49px; 50 | text-transform: uppercase; 51 | color: $blue; 52 | 53 | @media only screen and (max-width: $mobile) { 54 | font-size: 16px; 55 | line-height: 120%; 56 | letter-spacing: 3px; 57 | } 58 | } 59 | 60 | .joke-strikethrough { 61 | position: relative; 62 | display: inline-block; 63 | 64 | &::after { 65 | content: ""; 66 | position: absolute; 67 | top: 18px; 68 | left: 0; 69 | display: block; 70 | opacity: .9; 71 | @include size(100% 7px); 72 | background-color: #6D6E71; 73 | 74 | @media only screen and (max-width: $mobile) { 75 | top: 8px; 76 | height: 3px; 77 | } 78 | } 79 | } 80 | 81 | .joke-start { 82 | margin-bottom: 50px; 83 | 84 | @media only screen and (max-width: $mobile) { 85 | margin-bottom: 30px; 86 | } 87 | } 88 | 89 | .joke-end { 90 | margin-top: 50px; 91 | 92 | @media only screen and (max-width: $mobile) { 93 | margin-top: 30px; 94 | } 95 | } 96 | 97 | .mission { 98 | margin: 80px 0; 99 | font-size: 13px; 100 | line-height: 29px; 101 | font-weight: 300; 102 | font-size: 16px; 103 | color: #44484D; 104 | 105 | @media only screen and (max-width: $mobile) { 106 | margin-top: 40px; 107 | 108 | br { 109 | display: none; 110 | } 111 | } 112 | } 113 | 114 | .face { 115 | margin-bottom: 120px; 116 | 117 | @media only screen and (max-width: $mobile) { 118 | margin-bottom: 80px; 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/images/badges/fo-sho.svg: -------------------------------------------------------------------------------- 1 | 2 | fo-sho 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/images/featured/featured-gluten-free.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($images) { 2 | -webkit-border-image: _border-add-prefix($images, webkit); 3 | -moz-border-image: _border-add-prefix($images, moz); 4 | -o-border-image: _border-add-prefix($images, o); 5 | border-image: _border-add-prefix($images); 6 | } 7 | 8 | @function _border-add-prefix($images, $vendor: false) { 9 | $border-image: null; 10 | $images-type: type-of(nth($images, 1)); 11 | $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) 12 | 13 | // If input is a gradient 14 | @if $images-type == string { 15 | @if ($first-var == "linear") or ($first-var == "radial") { 16 | $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) 17 | $gradient-pos: nth($images, 2); // Get gradient position 18 | $gradient-args: nth($images, 3); // Get actual gradient (red, blue) 19 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 20 | $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 21 | } 22 | // If input is a URL 23 | @else { 24 | $border-image: $images; 25 | } 26 | } 27 | // If input is gradient or url + additional args 28 | @else if $images-type == list { 29 | $type: type-of(nth($images, 1)); // Get type of variable - List or String 30 | 31 | // If variable is a list - Gradient 32 | @if $type == list { 33 | $gradient: nth($images, 1); 34 | $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) 35 | $gradient-pos: nth($gradient, 2); // Get gradient position 36 | $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) 37 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 38 | $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 39 | 40 | @for $i from 2 through length($images) { 41 | $border-image: append($border-image, nth($images, $i)); 42 | } 43 | } 44 | } 45 | @return $border-image; 46 | } 47 | 48 | //Examples: 49 | // @include border-image(url("image.png")); 50 | // @include border-image(url("image.png") 20 stretch); 51 | // @include border-image(linear-gradient(45deg, orange, yellow)); 52 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 53 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 54 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 55 | 56 | -------------------------------------------------------------------------------- /src/views/index.pug: -------------------------------------------------------------------------------- 1 | extends ./includes/_layout 2 | 3 | //- HEADER 4 | block header 5 | .container 6 | p.tagline Badges for the sake of Badges 7 | h1.logo For the Badge 8 | a.down 9 | p.top 10 | p.bottom 11 | a.mark Mark 12 | a.contribute(href="https://github.com/BraveUX/forthebadge", target="_blank") Contribute 13 | a.mobile-about About 14 | 15 | //- MENU 16 | block menu 17 | 18 | .container 19 | .search 20 | label.search-toggle Search 21 | input.search-input(type="search", placeholder="Start typing...") 22 | ul.filters 23 | li: a.view-all-toggle(href="#" onClick="return false;") View All 24 | li: a.about-toggle(href="#" onClick="return false;") About 25 | li: a(href="https://www.twitter.com/brave_ux", target="_blank") Twitter 26 | 27 | //- MAIN 28 | block main 29 | 30 | section.search-results 31 | ul.search-list 32 | each item in badges 33 | li(data-search=`${item}`) 34 | img.view-all-badge(src=`images/badges/${item}`) 35 | div.view-all-copy 36 | a.inline-copy.markdown(href="#" onClick="return false;" data-clipboard-text=`[![forthebadge](https://forthebadge.com/images/badges/${item})](https://forthebadge.com)`) 37 | a.inline-copy.imageurl(href="#" onClick="return false;" data-clipboard-text=`https://forthebadge.com/images/badges/${item}`) 38 | 39 | section.about 40 | .container 41 | p.about-heading About 42 | p.joke-start For the Badge is a 43 | p.joke-strikethrough Grassroots Movement 44 | p.joke-strikethrough Scientific Endeavor 45 | p.joke-strikethrough Humanitarian Society 46 | p.joke-strikethrough Literary Masterpiece 47 | p.joke-strikethrough Knitting Club 48 | p.joke-end Complete Joke. 49 | p.mission. 50 | We don’t develop for the money, power, fame, or codebabes. 51 | We do it For the Badge. 52 |
53 | It all started because of an obsession with two words: “build passing”. 54 |
55 | It all ended with this: badges, for badges’ sake. 56 | img.face(src='images/face.svg') 57 | 58 | section.badges 59 | +featured-badge("fuck-it-ship-it", "navy") 60 | +featured-badge("powered-by-electricity", "white") 61 | +featured-badge("gluten-free", "white") 62 | +featured-badge("oooo-kill-em", "navy") 63 | +featured-badge("built-with-love", "white") 64 | +featured-badge("uses-html", "cyan") 65 | +featured-badge("contains-cat-gifs", "royal") 66 | +featured-badge("uses-badges", "white") 67 | +featured-badge("compatibility-betamax", "white") 68 | +featured-badge("made-with-crayons", "navy") 69 | -------------------------------------------------------------------------------- /src/images/badges/validated-html2.svg: -------------------------------------------------------------------------------- 1 | 2 | validated-html2 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/images/badges/uses-html.svg: -------------------------------------------------------------------------------- 1 | 2 | uses-html 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gulp/tasks/scripts.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const when = require("gulp-if"); 3 | const babel = require("rollup-plugin-babel"); 4 | const commonjs = require("rollup-plugin-commonjs"); 5 | const eslint = require("rollup-plugin-eslint"); 6 | const uglify = require("rollup-plugin-uglify-es"); 7 | const replace = require("rollup-plugin-replace"); 8 | const resolve = require("rollup-plugin-node-resolve"); 9 | const rename = require("gulp-rename"); 10 | const sourcemaps = require("gulp-sourcemaps"); 11 | const notify = require("gulp-notify"); 12 | const rollup = require("gulp-better-rollup"); 13 | const changed = require("gulp-changed"); 14 | const { argv } = require("yargs"); 15 | 16 | // Check if gulp scripts --prod or --production has been added to the task 17 | const production = argv.prod || argv.production; 18 | 19 | const optionsProd = [ 20 | eslint, 21 | uglify(), 22 | resolve({ mainFields: ["jsnext:main"] }), 23 | commonjs(), 24 | replace({ 25 | "process.env.NODE_ENV": JSON.stringify("production"), 26 | }), 27 | babel({ 28 | babelrc: false, 29 | presets: [ 30 | [ 31 | "@babel/preset-env", 32 | { 33 | modules: false, 34 | targets: { 35 | browsers: ["last 2 versions"], 36 | }, 37 | }, 38 | ], 39 | ], 40 | ignore: ["./node_modules/"], 41 | }), 42 | ]; 43 | 44 | const optionsDev = [ 45 | eslint, 46 | resolve({ mainFields: ["jsnext:main"] }), 47 | commonjs(), 48 | replace({ 49 | "process.env.NODE_ENV": JSON.stringify("development"), 50 | }), 51 | babel({ 52 | babelrc: false, 53 | presets: [ 54 | [ 55 | "@babel/preset-env", 56 | { 57 | modules: false, 58 | targets: { 59 | browsers: ["last 2 versions"], 60 | }, 61 | }, 62 | ], 63 | ], 64 | ignore: ["./node_modules/"], 65 | }), 66 | ]; 67 | 68 | gulp.task("scripts", () => 69 | gulp 70 | .src("./src/scripts/*.js") 71 | .pipe(changed("./dist/js")) 72 | .pipe(when(!production, sourcemaps.init())) 73 | .pipe(when(!production, rollup({ plugins: optionsDev }, { format: "cjs" }))) 74 | .on( 75 | "error", 76 | notify.onError({ 77 | title: "Gulp Task Error", 78 | message: "Error: <%= error.message %>", 79 | }) 80 | ) 81 | .pipe(when(production, rollup({ plugins: optionsProd }, { format: "cjs" }))) 82 | .on( 83 | "error", 84 | notify.onError({ 85 | title: "Gulp Task Error", 86 | message: "Error: <%= error.message %>", 87 | }) 88 | ) 89 | .pipe(rename({ basename: "bundle" })) 90 | .pipe(when(!production, sourcemaps.write(""))) 91 | .pipe(gulp.dest("./dist/js/")) 92 | ); 93 | -------------------------------------------------------------------------------- /src/images/badges/ages-20-30.svg: -------------------------------------------------------------------------------- 1 | 2 | ages-20-30 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/images/badges/validated-html5.svg: -------------------------------------------------------------------------------- 1 | 2 | validated-html5 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/images/featured/featured-fuck-it-ship-it.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/made-with-pug.svg: -------------------------------------------------------------------------------- 1 | 2 | made-with-pug 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/images/badges/uses-brains.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/oooo-kill-em.svg: -------------------------------------------------------------------------------- 1 | 2 | 0000-kill-em 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/images/badges/built-with-grav.svg: -------------------------------------------------------------------------------- 1 | 2 | built-with-grav 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/images/badges/uses-git.svg: -------------------------------------------------------------------------------- 1 | 2 | uses-git 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/badges/built-for-android.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/badges/ages-18.svg: -------------------------------------------------------------------------------- 1 | 2 | Ages 18+ 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/featured/featured-built-with-love.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/built-by-crips.svg: -------------------------------------------------------------------------------- 1 | 2 | build-by-crips 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/images/badges/fixed-bugs.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 26 | 28 | 32 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/images/makes-people-smile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/badges/fuck-it-ship-it.svg: -------------------------------------------------------------------------------- 1 | 2 | fuck-it-ship-it 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/images/badges/made-with-reason.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/_copy.scss: -------------------------------------------------------------------------------- 1 | .copy { 2 | @include transition(all 0.25s); 3 | overflow: hidden; 4 | position: relative; 5 | display: inline-block; 6 | @include size(125px 50px); 7 | margin-right: 25px; 8 | font-weight: bold; 9 | font-size: 15px; 10 | letter-spacing: 1pt; 11 | text-transform: uppercase; 12 | text-align: center; 13 | color: white; 14 | cursor: pointer; 15 | 16 | @media only screen and (max-width: $mobile) { 17 | display: none; 18 | } 19 | 20 | &:last-child { 21 | margin-right: 0; 22 | } 23 | 24 | &:hover { 25 | background-color: rgba(0, 0, 0, 0.1); 26 | } 27 | 28 | &::before, 29 | &::after { 30 | @include transition(all 0.25s); 31 | display: block; 32 | position: absolute; 33 | left: 0; 34 | @include size(100%); 35 | } 36 | 37 | &::before { 38 | padding-top: 4px; 39 | } 40 | 41 | &::after { 42 | content: ""; 43 | top: 0; 44 | background-position: center center; 45 | background-repeat: no-repeat; 46 | } 47 | } 48 | 49 | .copied { 50 | &::before { 51 | content: "Copied!" !important; 52 | top: 120% !important; 53 | } 54 | } 55 | 56 | .copied-inline { 57 | background-image: url("../images/icons/icon-copied.svg") !important; 58 | } 59 | 60 | .imageurl { 61 | &::before { 62 | content: "Copy ImageURL"; 63 | top: 100%; 64 | } 65 | 66 | &.white { 67 | &::after { 68 | background-image: url("../images/icons/icon-imageurl-white.svg"); 69 | } 70 | } 71 | 72 | &.cyan { 73 | &::after { 74 | background-image: url("../images/icons/icon-imageurl-cyan.svg"); 75 | } 76 | } 77 | 78 | &.royal { 79 | &::after { 80 | background-image: url("../images/icons/icon-imageurl-royal.svg"); 81 | } 82 | } 83 | 84 | &.navy { 85 | &::after { 86 | background-image: url("../images/icons/icon-imageurl-navy.svg"); 87 | } 88 | } 89 | } 90 | 91 | .markdown { 92 | &::before { 93 | content: "Copy Markdown"; 94 | top: 100%; 95 | } 96 | 97 | &.white { 98 | &::after { 99 | background-image: url("../images/icons/icon-markdown-white.svg"); 100 | } 101 | } 102 | 103 | &.cyan { 104 | &::after { 105 | background-image: url("../images/icons/icon-markdown-cyan.svg"); 106 | } 107 | } 108 | 109 | &.royal { 110 | &::after { 111 | background-image: url("../images/icons/icon-markdown-royal.svg"); 112 | } 113 | } 114 | 115 | &.navy { 116 | &::after { 117 | background-image: url("../images/icons/icon-markdown-navy.svg"); 118 | } 119 | } 120 | } 121 | 122 | .white { 123 | &::before { 124 | color: #f4f4f0; 125 | } 126 | } 127 | 128 | .cyan { 129 | &::before { 130 | color: #26c7d5; 131 | } 132 | } 133 | 134 | .royal { 135 | &::before { 136 | color: #009fef; 137 | } 138 | } 139 | 140 | .navy { 141 | &::before { 142 | color: #5593c9; 143 | } 144 | } 145 | 146 | .copy { 147 | &:hover::before, 148 | &:hover::after { 149 | @include transform(translateY(-100%)); 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /src/images/badges/check-it-out.svg: -------------------------------------------------------------------------------- 1 | 2 | check-it-out 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/images/badges/ctrl-c-ctrl-v.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | ctrl-c-ctrl-v 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/images/badges/made-with-ruby.svg: -------------------------------------------------------------------------------- 1 | 2 | made-with-ruby 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | --------------------------------------------------------------------------------