├── website ├── source │ ├── images │ │ ├── .keep │ │ ├── favicon.png │ │ ├── screencast.gif │ │ ├── favicon-troll.png │ │ ├── quotes │ │ │ ├── chris.png │ │ │ ├── nicolas.jpg │ │ │ ├── sacha.png │ │ │ ├── vjeux.png │ │ │ ├── smashing.jpg │ │ │ └── porteneuve.jpg │ │ ├── css-logo-aprilfool.png │ │ ├── clients │ │ │ ├── scala-bce891cf.svg │ │ │ ├── ruby-00bdd41f.svg │ │ │ ├── php-53888094.svg │ │ │ ├── python-dd5a8a8d.svg │ │ │ ├── javascript-68104683.svg │ │ │ ├── android-f03624e7.svg │ │ │ ├── csharp-4075daa3.svg │ │ │ ├── java-65dd222f.svg │ │ │ ├── swift-4cb5cf0e.svg │ │ │ └── go-5f1359de.svg │ │ ├── triangle-background.svg │ │ ├── quote.svg │ │ ├── github.svg │ │ ├── hero-cover.svg │ │ ├── browser.svg │ │ ├── illustrations │ │ │ ├── flexbox_illustration.svg │ │ │ └── offline_illustration.svg │ │ └── algolia-fast-bg.svg │ ├── stylesheets │ │ ├── components │ │ │ ├── _navbar.sass │ │ │ ├── _footer.sass │ │ │ ├── _header.sass │ │ │ ├── _cards.sass │ │ │ ├── _message.sass │ │ │ ├── _free-trial.sass │ │ │ ├── _hero.sass │ │ │ ├── _icons.scss │ │ │ ├── _quotes.sass │ │ │ ├── _modal.sass │ │ │ └── _buttons.sass │ │ ├── vendors │ │ │ └── bootstrap │ │ │ │ ├── mixins │ │ │ │ ├── _center-block.scss │ │ │ │ ├── _opacity.scss │ │ │ │ ├── _size.scss │ │ │ │ ├── _text-overflow.scss │ │ │ │ ├── _tab-focus.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _resize.scss │ │ │ │ ├── _text-emphasis.scss │ │ │ │ ├── _progress-bar.scss │ │ │ │ ├── _background-variant.scss │ │ │ │ ├── _reset-filter.scss │ │ │ │ ├── _nav-divider.scss │ │ │ │ ├── _alerts.scss │ │ │ │ ├── _nav-vertical-align.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _border-radius.scss │ │ │ │ ├── _responsive-visibility.scss │ │ │ │ ├── _panels.scss │ │ │ │ ├── _hide-text.scss │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _table-row.scss │ │ │ │ ├── _image.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _grid-framework.scss │ │ │ │ ├── _forms.scss │ │ │ │ ├── _grid.scss │ │ │ │ └── _gradients.scss │ │ │ │ ├── _wells.scss │ │ │ │ ├── _breadcrumbs.scss │ │ │ │ ├── _responsive-embed.scss │ │ │ │ ├── _media.scss │ │ │ │ ├── _close.scss │ │ │ │ ├── _component-animations.scss │ │ │ │ ├── _utilities.scss │ │ │ │ ├── _thumbnails.scss │ │ │ │ ├── _pager.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _jumbotron.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _badges.scss │ │ │ │ ├── _code.scss │ │ │ │ ├── _grid.scss │ │ │ │ ├── _alerts.scss │ │ │ │ ├── _progress-bars.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _print.scss │ │ │ │ ├── _tooltip.scss │ │ │ │ ├── _scaffolding.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _popovers.scss │ │ │ │ ├── _modals.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _input-groups.scss │ │ │ │ ├── _responsive-utilities.scss │ │ │ │ ├── _dropdowns.scss │ │ │ │ └── _tables.scss │ │ ├── site.css.scss │ │ ├── partials │ │ │ ├── _bootstrap.sass │ │ │ ├── _typography.sass │ │ │ ├── _colors.sass │ │ │ └── _main.sass │ │ └── modules │ │ │ ├── _mixins.sass │ │ │ └── _base.sass │ ├── fonts │ │ ├── algolia-website-iconfont.eot │ │ ├── algolia-website-iconfont.ttf │ │ └── algolia-website-iconfont.woff │ ├── index.html.haml │ ├── partials │ │ ├── common │ │ │ └── _footer.haml │ │ ├── _hero.haml │ │ └── _modal.haml │ ├── javascripts │ │ ├── tags.js │ │ └── site.js │ └── layouts │ │ └── layout.erb ├── .eslintrc.js ├── config.rb └── buildComponents.js ├── .babelrc ├── scripts ├── demo │ ├── serve │ ├── test-watch │ ├── test │ ├── generate │ ├── lint │ ├── minify │ ├── minify.js │ └── generate-css ├── website │ └── serve ├── lint ├── deploy └── build ├── demo ├── public │ ├── favicon.png │ ├── fonts │ │ └── Raleway.ttf │ └── tags.html ├── fonts │ ├── Raleway-Bold.ttf │ └── Raleway-Regular.ttf ├── Guardfile ├── spec │ ├── spec_helper.rb │ └── css_writer_spec.rb ├── webtask │ └── random-order.js └── .rubocop.yml ├── .eslintrc.js ├── .gitignore ├── Gemfile ├── README.md ├── package.json └── Gemfile.lock /website/source/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_navbar.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scripts/demo/serve: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | cd demo/public 3 | live-server 4 | -------------------------------------------------------------------------------- /scripts/website/serve: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | cd website 4 | middleman 5 | -------------------------------------------------------------------------------- /scripts/demo/test-watch: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | cd "$(dirname "$BASH_SOURCE")"/../../demo 3 | 4 | guard 5 | -------------------------------------------------------------------------------- /demo/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/demo/public/favicon.png -------------------------------------------------------------------------------- /demo/fonts/Raleway-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/demo/fonts/Raleway-Bold.ttf -------------------------------------------------------------------------------- /demo/fonts/Raleway-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/demo/fonts/Raleway-Regular.ttf -------------------------------------------------------------------------------- /demo/public/fonts/Raleway.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/demo/public/fonts/Raleway.ttf -------------------------------------------------------------------------------- /scripts/demo/test: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | cd "$(dirname "$BASH_SOURCE")"/../.. 3 | 4 | bundle exec rspec --default-path ./demo/spec 5 | -------------------------------------------------------------------------------- /website/source/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/favicon.png -------------------------------------------------------------------------------- /website/source/images/screencast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/screencast.gif -------------------------------------------------------------------------------- /scripts/demo/generate: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -eu 3 | 4 | npm run demo-generate-font 5 | npm run demo-generate-css 6 | npm run demo-minify 7 | -------------------------------------------------------------------------------- /scripts/lint: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -eu 3 | cd "$(dirname "$BASH_SOURCE")"/.. 4 | 5 | eslint ./scripts/*.js 6 | yarn run demo-lint 7 | 8 | -------------------------------------------------------------------------------- /website/source/images/favicon-troll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/favicon-troll.png -------------------------------------------------------------------------------- /website/source/images/quotes/chris.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/quotes/chris.png -------------------------------------------------------------------------------- /website/source/images/quotes/nicolas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/quotes/nicolas.jpg -------------------------------------------------------------------------------- /website/source/images/quotes/sacha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/quotes/sacha.png -------------------------------------------------------------------------------- /website/source/images/quotes/vjeux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/quotes/vjeux.png -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['algolia'], 3 | rules: { 4 | 'no-console': 0, 5 | 'no-process-exit': 0, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /website/source/images/quotes/smashing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/quotes/smashing.jpg -------------------------------------------------------------------------------- /website/source/images/css-logo-aprilfool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/css-logo-aprilfool.png -------------------------------------------------------------------------------- /website/source/images/quotes/porteneuve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/images/quotes/porteneuve.jpg -------------------------------------------------------------------------------- /scripts/deploy: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | set -eu 3 | 4 | npm run build 5 | 6 | rm -rf node_modules/gh-pages/.cache 7 | gh-pages --dist gh-pages --branch gh-pages 8 | -------------------------------------------------------------------------------- /website/source/fonts/algolia-website-iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/fonts/algolia-website-iconfont.eot -------------------------------------------------------------------------------- /website/source/fonts/algolia-website-iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/fonts/algolia-website-iconfont.ttf -------------------------------------------------------------------------------- /website/source/fonts/algolia-website-iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/algolia/algoliasearch-client-css/HEAD/website/source/fonts/algolia-website-iconfont.woff -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | Thumbs.db 4 | bower_components 5 | node_modules 6 | npm-debug.log 7 | tmp 8 | *~ 9 | gh-pages 10 | ./website/build 11 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_footer.sass: -------------------------------------------------------------------------------- 1 | #footer 2 | background: $deep-cove 3 | color: #fff 4 | 5 | @media (max-width: $screen-sm) 6 | text-align: center 7 | 8 | img 9 | margin-top: 2em -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_center-block.scss: -------------------------------------------------------------------------------- 1 | // Center-align a block level element 2 | 3 | @mixin center-block() { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_opacity.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height) { 4 | width: $width; 5 | height: $height; 6 | } 7 | 8 | @mixin square($size) { 9 | @include size($size, $size); 10 | } 11 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_text-overflow.scss: -------------------------------------------------------------------------------- 1 | // Text overflow 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-overflow() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /demo/Guardfile: -------------------------------------------------------------------------------- 1 | guard :rspec, cmd: 'bundle exec rspec --color --format documentation' do 2 | watch(%r{^spec/.+_spec\.rb$}) 3 | watch(%r{^lib/(.+)\.rb$}) { |m| "spec/#{m[1]}_spec.rb" } 4 | watch('spec/spec_helper.rb') { 'spec' } 5 | end 6 | 7 | notification :off 8 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_tab-focus.scss: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | @mixin tab-focus() { 4 | // Default 5 | outline: thin dotted; 6 | // WebKit 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | // Labels 2 | 3 | @mixin label-variant($color) { 4 | background-color: $color; 5 | 6 | &[href] { 7 | &:hover, 8 | &:focus { 9 | background-color: darken($color, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | resize: $direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 6 | } 7 | -------------------------------------------------------------------------------- /scripts/demo/lint: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # Do not commit any focused or excluded tests 4 | if grep --color -r 'demo/spec' -E -e '^( |\t)*(fit|fdescribe|xit|xdescribe)'; then 5 | echo '✘ You have focused and/or skipped tests' 6 | exit 1 7 | fi 8 | 9 | rubocop -F './demo/lib/' './demo/spec' 10 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | // [converter] $parent hack 4 | @mixin text-emphasis-variant($parent, $color) { 5 | #{$parent} { 6 | color: $color; 7 | } 8 | a#{$parent}:hover { 9 | color: darken($color, 10%); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_progress-bar.scss: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | @mixin progress-bar-variant($color) { 4 | background-color: $color; 5 | 6 | // Deprecated parent class requirement as of v3.2.0 7 | .progress-striped & { 8 | @include gradient-striped; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /demo/spec/spec_helper.rb: -------------------------------------------------------------------------------- 1 | require 'awesome_print' 2 | require 'fileutils' 3 | require_relative '../lib/query_parser.rb' 4 | require_relative '../lib/css_writer.rb' 5 | 6 | RSpec.configure do |config| 7 | config.filter_run(focus: true) 8 | config.fail_fast = true 9 | config.run_all_when_everything_filtered = true 10 | end 11 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | // [converter] $parent hack 4 | @mixin bg-variant($parent, $color) { 5 | #{$parent} { 6 | background-color: $color; 7 | } 8 | a#{$parent}:hover { 9 | background-color: darken($color, 10%); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_reset-filter.scss: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9 and below. 5 | 6 | @mixin reset-filter() { 7 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 8 | } 9 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_header.sass: -------------------------------------------------------------------------------- 1 | .algc-mobilemenu img, 2 | .algc-mobilemenu svg 3 | margin: 0.65em 0 4 | 5 | .algc-navigation__brands .algc-navigation__li--community .algolia-community-logo 6 | @media (max-width: $screen-sm) 7 | max-height: 26px !important 8 | margin-left: -10px !important 9 | margin-top: 4px !important -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: #e5e5e5) { 6 | height: 1px; 7 | margin: (($line-height-computed / 2) - 1) 0; 8 | overflow: hidden; 9 | background-color: $color; 10 | } 11 | -------------------------------------------------------------------------------- /website/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | globals: { 3 | "$": true, 4 | "Favico": true, 5 | "communityHeader": true, 6 | "App": true 7 | }, 8 | rules: { 9 | 'prefer-arrow-callback': 0, 10 | 'object-shorthand': 0, 11 | 'no-var': 0, 12 | 'no-console': 0, 13 | 'no-process-exit': 0, 14 | }, 15 | }; 16 | 17 | -------------------------------------------------------------------------------- /website/source/index.html.haml: -------------------------------------------------------------------------------- 1 | --- 2 | title: Algolia CSS API Client 3 | --- 4 | = partial "partials/common/header.html" 5 | = partial "partials/hero" 6 | = partial "partials/main" 7 | = partial "partials/common/footer" 8 | = partial "partials/modal" 9 | 10 | -# = link_to "Read Documentation", "https://middlemanapp.com/basics/templating_language/", target: "_blank" 11 | -------------------------------------------------------------------------------- /demo/public/tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_alerts.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | @mixin alert-variant($background, $border, $text-color) { 4 | background-color: $background; 5 | border-color: $border; 6 | color: $text-color; 7 | 8 | hr { 9 | border-top-color: darken($border, 5%); 10 | } 11 | .alert-link { 12 | color: darken($text-color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scripts/build: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | set -eu 3 | 4 | # Creating tmp dir to push to gh-pages branch 5 | mkdir -p ./gh-pages 6 | rm -rf ./gh-pages/* 7 | 8 | yarn upgrade algolia-frontend-components 9 | 10 | # Building website 11 | cd ./website 12 | node ./buildComponents.js 13 | middleman build 14 | mv -fn ./build/* ../gh-pages 15 | rm ../gh-pages/images/.keep 16 | 17 | # Copying the demo 18 | cd ../gh-pages 19 | mkdir ./demo 20 | cp -r ../demo/public/* ./demo 21 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_nav-vertical-align.scss: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 5 | 6 | @mixin navbar-vertical-align($element-height) { 7 | margin-top: (($navbar-height - $element-height) / 2); 8 | margin-bottom: (($navbar-height - $element-height) / 2); 9 | } 10 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_cards.sass: -------------------------------------------------------------------------------- 1 | .card 2 | border-radius: 4px 3 | padding: 52px 32px 4 | background: white 5 | transition: box-shadow 0.2s ease 6 | text-align: center 7 | float: left 8 | 9 | a 10 | text-decoration: none 11 | 12 | h3 13 | font-size: 20px 14 | text-transform: uppercase 15 | color: $bunting 16 | transition: opacity 0.2s ease 17 | 18 | figure svg, 19 | figure img 20 | max-width: 90% 21 | 22 | &:hover 23 | box-shadow: 0 0 48px rgba(52,105,231, .15) -------------------------------------------------------------------------------- /demo/webtask/random-order.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | 3 | module.exports = function(context, req, res) { 4 | res.writeHead(200, { 5 | 'Content-Type': 'text/css' 6 | }); 7 | 8 | var counter = 0; 9 | var max = 147; 10 | var list = []; 11 | _.times(max, function(i) { list.push(i); }); 12 | list = _.shuffle(list); 13 | 14 | var css = []; 15 | _.each(list, function(id, order) { 16 | css.push("#i[value='' i] ~ #h #h" + id + ' { order: ' + order + ' }'); 17 | }); 18 | 19 | res.end(css.join("\n")); 20 | } 21 | 22 | -------------------------------------------------------------------------------- /scripts/demo/minify: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # Babelify the file first 4 | mkdir -p ./demo/tmp/ 5 | babel ./scripts/demo/minify.js --out-file ./demo/tmp/minify.es5.js 6 | 7 | # Actually minifying it 8 | # We have to increase node maximum memory otherwise it might fail with 9 | # FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of 10 | # memory 11 | node \ 12 | --max-old-space-size=8192 \ 13 | ./demo/tmp/minify.es5.js \ 14 | ./demo/public/css/search.css \ 15 | ./demo/public/css/search.min.css 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # For generating the demo 4 | gem 'awesome_print', '~> 1.6' 5 | gem 'i18n' 6 | group :development do 7 | gem 'guard-rspec', '~> 4.6' 8 | gem 'rspec', '~> 3.0' 9 | gem 'rubocop', '~> 0.51' 10 | end 11 | 12 | # For generating the website 13 | # For faster file watcher updates on Windows: 14 | gem 'wdm', '~> 0.1.0', platforms: %i[mswin mingw] 15 | # Windows does not come with time zone data 16 | gem 'tzinfo-data', platforms: %i[mswin mingw jruby] 17 | # Middleman Gems 18 | gem 'middleman', '~> 4.2' 19 | gem 'middleman-livereload', '~> 3.4' 20 | -------------------------------------------------------------------------------- /website/source/partials/common/_footer.haml: -------------------------------------------------------------------------------- 1 | %footer#footer 2 | .container 3 | .spacer40 4 | .credits 5 | .container.pos-rel 6 | .row 7 | .col-md-4 8 | .copyright 9 | © Algolia - 10 | %a{"data-no-turbolink" => "true", :href => "https://algolia.com/policies/privacy"} Privacy Policy 11 | .col-md-4.text-center 12 | %a{"data-no-turbolink" => "true", :href => "https://algolia.com/"} 13 | %img{:src => "https://www.algolia.com/static_assets/images/flat2/algolia/algolia-logo_badge-598a1fe6.svg", :width => "40"}/ 14 | .spacer40 15 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { 4 | > li { 5 | > a, 6 | > span { 7 | padding: $padding-vertical $padding-horizontal; 8 | font-size: $font-size; 9 | } 10 | &:first-child { 11 | > a, 12 | > span { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | > a, 18 | > span { 19 | @include border-right-radius($border-radius); 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-top-radius($radius) { 4 | border-top-right-radius: $radius; 5 | border-top-left-radius: $radius; 6 | } 7 | @mixin border-right-radius($radius) { 8 | border-bottom-right-radius: $radius; 9 | border-top-right-radius: $radius; 10 | } 11 | @mixin border-bottom-radius($radius) { 12 | border-bottom-right-radius: $radius; 13 | border-bottom-left-radius: $radius; 14 | } 15 | @mixin border-left-radius($radius) { 16 | border-bottom-left-radius: $radius; 17 | border-top-left-radius: $radius; 18 | } 19 | -------------------------------------------------------------------------------- /demo/.rubocop.yml: -------------------------------------------------------------------------------- 1 | # Defaults: 2 | # https://github.com/bbatsov/rubocop/blob/master/config/default.yml 3 | Metrics/AbcSize: 4 | Max: 100 5 | 6 | Metrics/ClassLength: 7 | Max: 250 8 | 9 | Metrics/ModuleLength: 10 | Max: 200 11 | 12 | Metrics/MethodLength: 13 | Max: 50 14 | 15 | Metrics/CyclomaticComplexity: 16 | Max: 10 17 | 18 | Metrics/PerceivedComplexity: 19 | Max: 10 20 | 21 | Metrics/LineLength: 22 | Enabled: false 23 | 24 | Style/FileName: 25 | Enabled: false 26 | 27 | Style/MultilineOperationIndentation: 28 | Enabled: false 29 | 30 | Style/GuardClause: 31 | MinBodyLength: 1 32 | 33 | Style/AsciiComments: 34 | Enabled: false 35 | 36 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_responsive-visibility.scss: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | // [converter] $parent hack 6 | @mixin responsive-visibility($parent) { 7 | #{$parent} { 8 | display: block !important; 9 | } 10 | table#{$parent} { display: table; } 11 | tr#{$parent} { display: table-row !important; } 12 | th#{$parent}, 13 | td#{$parent} { display: table-cell !important; } 14 | } 15 | 16 | // [converter] $parent hack 17 | @mixin responsive-invisibility($parent) { 18 | #{$parent} { 19 | display: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /website/source/images/clients/scala-bce891cf.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_message.sass: -------------------------------------------------------------------------------- 1 | .message-holder 2 | width: 100% 3 | position: fixed 4 | top: 56px 5 | z-index: 99 6 | background: #fff 7 | transition: transform 0.2s ease 8 | will-change: transform 9 | box-shadow: 0 16px 32px 0 rgba($bunting, 0.48) 10 | line-height: 50px 11 | 12 | span 13 | display: inline-block 14 | 15 | p 16 | display: inline 17 | font-size: 16px 18 | 19 | 20 | &:not(.visible) 21 | transform: translateY(-80px) 22 | 23 | @media (max-width: $screen-sm) 24 | .container 25 | margin: 0 26 | 27 | p 28 | padding: 0 0.8em 29 | font-size: 18px 30 | 31 | &:not(.visible) 32 | transform: translateY(-110px) 33 | -------------------------------------------------------------------------------- /website/source/images/clients/ruby-00bdd41f.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_panels.scss: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 4 | border-color: $border; 5 | 6 | & > .panel-heading { 7 | color: $heading-text-color; 8 | background-color: $heading-bg-color; 9 | border-color: $heading-border; 10 | 11 | + .panel-collapse > .panel-body { 12 | border-top-color: $border; 13 | } 14 | .badge { 15 | color: $heading-bg-color; 16 | background-color: $heading-text-color; 17 | } 18 | } 19 | & > .panel-footer { 20 | + .panel-collapse > .panel-body { 21 | border-bottom-color: $border; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /website/source/stylesheets/site.css.scss: -------------------------------------------------------------------------------- 1 | @import 'modules/base'; 2 | @import 'modules/mixins'; 3 | 4 | @import 'partials/bootstrap'; 5 | @import 'partials/helpers'; 6 | @import 'partials/colors'; 7 | @import 'partials/typography'; 8 | @import 'partials/main'; 9 | 10 | @import 'components/buttons'; 11 | @import 'components/hero'; 12 | @import 'components/free-trial'; 13 | @import 'components/cards'; 14 | @import 'components/quotes'; 15 | @import 'components/icons'; 16 | @import 'components/modal'; 17 | @import 'components/header'; 18 | @import 'components/footer'; 19 | @import 'components/message'; 20 | 21 | @import './../../../node_modules/algolia-frontend-components/components/communityHeader/communityHeader'; 22 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_wells.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: $well-bg; 12 | border: 1px solid $well-border; 13 | border-radius: $border-radius-base; 14 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: $border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: $border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (will be removed in v4) 10 | @mixin hide-text() { 11 | font: #{0/0} a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | @mixin text-hide() { 20 | @include hide-text; 21 | } 22 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; 8 | margin-bottom: $line-height-computed; 9 | list-style: none; 10 | background-color: $breadcrumb-bg; 11 | border-radius: $border-radius-base; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | + li:before { 17 | content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space 18 | padding: 0 5px; 19 | color: $breadcrumb-color; 20 | } 21 | } 22 | 23 | > .active { 24 | color: $breadcrumb-active-color; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_responsive-embed.scss: -------------------------------------------------------------------------------- 1 | // Embeds responsive 2 | // 3 | // Credit: Nicolas Gallagher and SUIT CSS. 4 | 5 | .embed-responsive { 6 | position: relative; 7 | display: block; 8 | height: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | 12 | .embed-responsive-item, 13 | iframe, 14 | embed, 15 | object, 16 | video { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | bottom: 0; 21 | height: 100%; 22 | width: 100%; 23 | border: 0; 24 | } 25 | 26 | // Modifier class for 16:9 aspect ratio 27 | &.embed-responsive-16by9 { 28 | padding-bottom: 56.25%; 29 | } 30 | 31 | // Modifier class for 4:3 aspect ratio 32 | &.embed-responsive-4by3 { 33 | padding-bottom: 75%; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | // [converter] extracted a& to a.list-group-item-#{$state} 9 | } 10 | 11 | a.list-group-item-#{$state} { 12 | color: $color; 13 | 14 | .list-group-item-heading { 15 | color: inherit; 16 | } 17 | 18 | &:hover, 19 | &:focus { 20 | color: $color; 21 | background-color: darken($background, 5%); 22 | } 23 | &.active, 24 | &.active:hover, 25 | &.active:focus { 26 | color: #fff; 27 | background-color: $color; 28 | border-color: $color; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /website/source/images/clients/php-53888094.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.#{$state}, 10 | > th.#{$state}, 11 | &.#{$state} > td, 12 | &.#{$state} > th { 13 | background-color: $background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.#{$state}:hover, 21 | > th.#{$state}:hover, 22 | &.#{$state}:hover > td, 23 | &:hover > .#{$state}, 24 | &.#{$state}:hover > th { 25 | background-color: darken($background, 5%); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /website/source/javascripts/tags.js: -------------------------------------------------------------------------------- 1 | // Kissmetrics 2 | var _kmq = _kmq || []; 3 | var _kmk = _kmk || 'cb5a3adb92e8915a37a36ba1a50f2ce4fae4a1b9'; 4 | function _kms(u){ 5 | setTimeout(function(){ 6 | var d = document, f = d.getElementsByTagName('script')[0], 7 | s = d.createElement('script'); 8 | s.type = 'text/javascript'; s.async = true; s.src = u; 9 | f.parentNode.insertBefore(s, f); 10 | }, 1); 11 | } 12 | _kms('//i.kissmetrics.com/i.js'); 13 | _kms('//scripts.kissmetrics.com/' + _kmk + '.2.js'); 14 | 15 | 16 | //Google tag manager 17 | (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 18 | new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 19 | j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 20 | 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 21 | })(window,document,'script','dataLayer','GTM-N8JP8G'); 22 | -------------------------------------------------------------------------------- /website/source/stylesheets/partials/_bootstrap.sass: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import "../vendors/bootstrap/variables" 3 | @import "../vendors/bootstrap/mixins" 4 | // Reset and dependencies 5 | @import "../vendors/bootstrap/normalize" 6 | //@import "../vendors/bootstrap/print" 7 | //@import "../vendors/bootstrap/glyphicons" 8 | // Core CSS 9 | @import "../vendors/bootstrap/scaffolding" 10 | @import "../vendors/bootstrap/type" 11 | @import "../vendors/bootstrap/code" 12 | @import "../vendors/bootstrap/grid" 13 | @import "../vendors/bootstrap/tables" 14 | @import "../vendors/bootstrap/forms" 15 | @import "../vendors/bootstrap/buttons" 16 | // Components 17 | @import "../vendors/bootstrap/thumbnails" 18 | @import "../vendors/bootstrap/media" 19 | @import "../vendors/bootstrap/list-group" 20 | // Utility classes 21 | @import "../vendors/bootstrap/utilities" 22 | @import "../vendors/bootstrap/responsive-utilities" 23 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | // Proper spacing between instances of .media 3 | margin-top: 15px; 4 | 5 | &:first-child { 6 | margin-top: 0; 7 | } 8 | } 9 | 10 | .media-right, 11 | .media > .pull-right { 12 | padding-left: 10px; 13 | } 14 | 15 | .media-left, 16 | .media > .pull-left { 17 | padding-right: 10px; 18 | } 19 | 20 | .media-left, 21 | .media-right, 22 | .media-body { 23 | display: table-cell; 24 | vertical-align: top; 25 | } 26 | 27 | .media-middle { 28 | vertical-align: middle; 29 | } 30 | 31 | .media-bottom { 32 | vertical-align: bottom; 33 | } 34 | 35 | // Reset margins on headings for tighter default spacing 36 | .media-heading { 37 | margin-top: 0; 38 | margin-bottom: 5px; 39 | } 40 | 41 | // Media list variation 42 | // 43 | // Undo default ul/ol styles 44 | .media-list { 45 | padding-left: 0; 46 | list-style: none; 47 | } 48 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: ($font-size-base * 1.5); 9 | font-weight: $close-font-weight; 10 | line-height: 1; 11 | color: $close-color; 12 | text-shadow: $close-text-shadow; 13 | @include opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: $close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | @include opacity(.5); 21 | } 22 | 23 | // [converter] extracted button& to button.close 24 | } 25 | 26 | // Additional properties for button version 27 | // iOS requires the button element instead of an anchor tag. 28 | // If you want the anchor version, it requires `href="#"`. 29 | button.close { 30 | padding: 0; 31 | cursor: pointer; 32 | background: transparent; 33 | border: 0; 34 | -webkit-appearance: none; 35 | } 36 | -------------------------------------------------------------------------------- /website/source/stylesheets/modules/_mixins.sass: -------------------------------------------------------------------------------- 1 | 2 | @mixin diagonal($rotation, $background, $height, $pos: after) 3 | &:#{$pos} 4 | content: '' 5 | display: block 6 | position: absolute 7 | width: 100% 8 | height: $height 9 | background: #{$background} 10 | transform: skewY($rotation) 11 | z-index: 0 12 | 13 | @media (min-width: $screen-lg) 14 | transform: skewY($rotation/2) 15 | 16 | @content 17 | 18 | 19 | 20 | @mixin anim($name, $p1, $p2, $p3) 21 | @keyframes #{$name} 22 | 0%, 20%, 70%, 100% 23 | transform: #{$p1} 24 | 25 | 10%, 30%, 50% 26 | transform: #{$p2} 27 | 28 | 60% 29 | transform: #{$p3} 30 | 31 | 32 | 33 | @mixin animEllipse($name, $p1, $p2, $p3) 34 | @keyframes #{$name} 35 | 0%, 20%, 80%, 100% 36 | transform: #{$p1} 37 | 38 | 10%, 40%, 50% 39 | transform: #{$p2} 40 | opacity: 0.6 41 | 42 | 60% 43 | transform: #{$p3} 44 | opacity: 0.6 45 | 46 | 47 | -------------------------------------------------------------------------------- /website/source/images/clients/python-dd5a8a8d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Algolia Search API Client for CSS ><)))°> 2 | 3 | ![Looks legit][1] 4 | ![Not for real][2] 5 | [![Algolia Awesome][3]](https://github.com/algolia/awesome-algolia) 6 | 7 | Thank you for your interest in our CSS API Client. 8 | 9 | This project is not real, but our [2017 April Fools prank][4]. You can read 10 | more about its making [on our blog][5]. 11 | 12 | 13 | We also have [a surprise][6] for you. 14 | 15 | 16 | [1]: https://img.shields.io/badge/Looks%20legit%3F-passing-green.svg 17 | [2]: https://img.shields.io/badge/For%20real%3F-no%20way-red.svg 18 | [3]: https://camo.githubusercontent.com/13c4e50d88df7178ae1882a203ed57b641674f94/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667 19 | [4]: https://blog.algolia.com/js-is-dead-all-hail-css/ 20 | [5]: https://blog.algolia.com/real-demo-fake-css-api-client/ 21 | [6]: https://www.youtube.com/watch?v=dQw4w9WgXcQ 22 | -------------------------------------------------------------------------------- /website/source/images/triangle-background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | light 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /website/source/partials/_hero.haml: -------------------------------------------------------------------------------- 1 | .message-holder 2 | .container 3 | .row.text-center 4 | %span.text-large 🎉   5 | %p Happy April Fools! It was all a joke. Take a peek behind the curtain to see how it was built. 6 | .hero.pos-rel.color-white.h600.text-center 7 | .spacer120 8 | .container 9 | = inline_svg "project-logo.svg" 10 | .shadow 11 | 12 | .spacer40 13 | 14 | %h1 CSS API Client 15 | %h3 The power of Algolia distilled into a single .css file 16 | .spacer40 17 | %a.btn.btn-static-primary.btn-static-shadow-dark.gradient-purple-revert#cta-demo{:href => "./demo", :title => "Try the live demo"} Try it live! 18 |   19 | %a.btn.btn-static-primary.btn-static-shadow-dark.fill-white.color-royal-blue#cta{:href => "#download", :title => "Download the CSS API Client"} Download v1.4.17 20 | .spacer64 21 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_component-animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | @include transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | visibility: hidden; 21 | 22 | &.in { display: block; visibility: visible; } 23 | // [converter] extracted tr&.in to tr.collapse.in 24 | // [converter] extracted tbody&.in to tbody.collapse.in 25 | } 26 | 27 | tr.collapse.in { display: table-row; } 28 | 29 | tbody.collapse.in { display: table-row-group; } 30 | 31 | .collapsing { 32 | position: relative; 33 | height: 0; 34 | overflow: hidden; 35 | @include transition-property(height, visibility); 36 | @include transition-duration(.35s); 37 | @include transition-timing-function(ease); 38 | } 39 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | @include clearfix; 11 | } 12 | .center-block { 13 | @include center-block; 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | @include text-hide; 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | visibility: hidden !important; 48 | } 49 | 50 | 51 | // For Affix plugin 52 | // ------------------------- 53 | 54 | .affix { 55 | position: fixed; 56 | } 57 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_thumbnails.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | display: block; 9 | padding: $thumbnail-padding; 10 | margin-bottom: $line-height-computed; 11 | line-height: $line-height-base; 12 | background-color: $thumbnail-bg; 13 | border: 1px solid $thumbnail-border; 14 | border-radius: $thumbnail-border-radius; 15 | @include transition(border .2s ease-in-out); 16 | 17 | > img, 18 | a > img { 19 | @include img-responsive; 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active 25 | 26 | // Image captions 27 | .caption { 28 | padding: $thumbnail-caption-padding; 29 | color: $thumbnail-caption-color; 30 | } 31 | } 32 | 33 | // Add a hover state for linked versions only 34 | a.thumbnail:hover, 35 | a.thumbnail:focus, 36 | a.thumbnail.active { 37 | border-color: $link-color; 38 | } 39 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_pager.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: $line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | @include clearfix; 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: $pager-bg; 19 | border: 1px solid $pager-border; 20 | border-radius: $pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: $pager-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: $pager-disabled-color; 50 | background-color: $pager-bg; 51 | cursor: $cursor-disabled; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /demo/spec/css_writer_spec.rb: -------------------------------------------------------------------------------- 1 | require 'spec_helper' 2 | 3 | describe(CSSWriter) do 4 | describe 'highlight' do 5 | it 'should concatenate before and after' do 6 | # Given 7 | input = { 8 | before: 'nic', 9 | after: 'olas' 10 | } 11 | 12 | # When 13 | actual = CSSWriter.highlight(input) 14 | 15 | # Then 16 | expect(actual).to eq 'nicolas' 17 | end 18 | 19 | it 'should replace highlight wth private space unicode' do 20 | # Given 21 | input = { 22 | before: 'nic', 23 | highlight: 'foo', 24 | after: 'olas' 25 | } 26 | 27 | # When 28 | actual = CSSWriter.highlight(input) 29 | 30 | # Then 31 | expect(actual).to eq 'nic\\e666 \\e66f \\e66f olas' 32 | end 33 | 34 | it 'should not highlight spaces' do 35 | # Given 36 | input = { 37 | before: 'kung', 38 | highlight: 'foo', 39 | after: ' panda' 40 | } 41 | 42 | # When 43 | actual = CSSWriter.highlight(input) 44 | 45 | # Then 46 | expect(actual).to eq 'kung\\e666 \\e66f \\e66f panda' 47 | end 48 | end 49 | end 50 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | @import "mixins/hide-text"; 6 | @import "mixins/opacity"; 7 | @import "mixins/image"; 8 | @import "mixins/labels"; 9 | @import "mixins/reset-filter"; 10 | @import "mixins/resize"; 11 | @import "mixins/responsive-visibility"; 12 | @import "mixins/size"; 13 | @import "mixins/tab-focus"; 14 | @import "mixins/text-emphasis"; 15 | @import "mixins/text-overflow"; 16 | @import "mixins/vendor-prefixes"; 17 | 18 | // Components 19 | @import "mixins/alerts"; 20 | @import "mixins/buttons"; 21 | @import "mixins/panels"; 22 | @import "mixins/pagination"; 23 | @import "mixins/list-group"; 24 | @import "mixins/nav-divider"; 25 | @import "mixins/forms"; 26 | @import "mixins/progress-bar"; 27 | @import "mixins/table-row"; 28 | 29 | // Skins 30 | @import "mixins/background-variant"; 31 | @import "mixins/border-radius"; 32 | @import "mixins/gradients"; 33 | 34 | // Layout 35 | @import "mixins/clearfix"; 36 | @import "mixins/center-block"; 37 | @import "mixins/nav-vertical-align"; 38 | @import "mixins/grid-framework"; 39 | @import "mixins/grid"; 40 | -------------------------------------------------------------------------------- /website/source/images/clients/javascript-68104683.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding: $jumbotron-padding ($jumbotron-padding / 2); 8 | margin-bottom: $jumbotron-padding; 9 | color: $jumbotron-color; 10 | background-color: $jumbotron-bg; 11 | 12 | h1, 13 | .h1 { 14 | color: $jumbotron-heading-color; 15 | } 16 | p { 17 | margin-bottom: ($jumbotron-padding / 2); 18 | font-size: $jumbotron-font-size; 19 | font-weight: 200; 20 | } 21 | 22 | > hr { 23 | border-top-color: darken($jumbotron-bg, 10%); 24 | } 25 | 26 | .container &, 27 | .container-fluid & { 28 | border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container 29 | } 30 | 31 | .container { 32 | max-width: 100%; 33 | } 34 | 35 | @media screen and (min-width: $screen-sm-min) { 36 | padding: ($jumbotron-padding * 1.6) 0; 37 | 38 | .container &, 39 | .container-fluid & { 40 | padding-left: ($jumbotron-padding * 2); 41 | padding-right: ($jumbotron-padding * 2); 42 | } 43 | 44 | h1, 45 | .h1 { 46 | font-size: ($font-size-base * 4.5); 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /website/source/images/clients/android-f03624e7.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | @mixin img-responsive($display: block) { 10 | display: $display; 11 | max-width: 100%; // Part 1: Set a maximum relative to the parent 12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 13 | } 14 | 15 | 16 | // Retina image 17 | // 18 | // Short retina mixin for setting background-image and -size. Note that the 19 | // spelling of `min--moz-device-pixel-ratio` is intentional. 20 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 21 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}")); 22 | 23 | @media 24 | only screen and (-webkit-min-device-pixel-ratio: 2), 25 | only screen and ( min--moz-device-pixel-ratio: 2), 26 | only screen and ( -o-min-device-pixel-ratio: 2/1), 27 | only screen and ( min-device-pixel-ratio: 2), 28 | only screen and ( min-resolution: 192dpi), 29 | only screen and ( min-resolution: 2dppx) { 30 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); 31 | background-size: $width-1x $height-1x; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /website/config.rb: -------------------------------------------------------------------------------- 1 | ### 2 | # Page options, layouts, aliases and proxies 3 | ### 4 | 5 | # Per-page layout changes: 6 | # 7 | # With no layout 8 | page '/*.xml', layout: false 9 | page '/*.json', layout: false 10 | page '/*.txt', layout: false 11 | 12 | # With alternative layout 13 | # page "/path/to/file.html", layout: :otherlayout 14 | 15 | # Proxy pages (http://middlemanapp.com/basics/dynamic-pages/) 16 | # proxy "/this-page-has-no-template.html", "/template-file.html", locals: { 17 | # which_fake_page: "Rendering a fake page with a local variable" } 18 | 19 | # General configuration 20 | 21 | # Reload the browser automatically whenever files change 22 | configure :development do 23 | activate :livereload 24 | end 25 | 26 | ### 27 | # Helpers 28 | ### 29 | 30 | 31 | 32 | # Methods defined in the helpers block are available in templates 33 | helpers do 34 | def inline_svg(path, className = '') 35 | dir = 'source/images' 36 | full_path = "#{root}/#{dir}/#{path}" 37 | raise "Could not find SVG file @ #{full_path}" unless File.exist?(full_path) 38 | "#{IO.read(full_path)}".html_safe 39 | end 40 | end 41 | 42 | # Build-specific configuration 43 | configure :build do 44 | activate :relative_assets 45 | # Minify CSS on build 46 | # activate :minify_css 47 | 48 | # Minify Javascript on build 49 | # activate :minify_javascript 50 | end 51 | -------------------------------------------------------------------------------- /website/source/images/clients/csharp-4075daa3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | api/windows 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /website/source/images/quote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($color, $background, $border) { 7 | color: $color; 8 | background-color: $background; 9 | border-color: $border; 10 | 11 | &:hover, 12 | &:focus, 13 | &.focus, 14 | &:active, 15 | &.active, 16 | .open > &.dropdown-toggle { 17 | color: $color; 18 | background-color: darken($background, 10%); 19 | border-color: darken($border, 12%); 20 | } 21 | &:active, 22 | &.active, 23 | .open > &.dropdown-toggle { 24 | background-image: none; 25 | } 26 | &.disabled, 27 | &[disabled], 28 | fieldset[disabled] & { 29 | &, 30 | &:hover, 31 | &:focus, 32 | &.focus, 33 | &:active, 34 | &.active { 35 | background-color: $background; 36 | border-color: $border; 37 | 38 | &.btn-primary { 39 | color: #fff; 40 | } 41 | } 42 | } 43 | 44 | .badge { 45 | color: $background; 46 | background-color: $color; 47 | } 48 | } 49 | 50 | // Button sizes 51 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 52 | padding: $padding-vertical $padding-horizontal; 53 | font-size: $font-size; 54 | line-height: $line-height; 55 | border-radius: $border-radius; 56 | } 57 | -------------------------------------------------------------------------------- /website/source/javascripts/site.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | var modal = $('#modal'); 3 | var cta = $('#cta'); 4 | var ctaMessages = [ 5 | 'Really?', 6 | 'Are you sure?', 7 | 'Ok, one more click...', 8 | ]; 9 | var ctaMessageIndex = 0; 10 | 11 | // Init the Community header 12 | new communityHeader(); 13 | 14 | window.App = { 15 | trollMe: function() { 16 | new Favico().image($('#trollface')[0]); 17 | }, 18 | 19 | showModal: function() { 20 | modal.removeClass('hidden'); 21 | App.trollMe(); 22 | $(document).on('keydown', App.onKeyDownEscape); 23 | }, 24 | closeModal: function() { 25 | modal.addClass('hidden'); 26 | $(document).off('keydown', App.onKeyDownEscape); 27 | }, 28 | onKeyDownEscape: function(event) { 29 | if (event.keyCode !== 27) { 30 | return; 31 | } 32 | App.closeModal(); 33 | }, 34 | onclickCTA: function(event) { 35 | var message = ctaMessages[ctaMessageIndex++]; 36 | event.preventDefault(); 37 | if (!message) { 38 | App.showModal(); 39 | ctaMessageIndex = 0; 40 | cta.text('Download v1.4.17'); 41 | } 42 | cta.text(message); 43 | }, 44 | 45 | displayMessage: function() { 46 | $('.message-holder').addClass('visible'); 47 | }, 48 | }; 49 | 50 | cta.on('click', App.onclickCTA); 51 | $('.modal--close').on('click', App.closeModal); 52 | 53 | setTimeout(App.displayMessage, 2000); 54 | }); 55 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: $label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // [converter] extracted a& to a.label 18 | 19 | // Empty labels collapse automatically (not available in IE8) 20 | &:empty { 21 | display: none; 22 | } 23 | 24 | // Quick fix for labels in buttons 25 | .btn & { 26 | position: relative; 27 | top: -1px; 28 | } 29 | } 30 | 31 | // Add hover effects, but only for links 32 | a.label { 33 | &:hover, 34 | &:focus { 35 | color: $label-link-hover-color; 36 | text-decoration: none; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | // Colors 42 | // Contextual variations (linked labels get darker on :hover) 43 | 44 | .label-default { 45 | @include label-variant($label-default-bg); 46 | } 47 | 48 | .label-primary { 49 | @include label-variant($label-primary-bg); 50 | } 51 | 52 | .label-success { 53 | @include label-variant($label-success-bg); 54 | } 55 | 56 | .label-info { 57 | @include label-variant($label-info-bg); 58 | } 59 | 60 | .label-warning { 61 | @include label-variant($label-warning-bg); 62 | } 63 | 64 | .label-danger { 65 | @include label-variant($label-danger-bg); 66 | } 67 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: $font-size-small; 12 | font-weight: $badge-font-weight; 13 | color: $badge-color; 14 | line-height: $badge-line-height; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: $badge-bg; 19 | border-radius: $badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | // Quick fix for badges in buttons 27 | .btn & { 28 | position: relative; 29 | top: -1px; 30 | } 31 | .btn-xs & { 32 | top: 0; 33 | padding: 1px 5px; 34 | } 35 | 36 | // [converter] extracted a& to a.badge 37 | 38 | // Account for badges in navs 39 | .list-group-item.active > &, 40 | .nav-pills > .active > a > & { 41 | color: $badge-active-color; 42 | background-color: $badge-active-bg; 43 | } 44 | .list-group-item > & { 45 | float: right; 46 | } 47 | .list-group-item > & + & { 48 | margin-right: 5px; 49 | } 50 | .nav-pills > li > a > & { 51 | margin-left: 3px; 52 | } 53 | } 54 | 55 | // Hover state, but only for links 56 | a.badge { 57 | &:hover, 58 | &:focus { 59 | color: $badge-link-hover-color; 60 | text-decoration: none; 61 | cursor: pointer; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /website/source/images/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /website/source/images/clients/java-65dd222f.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/buildComponents.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const algoliaComponents = require('algolia-frontend-components'); 3 | 4 | const output = algoliaComponents.communityHeader({ 5 | menu: { 6 | project: { 7 | label: 'Algolia CSS API Client', 8 | url: 'https://www.algolia.com/css', 9 | }, 10 | }, 11 | sideMenu: [ 12 | {name: 'Live demo', url: './demo'}, 13 | {name: 'Blog', url: 'https://blog.algolia.com/js-is-dead-all-hail-css', target: '_blank'}, 14 | {name: 'Community forum', url: 'https://discourse.algolia.com/t/css-api-client-released/895', target: '_blank'}, 15 | {image: '', url: 'https://github.com/algolia/algoliasearch-client-css', target: '_blank'}, 16 | ], 17 | mobileMenu: [ 18 | {name: 'Live demo', url: './demo'}, 19 | {name: 'Blog', url: 'https://blog.algolia.com/js-is-dead-all-hail-css', target: '_blank'}, 20 | {name: 'Community forum', url: 'https://discourse.algolia.com/t/css-api-client-released/895', target: '_blank'}, 21 | {image: '', url: 'https://github.com/algolia/algoliasearch-client-css', target: '_blank'}, 22 | ], 23 | docSearch: null, 24 | }); 25 | 26 | const file = fs.readFileSync('../node_modules/algolia-frontend-components/dist/_communityHeader.js'); 27 | 28 | try { 29 | fs.writeFileSync('source/partials/common/_header.html', output, 'utf-8'); 30 | fs.writeFileSync('source/javascripts/communityHeader.js', file, 'utf-8'); 31 | } catch (e) { 32 | throw new Error('Failed to write header file'); 33 | } 34 | -------------------------------------------------------------------------------- /website/source/images/hero-cover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 6 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_free-trial.sass: -------------------------------------------------------------------------------- 1 | 2 | .cta-free-trial 3 | margin-top: -16px 4 | padding: 160px 0 80px 5 | width: 100% 6 | color: $white 7 | background-image: url('../images/algolia-fast-bg.svg') 8 | background-size: cover 9 | position: relative 10 | 11 | small 12 | font-size: 1.2em 13 | margin-bottom: 6px 14 | .container 15 | z-index: 10 16 | width: 100% 17 | max-width: 800px 18 | 19 | @include diagonal(-6deg, $white, 200px, before) 20 | top: -100px 21 | left: 0 22 | z-index: 0 23 | 24 | @media (max-width: $screen-sm) 25 | display: none 26 | 27 | 28 | h3 29 | font-size: 32px 30 | color: $white 31 | font-weight: 300 32 | line-height: 32px 33 | margin: 0 34 | p 35 | font-size: 18px 36 | line-height: 28px 37 | color: $white 38 | font-weight: $regular 39 | padding: 0 5em 40 | 41 | @media (max-width: $screen-md) 42 | padding: 0 4em 43 | 44 | @media (max-width: $screen-sm) 45 | padding: 0 1em 46 | 47 | .btn 48 | clear: both 49 | padding: 18px 30px 50 | height: auto 51 | line-height: inherit 52 | font-weight: bold 53 | 54 | .spacer24, 55 | .spacer8 56 | display: inline-block 57 | 58 | .link 59 | clear: both 60 | padding: 8px 0 0 61 | float: right 62 | color: rgba($titan-white,.8) 63 | border-bottom: 1px dashed rgba(255,255,255,.6) 64 | 65 | &:hover 66 | text-decoration: none 67 | color: $titan-white 68 | 69 | @media (max-width: $screen-md) 70 | text-align: center 71 | 72 | .btn 73 | float: none !important 74 | margin-bottom: 1em 75 | 76 | .link 77 | float: none !important 78 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_code.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: $font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: $code-color; 19 | background-color: $code-bg; 20 | border-radius: $border-radius-base; 21 | } 22 | 23 | // User input typically entered via keyboard 24 | kbd { 25 | padding: 2px 4px; 26 | font-size: 90%; 27 | color: $kbd-color; 28 | background-color: $kbd-bg; 29 | border-radius: $border-radius-small; 30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); 31 | 32 | kbd { 33 | padding: 0; 34 | font-size: 100%; 35 | font-weight: bold; 36 | box-shadow: none; 37 | } 38 | } 39 | 40 | // Blocks of code 41 | pre { 42 | display: block; 43 | padding: (($line-height-computed - 1) / 2); 44 | margin: 0 0 ($line-height-computed / 2); 45 | font-size: ($font-size-base - 1); // 14px to 13px 46 | line-height: $line-height-base; 47 | word-break: break-all; 48 | word-wrap: break-word; 49 | color: $pre-color; 50 | background-color: $pre-bg; 51 | border: 1px solid $pre-border-color; 52 | border-radius: $border-radius-base; 53 | 54 | // Account for some code outputs that place code tags in pre tags 55 | code { 56 | padding: 0; 57 | font-size: inherit; 58 | color: inherit; 59 | white-space: pre-wrap; 60 | background-color: transparent; 61 | border-radius: 0; 62 | } 63 | } 64 | 65 | // Enable scrollable blocks of code 66 | .pre-scrollable { 67 | max-height: $pre-scrollable-max-height; 68 | overflow-y: scroll; 69 | } 70 | -------------------------------------------------------------------------------- /website/source/stylesheets/partials/_typography.sass: -------------------------------------------------------------------------------- 1 | 2 | * 3 | -webkit-font-smoothing: antialiased 4 | -moz-osx-font-smoothing: grayscale 5 | text-rendering: optimizeLegibility 6 | 7 | b, strong 8 | font-weight: $bold !important 9 | 10 | pre 11 | margin: 16px 0 12 | border: none !important 13 | 14 | h1, .h1 15 | font-size: $font-size-h1 16 | font-weight: $bold 17 | text-align: center 18 | line-height: 48px 19 | 20 | h2, .h2 21 | font-weight: $light 22 | line-height: 58px 23 | position: relative 24 | color: $bunting 25 | &.underlined 26 | text-align: center 27 | margin-bottom: 32px 28 | &:after 29 | content: '' 30 | position: absolute 31 | bottom: -.5em 32 | left: 50% 33 | height: 2px 34 | width: 30px 35 | margin-left: -15px 36 | display: block 37 | background-color: $shamrock 38 | 39 | h3, .h3 40 | font-weight: $medium 41 | line-height: 24px 42 | 43 | &.bold 44 | font-size: 48px 45 | font-weight: bold 46 | line-height: 58px 47 | 48 | h4, .h4 49 | font-weight: $bold 50 | margin: 1em 0 51 | color: $logan 52 | text-transform: uppercase 53 | letter-spacing: .1em 54 | 55 | .algc-dropdownroot__widelist li h4 56 | font-weight: inherit 57 | margin: inherit 58 | color: inherit 59 | text-transform: inherit 60 | letter-spacing: inherit 61 | 62 | h5, .h5, h6, .h6 63 | margin: 1em 0 64 | 65 | p 66 | font-family: $font-family-base 67 | font-size: 20px 68 | line-height: 40px 69 | color: rgba($bunting, 0.6) 70 | 71 | .subtitle-white 72 | font-size: 22px 73 | line-height: 28px 74 | color: rgba($white,.75) 75 | margin-bottom: 40px 76 | 77 | .lead 78 | opacity: .8 79 | font-size: 18px 80 | line-height: 24px 81 | 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "algoliasearch-css-client", 3 | "version": "0.0.1", 4 | "description": "Algolia CSS API Client", 5 | "author": "Algolia Team", 6 | "private": true, 7 | "repository": { 8 | "type": "git", 9 | "url": "ssh://git@github.com:algolia/algoliasearch-css-client.git" 10 | }, 11 | "scripts": { 12 | "demo-generate-all": "./scripts/demo/generate", 13 | "demo-generate-font": "babel-node ./scripts/demo/generate-font.js ./demo/fonts/Raleway-Regular.ttf ./demo/fonts/Raleway-Bold.ttf", 14 | "demo-generate-css": "./scripts/demo/generate-css", 15 | "demo-minify": "./scripts/demo/minify", 16 | "demo-test": "./scripts/demo/test", 17 | "demo-test-watch": "./scripts/demo/test-watch", 18 | "demo-lint": "./scripts/demo/lint", 19 | "demo-serve": "./scripts/demo/serve", 20 | "website-serve": "./scripts/website/serve", 21 | "lint": "./scripts/lint", 22 | "build": "./scripts/build", 23 | "deploy": "./scripts/deploy" 24 | }, 25 | "devDependencies": { 26 | "algolia-frontend-components": "^0.0.34", 27 | "babel": "^5.8.29", 28 | "babel-cli": "^6.26.0", 29 | "babel-core": "^5.8.29", 30 | "babel-eslint": "^4.1.6", 31 | "babel-preset-es2015": "^6.24.1", 32 | "basename": "^0.1.2", 33 | "bluebird": "^3.4.7", 34 | "clean-css": "git://github.com/jakubpawlowicz/clean-css.git#a2c153687d67cbf0a1c6a0015520f28dea25e658", 35 | "clean-css-cli": "^4.0.7", 36 | "eslint": "^3.15.0", 37 | "eslint-config-algolia": "^6.0.1", 38 | "font-blast": "^0.2.2", 39 | "fontkit": "^1.5.2", 40 | "gh-pages": "0.8.0", 41 | "glob": "^7.1.1", 42 | "live-server": "^1.2.0", 43 | "lodash": "^4.17.4", 44 | "mkdirp": "^0.5.1", 45 | "svg2ttf": "^4.0.2", 46 | "svgicons2svgfont": "^5.0.0", 47 | "ttf2svg": "^1.1.0" 48 | }, 49 | "dependencies": {} 50 | } 51 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container { 11 | @include container-fixed; 12 | 13 | @media (min-width: $screen-sm-min) { 14 | width: $container-sm; 15 | } 16 | @media (min-width: $screen-md-min) { 17 | width: $container-md; 18 | } 19 | @media (min-width: $screen-lg-min) { 20 | width: $container-lg; 21 | } 22 | } 23 | 24 | 25 | // Fluid container 26 | // 27 | // Utilizes the mixin meant for fixed width containers, but without any defined 28 | // width for fluid, full width layouts. 29 | 30 | .container-fluid { 31 | @include container-fixed; 32 | } 33 | 34 | 35 | // Row 36 | // 37 | // Rows contain and clear the floats of your columns. 38 | 39 | .row { 40 | @include make-row; 41 | } 42 | 43 | 44 | // Columns 45 | // 46 | // Common styles for small and large grid columns 47 | 48 | @include make-grid-columns; 49 | 50 | 51 | // Extra small grid 52 | // 53 | // Columns, offsets, pushes, and pulls for extra small devices like 54 | // smartphones. 55 | 56 | @include make-grid(xs); 57 | 58 | 59 | // Small grid 60 | // 61 | // Columns, offsets, pushes, and pulls for the small device range, from phones 62 | // to tablets. 63 | 64 | @media (min-width: $screen-sm-min) { 65 | @include make-grid(sm); 66 | } 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width: $screen-md-min) { 74 | @include make-grid(md); 75 | } 76 | 77 | 78 | // Large grid 79 | // 80 | // Columns, offsets, pushes, and pulls for the large desktop device range. 81 | 82 | @media (min-width: $screen-lg-min) { 83 | @include make-grid(lg); 84 | } 85 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: $alert-padding; 11 | margin-bottom: $line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: $alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing $headings-color 19 | color: inherit; 20 | } 21 | // Provide class for links that match alerts 22 | .alert-link { 23 | font-weight: $alert-link-font-weight; 24 | } 25 | 26 | // Improve alignment and spacing of inner content 27 | > p, 28 | > ul { 29 | margin-bottom: 0; 30 | } 31 | > p + p { 32 | margin-top: 5px; 33 | } 34 | } 35 | 36 | // Dismissible alerts 37 | // 38 | // Expand the right padding and account for the close button's positioning. 39 | 40 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. 41 | .alert-dismissible { 42 | padding-right: ($alert-padding + 20); 43 | 44 | // Adjust close link position 45 | .close { 46 | position: relative; 47 | top: -2px; 48 | right: -21px; 49 | color: inherit; 50 | } 51 | } 52 | 53 | // Alternate styles 54 | // 55 | // Generate contextual modifier classes for colorizing the alert. 56 | 57 | .alert-success { 58 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 59 | } 60 | .alert-info { 61 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 62 | } 63 | .alert-warning { 64 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 65 | } 66 | .alert-danger { 67 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 68 | } 69 | -------------------------------------------------------------------------------- /website/source/images/clients/swift-4cb5cf0e.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | api/swift 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /website/source/layouts/layout.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= current_page.data.title || "Algolia CSS API Client" %> 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | <%= stylesheet_link_tag "site" %> 25 | <%= javascript_include_tag "tags" %> 26 | 27 | 28 | 29 | 30 | <%= yield %> 31 | <%= javascript_include_tag "communityHeader" %> 32 | <%= javascript_include_tag "jquery-3.2.0.min" %> 33 | <%= javascript_include_tag "favico.js" %> 34 | <%= javascript_include_tag "site" %> 35 | 36 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /scripts/demo/minify.js: -------------------------------------------------------------------------------- 1 | import CleanCSS from 'clean-css'; 2 | import _ from 'lodash'; 3 | import Promise from 'bluebird'; 4 | import fs from 'fs'; 5 | 6 | const Minify = { 7 | writeFile(path, content) { 8 | return Promise.promisify(fs.writeFile)(path, content); 9 | }, 10 | 11 | restructureRules(input) { 12 | console.info('Restructure rules'); 13 | const options = { 14 | level: { 15 | 1: true, 16 | 2: { 17 | all: false, 18 | removeEmpty: true, 19 | restructureRules: true, 20 | }, 21 | }, 22 | }; 23 | const instance = new CleanCSS(options); 24 | // clean-css 4.0.10 does not allow updating it from the options directly 25 | instance.options.compatibility.selectors.mergeLimit = 1000; 26 | return instance.minify(input).styles; 27 | }, 28 | 29 | mergeNonAdjacent(input) { 30 | console.info('Merge non-adjacent rules'); 31 | const options = { 32 | level: { 33 | 2: { 34 | all: false, 35 | mergeNonAdjacentRules: true, 36 | }, 37 | }, 38 | }; 39 | const instance = new CleanCSS(options); 40 | return instance.minify(input).styles; 41 | }, 42 | 43 | format(input) { 44 | console.info('Format output'); 45 | const options = { 46 | format: { 47 | breaks: { 48 | betweenSelectors: true, 49 | afterRuleEnds: true, 50 | }, 51 | }, 52 | }; 53 | const instance = new CleanCSS(options); 54 | return instance.minify(input).styles; 55 | }, 56 | 57 | run(args) { 58 | args = _.slice(args, 2); 59 | const inputFile = args[0] || './demo/public/css/search.css'; 60 | const outputFile = args[1] || './demo/public/css/search.min.css'; 61 | 62 | const input = fs.readFileSync(inputFile, 'utf-8'); 63 | console.info('Minifying... this can take up to one minute'); 64 | 65 | let minified = Minify.restructureRules(input); 66 | // minified = Minify.mergeNonAdjacent(minified); 67 | // minified = Minify.format(minified); 68 | console.info('Write output to file'); 69 | Minify.writeFile(outputFile, minified); 70 | }, 71 | }; 72 | Minify.run(process.argv); 73 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_hero.sass: -------------------------------------------------------------------------------- 1 | .hero 2 | min-height: 700px 3 | background: 4 | image: url('../images/hero-cover.svg'), linear-gradient(to bottom right, #4B2E91, #3369E6 ) 5 | position: center bottom, top left 6 | repeat: no-repeat, no-repeat 7 | size: contain, cover 8 | blend-mode: overlay 9 | 10 | @media (max-width: $screen-md) 11 | background-size: 140%, cover 12 | background-position: left 15% bottom, center center 13 | 14 | @media (max-width: $screen-sm) 15 | background-size: 400%, cover 16 | background-position: center bottom, center center 17 | 18 | h1 19 | font-size: 44px 20 | 21 | .btn 22 | padding: 18px 30px 23 | font-weight: bold 24 | height: auto 25 | line-height: inherit 26 | 27 | .shadow 28 | width: 160px 29 | height: 10px 30 | border-radius: 100% 31 | background: rgba(black, 0.3) 32 | margin: auto 33 | position: relative 34 | 35 | // Hero Illustration 36 | $timingFunction: 6s ease infinite 37 | 38 | 39 | 40 | #animsvg 41 | animation: bounce $timingFunction 42 | will-change: transform 43 | 44 | .shadow 45 | transform-origin: center center 46 | -moz-transform-origin: 50% 40% 47 | animation: bounceShadow $timingFunction 48 | -moz-animation: mozBounceShadow $timingFunction 49 | will-change: transform 50 | 51 | 52 | 53 | @include diagonal(16deg, $white, 250px, before) 54 | bottom: -250px 55 | left: 0 56 | z-index: 0 57 | 58 | @include diagonal(-16deg, $white, 250px, after) 59 | bottom: -250px 60 | left: 0 61 | z-index: 0 62 | 63 | svg, 64 | img 65 | max-width: 200px 66 | 67 | 68 | 69 | // Fix svg in FF 70 | #plan-holder 71 | -moz-transform: translateY(10px) 72 | 73 | #plan 74 | -moz-transform: scale(1.1) 75 | 76 | 77 | @include anim('bounce', 'translateY(0)', 'translateY(-10px)', 'translateY(-10px)') 78 | @include animEllipse('bounceShadow', 'scale(1) translateY(12px)', 'scale(0.75) translateY(12px) ', 'scale(0.75) translateY(12px) ') 79 | @include animEllipse('mozBounceShadow', 'scale(1) translateY(16px)', 'scale(0.75) translateY(16px) translateX(-8px) ', 'scale(0.75) translateY(16px) translateX(-8px) ') 80 | 81 | -------------------------------------------------------------------------------- /website/source/images/browser.svg: -------------------------------------------------------------------------------- 1 | 2 | 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 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_icons.scss: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: 'algolia-website-iconfont'; 4 | src: url('../fonts/algolia-website-iconfont.eot'); 5 | src: url('../fonts/algolia-website-iconfont.eot#iefix') format('embedded-opentype'), 6 | url('../fonts/algolia-website-iconfont.ttf') format('truetype'), 7 | url('../fonts/algolia-website-iconfont.woff') format('woff'), 8 | url('../fonts/algolia-website-iconfont.svg#algolia-website-iconfont') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | .icon { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: 'algolia-website-iconfont' !important; 16 | speak: none; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | 29 | .icon-arrow-right:before { 30 | position: relative; 31 | top: 2px; 32 | } 33 | 34 | 35 | .icon-logout:before { 36 | content: "\e914"; 37 | } 38 | .icon-support:before { 39 | content: "\e913"; 40 | } 41 | .icon-quote-close:before { 42 | content: "\e90d"; 43 | } 44 | .icon-quote-open:before { 45 | content: "\e90e"; 46 | } 47 | .icon-arrow-right:before { 48 | content: "\e900"; 49 | } 50 | .icon-cancel:before { 51 | content: "\e901"; 52 | } 53 | .icon-caret-down:before { 54 | content: "\e902"; 55 | } 56 | .icon-check-mark:before { 57 | content: "\e903"; 58 | } 59 | .icon-dribbble:before { 60 | content: "\e904"; 61 | } 62 | .icon-facebook:before { 63 | content: "\e905"; 64 | } 65 | .icon-github:before { 66 | content: "\e906"; 67 | } 68 | .icon-heart:before { 69 | content: "\e907"; 70 | } 71 | .icon-infinity:before { 72 | content: "\e908"; 73 | } 74 | .icon-instagram:before { 75 | content: "\e909"; 76 | } 77 | .icon-linkedin:before { 78 | content: "\e90a"; 79 | } 80 | .icon-mail:before { 81 | content: "\e90b"; 82 | } 83 | .icon-menu:before { 84 | content: "\e90c"; 85 | } 86 | .icon-search:before { 87 | content: "\e90f"; 88 | } 89 | .icon-star:before { 90 | content: "\e910"; 91 | } 92 | .icon-twitter:before { 93 | content: "\e911"; 94 | } 95 | .icon-youtube:before { 96 | content: "\e912"; 97 | } -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | // WebKit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Spec and IE10+ 16 | @keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | 22 | // Bar itself 23 | // ------------------------- 24 | 25 | // Outer container 26 | .progress { 27 | overflow: hidden; 28 | height: $line-height-computed; 29 | margin-bottom: $line-height-computed; 30 | background-color: $progress-bg; 31 | border-radius: $progress-border-radius; 32 | @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 33 | } 34 | 35 | // Bar of progress 36 | .progress-bar { 37 | float: left; 38 | width: 0%; 39 | height: 100%; 40 | font-size: $font-size-small; 41 | line-height: $line-height-computed; 42 | color: $progress-bar-color; 43 | text-align: center; 44 | background-color: $progress-bar-bg; 45 | @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 46 | @include transition(width .6s ease); 47 | } 48 | 49 | // Striped bars 50 | // 51 | // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the 52 | // `.progress-bar-striped` class, which you just add to an existing 53 | // `.progress-bar`. 54 | .progress-striped .progress-bar, 55 | .progress-bar-striped { 56 | @include gradient-striped; 57 | background-size: 40px 40px; 58 | } 59 | 60 | // Call animation for the active one 61 | // 62 | // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the 63 | // `.progress-bar.active` approach. 64 | .progress.active .progress-bar, 65 | .progress-bar.active { 66 | @include animation(progress-bar-stripes 2s linear infinite); 67 | } 68 | 69 | 70 | // Variations 71 | // ------------------------- 72 | 73 | .progress-bar-success { 74 | @include progress-bar-variant($progress-bar-success-bg); 75 | } 76 | 77 | .progress-bar-info { 78 | @include progress-bar-variant($progress-bar-info-bg); 79 | } 80 | 81 | .progress-bar-warning { 82 | @include progress-bar-variant($progress-bar-warning-bg); 83 | } 84 | 85 | .progress-bar-danger { 86 | @include progress-bar-variant($progress-bar-danger-bg); 87 | } 88 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: $line-height-computed 0; 8 | border-radius: $border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: $padding-base-vertical $padding-base-horizontal; 17 | line-height: $line-height-base; 18 | text-decoration: none; 19 | color: $pagination-color; 20 | background-color: $pagination-bg; 21 | border: 1px solid $pagination-border; 22 | margin-left: -1px; 23 | } 24 | &:first-child { 25 | > a, 26 | > span { 27 | margin-left: 0; 28 | @include border-left-radius($border-radius-base); 29 | } 30 | } 31 | &:last-child { 32 | > a, 33 | > span { 34 | @include border-right-radius($border-radius-base); 35 | } 36 | } 37 | } 38 | 39 | > li > a, 40 | > li > span { 41 | &:hover, 42 | &:focus { 43 | color: $pagination-hover-color; 44 | background-color: $pagination-hover-bg; 45 | border-color: $pagination-hover-border; 46 | } 47 | } 48 | 49 | > .active > a, 50 | > .active > span { 51 | &, 52 | &:hover, 53 | &:focus { 54 | z-index: 2; 55 | color: $pagination-active-color; 56 | background-color: $pagination-active-bg; 57 | border-color: $pagination-active-border; 58 | cursor: default; 59 | } 60 | } 61 | 62 | > .disabled { 63 | > span, 64 | > span:hover, 65 | > span:focus, 66 | > a, 67 | > a:hover, 68 | > a:focus { 69 | color: $pagination-disabled-color; 70 | background-color: $pagination-disabled-bg; 71 | border-color: $pagination-disabled-border; 72 | cursor: $cursor-disabled; 73 | } 74 | } 75 | } 76 | 77 | // Sizing 78 | // -------------------------------------------------- 79 | 80 | // Large 81 | .pagination-lg { 82 | @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 83 | } 84 | 85 | // Small 86 | .pagination-sm { 87 | @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 88 | } 89 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Framework grid generation 2 | // 3 | // Used only by Bootstrap to generate the correct number of grid classes given 4 | // any value of `$grid-columns`. 5 | 6 | // [converter] This is defined recursively in LESS, but Sass supports real loops 7 | @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { 8 | @for $i from (1 + 1) through $grid-columns { 9 | $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 10 | } 11 | #{$list} { 12 | position: relative; 13 | // Prevent columns from collapsing when empty 14 | min-height: 1px; 15 | // Inner gutter via padding 16 | padding-left: ($grid-gutter-width / 2); 17 | padding-right: ($grid-gutter-width / 2); 18 | } 19 | } 20 | 21 | 22 | // [converter] This is defined recursively in LESS, but Sass supports real loops 23 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { 24 | @for $i from (1 + 1) through $grid-columns { 25 | $list: "#{$list}, .col-#{$class}-#{$i}"; 26 | } 27 | #{$list} { 28 | float: left; 29 | } 30 | } 31 | 32 | 33 | @mixin calc-grid-column($index, $class, $type) { 34 | @if ($type == width) and ($index > 0) { 35 | .col-#{$class}-#{$index} { 36 | width: percentage(($index / $grid-columns)); 37 | } 38 | } 39 | @if ($type == push) and ($index > 0) { 40 | .col-#{$class}-push-#{$index} { 41 | left: percentage(($index / $grid-columns)); 42 | } 43 | } 44 | @if ($type == push) and ($index == 0) { 45 | .col-#{$class}-push-0 { 46 | left: auto; 47 | } 48 | } 49 | @if ($type == pull) and ($index > 0) { 50 | .col-#{$class}-pull-#{$index} { 51 | right: percentage(($index / $grid-columns)); 52 | } 53 | } 54 | @if ($type == pull) and ($index == 0) { 55 | .col-#{$class}-pull-0 { 56 | right: auto; 57 | } 58 | } 59 | @if ($type == offset) { 60 | .col-#{$class}-offset-#{$index} { 61 | margin-left: percentage(($index / $grid-columns)); 62 | } 63 | } 64 | } 65 | 66 | // [converter] This is defined recursively in LESS, but Sass supports real loops 67 | @mixin loop-grid-columns($columns, $class, $type) { 68 | @for $i from 0 through $columns { 69 | @include calc-grid-column($i, $class, $type); 70 | } 71 | } 72 | 73 | 74 | // Create grid for specific class 75 | @mixin make-grid($class) { 76 | @include float-grid-columns($class); 77 | @include loop-grid-columns($grid-columns, $class, width); 78 | @include loop-grid-columns($grid-columns, $class, pull); 79 | @include loop-grid-columns($grid-columns, $class, push); 80 | @include loop-grid-columns($grid-columns, $class, offset); 81 | } 82 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/_print.scss: -------------------------------------------------------------------------------- 1 | /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ 2 | 3 | // ========================================================================== 4 | // Print styles. 5 | // Inlined to avoid the additional HTTP request: h5bp.com/r 6 | // ========================================================================== 7 | 8 | @media print { 9 | *, 10 | *:before, 11 | *:after { 12 | background: transparent !important; 13 | color: #000 !important; // Black prints faster: h5bp.com/s 14 | box-shadow: none !important; 15 | text-shadow: none !important; 16 | } 17 | 18 | a, 19 | a:visited { 20 | text-decoration: underline; 21 | } 22 | 23 | a[href]:after { 24 | content: " (" attr(href) ")"; 25 | } 26 | 27 | abbr[title]:after { 28 | content: " (" attr(title) ")"; 29 | } 30 | 31 | // Don't show links that are fragment identifiers, 32 | // or use the `javascript:` pseudo protocol 33 | a[href^="#"]:after, 34 | a[href^="javascript:"]:after { 35 | content: ""; 36 | } 37 | 38 | pre, 39 | blockquote { 40 | border: 1px solid #999; 41 | page-break-inside: avoid; 42 | } 43 | 44 | thead { 45 | display: table-header-group; // h5bp.com/t 46 | } 47 | 48 | tr, 49 | img { 50 | page-break-inside: avoid; 51 | } 52 | 53 | img { 54 | max-width: 100% !important; 55 | } 56 | 57 | p, 58 | h2, 59 | h3 { 60 | orphans: 3; 61 | widows: 3; 62 | } 63 | 64 | h2, 65 | h3 { 66 | page-break-after: avoid; 67 | } 68 | 69 | // Bootstrap specific changes start 70 | // 71 | // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 72 | // Once fixed, we can just straight up remove this. 73 | select { 74 | background: #fff !important; 75 | } 76 | 77 | // Bootstrap components 78 | .navbar { 79 | display: none; 80 | } 81 | .btn, 82 | .dropup > .btn { 83 | > .caret { 84 | border-top-color: #000 !important; 85 | } 86 | } 87 | .label { 88 | border: 1px solid #000; 89 | } 90 | 91 | .table { 92 | border-collapse: collapse !important; 93 | 94 | td, 95 | th { 96 | background-color: #fff !important; 97 | } 98 | } 99 | .table-bordered { 100 | th, 101 | td { 102 | border: 1px solid #ddd !important; 103 | } 104 | } 105 | 106 | // Bootstrap specific changes end 107 | } 108 | -------------------------------------------------------------------------------- /website/source/stylesheets/components/_quotes.sass: -------------------------------------------------------------------------------- 1 | .quotes 2 | margin: auto 3 | position: relative 4 | margin-bottom: 2em 5 | 6 | .tweet-it 7 | position: absolute 8 | top: 0 9 | right: 0 10 | bottom: 0 11 | left: 0 12 | margin: 8px auto 13 | z-index: 10 14 | width: auto 15 | max-width: 120px 16 | opacity: 0 17 | transform: scale(0) 18 | transition: opacity 0.2s ease, transform 0.2s ease 19 | will-change: opacity, transform 20 | 21 | &.one-line 22 | margin: -16px auto 23 | 24 | .quote 25 | transition: filter 0.2s ease, opacity 0.3s ease, transform 0.2s ease 26 | will-change: filter, opacity, transform 27 | 28 | p 29 | font-style: italic 30 | 31 | 32 | 33 | &:before 34 | content: '' 35 | display: block 36 | position: absolute 37 | width: 118px 38 | height: 68px 39 | left: 0 40 | right: 0 41 | top: -45px 42 | margin: auto 43 | z-index: 0 44 | background: url('data:image/svg+xml;utf8, ') no-repeat center center / contain 45 | 46 | 47 | .col-md-6:hover 48 | .quote 49 | filter: blur(4px) 50 | opacity: 0.8 51 | transform: scale(0.85) 52 | 53 | .tweet-it 54 | opacity: 1 55 | transform: scale(1) 56 | 57 | p, 58 | small 59 | position: relative 60 | z-index: 2 61 | 62 | small 63 | font-size: 18px 64 | color: $bunting 65 | font-weight: 600 66 | margin-top: 1em 67 | display: block 68 | 69 | 70 | img 71 | max-width: 24px 72 | position: relative 73 | border-radius: 50% 74 | 75 | @media (max-width: $screen-sm) 76 | margin-bottom: 8em -------------------------------------------------------------------------------- /website/source/stylesheets/partials/_colors.sass: -------------------------------------------------------------------------------- 1 | 2 | /* foreground colors */ 3 | .color-white 4 | color: $white !important 5 | .color-primary 6 | color: $brand-primary !important 7 | .color-secondary 8 | color: $brand-secondary !important 9 | .color-purple-heart 10 | color: $purple-heart !important 11 | .color-mulberry 12 | color: $mulberry !important 13 | .color-radical-red 14 | color: $radical-red !important 15 | .color-bittersweet 16 | color: $bittersweet !important 17 | .color-koromiko 18 | color: $koromiko !important 19 | .color-shamrock 20 | color: $shamrock !important 21 | .color-java 22 | color: $java !important 23 | .color-algolia-blue 24 | color: $algolia-blue !important 25 | .color-royal-blue 26 | color: $royal-blue !important 27 | .color-bunting 28 | color: $bunting !important 29 | 30 | .color-port-gore 31 | color: $port-gore !important 32 | .color-east-bay 33 | color: $east-bay !important 34 | .color-portage 35 | color: $portage !important 36 | .color-blue-bell 37 | color: $blue-bell !important 38 | .color-ghost 39 | color: $ghost !important 40 | .color-athens-gray 41 | color: $athens-gray !important 42 | 43 | 44 | .fill-dark 45 | background: $primary-color !important 46 | .fill-white 47 | background: $white !important 48 | 49 | .fill-purple-heart 50 | background: $purple-heart !important 51 | .fill-mulberry 52 | background: $mulberry !important 53 | .fill-radical-red 54 | background: $radical-red !important 55 | .fill-bittersweet 56 | background: $bittersweet !important 57 | .fill-koromiko 58 | background: $koromiko !important 59 | .fill-shamrock 60 | background: $shamrock !important 61 | .fill-java 62 | background: $java !important 63 | .fill-algolia-blue 64 | background: $algolia-blue !important 65 | .fill-royal-blue 66 | background: $royal-blue !important 67 | 68 | .fill-deep-cove 69 | background: $deep-cove !important 70 | .fill-bunting 71 | background: $bunting !important 72 | .fill-port-gore 73 | background: $port-gore !important 74 | .fill-east-bay 75 | background: $east-bay !important 76 | .fill-portage 77 | background: $portage !important 78 | .fill-blue-bell 79 | background: $blue-bell !important 80 | .fill-ghost 81 | background: $ghost !important 82 | .fill-athens-gray 83 | background: $athens-gray !important 84 | 85 | 86 | .gradient-primary 87 | background-image: linear-gradient(320deg, $shamrock, mix($bunting,$java,50%)) !important 88 | .gradient-secondary 89 | background-image: linear-gradient(256deg, $algolia-blue, $royal-blue) !important 90 | .gradient-tertiary 91 | background-image: linear-gradient(256deg, $koromiko, $radical-red) !important 92 | .gradient-orange 93 | background-image: linear-gradient(256deg, $koromiko, $bittersweet) 94 | 95 | .gradient-purple 96 | background-image: linear-gradient(to bottom right, #4B2E91, #3369E6 ) 97 | 98 | .gradient-purple-revert 99 | background-image: linear-gradient(to top left, #4B2E91, #3369E6 ) !important 100 | -------------------------------------------------------------------------------- /website/source/stylesheets/vendors/bootstrap/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | // Form validation states 2 | // 3 | // Used in forms.less to generate the form validation CSS for warnings, errors, 4 | // and successes. 5 | 6 | @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { 7 | // Color the label and help text 8 | .help-block, 9 | .control-label, 10 | .radio, 11 | .checkbox, 12 | .radio-inline, 13 | .checkbox-inline, 14 | &.radio label, 15 | &.checkbox label, 16 | &.radio-inline label, 17 | &.checkbox-inline label { 18 | color: $text-color; 19 | } 20 | // Set the border and box shadow on specific inputs to match 21 | .form-control { 22 | border-color: $border-color; 23 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 24 | &:focus { 25 | border-color: darken($border-color, 10%); 26 | $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); 27 | @include box-shadow($shadow); 28 | } 29 | } 30 | // Set validation states also for addons 31 | .input-group-addon { 32 | color: $text-color; 33 | border-color: $border-color; 34 | background-color: $background-color; 35 | } 36 | // Optional feedback icon 37 | .form-control-feedback { 38 | color: $text-color; 39 | } 40 | } 41 | 42 | 43 | // Form control focus state 44 | // 45 | // Generate a customized focus state and for any input with the specified color, 46 | // which defaults to the `$input-border-focus` variable. 47 | // 48 | // We highly encourage you to not customize the default value, but instead use 49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 50 | // WebKit's default styles, but applicable to a wider range of browsers. Its 51 | // usability and accessibility should be taken into account with any change. 52 | // 53 | // Example usage: change the default blue border and shadow to white for better 54 | // contrast against a dark gray background. 55 | @mixin form-control-focus($color: $input-border-focus) { 56 | $color-rgba: rgba(red($color), green($color), blue($color), .6); 57 | &:focus { 58 | border-color: $color; 59 | outline: 0; 60 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); 61 | } 62 | } 63 | 64 | // Form control sizing 65 | // 66 | // Relative text size, padding, and border-radii changes for form controls. For 67 | // horizontal sizing, wrap controls in the predefined grid classes. `