diff --git a/.gitignore b/.gitignore index 0b42b8f1d..cf0bec2d5 100644 --- a/.gitignore +++ b/.gitignore @@ -9,13 +9,13 @@ # # $ git config --global core.excludesfile ~/.gitignore_global -.sass-cache/ docs/build media/* static-root/ static/stylesheets/mq.css static/stylesheets/no-mq.css static/stylesheets/style.css +static/css/*.min.css __pycache__ *.db *.py[co] diff --git a/Dockerfile.static b/Dockerfile.static deleted file mode 100644 index 94d806cb8..000000000 --- a/Dockerfile.static +++ /dev/null @@ -1,10 +0,0 @@ -FROM ruby:2.7.8-bullseye AS static - -RUN mkdir /code -WORKDIR /code - -COPY Gemfile Gemfile.lock /code/ - -RUN bundle install - -COPY . /code diff --git a/Gemfile b/Gemfile deleted file mode 100644 index c96d2b85e..000000000 --- a/Gemfile +++ /dev/null @@ -1,11 +0,0 @@ -source "https://rubygems.org" - -group :media do - gem "compass", "~>0.12.7" - gem "sass", "~>3.2.19" - gem "susy", "~>1.0.9" -end - -group :development do - gem "foreman", "~>0.61.0" -end diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 040bac565..000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,28 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - chunky_png (1.4.0) - compass (0.12.7) - chunky_png (~> 1.2) - fssm (>= 0.2.7) - sass (~> 3.2.19) - foreman (0.61.0) - thor (>= 0.13.6) - fssm (0.2.10) - sass (3.2.19) - susy (1.0.9) - compass (>= 0.12.2) - sass (>= 3.2.0) - thor (0.17.0) - -PLATFORMS - ruby - -DEPENDENCIES - compass (~> 0.12.7) - foreman (~> 0.61.0) - sass (~> 3.2.19) - susy (~> 1.0.9) - -BUNDLED WITH - 2.1.4 diff --git a/Makefile b/Makefile index 68f306d00..70ab30dfa 100644 --- a/Makefile +++ b/Makefile @@ -85,6 +85,21 @@ docs-clean: ## Clean built documentation @rm -rf docs/_build @echo "=> Removed existing documentation build assets" +# ============================================================================= +# Frontend +# ============================================================================= + +##@ Frontend + +css: ## Minify CSS with Lightning CSS + npx lightningcss-cli --minify static/css/style.css -o static/css/style.min.css + npx lightningcss-cli --minify static/css/mq.css -o static/css/mq.min.css + +css-check: ## Validate CSS parses without errors + npx lightningcss-cli --minify static/css/style.css -o /dev/null + npx lightningcss-cli --minify static/css/mq.css -o /dev/null + .PHONY: help serve migrations migrate manage shell docker_shell clean .PHONY: lint fmt test ci .PHONY: docs docs-serve docs-clean +.PHONY: css css-check diff --git a/bin/static b/bin/static deleted file mode 100755 index 0aea623f8..000000000 --- a/bin/static +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/bash -cd static -bundle exec sass --compass --scss -I $(dirname $(dirname $(gem which susy))) --trace --watch sass:sass diff --git a/docker-compose.yml b/docker-compose.yml index 0d5bd0bfd..1f5ea36b4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -20,13 +20,6 @@ services: test: ["CMD", "redis-cli","ping"] interval: 1s - static: - command: bin/static - build: - dockerfile: Dockerfile.static - volumes: - - .:/code - web: build: . image: pythondotorg:docker-compose diff --git a/docs/source/install.md b/docs/source/install.md index 91e17fe87..050ff95d9 100644 --- a/docs/source/install.md +++ b/docs/source/install.md @@ -162,15 +162,11 @@ Whichever database type you chose, now it's time to run migrations: $ ./manage.py migrate ``` -To compile and compress static media, you will need *compass* and *yui-compressor*: +To minify CSS (optional for development): ``` -$ gem install bundler -$ bundle install -``` - -```{note} -To install *yui-compressor*, use your OS's package manager or download it directly then add the executable to your `PATH`. +$ npm install +$ make css ``` To create initial data for the most used applications, run: @@ -194,20 +190,20 @@ The search feature in Python.org uses Elasticsearch engine. If you want to test Once you have it installed, update the URL value of `HAYSTACK_CONNECTIONS` settings in `pydotorg/settings/local.py` to your local ElasticSearch server. -Generating CSS files automatically ----------------------------------- +Working with CSS +---------------- -```{warning} -When editing frontend styles, ensure you ONLY edit the `.scss` files. +The site's CSS source files are in `static/css/`. These are plain CSS files +(no preprocessor required). To minify them for production using +[Lightning CSS](https://lightningcss.dev/): -These will then be compiled into `.css` files automatically. +``` +npm install +make css ``` -Static files are automatically compiled inside the [Docker Compose `static` container](../../docker-compose.yml) -when running `make serve`. - -When your pull request has stylesheet changes, commit the `.scss` files and the compiled `.css` files. -Otherwise, ignore committing and pushing the `.css` files. +When your pull request has stylesheet changes, commit the modified `.css` files +in `static/css/`. Running tests ------------- diff --git a/package.json b/package.json index cb8390f4d..e3a80e928 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,11 @@ { "name": "pythondotorg", - "description": "Django App behind python.org" + "description": "Django App behind python.org", + "devDependencies": { + "lightningcss-cli": "^1.28.0" + }, + "scripts": { + "css:minify": "npx lightningcss-cli --minify static/css/style.css -o static/css/style.min.css && npx lightningcss-cli --minify static/css/mq.css -o static/css/mq.min.css", + "css:check": "npx lightningcss-cli --minify static/css/style.css -o /dev/null && npx lightningcss-cli --minify static/css/mq.css -o /dev/null" + } } diff --git a/pydotorg/compilers.py b/pydotorg/compilers.py deleted file mode 100644 index 6f81df7c5..000000000 --- a/pydotorg/compilers.py +++ /dev/null @@ -1,10 +0,0 @@ -"""Custom asset compilers for the Django pipeline.""" - -from pipeline.compilers import sass - - -class DummySASSCompiler(sass.SASSCompiler): - """No-op SASS compiler for development without a SASS binary.""" - - def compile_file(self, infile, outfile, outdated=False, force=False): - """Skip compilation entirely.""" diff --git a/pydotorg/settings/pipeline.py b/pydotorg/settings/pipeline.py index e13bfe4e7..e52b1f3c7 100644 --- a/pydotorg/settings/pipeline.py +++ b/pydotorg/settings/pipeline.py @@ -2,7 +2,7 @@ PIPELINE_CSS = { "style": { - "source_filenames": ("sass/style.css",), + "source_filenames": ("css/style.css",), "output_filename": "stylesheets/style.css", "extra_context": { "title": "default", @@ -10,7 +10,7 @@ }, }, "mq": { - "source_filenames": ("sass/mq.css",), + "source_filenames": ("css/mq.css",), "output_filename": "stylesheets/mq.css", "extra_context": { "media": "not print, braille, embossed, speech, tty", diff --git a/static/config.rb b/static/config.rb deleted file mode 100644 index 73322a681..000000000 --- a/static/config.rb +++ /dev/null @@ -1,36 +0,0 @@ -require 'susy' -# Require any additional compass plugins here. - - -# Set this to the root of your project when deployed: -http_path = "../" -sass_dir = "sass" -images_dir = "img" -javascripts_dir = "js" -fonts_dir = "fonts" -css_dir = "stylesheets" - -# You can select your preferred output style here (can be overridden via the command line): -# Compass needs to RESTART before a new style will take effect -# output_style = :expanded or :nested or :compact or :compressed -# expanded = kept as written, all comments intact -# nested = kept as written, comments intact, indents added to show nesting -# compact = all one line, retains comments -# compressed = all comments and spacing removed -output_style = :compressed - -# To enable relative paths to assets via compass helper functions. Uncomment: -# relative_assets = true - -# To disable debugging comments that display the original location of your selectors. Uncomment: -# line_comments = false - - -# If you prefer the indented syntax, you might want to regenerate this -# project again passing --syntax sass, or you can uncomment this: -# preferred_syntax = :sass -# and then run: -# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass - -# Expect UTF-8 encoded scss stylesheets by default. -Encoding.default_external = "UTF-8" diff --git a/static/sass/mq.css b/static/css/mq.css similarity index 100% rename from static/sass/mq.css rename to static/css/mq.css diff --git a/static/sass/style.css b/static/css/style.css similarity index 98% rename from static/sass/style.css rename to static/css/style.css index 357ea40ee..342d4e9c1 100644 --- a/static/sass/style.css +++ b/static/css/style.css @@ -1,4 +1,26 @@ -@charset "UTF-8"; +:root { + /* Colors */ + --color-default: #444; + --color-white: #fff; + --color-grey-lightest: #e6e8ea; + --color-grey-lighter: #caccce; + --color-grey-light: #999; + --color-grey: #666; + --color-grey-dark: #333; + --color-blue: #3776ab; + --color-blue-dark: #1e415e; + --color-blue-medium: #2b5b84; + --color-yellow: #ffd343; + --color-green: #82b043; + --color-purple: #a06ba7; + --color-red: #b55863; + /* Typography */ + --font-size-base: 16px; + --line-height-base: 28px; + --border-radius-default: 6px; + --transition-duration: 0.3s; +} + /* Define constants for the application and to configure the blueprint framework. */ /* ===== Compass Imports ===== */ /* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */ @@ -504,7 +526,6 @@ html { margin: 0; } body { - *font-size: small; text-rendering: optimizeSpeed; } select, input, textarea, button { @@ -601,9 +622,7 @@ button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { - padding: 0; - *width: 13px; - *height: 13px; } + padding: 0; } input[type="search"] { -webkit-appearance: textfield; } @@ -3196,7 +3215,7 @@ span.highlighted { /* Hide a unicode fallback character when we supply it by default. * In fonts.scss, we hide the icon and show the fallback when other conditions are not met */ } - .icon-megaphone span, .icon-python-alt span, .icon-pypi span, .icon-news span, .icon-moderate span, .icon-mercurial span, .icon-jobs span, .icon-help span, .icon-download span, .icon-documentation span, .icon-community span, .icon-code span, .icon-close span, .icon-calendar span, .icon-beginner span, .icon-advanced span, .icon-sitemap span, .icon-search span, .icon-search-alt span, .icon-python span, .icon-github span, .icon-get-started span, .icon-feed span, .icon-facebook span, .icon-email span, .icon-arrow-up span, .icon-arrow-right span, .icon-arrow-left span, .icon-arrow-down span, .errorlist:before span, .icon-freenode span, .icon-alert span, .icon-versions span, .icon-twitter span, .icon-thumbs-up span, .icon-thumbs-down span, .icon-text-resize span, .icon-success-stories span, .icon-statistics span, .icon-stack-overflow span, .icon-mastodon span { + .icon-megaphone span, .icon-python-alt span, .icon-pypi span, .icon-news span, .icon-moderate span, .icon-mercurial span, .icon-jobs span, .icon-help span, .icon-download span, .icon-documentation span, .icon-community span, .icon-code span, .icon-close span, .icon-calendar span, .icon-beginner span, .icon-advanced span, .icon-sitemap span, .icon-search span, .icon-search-alt span, .icon-python span, .icon-github span, .icon-get-started span, .icon-feed span, .icon-facebook span, .icon-email span, .icon-arrow-up span, .icon-arrow-right span, .icon-arrow-left span, .icon-arrow-down span, .icon-freenode span, .icon-alert span, .icon-versions span, .icon-twitter span, .icon-thumbs-up span, .icon-thumbs-down span, .icon-text-resize span, .icon-success-stories span, .icon-statistics span, .icon-stack-overflow span, .icon-mastodon span { display: none; } .fa { @@ -3363,7 +3382,7 @@ span.highlighted { .no-fontface .icon-megaphone:before, .no-fontface .icon-python-alt:before, .no-fontface .icon-pypi:before, .no-fontface .icon-news:before, .no-fontface .icon-moderate:before, .no-fontface .icon-mercurial:before, .no-fontface .icon-jobs:before, .no-fontface .icon-help:before, .no-fontface .icon-download:before, .no-fontface .icon-documentation:before, .no-fontface .icon-community:before, .no-fontface .icon-code:before, .no-fontface .icon-close:before, .no-fontface .icon-calendar:before, .no-fontface .icon-beginner:before, .no-fontface .icon-advanced:before, .no-fontface .icon-sitemap:before, .no-fontface .icon-search:before, .no-fontface .icon-search-alt:before, .no-fontface .icon-python:before, .no-fontface .icon-github:before, .no-fontface .icon-get-started:before, .no-fontface .icon-feed:before, .no-fontface .icon-facebook:before, .no-fontface .icon-email:before, .no-fontface .icon-arrow-up:before, .no-fontface .icon-arrow-right:before, .no-fontface .icon-arrow-left:before, .no-fontface .icon-arrow-down:before, .no-fontface .errorlist:before, .no-fontface .icon-freenode:before, .no-fontface .icon-alert:before, .no-fontface .icon-versions:before, .no-fontface .icon-twitter:before, .no-fontface .icon-thumbs-up:before, .no-fontface .icon-thumbs-down:before, .no-fontface .icon-text-resize:before, .no-fontface .icon-success-stories:before, .no-fontface .icon-statistics:before, .no-fontface .icon-stack-overflow:before, .no-fontface .icon-mastodon:before, .no-svg .icon-megaphone:before, .no-svg .icon-python-alt:before, .no-svg .icon-pypi:before, .no-svg .icon-news:before, .no-svg .icon-moderate:before, .no-svg .icon-mercurial:before, .no-svg .icon-jobs:before, .no-svg .icon-help:before, .no-svg .icon-download:before, .no-svg .icon-documentation:before, .no-svg .icon-community:before, .no-svg .icon-code:before, .no-svg .icon-close:before, .no-svg .icon-calendar:before, .no-svg .icon-beginner:before, .no-svg .icon-advanced:before, .no-svg .icon-sitemap:before, .no-svg .icon-search:before, .no-svg .icon-search-alt:before, .no-svg .icon-python:before, .no-svg .icon-github:before, .no-svg .icon-get-started:before, .no-svg .icon-feed:before, .no-svg .icon-facebook:before, .no-svg .icon-email:before, .no-svg .icon-arrow-up:before, .no-svg .icon-arrow-right:before, .no-svg .icon-arrow-left:before, .no-svg .icon-arrow-down:before, .no-svg .errorlist:before, .no-svg .icon-freenode:before, .no-svg .icon-alert:before, .no-svg .icon-versions:before, .no-svg .icon-twitter:before, .no-svg .icon-thumbs-up:before, .no-svg .icon-thumbs-down:before, .no-svg .icon-text-resize:before, .no-svg .icon-success-stories:before, .no-svg .icon-statistics:before, .no-svg .icon-stack-overflow:before, .no-svg .icon-mastodon:before, .no-generatedcontent .icon-megaphone:before, .no-generatedcontent .icon-python-alt:before, .no-generatedcontent .icon-pypi:before, .no-generatedcontent .icon-news:before, .no-generatedcontent .icon-moderate:before, .no-generatedcontent .icon-mercurial:before, .no-generatedcontent .icon-jobs:before, .no-generatedcontent .icon-help:before, .no-generatedcontent .icon-download:before, .no-generatedcontent .icon-documentation:before, .no-generatedcontent .icon-community:before, .no-generatedcontent .icon-code:before, .no-generatedcontent .icon-close:before, .no-generatedcontent .icon-calendar:before, .no-generatedcontent .icon-beginner:before, .no-generatedcontent .icon-advanced:before, .no-generatedcontent .icon-sitemap:before, .no-generatedcontent .icon-search:before, .no-generatedcontent .icon-search-alt:before, .no-generatedcontent .icon-python:before, .no-generatedcontent .icon-github:before, .no-generatedcontent .icon-get-started:before, .no-generatedcontent .icon-feed:before, .no-generatedcontent .icon-facebook:before, .no-generatedcontent .icon-email:before, .no-generatedcontent .icon-arrow-up:before, .no-generatedcontent .icon-arrow-right:before, .no-generatedcontent .icon-arrow-left:before, .no-generatedcontent .icon-arrow-down:before, .no-generatedcontent .errorlist:before, .no-generatedcontent .icon-freenode:before, .no-generatedcontent .icon-alert:before, .no-generatedcontent .icon-versions:before, .no-generatedcontent .icon-twitter:before, .no-generatedcontent .icon-thumbs-up:before, .no-generatedcontent .icon-thumbs-down:before, .no-generatedcontent .icon-text-resize:before, .no-generatedcontent .icon-success-stories:before, .no-generatedcontent .icon-statistics:before, .no-generatedcontent .icon-stack-overflow:before, .no-generatedcontent .icon-mastodon:before { display: none; margin-right: 0; } - .no-fontface .icon-megaphone span, .no-fontface .icon-python-alt span, .no-fontface .icon-pypi span, .no-fontface .icon-news span, .no-fontface .icon-moderate span, .no-fontface .icon-mercurial span, .no-fontface .icon-jobs span, .no-fontface .icon-help span, .no-fontface .icon-download span, .no-fontface .icon-documentation span, .no-fontface .icon-community span, .no-fontface .icon-code span, .no-fontface .icon-close span, .no-fontface .icon-calendar span, .no-fontface .icon-beginner span, .no-fontface .icon-advanced span, .no-fontface .icon-sitemap span, .no-fontface .icon-search span, .no-fontface .icon-search-alt span, .no-fontface .icon-python span, .no-fontface .icon-github span, .no-fontface .icon-get-started span, .no-fontface .icon-feed span, .no-fontface .icon-facebook span, .no-fontface .icon-email span, .no-fontface .icon-arrow-up span, .no-fontface .icon-arrow-right span, .no-fontface .icon-arrow-left span, .no-fontface .icon-arrow-down span, .no-fontface .errorlist:before span, .no-fontface .icon-freenode span, .no-fontface .icon-alert span, .no-fontface .icon-versions span, .no-fontface .icon-twitter span, .no-fontface .icon-thumbs-up span, .no-fontface .icon-thumbs-down span, .no-fontface .icon-text-resize span, .no-fontface .icon-success-stories span, .no-fontface .icon-statistics span, .no-fontface .icon-stack-overflow span, .no-fontface .icon-mastodon span, .no-svg .icon-megaphone span, .no-svg .icon-python-alt span, .no-svg .icon-pypi span, .no-svg .icon-news span, .no-svg .icon-moderate span, .no-svg .icon-mercurial span, .no-svg .icon-jobs span, .no-svg .icon-help span, .no-svg .icon-download span, .no-svg .icon-documentation span, .no-svg .icon-community span, .no-svg .icon-code span, .no-svg .icon-close span, .no-svg .icon-calendar span, .no-svg .icon-beginner span, .no-svg .icon-advanced span, .no-svg .icon-sitemap span, .no-svg .icon-search span, .no-svg .icon-search-alt span, .no-svg .icon-python span, .no-svg .icon-github span, .no-svg .icon-get-started span, .no-svg .icon-feed span, .no-svg .icon-facebook span, .no-svg .icon-email span, .no-svg .icon-arrow-up span, .no-svg .icon-arrow-right span, .no-svg .icon-arrow-left span, .no-svg .icon-arrow-down span, .no-svg .errorlist:before span, .no-svg .icon-freenode span, .no-svg .icon-alert span, .no-svg .icon-versions span, .no-svg .icon-twitter span, .no-svg .icon-thumbs-up span, .no-svg .icon-thumbs-down span, .no-svg .icon-text-resize span, .no-svg .icon-success-stories span, .no-svg .icon-statistics span, .no-svg .icon-stack-overflow span, .no-svg .icon-mastodon span, .no-generatedcontent .icon-megaphone span, .no-generatedcontent .icon-python-alt span, .no-generatedcontent .icon-pypi span, .no-generatedcontent .icon-news span, .no-generatedcontent .icon-moderate span, .no-generatedcontent .icon-mercurial span, .no-generatedcontent .icon-jobs span, .no-generatedcontent .icon-help span, .no-generatedcontent .icon-download span, .no-generatedcontent .icon-documentation span, .no-generatedcontent .icon-community span, .no-generatedcontent .icon-code span, .no-generatedcontent .icon-close span, .no-generatedcontent .icon-calendar span, .no-generatedcontent .icon-beginner span, .no-generatedcontent .icon-advanced span, .no-generatedcontent .icon-sitemap span, .no-generatedcontent .icon-search span, .no-generatedcontent .icon-search-alt span, .no-generatedcontent .icon-python span, .no-generatedcontent .icon-github span, .no-generatedcontent .icon-get-started span, .no-generatedcontent .icon-feed span, .no-generatedcontent .icon-facebook span, .no-generatedcontent .icon-email span, .no-generatedcontent .icon-arrow-up span, .no-generatedcontent .icon-arrow-right span, .no-generatedcontent .icon-arrow-left span, .no-generatedcontent .icon-arrow-down span, .no-generatedcontent .errorlist:before span, .no-generatedcontent .icon-freenode span, .no-generatedcontent .icon-alert span, .no-generatedcontent .icon-versions span, .no-generatedcontent .icon-twitter span, .no-generatedcontent .icon-thumbs-up span, .no-generatedcontent .icon-thumbs-down span, .no-generatedcontent .icon-text-resize span, .no-generatedcontent .icon-success-stories span, .no-generatedcontent .icon-statistics span, .no-generatedcontent .icon-stack-overflow span, .no-generatedcontent .icon-mastodon span { + .no-fontface .icon-megaphone span, .no-fontface .icon-python-alt span, .no-fontface .icon-pypi span, .no-fontface .icon-news span, .no-fontface .icon-moderate span, .no-fontface .icon-mercurial span, .no-fontface .icon-jobs span, .no-fontface .icon-help span, .no-fontface .icon-download span, .no-fontface .icon-documentation span, .no-fontface .icon-community span, .no-fontface .icon-code span, .no-fontface .icon-close span, .no-fontface .icon-calendar span, .no-fontface .icon-beginner span, .no-fontface .icon-advanced span, .no-fontface .icon-sitemap span, .no-fontface .icon-search span, .no-fontface .icon-search-alt span, .no-fontface .icon-python span, .no-fontface .icon-github span, .no-fontface .icon-get-started span, .no-fontface .icon-feed span, .no-fontface .icon-facebook span, .no-fontface .icon-email span, .no-fontface .icon-arrow-up span, .no-fontface .icon-arrow-right span, .no-fontface .icon-arrow-left span, .no-fontface .icon-arrow-down span, .no-fontface .icon-freenode span, .no-fontface .icon-alert span, .no-fontface .icon-versions span, .no-fontface .icon-twitter span, .no-fontface .icon-thumbs-up span, .no-fontface .icon-thumbs-down span, .no-fontface .icon-text-resize span, .no-fontface .icon-success-stories span, .no-fontface .icon-statistics span, .no-fontface .icon-stack-overflow span, .no-fontface .icon-mastodon span, .no-svg .icon-megaphone span, .no-svg .icon-python-alt span, .no-svg .icon-pypi span, .no-svg .icon-news span, .no-svg .icon-moderate span, .no-svg .icon-mercurial span, .no-svg .icon-jobs span, .no-svg .icon-help span, .no-svg .icon-download span, .no-svg .icon-documentation span, .no-svg .icon-community span, .no-svg .icon-code span, .no-svg .icon-close span, .no-svg .icon-calendar span, .no-svg .icon-beginner span, .no-svg .icon-advanced span, .no-svg .icon-sitemap span, .no-svg .icon-search span, .no-svg .icon-search-alt span, .no-svg .icon-python span, .no-svg .icon-github span, .no-svg .icon-get-started span, .no-svg .icon-feed span, .no-svg .icon-facebook span, .no-svg .icon-email span, .no-svg .icon-arrow-up span, .no-svg .icon-arrow-right span, .no-svg .icon-arrow-left span, .no-svg .icon-arrow-down span, .no-svg .icon-freenode span, .no-svg .icon-alert span, .no-svg .icon-versions span, .no-svg .icon-twitter span, .no-svg .icon-thumbs-up span, .no-svg .icon-thumbs-down span, .no-svg .icon-text-resize span, .no-svg .icon-success-stories span, .no-svg .icon-statistics span, .no-svg .icon-stack-overflow span, .no-svg .icon-mastodon span, .no-generatedcontent .icon-megaphone span, .no-generatedcontent .icon-python-alt span, .no-generatedcontent .icon-pypi span, .no-generatedcontent .icon-news span, .no-generatedcontent .icon-moderate span, .no-generatedcontent .icon-mercurial span, .no-generatedcontent .icon-jobs span, .no-generatedcontent .icon-help span, .no-generatedcontent .icon-download span, .no-generatedcontent .icon-documentation span, .no-generatedcontent .icon-community span, .no-generatedcontent .icon-code span, .no-generatedcontent .icon-close span, .no-generatedcontent .icon-calendar span, .no-generatedcontent .icon-beginner span, .no-generatedcontent .icon-advanced span, .no-generatedcontent .icon-sitemap span, .no-generatedcontent .icon-search span, .no-generatedcontent .icon-search-alt span, .no-generatedcontent .icon-python span, .no-generatedcontent .icon-github span, .no-generatedcontent .icon-get-started span, .no-generatedcontent .icon-feed span, .no-generatedcontent .icon-facebook span, .no-generatedcontent .icon-email span, .no-generatedcontent .icon-arrow-up span, .no-generatedcontent .icon-arrow-right span, .no-generatedcontent .icon-arrow-left span, .no-generatedcontent .icon-arrow-down span, .no-generatedcontent .icon-freenode span, .no-generatedcontent .icon-alert span, .no-generatedcontent .icon-versions span, .no-generatedcontent .icon-twitter span, .no-generatedcontent .icon-thumbs-up span, .no-generatedcontent .icon-thumbs-down span, .no-generatedcontent .icon-text-resize span, .no-generatedcontent .icon-success-stories span, .no-generatedcontent .icon-statistics span, .no-generatedcontent .icon-stack-overflow span, .no-generatedcontent .icon-mastodon span { display: inline; } /* @license diff --git a/static/sass/_FIX-THESE b/static/sass/_FIX-THESE deleted file mode 100644 index da87841b1..000000000 --- a/static/sass/_FIX-THESE +++ /dev/null @@ -1,18 +0,0 @@ - -TO DO: -*** - -BIG ISSUE: Touch devices need a better way to navigate the large top-level menu. Off canvas (drawer) might be the best option. Drop downs are too clunky and not reliable. - -Simplify the way that most columns work -- remove dependency on Susy. -Won't be able to do this easily for the header banners because of the push/pull percent margins and paddings. - -Blockquotes should not have a FOOTER element inside of them. Change markup and associated CSS. Fix also .success-stories-widget and .success-quote. - -Make the breakpoints in layout.scss work on variables. Easier to change in one place than in both the layout and mq files. - -Convert the .list-row-container ULs/OLs to use table-row and table-cell display properties? Test in IE. Benefits? Maybe none. - - -DONE: -*** \ No newline at end of file diff --git a/static/sass/_base.scss b/static/sass/_base.scss deleted file mode 100644 index b191bfd8c..000000000 --- a/static/sass/_base.scss +++ /dev/null @@ -1,152 +0,0 @@ -/* Define constants for the application and to configure the blueprint framework. */ - - -/* ===== Compass Imports ===== */ - -/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */ - -@import "compass"; -/* @import "compass/css3/columns" */ -@import "compass/css3/font-face"; -@import "compass/css3/border-radius"; -@import "compass/css3/box-shadow"; -@import "compass/css3/box-sizing"; -/* @import "compass/css3/hyphenation"; */ -@import "compass/css3/inline-block"; -@import "compass/css3/transform"; -@import "compass/css3/transition"; -@import "compass/typography"; -@import "compass/typography/links/link-colors"; /* Needed for the link-colors() function */ -@import "compass/typography/lists/horizontal-list"; /* Needed for the horizontal-list() function */ -@import "compass/typography/text/nowrap"; /* When remembering whether or not there's a hyphen in white-space is too hard */ -@import "compass/support"; -@import "compass/utilities/general/clearfix"; /* Use pie-clearfix when there is no width set ont the element to avoid edge cases */ -@import "compass/utilities/color/contrast"; /* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */ - -/* Other interesting functions: - @import "compass/utilities/color/contrast"; - detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/ - Used to pass two colors into a get out the most readable color. - Good for situations where we dont want to create a new color, - but be sure that colors from variables are always going to be readable -*/ - - - - -/* ! ===== Grid ===== */ -/* - * Susy: Un-obtrusive grids for designers - * By: Eric A. Meyer and OddBird - * Site: susy.oddbird.net - * - * Would like to remove the dependence on Susy by using a simpler grid structure : J. Hogue - */ -@import "susy"; - -/* Settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off. - * We are using Susy 1.0. Update your GEM file by deleting the old and downloading the new. - */ - -$total-columns: 12; -$column-width: 60px; -$gutter-width: 20px; -$grid-padding: $gutter-width; -$container-style: fluid; - - -/* ! ===== Variables ===== */ - -/* Colors */ -$default-color: #444; - -$white: #fff; /* Confusing, but in some cases, this can be set to a dark color */ -$grey-lighterest: #f2f4f6; -$grey-lightest: #e6e8ea; -$grey-lighterer: #ddd; -$grey-lighter: #caccce; -$grey-light: #999; -$grey: #666; -$grey-dark: #333; -$grey-darker: #222; - -$blue: #3776ab; /* Python blue */ -$psf: #78797a; -$yellow: #ffd343; /* Python yellow */ -$green: #82b043; -$purple: #a06ba7; -$red: #b55863; /* Also used for error messages */ -$orange: #cc9547; - -$darkblue: #1f3b47; -$darkerblue: #1e2933; - -$link-color: $blue; -$link-hover: $darkerblue; - -$code-green: #0d870d; -$default-border-color: $grey-lighter; /* Set a generic border color here to keep them consistent */ - - -/* Typography */ - -$relative-font-sizing : true; /* True here means that all computed values will be in EMs */ -$round-to-nearest-half-line : true; /* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */ -$base-font-size : 16px; /* Useful to set this here, but don't echo it anywhere. Used in calculations */ -$base-line-height : 28px; /* Useful to set this here, but don't echo it anywhere. Used in calculations */ - -$giga: 40px; -$mega: 36px; -$kilo: 32px; -$headerone: 28px; -$headertwo: 24px; -$headerthree: 21px; -$headerfour: 18px; - -$default-font: SourceSansProRegular, Arial, sans-serif; -$default-font-italic: SourceSansProItalic, Arial, sans-serif; -$default-font-bold: SourceSansProBold, Arial, sans-serif; -$alt-font: Flux-Regular, $default-font; -$alt-font-bold: Flux-Bold, $default-font-bold; - -/* Calculate the font-size-adjust of Flux: - * http://www.cs.tut.fi/~jkorpela/x-height.html - * Or, in this case, we did it by hand by comparing Flux to Arial, side by side. - * We then adjusted it further visually, as Flux is more condensed and therefore line-length changes pretty dramatically. - */ -$font-size-adjust-value: 1.15; - - /* - Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin - A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/ - - Note: The line height is relative to the constant $base-line-height. - The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. - Don’t worry about nested elements etc, Compass will do the maths for you :) - */ - - -/* Defaults */ -$relative-assets: false; - -$legacy-support-for-ie : false; -$legacy-support-for-ie6 : false; -$legacy-support-for-ie7 : false; -$legacy-support-for-ie8 : false; -$legacy-support-for-mozilla : true; - -$inline-block-alignment: baseline; - -$default-border-radius: 6px; -$default-box-shadow-color: rgba( #000, .3 ); -$default-box-shadow-h-offset: 2px; -$default-box-shadow-v-offset: 2px; /* Positive is down */ -$default-box-shadow-blur: 4px; -$default-box-shadow-spread: false; -$default-box-shadow-inset: false; - -$default-transition-property: all; -$default-transition-duration: .3s; -$default-transition-function: false; -$default-transition-delay: false; diff --git a/static/sass/_debug.scss b/static/sass/_debug.scss deleted file mode 100644 index 7fb257135..000000000 --- a/static/sass/_debug.scss +++ /dev/null @@ -1,189 +0,0 @@ -/** -* This file was taken from http://www.tomato-root.com/sandbox/holmes/ -* and adapted to remove some annoying warnings that I really don't care about. -* Also removed .holmes-debug namespace, so I can just include stylesheet as following. -* -* <%= stylesheet_link_tag "debug" if Rails.env.development? %> -* -* ------------------------ -* -* Debug colours and what they mean -* -* - tomato denotes an error, invalid markup or a missing attribute -* - gold denotes a warning, so potentionally erroneous markup or bad practice -* - goldenrod denotes a deprecated element or element with deprecated or Non-W3C attributes -* - darkorchid denotes missing translation. Authors should add the class in while working, and remove it when done. -* -* ------------------------- -*/ - - -/**************** - Modernizr Tests -****************/ - -@mixin modernizr_links { - - /*modernizr*/ .fontface .fontface-test, - .generatedcontent .generatedcontent-test, - .svg .svg-test, - .inlinesvg .inlinesvg-test, - .retina .retina-test { - display: block; - color: #ff7; - background-color: #333; - - .yes { font-weight: bold; display: inline; color: green; } - .no { display: none; color: white; } - } - .no-fontface .fontface-test, - .no-generatedcontent .generatedcontent-test, - .no-svg .svg-test, - .no-inlinesvg .inlinesvg-test, - .no-retina .retina-test { - display: block; - color: #ff7; - background-color: red; - - .yes { display: none; color: white; } - .no { font-weight: bold; display: inline; color: white; } - } -} - -/************** - LINKS -**************/ - -@mixin debug_links { - - a:not([href]), - a[href=""], - a[href="%"] { - outline: 2px solid tomato; - } - - a[href="#"], - a[href^="javascript"] { - outline: 2px solid gold; - } -} - -/************** - IMAGES -**************/ - -@mixin debug_images { - - img:not([alt]), - img[alt=""] { - outline: 2px solid tomato; - } -} - -/************************* - MISC ATTRIBUTES -**************************/ - -@mixin debug_misc { - - /* empty or missing "for" tags on labels, "names" on inputs, selects and textareas, abbr without a title, empty class or is declarations */ - label:not([for]), - label[for=""], - input:not([name]), - input[name=""], - select:not([name]), - select[name=""], - textarea:not([name]), - textarea[name=""], - - abbr:not([title]), - abbr[title=""], - - [class=""], - [id=""] { - outline: 2px solid tomato; - } - - /* - Warnings here, for inline styles and event calls, - ideally they should be external (CSS) and JS applied by JS scripts, - keep markup purely presentational! - */ - [style], - [onclick], - [onblur], - [onfocus], - [onselect], - [onload], - [onunload] { - outline: 2px solid gold; - } -} - -/************************************************************************* - DEPRECATED & NON-W3C CONTENT ELEMENTS (goldenrod) - Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete -*************************************************************************/ - -@mixin debug_deprecated { - - applet, - acronym, - center, - dir, - font, - strike, - u, - /*i, apparently not deprecated - b, apparently not deprecated */ - big, - tt, - marquee, /* i've left this because it is a stupid thing to use */ - plaintext, - xmp { - outline: 2px solid goldenrod; - } - - /************************************************************************ - DEPRECATED NON-W3C ATTRIBUTES (goldenrod) - Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete - ************************************************************************/ - - body[bgproperties], - body[topmargin], - body[rightmargin], - body[bottommargin], - body[leftmargin] { - outline: 2px solid goldenrod; - } - - *[bordercolor], - *[bordercolordark], - *[bordercolorlight], - table[frame] { - outline: 2px solid goldenrod; - } -} - -/********************* - EMPTY ELEMENTS (warning level for now) -**********************/ - -@mixin debug_empty { - - div:empty, - span:empty, - li:empty, - p:empty, - td:empty, - th:empty { - outline: 2px solid gold; - } - - /********************* - MISSING TRANSLATIONS - **********************/ - .translation_missing { - outline: 2px solid #B516A9; - } -} \ No newline at end of file diff --git a/static/sass/_flexslider.scss b/static/sass/_flexslider.scss deleted file mode 100644 index a54eb6c79..000000000 --- a/static/sass/_flexslider.scss +++ /dev/null @@ -1,294 +0,0 @@ -/* ! Slideshows - - - */ -/*
-
// Dynamically added - -
// Dynamically added wrapper -
*/ - -@mixin flexslider_base() { - - /* body */ .loading .flex-slideshow { - opacity: 0; /* don't use the opacity() function here. We don't want to apply a filter for old browsers */ - } - - .flex-slideshow { - position: relative; - - /*ul*/ .slides { - @include pie-clearfix(); - - & > li { - display: none; - -webkit-backface-visibility: hidden; /* Hide the slides before the JS is loaded. Avoids image jumping */ - } - * html & { height: 1%; } - .no-js & > li:first-child { display: block; } - } - /*li*/ .slide-container { - position: relative; - } - /*li*/ .flex-active-slide { - - } - .frame-wrapper { - margin-bottom: .75em; - //@include box-default( $padding: .5em, $radius: 8px ); - } - .caption-wrapper { - - h2 { margin-top: 0; } - - p { min-height: 1.75em; } - } - } - /* // Dynamically added elements for paging/controls -
    -
  1. - 1 -
    2. -
*/ - .flex-control-nav, .flex-direction-nav { - - li { display: inline-block; } - - a { - cursor: pointer; - display: block; - } - } - .flex-control-nav { - text-align: center; - padding: 0 2.5em; - - a { - font-size: 1em; - line-height: 1em; - color: #888; - margin-left: .5em; - //@include box-default( $padding: .3em .5em ); - - &:hover, &:focus { - color: $default-color; - background-color: #ccc; - border-color: #bbb; - } - - .text & { text-decoration: none; } - } - .flex-active { - color: $grey; - background-color: $white; - } - .touch & { - - a { - /* Larger touch target */ - padding: .5em .75em; - } - } - } - /**/ - .flex-direction-nav { - height: 0; - - .touch & { display: none; } - - .flex-prev, .flex-next { - position: absolute; - bottom: -.25em; - font-size: 1.25em; - font-weight: bold; - line-height: 1em; - color: $grey-light; - //@include box-default( $padding: .3em .5em .4em, $bg-color: $white ); - - &:hover, &:focus { @include opacity( 1 ); } - - .text & { text-decoration: none; } - } - - .flex-prev { left: 0; } - - .flex-next { right: 0; } - - .home-slideshow & .flex-prev, .home-slideshow & .flex-next { - top: 33%; bottom: auto; - @include opacity( .7 ); - - &:hover, &:focus { @include opacity( 1 ); } - } - .home-slideshow & .flex-prev { left: .75em; } - - .home-slideshow & .flex-next { right: .75em; } - - .home-slideshow & .flex-prev:hover, - - .home-slideshow & .flex-next:hover { background-color: $grey-lightest; } - } - - @media print { - .flex-control-nav, - .flex-direction-nav, - .flex-control-paging { display: none; } - } -} - - -/* ! ===== Larger than Medium size, as determined by the site ===== */ -@mixin flexslider_mq_medium { - - .flex-slideshow { - - &.default-slideshow .caption-wrapper { - position: absolute; - top: 1em; left: 1em; - bottom: 2em; - width: 33%; - padding: .75em; - overflow: hidden; - background: $grey-lightest; - background: rgba( $white, 0.75 ); - } - } - - .flex-control-nav { padding-bottom: 1.5em; } -} - - -/* ! ===== Largest desktop size ===== */ -@mixin flexslider_mq_large { - - .flex-slideshow { - - &.home-slideshow .caption-wrapper { - float: left; - width: 49%; - } - &.default-slideshow .caption-wrapper { - top: 2em; left: 2em; - bottom: 3em; - width: 25%; - padding: 1em; - } - } - - .flex-viewport { - padding-bottom: .5em; - - .touch & { padding-bottom: 1em; } - } - - .default-slideshow .flex-control-nav { text-align: right; } - - .home-slideshow .flex-control-nav { - position: absolute; - bottom: 0; right: 0; - width: 49%; - padding: .5em; - text-align: right; - //@include horiz-gradient( rgba(255,255,255,0), rgba(255,255,255,1), 0%, 60% ); - } - - .home-slideshow .flex-direction-nav { - - .flex-prev, .flex-next { - top: 40%; - font-size: 1.5em; - @include opacity( 1 ); - } - - .flex-prev { left: -.75em; } - - .flex-next { right: -.75em; } - } - -} - - -/* - * jQuery FlexSlider v2.0 - * http://www.woothemes.com/flexslider/ - * - * Copyright 2012 WooThemes - * Free to use under the GPLv2 license. - * http://www.gnu.org/licenses/gpl-2.0.html - * - * Contributing author: Tyler Smith (@mbmufffin) - */ - -/* Browser Resets -.flex-container a:active, -.flexslider a:active, -.flex-container a:focus, -.flexslider a:focus {outline: none;} -.slides, -.flex-control-nav, -.flex-direction-nav {margin: 0; padding: 0; list-style: none;} */ - -/* FlexSlider Necessary Styles -.flexslider {margin: 0; padding: 0;} -.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping -.flexslider .slides img {width: 100%; display: block;} -.flex-pauseplay span {text-transform: capitalize;} */ - -/* Clearfix for the .slides element -.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} -html[xmlns] .slides { display: block; } -* html .slides { height: 1%; }*/ - -/* No JavaScript Fallback */ -/* If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load -.no-js .slides > li:first-child { display: block; } */ - -/* FlexSlider Default Theme -.flexslider { margin: 0 0 60px; background: $white; border: 4px solid $white; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;} -.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} -.loading .flex-viewport {max-height: 300px;} -.flexslider .slides {zoom: 1;} -.carousel li {margin-right: 5px} */ - -/* Direction Nav -.flex-direction-nav {*height: 0;} -.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} -.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } -.flex-direction-nav .flex-prev {left: -36px;} -.flexslider:hover .flex-next {opacity: 0.8; right: 5px;} -.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} -.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} -.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} */ - -/* Control Nav -.flex-control-nav {width: 100%; text-align: center;} -.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} -.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} -.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } -.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } - -.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} -.flex-control-thumbs li {width: 25%; float: left; margin: 0;} -.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} -.flex-control-thumbs img:hover {opacity: 1;} -.flex-control-thumbs .flex-active {opacity: 1; cursor: default;} - -@media screen and (max-width: 860px) { - .flex-direction-nav .flex-prev {opacity: 1; left: 0;} - .flex-direction-nav .flex-next {opacity: 1; right: 0;} -} */ diff --git a/static/sass/_fonts.scss b/static/sass/_fonts.scss deleted file mode 100644 index 2130068e2..000000000 --- a/static/sass/_fonts.scss +++ /dev/null @@ -1,264 +0,0 @@ -/* - * Would have liked to use Compass' built-in font-face mixin with the inline-font-files() helper, but it seems to be BROKEN in older versions! - * Be sure to upgrade to at least 0.12.1 to have this work properly. - * in Terminal, gem install compass --version '= 0.12.1' - */ - - - @font-face { - font-family: 'Pythonicon'; - src:url('../fonts/Pythonicon.eot'); -} -@font-face { - font-family: 'Pythonicon'; - src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'), - url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); - font-weight: normal; - font-style: normal; -} - -.icon-bullhorn:before { - content: "\e600"; -} -.icon-python-alt:before { - content: "\e601"; -} -.icon-pypi:before { - content: "\e602"; -} -.icon-news:before { - content: "\e603"; -} -.icon-moderate:before { - content: "\e604"; -} -.icon-mercurial:before { - content: "\e605"; -} -.icon-jobs:before { - content: "\e606"; -} -.icon-help:before { - content: "\3f"; -} -.icon-download:before { - content: "\e609"; -} -.icon-documentation:before { - content: "\e60a"; -} -.icon-community:before { - content: "\e60b"; -} -.icon-code:before { - content: "\e60c"; -} -.icon-close:before { - content: "\58"; -} -.icon-calendar:before { - content: "\e60e"; -} -.icon-beginner:before { - content: "\e60f"; -} -.icon-advanced:before { - content: "\e610"; -} -.icon-sitemap:before { - content: "\e611"; -} -.icon-search-alt:before { - content: "\e612"; -} -.icon-search:before { - content: "\e613"; -} -.icon-python:before { - content: "\e614"; -} -.icon-github:before { - content: "\e615"; -} -.icon-get-started:before { - content: "\e616"; -} -.icon-feed:before { - content: "\e617"; -} -.icon-facebook:before { - content: "\e618"; -} -.icon-email:before { - content: "\e619"; -} -.icon-arrow-up:before { - content: "\e61a"; -} -.icon-arrow-right:before { - content: "\e61b"; -} -.icon-arrow-left:before { - content: "\e61c"; -} -.icon-arrow-down:before { - content: "\e61d"; -} -.icon-freenode:before { - content: "\e61e"; -} -.icon-alert:before { - content: "\e61f"; -} -.icon-versions:before { - content: "\e620"; -} -.icon-twitter:before { - content: "\e621"; -} -.icon-thumbs-up:before { - content: "\e622"; -} -.icon-thumbs-down:before { - content: "\e623"; -} -.icon-text-resize:before { - content: "\e624"; -} -.icon-success-stories:before { - content: "\e625"; -} -.icon-statistics:before { - content: "\e626"; -} -.icon-stack-overflow:before { - content: "\e627"; -} -.icon-mastodon:before { - content: "\e900"; -} - - -/* - * Hide from anything that does not support FontFace (Opera Mini, Blackberry) - * or Android 2.1 - 2.3 (no-svg) - * or generated content - */ -/*modernizr*/ .no-fontface, .no-svg, .no-generatedcontent { - - .icon-megaphone, .icon-python-alt, .icon-pypi, .icon-news, .icon-moderate, .icon-mercurial, .icon-jobs, .icon-help, .icon-download, .icon-documentation, .icon-community, .icon-code, .icon-close, .icon-calendar, .icon-beginner, .icon-advanced, .icon-sitemap, .icon-search, .icon-search-alt, .icon-python, .icon-github, .icon-get-started, .icon-feed, .icon-facebook, .icon-email, .icon-arrow-up, .icon-arrow-right, .icon-arrow-left, .icon-arrow-down, .icon-freenode, .icon-alert, .icon-versions, .icon-twitter, .icon-thumbs-up, .icon-thumbs-down, .icon-text-resize, .icon-success-stories, .icon-statistics, .icon-stack-overflow, .icon-mastodon { - - &:before { - display: none; - margin-right: 0; - } - /* Show a unicode character back up if it exists */ - span { - display: inline; - } - } -} - -/* @license - * MyFonts Webfont Build ID 2421639, 2012-11-30T11:51:21-0500 - * - * The fonts listed in this notice are subject to the End User License - * Agreement(s) entered into by the website owner. All other parties are - * explicitly restricted from using the Licensed Webfonts(s). - * - * You may obtain a valid license at the URLs below. - * - * Webfont: Flux-Regular by T-26 - * URL: http://www.myfonts.com/fonts/t26/flux/regular/ - * - * Webfont: Flux-Bold Italic by T-26 - * URL: http://www.myfonts.com/fonts/t26/flux/bold-italic/ - * - * Webfont: Flux-Italic by T-26 - * URL: http://www.myfonts.com/fonts/t26/flux/italic/ - * - * Webfont: Flux-Bold by T-26 - * URL: http://www.myfonts.com/fonts/t26/flux/bold/ - * - * License: http://www.myfonts.com/viewlicense?type=web&buildid=2421639 - * Webfonts copyright: Copyright (c) 1996 by Monib Mahdavi. All rights reserved. - * - * © 2012 Bitstream Inc -*/ - -//@import url("//hello.myfonts.net/count/24f387"); - -@font-face { - font-family: 'Flux-Regular'; - src: url('../fonts/FluxRegular.eot'); - src: url('../fonts/FluxRegular.eot?#iefix') format('embedded-opentype'), - url('../fonts/FluxRegular.woff') format('woff'), - inline-font-files( "FluxRegular.ttf", truetype ); - font-weight: normal; - font-style: normal; -} - -/*@font-face { - font-family: 'Flux-BoldItalic'; - src: url('../fonts/FluxBoldItalic.eot'); - src: url('../fonts/FluxBoldItalic.eot?#iefix') format('embedded-opentype'), - url('../fonts/FluxBoldItalic.woff') format('woff'), - inline-font-files( "FluxBoldItalic.ttf", truetype ); -} - -@font-face { - font-family: 'Flux-Italic'; - src: url('../fonts/FluxItalic.eot'); - src: url('../fonts/FluxItalic.eot?#iefix') format('embedded-opentype'), - url('../fonts/FluxItalic.woff') format('woff'), - inline-font-files( "FluxItalic.ttf", truetype ); -}*/ - -@font-face { - font-family: 'Flux-Bold'; - src: url('../fonts/FluxBold.eot'); - src: url('../fonts/FluxBold.eot?#iefix') format('embedded-opentype'), - url('../fonts/FluxBold.woff') format('woff'), - inline-font-files( "FluxBold.ttf", truetype ); - font-weight: bold; - font-style: normal; -} - - -/* - * Generated by Font Squirrel (http://www.fontsquirrel.com) on July 2, 2013 10:19:24 AM America/New_York - * Adobe Source Pro Sans, Open Source License: http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1959 - */ - -@font-face { - font-family: 'SourceSansProRegular'; - src: url('../fonts/SourceSansPro-Regular-webfont.eot'); - src: url('../fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/SourceSansPro-Regular-webfont.woff') format('woff'), - url('../fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'), - url('../fonts/SourceSansPro-Regular-webfont.svg#source_sans_proregular') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'SourceSansProBold'; - src: url('../fonts/SourceSansPro-Bold-webfont.eot'); - src: url('../fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff'), - url('../fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'), - url('../fonts/SourceSansPro-Bold-webfont.svg#source_sans_probold') format('svg'); - font-weight: bold; - font-style: normal; -} - -@font-face { - font-family: 'SourceSansProItalic'; - src: url('../fonts/SourceSansPro-It-webfont.eot'); - src: url('../fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/SourceSansPro-It-webfont.woff') format('woff'), - url('../fonts/SourceSansPro-It-webfont.ttf') format('truetype'), - url('../fonts/SourceSansPro-It-webfont.svg#source_sans_proitalic') format('svg'); - font-weight: normal; - font-style: italic; -} diff --git a/static/sass/_functions.scss b/static/sass/_functions.scss deleted file mode 100644 index d568302d4..000000000 --- a/static/sass/_functions.scss +++ /dev/null @@ -1,471 +0,0 @@ -/* - * Functional mixins – Items we would like to keep consistent from project to project - */ - -/* Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 */ -@function clear-units($value){ - - @if type-of($value) == "number" { - @if (unitless($value)) { - @return $value; - } @else if unit($value) == "em"{ - @return $value / 1em; - } @else if unit($value) == "px" { - @return $value / 1px; - } @else if unit($value) == "pt" { - @return $value / 1pt; - } - } @else { - @warn "Not a number value: #{$value}"; - @return $value; - } -} - -@function strip-units($value) { - @return $value / ($value * 0 + 1); -} -/* NOTE: Neither of these work on units with decimal points. */ - - -/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */ -@function px2em( $pixel, $base-size:$base-font-size ) { - /* Remove units for easier math. We are converting to EMs anyway */ - $pixel: clear-units($pixel); - $base-size: clear-units($base-size); - @return #{$pixel / $base-size}em; -} - - -/* Shorthand for a set of useful text/line-height resizing functions. easier to remember... */ -@mixin adjust-font-size( $font_size, $line_height:$font_size ) { - @include adjust-font-size-to( $font_size, lines-for-font-size( $line_height ) ); -} - - -/* - * Font-size-adjust: the problem and a solution - * Not widely supported, can't use this yet */ -@mixin font-size-adjust { - -webkit-font-size-adjust: 0.465; /* No support yet */ - font-size-adjust: 0.465; /* Firefox only */ -} - -/* Since we can't use the above, let's create our own way to do it. */ -@mixin fontface-adjust( $pixel, $base-size:$base-font-size, $adjust-value: $font-size-adjust-value ) { - @if $adjust-value == none { - $adjust-value: 1; - } - $pixel: clear-units($pixel); - $base-size: clear-units($base-size); - - font-size: #{$pixel / $base-size}em; - - .fontface & { - font-size: #{$pixel * $adjust-value / $base-size}em; - - span:before { - font-size: .875em; - } - } -} - - -/* Quickly apply border styles to elements */ -@mixin pe-border( $width: 1px, $style: solid, $color-top: none, $color-right: none, $color-bottom: none, $color-left: none ) { - @if $color-top != none - { border-top: $width $style $color-top; } - @if $color-right != none - { border-right: $width $style $color-right; } - @if $color-bottom != none - { border-bottom: $width $style $color-bottom; } - @if $color-left != none - { border-left: $width $style $color-left; } -} - - -/* Talk of depreciating the Compass mixin, so we pull it in here and make small adjustments */ -@mixin pe-inline-block( $alignment: $inline-block-alignment ) { - @if $legacy-support-for-mozilla - { display: -moz-inline-stack; } - display: inline-block; - @if $alignment and $alignment != none - { vertical-align: $alignment; } -} - - -/* Namespace the box-sizing mixin so we can add support (a polyfill?) for IE7 */ -@mixin pe-box-sizing( $sizing: border-box ) { - @include box-sizing( $sizing ); -} - - -/* Vertical and Horizontal gradient mixins to make things easier. */ -@mixin vertical-gradient( $top-color, $bottom-color, $top-percent:10%, $bottom-percent:90% ) { - background-color: $bottom-color; - @include filter-gradient( $top-color, $bottom-color, vertical ); - @include background-image( linear-gradient( $top-color $top-percent, $bottom-color $bottom-percent ) ); -} - -@mixin horiz-gradient( $left-color, $right-color, $left-percent:10%, $right-percent:90% ) { - background-color: $left-color; - @include filter-gradient( $left-color, $right-color, horizontal ); - @include background-image( linear-gradient( $left-color $left-percent, $right-color $right-percent ) ); -} - -@mixin reset-gradient ( $flat-color ) { - background-color: $flat-color; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - background-image: none; -} - - -/* - * Set all the up-and-coming input text types here for easier reference - * Does not include types that are not meant to be displayed full width, such as: - type=number, type=range, type=date, type=color - * Usage: @include input-text-types() { @content } - */ -@mixin input-text-types( $focus:false ) { - @if $focus { - input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus { - @content; - } - } @else { - input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] { - @content; - } - } -} - - -/* - * Cross browser @keyframe definition set - * Compass doesn't have one yet, so we namespace this so as not to conflict with a future release - */ -@mixin pe-keyframes( $animation-name ) { - - @-webkit-keyframes $animation-name { - @content; - } - @-moz-keyframes $animation-name { - @content; - } - @-ms-keyframes $animation-name { - @content; - } - @-o-keyframes $animation-name { - @content; - } - @keyframes $animation-name { - @content; - } -} - - -/* - * Cross browser animation definition set - * Compass doesn't have one yet, so we namespace this so as not to conflict with a future release - * - * $timing: linear | ease | ease-in | ease-out | ease-in-out - * $delay: seconds before animation starts - * $count: how many times the animation will loop - * $direction: normal | alternate (Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.) - * $fill-mode: none | forwards | backwards | both - * forwards (The animation’s final keyframe continues to apply after the final iteration of the animation completes) - * backwards (The animation’s initial keyframe is applied as soon as the animation style is applied to an element. - * This only affects animations that have a nonzero value for -webkit-animation-delay) - * both (The animation’s initial keyframe is applied as soon as the animation style is applied to an element, - * and the animation’s final keyframe continues to apply after the final iteration of the animation completes. - * The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay) - */ -@mixin pe-animation( $name, $duration:1s, $timing:ease, $delay:0, $count:1, $direction:normal, $fill-mode:none ) { - - -webkit-animation-name: $name; - -webkit-animation-duration: $duration; - -webkit-animation-timing-function: $timing; - -webkit-animation-delay: $delay; - -webkit-animation-iteration-count: $count; - -webkit-animation-direction: $direction; - -webkit-animation-fill-mode: $fill-mode; - -moz-animation-name: $name; - -moz-animation-duration: $duration; - -moz-animation-timing-function: $timing; - -moz-animation-delay: $delay; - -moz-animation-iteration-count: $count; - -moz-animation-direction: $direction; - -moz-animation-fill-mode: $fill-mode; - -o-animation-name: $name; - -o-animation-duration: $duration; - -o-animation-timing-function: $timing; - -o-animation-delay: $delay; - -o-animation-iteration-count: $count; - -o-animation-direction: $direction; - -o-animation-fill-mode: $fill-mode; - animation-name: $name; - animation-duration: $duration; - animation-timing-function: $timing; - animation-delay: $delay; - animation-iteration-count: $count; - animation-direction: $direction; - animation-fill-mode: $fill-mode; -} - - -/* - * Cross browser method to apply word-breaking and hyphenation (where supported) - * Should be able to use the built-in Compass method, hyphenation(), but the library won't load right now - */ -@mixin pe-hyphenate() { -/* -ms-word-break: break-all; AWFUL! Surprise... breaks words arbitrarily, not according to hyphenation tables. IE8 */ -/* word-break: break-all; Used when we need to break long strings (URLs) in small containers. Use with care. */ -/* word-break: break-word; Non standard for older webkit. Hyphenation tables aren't great, so don't use. */ - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - -o-hyphens: auto; - hyphens: auto; - - /* Don't hypenate certain elements... its bad form */ - tt, var, code, kbd, abbr, acronym { - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - -o-hyphens: none; - hyphens: none; - } -} - -/* Keep this in all mix-in files if you can. Useful stuff */ -@mixin no_js_warning { - - #nojs { - padding: .75em .75em .65em; - text-align: center; - background-color: #c33; - - p { - color: #e6e6e6; - font-weight: bold; - margin: 0; - } - a { - color: #e6e6e6; - text-decoration: underline; - - &:hover, &:focus { - color: #fff; - text-decoration: none; - } - } - } - .js #nojs { - display: none; - } -} - -/* Manage our preferred reset as a Mix-in instead of relying on Compass or Blueprint */ -@mixin html5boilerplate_reset { - - html, body, div, span, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, - abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, - small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, figcaption, figure, - footer, header, hgroup, menu, nav, section, summary, - time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, form { display: block; } - blockquote { quotes: none; } - blockquote:before, blockquote:after { content: ""; content: none; } - q { display: inline; } - q:before { content: "“"; } - q:after { content: "”"; } - q q:before { content: "‘"; } - q q:after { content: "’"; } - ins { background-color: $grey-lighterer; color: $grey-darker; text-decoration: none; } - mark { display: inline-block; padding: 0 .25em; margin: 0 -.125em; background-color: #ffb; /* light yellow */ } - s, strike, del { text-decoration: line-through; } - abbr[title], dfn[title] { /* border-bottom: 1px dotted; */ cursor: help; } - table { width: 100%; border-collapse: collapse; border-spacing: 0; } - th, td { text-align: left; vertical-align: top; } - hr { display: block; height: 1px; border: 0; border-top: 1px solid $grey-lighter; margin: rhythm(1) 0; padding: 0; } - input, button, select { display: inline-block; vertical-align: middle; cursor: text; } - - html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - overflow-y: scroll; - -webkit-font-smoothing: antialiased; - margin: 0; - } - body { *font-size:small; text-rendering: optimizeSpeed; } - select, input, textarea, button { font: 99%; -webkit-font-smoothing: antialiased; margin: 0; } - h1, h2, h3, h4, h5, h6 { font-weight: normal; } - - /* Minimal base styles */ - ul, ol { margin-left: 1.5em; } - ul { list-style: square; } - ol { list-style: decimal; } - ol ol { list-style: upper-alpha; } - ol ol ol { list-style: lower-roman; } - ol ol ol ol { list-style: lower-alpha; } - nav ul, menu ul, .menu, .tabs { margin-left: 0; list-style: none; list-style-image: none; } - small { font-size: 85%; } - b, strong, th { font-weight: 700; } - i, em, cite { font-style: italic; } - - sub, sup { font-size: 75%; line-height: 0; position: relative; } - sup { top: -0.5em; } - sub { bottom: -0.25em; } - - pre, code, kbd, samp, var { font-family: Consolas, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; } - pre { /* Get spaces to display for PRE tags but dont let long lines break out of containers */ - white-space: pre-wrap; - white-space: -moz-pre-wrap !important; /* 1999+ Mozilla */ - white-space: -pre-wrap; /* Opera 4 thru 6 */ - white-space: -o-pre-wrap; /* Opera 7 and up */ - word-wrap: break-word; /* IE 5.5+ and up */ - } - code { color: $code-green; } - var { font-style: italic; } - - textarea { overflow: auto; vertical-align: top; resize: vertical; } - input[type="radio"] { vertical-align: text-bottom; } - input[type="checkbox"] { vertical-align: baseline; } - - button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; - -moz-appearance: button; - } - input:valid, textarea:valid { } - button[disabled], input[disabled] { cursor: default; } - input[type="checkbox"], input[type="radio"] { padding: 0; *width: 13px; *height: 13px; } - input[type="search"] { -webkit-appearance: textfield; } - input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } - - .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } - - /* Aural rulesets */ - abbr.initialism { speak: spell-out; } - abbr.truncation { speak: normal; } -} - - -/* HTML5 Boilerplate Non-semantic helper classes */ -@mixin html5boilerplate_helpers { - - /* For image replacement */ - .ir { display: block; text-indent: -9999px; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } - - /* Hide for both screenreaders and browsers. */ - .hidden { display: none; visibility: hidden; } - - /* Hide only visually, but have it available for screenreaders: by Jon Neal. */ - .screen-reader-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } - /* Extends the .screen-reader-text class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ - .screen-reader-text.focusable:active, - .screen-reader-text.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } - - /* Hide visually and from screenreaders, but maintain layout */ - .invisible { visibility: hidden; } - - /* Need to hide from Screenreaders, but not from others? Use aria-hidden="true" on the element itself */ -} - -/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */ -@mixin html5boilerplate_print { - - @media print { - *, *:before, *:after { - background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ - box-shadow: none !important; - text-shadow: none !important; - } - - body { - font-size: 10pt; - line-height: 1.67; - } - - a, a:visited { text-decoration: underline !important; } - - *[role="main"] a[href]:after { - content: " (" attr(href) ")"; - font-size: 75%; - } - - *[role="main"] abbr[title]:after { - content: " (" attr(title) ")"; - font-size: 75%; - } - - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - - pre, blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { display: table-header-group; /* h5bp.com/t */ } - - tr, img { page-break-inside: avoid; } - - img { max-width: 100% !important; } - - @page { margin: 0.5cm; } - - p, h2, h3 { - orphans: 3; - widows: 3; - } - h1, h2, h3 { page-break-after: avoid; } - - /* Hide parts of the layout that overcomplicate paged output */ - .do-not-print, - .screen-reader-text, - .invisible, - .jump-to-menu, - .jump-link, - #site-map-link { display: none; } - - .say-no-more { - display: inline; - visibility: visible; - } - - .blog-widget, - .event-widget { - - li { padding-left: 6em; } - } - - .site-headline a { - display: block; - - .python-logo, .psf-logo { display: none; } - /* Forces an image to be printed as if it were inline, not a background image */ - .python &:before { - width: 290px; - height: 82px; - content: image-url("python-logo_print.png"); - } - .psf &:before { - width: 334px; - height: 82px; - content: image-url("psf-logo_print.png"); - } - } - } - -} diff --git a/static/sass/_layout.scss b/static/sass/_layout.scss deleted file mode 100644 index e6bd4b65b..000000000 --- a/static/sass/_layout.scss +++ /dev/null @@ -1,1226 +0,0 @@ -@import "base"; -@import "functions"; -@import "mixins"; - -/* - * ! ===== START Media Queries ===== - * - * Define media queries here as mix-ins. Deliver the ones we want inside of complete mqs in mq.scss - * - * Column structure = - * - * Susy mix-ins with examples: - * @include span-columns(3 omega, 12); - * @include omega; - * @include prefix(3); 3 columns of padding before - * @include suffix(3); 3 columns of padding after - * @include pad(3,3); 3 columns of padding on each side - * @include pre(3); 3 columns of margin before - * @include post(3); 3 columns of margin after - * @include squish(3,3); 3 columns of margin on each side - * @include pull(2); Uses negative margin to pull an element out of the flow - * columns(2); raw math for 2 cols of width and any gutters contained within - * gutter(6); raw math for gutter width - */ - -.container, -.row, -.listing-company, -.list-recent-jobs li { @extend %pie-clearfix; } - - -/* ! ===== Smaller than 400px ===== */ -@mixin max_width_399() { - - .search-field:focus { width: 9em; } -} - - -/* ! ===== Larger than 400px ===== */ -@mixin min_width_400() { - - .introduction { font-size: px2em( $headerthree ); } - - .content-wrapper { - - .container { padding: 1em 1.5em; } - } - - .shrubbery { - - .give-me-more { display: block; } - } - - .widget-title, - .listing-company { - - .prompt { display: inline; } - } -} - - -/* ! ===== Smaller than 480px - Baby ===== */ -@mixin max_width_480() { - - .slideshow { display: none; } -} - - -/* ! ===== Larger than 480px - Tiny ===== */ -@mixin min_width_480() { - - .options-bar .breaker { display: none; } - - .adjust-font-size { border-left: 1px solid lighten( $darkerblue, 8% ); } - - .search-the-site { border-right: 1px solid darken( $darkerblue, 12% ); } -} - - -/* ! ===== Larger than 520px - Smaller ===== */ -@mixin min_width_520() { - - body { - text-rendering: optimizeLegibility; - /* @include transition( all .3s ease-in-out ); makes the media query changes animate */ - } - - /* Simple Column Structure */ - .col-row { - - .column { float: left; } - } - - .two-col, .four-col { - - & > .column { width: 50%; } - & > .double-col { width: 100%; } - /* Only works if we are using all single .column, not .double-col as well */ - & > div:nth-of-type(2n+3) { clear: left; } - } - - .meta-navigation, - .main-header, - .main-navigation, - .content-wrapper, - .main-footer { - /* These elements are full width */ - clear: both; - } - - .container { - max-width: px2em( 1200px ); - width: 100%; - margin: 0 auto; - padding: 0; - } - - .introduction { font-size: px2em( $headertwo ); } - - .success-stories-widget blockquote { - font-size: px2em( $headerfour ); - padding: 1em 1.4em 1.3em; - } - - input[type="submit"], - input[type="reset"], - button, - .button, - a.button { - display: inline-block; - vertical-align: baseline; - width: auto; - } - - .search-field:focus { - width: 8em; - } -} - - -/* ! ===== Larger than 640px - Small ===== */ -@mixin min_width_640() { - - /* Simple Column Structure */ - .three-col { - - & > .column { width: 33.3333%; } - & > .double-col { width: 66.6666%; } - /* Only works if we are using all single .column, not .double-col as well */ - & > div:nth-of-type(3n+4) { clear: left; } - } - - .meta-navigation { - text-align: left; - - .say-no-more { - display: none; - visibility: hidden; - } - - .jump-link { display: none; } - - li { - float: left; - width: 16.6666667%; /* 6 columns */ - border-left: 1px solid lighten( $darkerblue, 5% ); - border-right: 1px solid darken( $darkerblue, 7% ); - } - } - - .site-headline { float: left; } - - .options-bar-container { - float: right; - } - - .donate-button { - display: inline; - margin: 0 0.5em 0 0; - position: relative; - top: 19px; - } - - .options-bar { - float: right; - width: auto; - } - - .main-navigation { - - /*modernizr*/ .touch & .subnav { - - &:before { border-color: transparent; } - } - } - - .search-field { - @include transition( width .3s ease-in-out ); - } - - .search-field:focus { - width: 6em; - margin-right: .5em; - } - - /*modernizr*/ .no-touch .search-button { display: inline; } - - .slide-copy { - //padding: 30px 40px; - - p { font-size: 1em; } - } - - .introduction { - // font-size: px2em( 22px ); - padding: 0 1.5em; - } - - .call-to-action { @include fontface-adjust( $headertwo ); } - - /* Header-banners (not home) */ - .header-banner { - padding: 1em; - - .home &, - .default-page & { padding: 0; } - } - - .about-banner, - .download-for-current-os, - .documentation-banner, - .welcome-to-the-foundation { - @include pad( 1,1 ); - } - - .main-header { - - /* Shorten the amount of blue space under the nav on inner pages */ - .default-page & { - position: relative; - z-index: 10; - } - } - - /*li*/ .with-supernav { - - .super-navigation { display: none; } - } - - /* - * This is super cool. Uses two arrays to spit out a bunch of repetitive rulesets. - * Associative array example borrowed from https://github.com/nex3/sass/issues/132#issuecomment-4335097 - */ - $names: python, psf, docs, pypl, jobs, shop; - $colors: $blue, $psf, $yellow, $green, $purple, $red; - $type-colors: $grey-lightest, $grey-lightest, $grey-dark, $grey-lightest, $grey-lightest, $grey-lightest; - - @for $i from 1 through length($names) { - - $this-color: nth($colors, $i); - $bordertop: lighten( $this-color, 38% ); - - .#{nth($names, $i)}-navigation { - @include vertical-gradient( $this-color, adjust-lightness( $this-color, -8 ), 30%, 95% ); - border-top: 1px solid lighten($this-color, 15%); - border-bottom: 1px solid darken($this-color, 25%); - - .tier-1 { - @include pe-border( $color-top: lighten($this-color, 10%), $color-left: lighten($this-color, 10%), $color-bottom: darken($this-color, 20%), $color-right: darken($this-color, 10%) ); - - & > a { - color: nth($type-colors, $i);; - background-color: transparent; - @include pe-border( $color-top: transparent, $color-bottom: transparent ); - letter-spacing: 0.01em; - - &:hover, &:focus, .tier-1:hover > a { - color: $white; - @include vertical-gradient( darken($this-color, 4%), darken($this-color, 8%) ); - @include pe-border( $color-top: $this-color, $color-bottom: darken($this-color, 8%) ); - } - } - } - - .subnav { - @include pe-border( $color-top: darken($this-color, 25%) ); - @include vertical-gradient( lighten( $this-color, 38% ), lighten( $this-color, 45% ) ); - @include box-shadow( inset 0 0 20px rgba($this-color, 0.15) ); - - /*modernizr*/ .touch & { - - &:before { border-color: transparent transparent $bordertop transparent; } - } - } - - .tier-2 { - // background-color: lighten( $this-color, 50% ); - - & > a { - color: rgba($grey-dark, 0.9); - @include pe-border( $color-top: rgba($this-color, 0.25), $color-bottom: transparent ); - - &:hover, &:focus { - background: rgba(255, 255, 255, 0.35); - color: rgba($grey-darker, 0.9); - } - } - - &:last-child > a { @include pe-border( $color-bottom: rgba($this-color, 0.25) ); } - } - - /*a*/ .current_item { - color: $white; - @include vertical-gradient( darken($this-color, 10%), darken($this-color, 15%) ); - // text-shadow: 0 0 3px rgba(255, 255, 255, 0.5); - } - - .super-navigation { - color: $grey; - border: 1px solid lighten( $this-color, 25% ); - @include vertical-gradient( lighten($this-color, 55%), lighten($this-color, 45%)); - - a:not(.button) { color: $this-color; } - h4 { color: darken($this-color, 5%); } - } - } - }/* end @for */ - - - .content-wrapper { - - /* Increase the amount of white space under the nav on inner pages */ - .default-page & { padding-top: 2em; } - } - - /* Main content with sidebars */ - .main-content { - - &.with-left-sidebar { @include span-columns( 8 omega ); } - &.with-right-sidebar { @include span-columns( 8 ); } - } - - .text { font-size: px2em( 15px ); } - - /*aside*/ .left-sidebar { - @include span-columns( 4 ); - margin-top: 1em; - } - - /*aside*/ .right-sidebar { @include span-columns( 4 omega ); } - - .left-sidebar, .right-sidebar { - - .small-widget, .medium-widget, .triple-widget { @include reset-columns(); } - } - - /* Widgets in main content */ - .row { margin-bottom: 1em; } - - .small-widget { - @include span-columns( 6 ); - - &:nth-child(2), - &.last { margin-right: 0; } - } - - .triple-widget { - @include span-columns( 4 ); - - &.last { margin-right: 0; } - } - - .most-recent-posts { @include span-columns( 9 ); } - - .psf-widget, - .python-needs-you-widget { - padding: 1.5em 1.75em; - clear: both; - } - - /* Jobs landing page */ - .jobs-intro { padding-top: 2em; padding-bottom: 2em; } - - .listing-company-category:before { - content: "Category: "; - color: $grey; - } - - .listing-job-title:before { - content: "Title: "; - color: $grey; - } - - .listing-job-type:before { - content: "Looking for: "; - color: $grey; - } - - .release-number, - .release-date, - .release-download, - .release-enhancements { - -moz-box-orient: vertical; - display: inline-block; - margin-right: -4px; - vertical-align: middle; - } - - .release-number { width: 20%; } - .release-date { width: 30%; } - .release-download { width: 25%; } - .release-enhancements { width: 25%; } - - .release-version, - .release-status, - .release-dl, - .release-start, - .release-end, - .release-pep { - -moz-box-orient: vertical; - display: inline-block; - margin-right: -4px; - vertical-align: middle; - } - - .release-version { width: 10%; } - .release-status { width: 20%; } - .release-dl { width: 15%; } - .release-start { width: 20%; } - .release-end { width: 20%; } - .release-pep { width: 15%; } - - /* Previous Next pattern */ - .previous-next { - @include clearfix(); - - a { @include pe-box-sizing(); } - .prev-button { @include span-columns( 6 ); } - .next-button { @include span-columns( 6 omega ); } - } - - /* Footer */ - .main-footer .jump-link { display: none; } - - .sitemap { - - .tier-1 { - float: left; - width: 50%; - //width: columns( 6 ) + gutter()/2; - - &:nth-child(odd) { clear: left; } - &:nth-child(even) { border-left: 1px solid lighten( $grey-lightest, 6% ); } - - /* Special case, we want the Events subnav to be up under Blog */ - &.element-7 { clear: none; } - } - } - .footer-links { - clear: both; - text-align: center; - - li { display: inline-block; } - } - -} - - -/* ! ===== Larger than 800px - Medium ===== */ -@mixin min_width_800() { - - .site-headline { margin: .25em 0 .5em; } - - .site-headline a { - - .python-logo { - width: 290px * .88; - height: 82px * .88; - } - .psf-logo { - width: 334px * .88; - height: 82px * .88; - } - } - - .donate-button { - top: 33px; - } - - .options-bar { margin: rhythm( .5 ) 0; } - - .search-field { - background: $white; - padding: .4em .5em .3em; - margin-right: .5em; - width: 11em; - - &:focus { width: 13em; } - } - - .home .header-banner { margin: 0 2em 0 1em; } - - .slideshow .slides li { @include clearfix(); } - - .slide-code, .slide-copy { - float: left; - width: 50%; - min-height: 280px; - } - - .slide-code { - position: relative; - line-height: 1.5; - } - - .js .launch-shell { display: block; } - - /* - Launch Interactive Shell>>> - */ - .flexslide .launch-shell { - display: block; - position: absolute; - top: 1.25em; right: 52%; - z-index: 50; - - span, a { display: inline-block; } - - .button { - padding-bottom: .2em; - - .message { - opacity: 0; - position: absolute; - top: -9999px; right: 2.6em; - white-space: nowrap; - padding: .4em .75em .35em; - color: $grey-light; - @include vertical-gradient( $grey-dark, darken($grey-dark, 8%) ); - @include pe-border( $color-top: #444, $color-right: #444, $color-bottom: #444, $color-left: #444 ); - @include border-radius(); - @include box-shadow( 1px 1px 1px rgba(#000, 0.05) ); - @include transition( opacity .25s ease-in-out, top 0s linear .25s); - } - - &:hover .message { - opacity: 1; - top: 0; - @include transition( opacity .25s ease-in-out, top 0s linear); - } - } - } - - .no-touch .launch-shell { - - - } - - .introduction { - text-align: center; - - .breaker { @include breaker_bar(); } - } - - /* Header-banners */ - .main-header .container { padding-bottom: 0; } - - .header-banner { - padding: 0 0 0 1em; - margin: 0 -1em 0 0; - } - - .about-banner, - .download-for-current-os, - .documentation-banner, - .community-banner { - @include pad( 0,6 ); - padding-top: 1em; - } - - .about-banner { - background: 120% 0 no-repeat image-url("landing-about.png") transparent; - min-height: 345px; - padding-bottom: 3.5em; - margin-bottom: -2.5em; - } - - .download-for-current-os { - background: 130% 0 no-repeat image-url("landing-downloads.png") transparent; - min-height: 345px; - padding-bottom: 4em; - margin-bottom: -3em; - } - - .documentation-banner { - background: 130% 0 no-repeat image-url("landing-docs.png") transparent; - padding-bottom: 1em; - } - - .community-banner { - text-align: left; // Why is this needed? - background: 110% 0 no-repeat image-url("landing-community.png") transparent; - min-height: 345px; - padding-bottom: 2em; - margin-bottom: -1.25em; - } - - .welcome-to-the-foundation { - padding-top: 2em; - padding-bottom: 2em; - } - - /* Blog landing page */ - /*h2*/ .welcome-message { - text-align: left; - position: absolute; - left: 0; - width: columns( 3 ); - @include leader( .325 ); - } - - .latest-blog-post, - .featured-event, - .jobs-intro { - position: relative; - text-align: left; - min-height: 130px; - - .call-to-action { @include pre( 4 ); } - - .date-posted, .event-date { - position: absolute; - left: 0; - width: columns( 4 ); - } - - .date-posted time { - position: relative; - top: 30px; - } - - - .excerpt { @include pre( 4 ); } - } - - /* Main content with sidebars */ - .home .content-wrapper { - - .container { padding-top: 2.5em; } - } - - .main-content { - - &.with-left-sidebar { @include span-columns( 9 omega ); } - &.with-right-sidebar { @include span-columns( 9 ); } - } - - /*aside*/ .left-sidebar { @include span-columns( 3 ); } - - /*aside*/ .right-sidebar { @include span-columns( 3 omega ); } - - .featured-success-story { - - /*blockquote*/ .success-quote { - // font-size: px2em( 32px ); - - &:before, &:after { font-size: px2em( 38px ); } - } - } - - .quote-by, .quote-by-organization { @include pe-inline-block; } - - .quote-by-organization:before { - content: ", "; - margin-left: -.25em; - } - - .activity-feed { - position: absolute; - right: 0; - } - - .psf-widget, .python-needs-you-widget { - min-height: 14em; - position: relative; - - .python-logo { - position: absolute; - top: 0.5em; right: 1em; - width: 210px; - height: 210px; - background: top left no-repeat image-url("python-logo-large.png") transparent; - } - - .widget-title, p { @include post( 4 ); } - } - - .triple-widget { - @include span-columns( 4 ); - - &.last { margin-right: 0; } - } - - /* ! Events landing page */ - .list-recent-events, .list-recent-posts { - - .event-title, p { - @include pre( 3 ); - } - time { - position: absolute; - top: .3em; left: 0; - width: columns( 3 ); - } - } - - /* Jobs Section */ - .list-recent-jobs { - - .listing-company-category, .listing-job-type { - - a { white-space: nowrap; } - } - - .listing-posted { - @include span-columns( 6 ); - margin-right: 0; - } - - .listing-company-category { - @include span-columns( 6 omega ); - text-align: right; - clear: none; - } - - .listing-actions { - clear: both; - @include clearfix(); - padding-top: px2em( 15px ); - text-align: right; - } - } - /*h2*/ .listing-company { - - .listing-company-name { - @include span-columns( 7 ); - - a:hover:after, a:focus:after { - color: $grey; - content: " View Details"; - font-size: .75em; - } - } - .listing-location { - @include span-columns( 5 omega ); - text-align: right; - } - } - - .job-meta { - @include span-columns( 6 ); - margin-bottom: 0; - } - - .job-tags { @include span-columns( 6 omega ); } - - /* Forms that are wide enough to have labels and input fields side by side */ - .wide-form { - - ul { margin-left: 24%; } - - p { - @include clearfix(); - - label, textarea { - display: inline-block; - vertical-align: top; - } - - label { - width: 24%; - //float: left; - //margin-top: .5em; - } - /* ! This is done the wrong way with SASS. Should be something like \#{$form-text-inputs} with $form-text-inputs as a variable */ - @include input_text_types() { - width: 75%; - display: inline-block; - vertical-align: top; - } - textarea { width: 75%; } - - button { margin-left: 24%; } - - button + button { margin-left: 0; } - } - } - - .jobs-form { - - ul { - margin-top: -3.25em; - @include pie-clearfix; - - li { - float: left; - width: 33%; - } - } - - ul.errorlist { - /* Reset margin for errorlist so that messages are not drawn over - other labels */ - margin-top: 0; - } - } - - /* Footer */ - .sitemap, .footer-links, .copyright { font-size: px2em( 14px ); } - - .sitemap { - - .tier-1 { - width: 32.97872%; - //width: columns( 4 ) + gutter()/2; - border-left: 0; - border-right: 0; - - &:nth-child(odd), - &:nth-child(even) { - clear: none; - border-left: 0; - border-right: 0; - } - &.element-1, - &.element-2, - &.element-4, - &.element-5, - &.element-8 { - border-right: 1px solid lighten( $grey-lighter, 4% ); - } - &.element-2, - &.element-3, - &.element-5, - &.element-6, - &.element-7, - &.element-8, - &.element-9 { - border-left: 1px solid lighten( $grey-lightest, 6% ); - } - } - } - .footer-links { - - .say-no-more { - display: inline; - visibility: visible; - } - } -} - - -/* ! ===== Larger than 940px - Large ===== */ -@mixin min_width_940() { - - /* Simple Column Structure */ - .four-col { - & > .column { width: 25%; } - & > .double-col { width: 50%; } - & > div:nth-of-type(2n+3) { clear: none; } - & > div:nth-of-type(4n+5) { clear: left; } - } - - .site-headline a { - - .python-logo { - width: 290px; - height: 82px; - } - .psf-logo { - width: 334px; - height: 82px; - } - } - .search-field { - width: 14em; - - &:focus { - width: 18em; - margin-right: .5em; - } - } - - .donate-button { - top: 38px; - } - - .options-bar { margin: rhythm( .75 ) 0; } - - /* Supernavs in main-navigation */ - /*
  • - Downloads - -
    • */ - .with-supernav { - - .subnav { - display: none; - border-right: 1px solid rgba( #666, .3 ); - } - .super-navigation { display: block; } - } - - /*.subnav li*/ - .super-navigation { - color: $grey; - position: absolute; /* relative to the containing LI */ - top: 0; - width: 28em; - min-height: 100%; - text-align: left; - padding: 1.5em 1.75em; - @include pe-border( $color-top: rgba( #fff, .8 ), $color-left: rgba( #fff, .8 ) ); - - .main-navigation & a:not(.button) { - padding: 0; - border: none; - - &:hover, &:focus { - border: none; - background: transparent; - } - &:hover, &:focus { color: $link-hover; } - } - - h2, h3, h4, h5 { margin-top: 0; } - - #community & h4, - #blog & h4, - #events & h4 { - font-family: $alt-font-bold; - font-weight: normal; - font-size: px2em( $headerthree ); - line-height: 1.25em; - margin-bottom: 0; - } - p.date-posted { - color: $grey; - font-size: px2em( 10px ) !important; - font-style: italic; - } - p.excert { - font-size: px2em( 10px ); - line-height: 1.3em; - } - p.quote-by { color: $blue; } - } - .tier-1.element-1, - .tier-1.element-2, - .tier-1.element-3 { - - .super-navigation { left: 100.25%; } - } - .tier-1.element-4, - .tier-1.element-5, - .tier-1.element-6, - .tier-1.element-7 { - - .super-navigation { left: -28em; } - } - .super-navigation .menu { text-align: left; } - /* END Supernavs */ - - - /* Header-banners */ - .about-banner, - .download-for-current-os, - .documentation-banner { - @include pad( 0,5 ); - - & p:last-child { margin-bottom: 0; } - } - .about-banner, - .documentation-banner, - .community-banner { - - p { @include post( 1,7 ); } - } - .about-banner, .documentation-banner { - background-position: 110% 0; - } - .download-for-current-os { - background-position: 115% 0; - padding-bottom: 6em; - margin-bottom: -3em; - } - .community-banner { - background-position: 100% 0; - } - .featured-success-story { - - .success-quote { - @include pre( 1 ); - @include post( 1 ); - } - } - - /* Main content with sidebars */ - .main-content { - - &.with-left-sidebar { @include pad( .5, .5 ); } - } - .single-event-title { @include fontface-adjust( 32px ); } - - /*aside*/ .left-sidebar { } - /*aside*/ .right-sidebar { } - - .text { - - /* Make the intro/first paragraphs slightly larger? */ - & > p:first-of-type { - color: $grey; - font-size: 1.125em; - line-height: 1.6875; - margin-bottom: 1.25em; - } - } - - /* Widgets in main content */ - .small-widget, .medium-widget, .psf-widget, .python-needs-you-widget, .documentation-help { - - p, li { font-size: px2em( 15px ); } - } - - .small-widget { - @include span-columns( 3 ); - - &:nth-child(2) { - margin-right: gutter(); - } - } - - .medium-widget { @include span-columns( 6 ); } - - .small-widget.last, .medium-widget.last { - float: right; - margin-right: 0; - } - - .blog-widget, .event-widget, .most-recent-posts { - - li { padding-left: 7em; } - .say-no-more { - display: inline; - visibility: visible; - } - } - - .psf-widget, - .python-needs-you-widget { - padding: 1.5em 1.75em; - } - - .psf-widget, - .python-needs-you-widget { - - .widget-title, p { @include post( 3 ); } - } - - .mapped-events { - - h2 { margin-top: .5em; } - } - - /* Community landing page */ - .tag-wrapper { display: inline; } - - /* Blog landing page */ - /*h2*/ .welcome-message { width: columns( 3 ); } - - .latest-blog-post, - .featured-event, - .jobs-intro { - - .call-to-action { @include pre( 3 ); } - .date-posted, .event-date { width: columns( 3 ); } - .excerpt { @include pre( 3 ); } - } - .most-recent-posts { - - } - .subscription-channels { - - li { - @include pe-inline-block(); - width: 30%; - } - } - - /* Footer */ - .sitemap { - - a { text-align: left; } - - .tier-1 { - width: 16.6667%; - border: 0; - - &.element-1, - &.element-2, - &.element-3, - &.element-4, - &.element-5, - &.element-6, - &.element-7, - &.element-8, - &.element-9, - &.element-10 { - border: 0; - } - } - .subnav, .subnav li { border: 0; } - } - - .footer-links { - - a { padding: 0.3em 0.75em; } - } -} - - -/* ! ===== Larger than 1024px - ExtraLarge ===== */ -@mixin min_width_1024() { - - .about-banner { background-position: 100% 0px; } - - .download-for-current-os { - background-position: 105% 0; - - p { @include post( 1,7 ); } - } - - .documentation-banner { - background-position: 110% 0; - min-height: 345px; - - .call-to-action { @include post( 1 ); } - p { margin-right: 0; } - } - - .community-banner { - @include pad( 0,6 ); - - p { margin-right: 0; } - } - - .latest-blog-post, - .featured-event, - .jobs-intro { - - .call-to-action { @include squish( 3, 1 ); } - .excerpt { @include squish( 3, 1 ); } - } - - .psf-widget { - - .widget-title, p { @include post( 4 ); } - } - - .mapped-events { - - h2 { margin-top: 1em; } - } - - /* Main content with sidebars */ - .main-content { - - .default-page &.with-left-sidebar { @include pad( 1, 1 ); } - } - - .event-description, - .job-description { - @include pad( 1,1 ); - } -} - - -/* ! ===== Larger than 1200px - Supersize ===== */ -@mixin min_width_1200() { - - .about-banner, - .community-banner { - @include pad( 1,6 ); - } - - .about-banner { background-position: 85% 0; } - - .download-for-current-os { - @include pad( 1,5 ); - background-position: 95% 0; - padding-bottom: 6em; - margin-bottom: -3em; - - p { @include post( 1,6 ); } - } - - .documentation-banner { - @include pad( 1,5 ); - background-position: 100% 0; - - .call-to-action { - @include post( 1,6 ); - } - } - - .community-banner { background-position: 90% 0; } -} diff --git a/static/sass/_mixins.scss b/static/sass/_mixins.scss deleted file mode 100644 index 1e0fc3b95..000000000 --- a/static/sass/_mixins.scss +++ /dev/null @@ -1,529 +0,0 @@ -/* ! ===== LOCAL EXTENDABLE STYLES ===== - * - * "Local" mixins can be used with the @extend operative. - * If the rule name has a % in front of it, it will not be output as part of the file, only if called with @extend - * Unfortunately, the @extend operative does not work inside a media query or mix-in - */ - -/* Color Spaces: use for consistency */ -%blue-colorspace { - @include vertical-gradient( darken($blue, 20%), darken($blue, 10%) ); - @include box-shadow( inset 0 0 50px rgba(#000, 0.03), inset 0 0 20px rgba(#000, 0.03) ); -} - -%blue-colorbox { - @extend %blue-colorspace; - margin-bottom: 0.5em; - padding: 1.25em; - @include pie-clearfix(); - - .button { - @extend %button-style-yellow; - } -} - -%grey-colorspace { - @include vertical-gradient( $grey-lightest, darken($grey-lightest, 5%) ); - @include box-shadow( inset 0 0 10px rgba(#000, 0.01) ); -} - -%grey-colorbox { - @extend %grey-colorspace; - border: 1px solid $default-border-color; - margin-bottom: 0.5em; - padding: 1.25em; - @include pie-clearfix(); -} - -%yellow-colorspace { - @include vertical-gradient( lighten( $yellow, 18%), lighten( $yellow, 8%) ); - @include box-shadow( inset 0 0 10px rgba(#000, 0.05) ); -} - -%yellow-colorbox { - @extend %yellow-colorspace; - border: 1px solid darken( $yellow, 6% ); - margin-bottom: 0.5em; - padding: 1.25em; - @include pie-clearfix(); -} - - -/* Buttons */ -%button-style { - cursor: pointer; - color: darken($grey, 10%) !important; - font-weight: normal; - margin-bottom: rhythm(.25); - padding: .4em .75em .35em; - text-align: left; - white-space: nowrap; - text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); - @include vertical-gradient( lighten( $grey-light, 25% ), lighten($grey-light, 20%) ); - @include pe-border( $color-top: $default-border-color, $color-right: $default-border-color, $color-bottom: $grey-light, $color-left: $default-border-color ); - @include border-radius(); - @include box-shadow( 1px 1px 1px rgba(#000, 0.05) , inset 0 0 5px rgba(#fff, 0.5) ); - - &:hover, &:focus, &:active { - color: darken($grey, 30%) !important; - @include vertical-gradient( lighten( $grey-light, 30% ), lighten($grey-light, 25%) ); - } -} - -%button-style-yellow { - @extend %button-style; - @include vertical-gradient( lighten($yellow, 10%), $yellow ); - @include pe-border( $color-top: darken($yellow, 20%), $color-right: darken($yellow, 20%), $color-bottom: darken($yellow, 20%), $color-left: darken($yellow, 20%) ); - - &:hover, &:active { - background-color: inherit; - @include vertical-gradient( lighten($yellow, 20%), $yellow ); - } -} - -%button-style-red { - @extend %button-style; - @include vertical-gradient( lighten($red, 10%), $red ); - @include pe-border( $color-top: darken($red, 20%), $color-right: darken($red, 20%), $color-bottom: darken($red, 20%), $color-left: darken($red, 20%) ); - - color: $white !important; - - &:hover, &:active { - background-color: inherit; - color: $white !important; - @include vertical-gradient( lighten($red, 20%), $red ); - } -} - -%button-style-blue { - @extend %button-style; - color: $grey-lightest !important; - text-shadow: none; - @include vertical-gradient( $blue, darken($blue, 10%) ); - @include pe-border( $color-top: lighten($blue, 5%), $color-right: $blue, $color-bottom: $blue, $color-left: lighten($blue, 5%) ); - @include box-shadow( inset 0 0 5px rgba($blue, 0.2) ); - - &:hover, &:active { - background: inherit; - color: $grey-lighterest !important; - @include vertical-gradient(darken($blue, 5%), darken($blue, 15%) ); - } -} - -%link-style { - border-bottom: 1px solid lighten($yellow, 10%); - text-decoration: none; - - &:hover, &:focus { - border-bottom-color: $yellow; - } -} - -%link-style-on-blue { - -} - - -/* Other elements */ -%indent-time-elements { - - li { - border-top: 1px solid $default-border-color; - padding-left: 4em; - padding-top: rhythm(0.25); - padding-bottom: rhythm(0.25); - position: relative; - - time { - position: absolute; - top: 50%; - left: 0; - margin-top: -.75em; - } - } -} - -%square-block-buttons { - /* Used in the pagination UL anchors, and in the Previous Next pattern */ - display: block; - color: $grey-light; - padding: .5em .75em .4em; - border: 1px solid $default-border-color; - background-color: transparent; -} - -%pie-clearfix { @include pie-clearfix(); } - - -/* ! ===== Mixins ===== */ - -@mixin embossed_text { - @include text-shadow( 0 1px 1px rgba(255,255,255,0.8), 0 -1px 1px rgba(0,0,0,0.2) ); -} - -@mixin inset_box_base( $style: light ) { - display: inline-block; - padding: .5em .75em .4em; - margin-botttom: 5px; - line-height: 1; - @include border-radius(); - - @if $style == light { - // @include box-shadow( 0 1px 1px #ffffff, 0 1px 2px rgba(153,153,153,0.5) inset, 0 2px 4px rgba(153,153,153,0.5) ); - @include box-shadow( inset 0 1px 2px rgba(153,153,153,0.5) ); - // background: center repeat url("../img/whitenoise-5per.png") #ccc; - background: #ccc; - - &:hover, &:focus, &:active { - // background-color: #e6e6e6; - background: #d6d6d6; - } - } - @if $style == dark { - @include box-shadow( 0 1px 1px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.8) inset, 0 2px 3px rgba(0,0,0,0.8) ); - // background: center repeat url("../img/whitenoise-5per.png") #444; - background: #444; - - &:hover, &:focus, &:active { - background-color: #222; - } - } -} - -/* An element than can force a line break, to be used inside certain breakpoints on lines of text or bwteen elements */ -@mixin breaker_bar() { - display: block; - width: 100%; - height: 1px; - font-size: 1px; - line-height: 1px; -} - -/* A pointer mix-in. Something to help make little triangles easy. Apply to a :before or :after element */ -@mixin pointer( $size ) { - position: absolute; - content: ""; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: $size; -} - - -/* Apply to individual elements when we want to force line breaks. */ -@mixin break-long-urls() { - white-space: pre; /* CSS 2.0 */ - white-space: pre-wrap; /* CSS 2.1 */ - white-space: pre-line; /* CSS 3.0 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - white-space: -moz-pre-wrap; /* Mozilla */ - white-space: -hp-pre-wrap; /* HP Printers */ - word-wrap: break-word; /* IE 5+ */ -} - - -/* Base styles for a navigation mixin */ -@mixin horizontal_nav_base() { - text-align: center; - overflow: visible; - - /*ul*/ .menu { margin-bottom: 0; } - - .tier-1, .tier-2 { - - /* We do this more explictly (the descendant selector) to avoid also styling links in the Supernav content */ - & > a { - display: block; - padding: .5em 1.5em .4em 1em; - position: relative; - } - } - /*li*/ .tier-1 { - display: block; - width: 100%; - - & > a { text-align: center; } - } - /*li*/ .tier-2 { - - & > a { text-align: left; } - } -} - - -/* Base styles for a navigation with dropdowns mixin */ -@mixin horizontal_nav_dropdowns() { - - /*ul*/ .menu { @include pie-clearfix(); } - - .tier-1 { position: relative; } - - .subnav { - position: absolute; - z-index: 100; - text-align: left; - - /*modernizr*/ .no-touch & { - min-width: 100%; - display: none; - @include transition( all 0s ease ); - } - - /*modernizr*/ .touch & { - top: 120%; - display: none; - opacity: 0; - @include transition( opacity .25s ease-in-out ); - @include box-shadow( 0 .25em .75em rgba( #000, 0.6 ) ); - - &:before { - @include pointer( .75em ); - top: -1.45em; - display: block; - } - } - } - - .no-touch & { - - .element-1, .element-2, .element-3, .element-4 { - - &:hover .subnav, &:focus .subnav { - left: 0; - display: initial; - @include transition-delay( .25s ); - } - } - - .element-5, .element-6, .element-7, .element-8, .last { - - &:hover .subnav, &:focus .subnav { - right: 0; - display: initial; - @include transition-delay( .25s ); - } - } - } - - .touch & { - - .element-1, .element-2, .element-3, .element-4 { - - &:hover .subnav, & .subnav.touched { - display: block; - opacity: 1; - left: 0; - } - /* Position the pointer element */ - & .subnav:before { left: 1.5em; } - } - - .element-5, .element-6, .element-7, .element-8, .last { - - &:hover .subnav, & .subnav.touched { - display: block; - opacity: 1; - right: 0; - } - /* Position the pointer element */ - & .subnav:before { - left: auto; - right: 1.5em; - } - } - } - - .tier-2 { - display: block; - min-width: 100%; - - a { white-space: nowrap; } - } -} - - -/* A two-tier, stacked version of the main navigation -- DESKTOP ONLY */ -@mixin stacked_nav() { - - .main-navigation { - - /* Include the mixins to start our horizontal nav - * Don't wrap this in a .touch or .no-touch, as it has those selectors already inside - */ - @include horizontal_nav_base(); - @include horizontal_nav_dropdowns(); - } - - .no-touch .main-navigation { - display: block; - clear: both; - text-align: center; - @include border-radius( 8px 8px 0 0 ); - @include box-shadow(0 0 10px rgba(0, 0, 0, 0.2) ); - - .tier-1 { - float: left; - width: 33.333333%; - - &.element-6:not(.unstacked), &.element-7:not(.unstacked) { width: 16.6666665%; } - - &.element-1 { - @include border-top-left-radius( 8px ); - - & > a { @include border-top-left-radius( 7px ); } - } - &.element-3 { - @include border-top-right-radius( 8px ); - border-right: 0; - - & > a { - @include border-top-right-radius( 7px ); - border-right: 0; - } - } - // &.element-4 { @include border-bottom-left-radius( 8px ); } - &.element-7 { /* @include border-bottom-right-radius( 8px ); */ border-right: 0; } - } - - .tier-2 { - font-size: px2em( 14px ); - & > a { @include pe-border( $color-right: rgba( #fff, .8 ) ); } - } - - .subnav { @include box-shadow( 0 .5em .5em rgba( 0,0,0,0.3) ); } - } - - /* Shorten the amount of blue space under the nav on inner pages */ - .no-touch .default-page .main-navigation { - position: relative; - margin-bottom: -.0625em; - } -} - - -/* A single row of main navigation -- DESKTOP ONLY */ -@mixin horizontal_nav() { - - .main-navigation { - - /* Include the mixins to start our horizontal nav - * Don't wrap this in a .touch or .no-touch, as it has those selectors already inside - */ - @include horizontal_nav_base(); - @include horizontal_nav_dropdowns(); - } - - .no-touch .main-navigation { - display: block; - text-align: center; - font-size: px2em( 18px ); - @include border-radius(8px); - @include box-shadow(0 0 10px rgba(0, 0, 0, 0.2) ); - - .menu { text-align: center; } - - .tier-1 { - float: none; - border-top: 0; - border-bottom: 0; - /* Conside display: table; on the wrapper (ul.main-navigation) to get the centering to work, and to allow floats here */ - width: auto; - margin: 0 -5px 0 0; - @include pe-inline-block(); - @include pe-border( $color-left: rgba( #fff, .1 ), $color-right: rgba( #000, .2 ) ); - - &.element-1 { border-left: 0; } - - &.last { border-right: 0; } - - /* We've set this explicitly before, so we need to unset it here */ - &.element-6, &.element-7 { width: auto; } - - & > a { padding: .65em 1.25em .55em; } - } - - .tier-2 { font-size: px2em( 14px ); } - } - - /* Shorten the amount of blue space under the nav on inner pages */ - .no-touch .default-page .main-navigation { - position: relative; - margin-bottom: -1.375em; - } -} - - -@mixin drawer_nav_fortouch() { - /* - - -! Because "touch" is present, we assume that the browser can handle cssTransform3d and cssTransition, which might be dangerous -! If there is no javascript running, than the .jump-to-menu link will jump to #site-map (footer) and the .main-navigatin will remain offscreen, which is not such a bad fallback. - -*/ - $menuwidth: 260px; - - .touch { - - body, #touchnav-wrapper { - position: relative; - width: 100%; - } - - .default-page .main-header { position: static; } - - .main-navigation { - display: block; - position: absolute; - top: 0; left: - $menuwidth; - width: $menuwidth; - height: 100%; - overflow: scroll; - - /* styles that are not being applied because they are inside .no-touch in other nav patterns */ - text-align: center; - font-size: px2em( 18px ); - - a { - text-align: center; - padding: .65em 1.25em .55em; - } - - .tier-2 { font-size: px2em( 14px ); } - - /* Reset some styles from the drop down menus */ - .subnav { - position: static; - display: block; - opacity: 1; - border-top: 0; - @include box-shadow( none ); - } - } - } - - /* TO DO: With Javascript, look for a left-right swipe action and also trigger the menu to open */ - #touchnav-wrapper { - - .touch & { - @include transition( transform 300ms ease ); - @include transform( translate3d( 0, 0, 0 ) ); - -webkit-backface-visibility: hidden; - } - .touch .show-sidemenu & { - @include transform( translate3d( $menuwidth, 0, 0 ) ); - } - } -} diff --git a/static/sass/mq.scss b/static/sass/mq.scss deleted file mode 100644 index 26a361717..000000000 --- a/static/sass/mq.scss +++ /dev/null @@ -1,165 +0,0 @@ -@import "base"; -@import "functions"; -@import "mixins"; -@import "flexslider"; - -/* Mixins for media query parts */ -@import "layout"; - - -@mixin javascript_tag( $content ) { - content: $content; - display: none; - speak: none; -} - -/* - * We "label" the body with strings that correspond to js functions that we want to fire. - * A window.resize() event checks this label and functions fire when conditions are met - * - * The nice part is, these labels can be strings with more than one item in them. - * As many JS functions that we want to fire at different widths can be controlled with tese labels. - */ - - -/* - - - Smaller than 400px - - - */ -@media (max-width: px2em( 399px )) { - - @include max_width_399(); - -} - - -/* - - - Smaller than 480px - - - */ -@media (max-width: px2em( 480px )) { - - body:after { - @include javascript_tag( 'animatebody' ); - } - .tier-1 { - position: static !important; - } - - @include max_width_480(); -} - - -/* - - - Larger than 400px - - - */ -@media (min-width: px2em( 400px )) { - - body:after { - @include javascript_tag( 'animatebody' ); - } - - @include min_width_400(); -} - - -/* - - - Larger than 480px - - - */ -@media (min-width: px2em( 480px )) { - - body:after { - @include javascript_tag( 'animatebody' ); - } - - @include min_width_480(); -} - - -/* - - - Larger than 520px - - - */ -@media (min-width: px2em( 520px )) { - - body:after { - @include javascript_tag( 'animatebody' ); - } - - @include min_width_520(); -} - - -/* - - - Larger than 640px, less that 940px - - - */ -@media (min-width: px2em( 639px )) and (max-width: px2em( 940px )) { - - body:after { - @include javascript_tag( 'drawer_navigation' ); - } - - @include stacked_nav(); -} - - -/* - - - Larger than 640px - - - */ -@media (min-width: px2em( 640px )) { - - body:after { - @include javascript_tag( 'drawer_navigation' ); - } - - /* The order in which we include these is important */ - @include drawer_nav_fortouch; - - @include min_width_640; -} - - -/* - - - Larger than 800px - - - */ -@media (min-width: px2em( 800px )) { - - body:after { - @include javascript_tag( 'drawer_navigation' ); - } - - @include min_width_800; - - @include flexslider_mq_medium; -} - - -/* - - - Larger than 940px - - - */ -@media (min-width: px2em( 940px )) { - - body:after { - @include javascript_tag( 'drawer_navigation load_supernavs' ); - } - - @include horizontal_nav; - - @include min_width_940; - - @include flexslider_mq_large; - - /* I don't like including this again. - * The problem is, touch device styles are being clobbered by contents in the horizontal_nav_dropdowns mixin - * We need the contents of that mixin to function in the Social Share and Font Adjust drop downs */ - @include drawer_nav_fortouch; -} - - -/* - - - Larger than 1024px - - - */ -@media (min-width: px2em( 1024px )) { - - body:after { - @include javascript_tag( 'drawer_navigation load_supernavs' ); - } - - @include min_width_1024; -} - - -/* - - - Larger than 1200px - - - */ -@media (min-width: px2em( 1200px )) { - - body:after { - @include javascript_tag( 'drawer_navigation load_supernavs' ); - } - - @include min_width_1200; -} - - -/* http://dev.w3.org/csswg/css-device-adapt/ - * http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ - * for IE10 Snap Mode on Metro - */ -@-ms-viewport { width: device-width; } -@viewport { width: device-width; } diff --git a/static/sass/style.scss b/static/sass/style.scss deleted file mode 100644 index a414a0d5a..000000000 --- a/static/sass/style.scss +++ /dev/null @@ -1,3025 +0,0 @@ -@import "base"; -@import "functions"; -@import "mixins"; -@import "flexslider"; - -@include html5boilerplate_reset; - - -/* - * Main CSS styles for linear content. Design for Mobile first! - * - * Use attribute selectors when it makes sense: - * [class*=wrapper] means any class that is exactly "wrapper". Not as useful as these: - * See http://24ways.org/2012/a-harder-working-class/ - * [class*=pod] means any class containing the expression "pod" - * [href^=http] means any href that starts with "http" - * [href$=pdf] means any href that ends in "pdf" - */ - - -/* - * KNOWN Bugs and rendering issues - * - * When italic is used, in Android browsers (newer), they render in the italic font AND are additionally obliqued/skewed. Might be an OS thing, I've seen this happen with other sites as well. - * - * Can we figure out a way to get rid of ALL uses of !important? - * - * Search for "This is a mess and dumb" and fix that issue - * - * Get rid of the need for Susy to do column calculations. Use the .col-row negative margins, .column right and left padding technique instead. Removes the need for .last as well. - * DRAWBACK: relies heavily on border-sizing: border-box which may be a headache in old IE. - */ - - - - -/* ===== GLOBAL TYPOGRAPHIC & ELEMENT STYLES ===== */ -html { - background-color: darken($blue, 10%); - font: normal 100%/1.625 $default-font; -} - -body { - color: $default-color; - background-color: $white; - - /* Label the body with our media query parameters. Then check with JS to coordinate @media changes */ - &:after { - content: 'small'; - display: none; - } -} - -body, input, textarea, select, button { - color: $default-color; - font: normal 100%/1.625 $default-font; -} - -* { @include pe-box-sizing( border-box ); } - -a, a:active, a:visited, a:hover, a:visited:hover { - color: $link-color; - text-decoration: none; -} - -table tr td { - a, a:active, a:visited, a:hover, a:visited:hover { - color: darken($link-color, 2%); - } -} - -a:hover, a:focus { color: $link-hover; } - -/*modernizr*/ .touch a[href^="tel:"] { border-bottom: 1px dotted $default-color; } - -a img { - display: block; - margin: 0 auto; -} - -/* Set the highlight colors. These selection declarations have to be separate */ -::-moz-selection { background: $link-color; color: #fff; text-shadow: none; } -::selection { background: $link-color; color: #fff; text-shadow: none; } -a:link { -webkit-tap-highlight-color: $link-hover; } - -img, embed, object, video { max-width: 100% } - -.giga { @include fontface-adjust( $giga ); } -.mega { @include fontface-adjust( $mega ); } -.kilo { @include fontface-adjust( $kilo ); } - -h1, .alpha { - color: $blue; - font-family: $default-font-bold; - line-height: 1em; - font-size: px2em( $headerone ); - @include trailer(.25); - //@include fontface-adjust( 28px ); -} - -h2, .beta { - color: $grey-darker; - font-family: $default-font; - font-size: px2em( $headertwo ); - @include leader(.75); - @include trailer(.1875); - //@include fontface-adjust( 24px ); -} - -h3, .chi { - color: $grey-darker; - //font-family: $default-font-bold; - font-size: px2em( $headerthree ); - @include leader(1); - @include trailer(.25); - //@include fontface-adjust( 21px ); -} - -h4, .delta { - color: $grey-darker; - font-family: $default-font-bold; - font-size: px2em( $headerfour ); - @include leader(.75); - @include trailer(.25); -} - -h5, .epsilon { - color: $grey-darker; - font-family: $default-font-bold; - text-transform: uppercase; - letter-spacing: 0.0625em; - @include leader(1); -} - -h6, .gamma { - color: $grey-darker; - font-family: $default-font-bold; - @include leader(1); -} - -blockquote { - position: relative; - font: italic px2em( 18px ) Georgia, serif; - line-height: 2; - padding-top: rhythm(.75); - padding-bottom: rhythm(.75); - border-top: 3px solid lighten( $yellow, 20% ); - border-bottom: 3px solid lighten( $yellow, 20% ); - margin-bottom: rhythm(0.75); - - /*&:before, &:after { - color: $grey-lighter; - font-style: normal; - font-size: 4em; - position: absolute; - } - - &:before { - content: "“"; - top: -.25em; - left: 0; - }*/ - - footer { font: normal px2em( 14px, 18px ) $default-font; } - - em { font-style: normal; } -} - -dl { - border-top: 1px solid $grey-lightest; - - dt { - font-family: $default-font-bold; - border-bottom: 1px solid $grey-lightest; - } - - dd { - padding-left: 1.5em; - border-bottom: 1px solid $grey-lighter; - } -} - - -/* ! ===== Form elements ===== */ -form { - @extend %pie-clearfix; - - ul { @extend .menu; } -} - -.errorlist { - @extend .menu; - color: $red; - margin-bottom: 0; - - &:before { @extend .icon-arrow-down; } - - & + label { margin-top: 0; } -} - -.error-message { color: $red; } - -label { - display: block; - color: $grey-light; - font-weight: bold; - @include leader( .5 ); - @include leader( .125 ); - - &.active { color: $blue; } -} - -input, textarea { - width: 100%; - padding: .65em; - border: 1px solid $default-border-color; - @include border-radius(); -} - -input, textarea, select { margin-bottom: rhythm( .5 ); } - -input[type=checkbox], input[type=radio] { - width: auto; - border: none; - margin-right: .25em; -} - -input[type=radio] { margin-bottom: .25em; } - -input { - - /*modernizr*/ .no-touch &:focus { @include box-shadow( 0px 0px 10px rgba( 0,0,0,0.2 ) ); } - - &[required=required] { border-color: $red; } - - &[required=required]:focus { @include box-shadow( 0px 0px 10px rgba( 255,0,0,0.5 ) ); } -} - -::-webkit-input-placeholder { color: $grey-light; font-style: italic; } -input:-moz-placeholder { color: $grey-light; font-style: italic; } - -/* Not a mistake... I repeat a.button and .button so I do not need to add !important to the color declaration */ -input[type=submit], input[type=reset], button, a.button, .button { - @extend %button-style; - display: block; -} - -a.delete { - @extend %button-style-red; -} - -button[type=submit] { @extend %button-style-blue; } - -.primaryAction { } - -input[type=reset], button.secondaryAction[type=submit] { - @include vertical-gradient( lighten( $grey-light, 10% ), $grey-light ); - @include pe-border( $color-top: $default-border-color, $color-right: $grey-light, $color-bottom: darken( $grey-light, 10% ), $color-left: $grey-light ); - - &:hover, &:focus, &:active { - color: $white; - @include vertical-gradient( $grey-light, lighten( $grey-light, 10% ) ); - } -} - -/* Reset for a special case */ -input[type=image] { width: auto; } - -b, strong { font-family: $default-font-bold; } - -i, em { font-family: $default-font-italic; } - -abbr, dfn { border-bottom: 1px dotted $blue; } - - -/* ! ===== Simple Column Structure – Need to roll this out more widely ===== */ -$colpadpx: 16px; -$colpad: 1em; - -.col-row { - margin: 0 - $colpad; - @include clearfix(); -} - -.column, .not-column { - padding-left: $colpad; - padding-right: $colpad; -} -.column { padding-bottom: rhythm( 1 ); } - -/* Because of em-nesting, if you adjust the $colpad above, you will need to adjust these values as well */ -h1.not-column { - padding-left: px2em( $colpadpx, $headerone ); - padding-right: px2em( $colpadpx, $headerone ); -} - -h2.not-column { - padding-left: px2em( $colpadpx, $headertwo ); - padding-right: px2em( $colpadpx, $headertwo ); -} - - -/* ! ===== HELPFUL CLASSES ===== */ - -/* A useful class that helps control how lines might break. Use carefully and always test. */ -.pre { white-space: nowrap; } - -/* Our own little class for progressive text. Yes, it is a Monty Python reference */ -.say-no-more { - display: none; - visibility: hidden; -} - -/* Styling for a series of angle brackets... >>> */ -.prompt { - font-family: $alt-font; - font-size: 120%; - letter-spacing: -.0625em; -} - -/* Used on "Read More" or "More" links (duh) */ -.readmore, .give-me-more a { - white-space: nowrap; - - &:before { - @extend .prompt; - content: ">>>"; - margin-right: .25em; - } -} - -.larger { font-size: 120%; } - -.indent { padding-left: 2em; } - - -/* ! ===== MAJOR PAGE ELEMENTS ===== */ - -%topbar-hovered-state { - color: $white; - @include vertical-gradient( $top-color: #13191e, $bottom-color: #1f2a32 ); - - &:before { left: 50%; } -} - -.top-bar { - color: #bbb; - background-color: $darkerblue; - border-bottom: 1px solid $darkblue; - - a { - position: relative; - display: block; - color: $grey-light; - background: transparent; - text-align: center; - padding: .5em .75em .4em; - @include adjust-font-size( 16px ); - - /* no fallback for .no-generatedcontent. This is a progressive enhancement */ - &:before { - @include pointer( .5em ); - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: transparent; - top: 0; - left: -9999px; - margin-left: -.25em; - } - - &:hover, &:focus { @extend %topbar-hovered-state; } - } - - li { border-top: 3px solid $blue; } - - .python-meta, .python-meta a:before { border-top-color: $blue; } - .psf-meta, .psf-meta a:before { border-top-color: $psf; } - .docs-meta, .docs-meta a:before { border-top-color: $yellow; } - .pypi-meta, .pypi-meta a:before { border-top-color: $green; } - .jobs-meta, .jobs-meta a:before { border-top-color: $purple; } - .shop-meta, .shop-meta a:before { border-top-color: $red; } - - .python & .python-meta a, - .psf & .psf-meta a, - .docs & .docs-meta a, - .pypi & .pypi-meta a, - .jobs & .jobs-meta a, - .shop & .shop-meta a { @extend %topbar-hovered-state; } -} - -.meta-navigation { - text-align: center; - - /*ul*/ .menu { margin-bottom: 0; } - - .say-no-more { - display: inline; - visibility: visible; - } - - .jump-link { background-color: darken( $darkerblue, 7% ); } -} - - -/* Used in both the main-header and the header-banner */ -.main-header { - @extend %blue-colorspace; - border-top: 1px solid #191919; - border-bottom: 1px solid #444; - - .container { - text-align: center; - padding: .75em 1em; - } -} - -.site-headline { - color: $white; - margin: 0.15em auto 0.2em; - - a { - display: block; - margin: 0 auto; - - .python-logo { - width: 290px * .75; - height: 82px * .75; - } - .psf-logo { - width: 334px * .75; - height: 82px * .75; - } - } -} - -.options-bar-container { - float: none; -} - -.donate-button { - @extend %button-style-yellow; -} - -.donate-button { - display: block; - text-align: center; - position: relative; - top: 0; - margin: 1em 0.7em; -} - -$optionsbar-text: #bbb; - -.options-bar { - width: 100%; - color: $optionsbar-text; - margin-bottom: rhythm( .75 ); - border-top: 1px solid lighten( $darkerblue, 8% ); - border-bottom: 1px solid darken( $darkerblue, 12% ); - background-color: $darkerblue; - line-height: 1em; - @include border-radius(); - - form { padding: 0.35em 0.2em 0.3em; } - - .breaker { - @include breaker_bar(); - border-top: 1px solid darken( $darkerblue, 12% ); - border-bottom: 1px solid lighten( $darkerblue, 8% ); - } - - .subnav { - display: none; - } -} - -#site-map-link, -.jump-to-menu, -.search-the-site, -.icon-search, -.icon-search:before, -input#s, -.adjust-font-size, -.winkwink-nudgenudge, -.account-signin { @include pe-inline-block( middle ); } - -.touch .search-the-site, -.winkwink-nudgenudge, -.account-signin { border-left: 1px solid lighten( $darkerblue, 8% ); } - -.touch #site-map-link, -.jump-to-menu, -.adjust-font-size, -.winkwink-nudgenudge { border-right: 1px solid darken( $darkerblue, 12% ); } - -#site-map-link { - color: $optionsbar-text; - //vertical-align: middle; - //padding: .875em 1em .75em; - - &:hover, &:focus { color: $white; } - - .no-touch & { display: none; } -} - -.menu-icon { - display: inline-block; - font-size: px2em( 20px ); - margin: -.125em -.125em 0 0; -} - -/*form*/ .search-the-site { - text-align: left; - padding: .35em .2em .3em; - - .icon-search:before { - font-size: 1.75em; - //vertical-align: text-bottom; - margin: 0 .125em 0 .25em; - } - .no-touch { border-left: 0; } -} - -/*input*/ .search-field { - width: 4.5em; - margin-bottom: 0; - color: $optionsbar-text; - background-color: transparent; - border: none; - margin: .125em 0; - padding: .4em 0 .3em; - @include border-radius( 0px ); - - &::-webkit-input-placeholder { color: $optionsbar-text; font-style: normal; } - &:-moz-placeholder { color: $optionsbar-text; font-style: normal; } - - &:focus { - background-color: $white; - color: $default-color; - padding: .4em .5em .3em; - - /* removed this line because it was making the height fluctuate on focus: - @include pe-border( $color-top: darken( $darkerblue, 12% ), $color-bottom: lighten( $darkerblue, 8% ) ); */ - } - - &:blur { color: $optionsbar-text; } -} - -.search-button { - @extend %button-style-blue; - margin-right: 0.2em; - margin-bottom: 0; - text-shadow: none; - - /* Small screens (phones) have their own form controls */ - .touch & { display: none; } - - // &:hover, &:focus, &:active { } -} - -.no-touch .adjust-font-size { display: none; } - -.adjust-font-size, -.winkwink-nudgenudge, -.account-signin { - @include horizontal_nav_base(); - @include horizontal_nav_dropdowns(); - - a { - color: $optionsbar-text; - background-color: transparent; - } - - .tier-1 { - float: none; - - &:hover > a { - color: #555; - background-color: $grey-lighter; - } - } - - .subnav { - background-color: $grey-lighter; - - a { - color: #555; - - &:hover, &:focus { - color: $grey-lightest; - background-color: $grey-light; - } - .touch & .tier-2 { - padding-top: .75em; - padding-bottom: .6em; - } - } - - .text-reset { color: #888; } - - /*modernizr*/ .touch & { - top: 135%; - border: 3px solid $grey; - - &:before { - top: -1.6em; - border-color: transparent transparent $grey transparent; - } - } - } - - :hover .subnav { - display: block; - } - - /*.close-subnav { - @include pe-border( $color-bottom: $grey-light ); - - .close-text { padding: .9em 3.25em .8em 1em; } - }*/ -} - -// Show sign in link only in PSF and Jobs pages. -.account-signin { - display: none; -} - -// But show it in all pages if the user is signed in. -.account-signin-authenticated { - display: inline-block; -} - -.psf .account-signin, .jobs .account-signin { - display: inline-block; -} - -#site-map-link, -.adjust-font-size .tier-1 > a, -.winkwink-nudgenudge .tier-1 > a, -.account-signin .tier-1 > a { padding: 1em 1em .875em; } - - //.text-shrink { } - //.text-grow { } - //.text-reset { } - - -/* ! ===== Main navigation – In _layout.scss and _mixins.scss, as we don't display it here ===== */ -.main-navigation { - display: none; - margin-bottom: 1px; -} - - -/* ! ===== Header banner, present on most landing pages ===== */ - -.header-banner { - @extend %pie-clearfix; - clear: both; - margin: 0 1em; - position: relative; - - img { - display: block; - margin: 0 auto; - } - - p { color: $grey-lightest; } - - a:not(.button), a:not(.readmore) { - @extend %link-style; - color: $yellow; - - &:hover, &:focus { color: #fff; } - } - - .button, a.button { - @extend %button-style-yellow; - } -} - -/* Interactive Shell and default Slideshow */ -.home .slideshow { - margin: 0 auto; - max-width: px2em( 980px ); - background: $darkerblue; - @include box-shadow( inset 0 0 30px rgba(#000, .6) ); -} - - .slide-code, - .slide-copy { text-align: left; } - - .slide-code { - overflow: auto; - padding: 1.25em 1.5em; - - code { - display: inline-block; - color: $code-green; - - .k, .ow { color: #6ab825; font-weight: bold; } - .nb { color: #24909d; } - .nf { color: #447fcf; } - .s1, .s2, .sa, .si { color: #ed9d13; } - .mi { color: #3677a9; } - .o { color: $grey-light; } - .c1 { color: $grey-light; font-style: italic; } - .go { color: $grey-lighterer; } - .gp { color: #c65d09; font-weight: bold; } - } - } - - .js .launch-shell, .no-js .launch-shell { display: none; } - - .slide-copy { - background: darken($blue, 22%); - padding: 1.25em 2.5em; - - h1 { - color: $yellow; - font-size: px2em( $headerthree ); - font-family: $default-font-bold; - } - } - - /* Avoid IDs if you can. In this case, these styles are intended to be very specific */ - #dive-into-python .flex-control-paging { - position: absolute; - bottom: 0; left: 50%; - padding: 0 0 1em; - margin-left: 0; - width: 50%; - max-width: 30.75em; - - a { - @extend %button-style-blue; - @include opacity( .7 ); - - &:hover, &:focus { @include opacity( 1 ); } - } - - .flex-active { - color: $yellow !important; - @include opacity( 1 ); - } - } - -.introduction { - color: $grey-lighter; - font-size: px2em( 20px ); - text-align: left; - padding: 0.25em 0.5em; - @include leader(.5); - @include trailer(.5); - - p { - line-height: 1.4em; - margin-bottom: 0; - } - - a, a:link, a:visited { - color: $yellow; - text-decoration: underline; - - &:hover, &:focus { color: $white; } - } - - .breaker { display: none; } -} - -.about-banner, -.download-for-current-os, -.documentation-banner, -.latest-blog-post, -.featured-event, -.jobs-intro { text-align: left; } - -/*h1*/ .call-to-action { - color: $yellow; - font-size: px2em( $headerfour ); - line-height: 1.25em; - @include leader( .25 ); - @include trailer( .25 ); - - a { - color: $yellow; - border-bottom: 2px dotted $blue; - line-height: 1.35em; - - &:hover, &:focus { color: $grey-lightest; } - } -} - -.content-wrapper { - padding: 0; - @include vertical-gradient( #fcfcfc, #f9f9f9 ); - - .container { padding: 0.25em; } -} - - -/* ! ===== Main Content ===== */ - -.main-content { - padding-bottom: rhythm( 1 ); - - &.with-left-sidebar { } - - &.with-right-sidebar { } - - & > article { - margin-top: rhythm( .75 ); - padding-bottom: rhythm( 1 ); - } -} - -.page-title { - color: $grey; - word-spacing: .15em; - @include fontface-adjust( $kilo ); -} - -.event-form .page-title { - margin-top: 0 !important; -} - -/* For when we dont need to extra size buyt do want the margin */ -.default-title { word-spacing: .15em; } - -.text { - font-size: 1em; - - .giga, - .mega, - .kilo { - color: $blue; - } -} - -.sidebar-widget { padding-bottom: rhythm( .75 ); } - - -/* Want to test/debug vertical rhythm? - * http://compass-style.org/reference/compass/layout/grid_background/ - * Set $show-baseline-grid-backgrounds to true; - * - * To tweak the base font size and line height according to the width of the reading container, try this calculator: - * http://www.pearsonified.com/typography/ - */ -$grid-background-baseline-height: $base-line-height; -$grid-background-baseline-color: rgba( $code-green, .5 ); -$show-baseline-grid-backgrounds: false; - - -/* ! Default body text styles for more comfortable reading */ -.text, -.sidebar-widget { - //@include baseline-grid-background(); - - /* Its not great to define headers in more than one place... fix this later please */ - h1 { - margin-top: 1em; - margin-bottom: .25em; - } - - .default-title, .page-title { - @include leader(.75); - @include trailer(.5); - } - - h2 { } - h3 { } - h4 { } - h5 { } - - /* blockquotes should contain

    tags, so remove it from this list when you fix blockquote markup sitewide */ - p, pre, ul, ol, dl, blockquote, address, form, table, figure { - margin-bottom: rhythm(0.75); - line-height: 1.875; - } - - /* Hyphenate specific container elements */ - p, dd, blockquote, address { - @include pe-hyphenate(); - } - - li > ul, - li > ol { margin-bottom: 0; } - - li { - line-height: 1.65em; - margin: rhythm(0.15) 0; - } - - blockquote { - padding-left: 3em; - padding-right: 1em; - } - - form { - line-height: 1.625em; - margin-bottom: rhythm(0.75); - - button, input[type=submit] { - @extend %button-style-blue; - font-size: px2em( 18px ); - padding: .4em 1em .35em; - } - - /* Remove bullets from ULs in forms when containing radios or checkboxes */ - label + ul { @extend .menu; } - } - - a:not(.button) { - @extend %link-style; - display: inline; - - /* Decided not to use this, the style was too obtrusive - &.external:before, &[rel='external']:before { - content: '\21f1'; // An external link unicode icon, looks like a box with arrow pointing up to left from bottom right. - display: inline-block; - font-weight: bold; - color: $grey-light; - margin-right: .5em; - } */ - } - - /* This is a mess and dumb. Figure out a better way */ - nav a, .menu a, input[type=submit], input[type=reset], input[type=button], button, .prompt, - nav a:hover, .menu a:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .prompt:hover, - nav a:focus, .menu a:focus, input[type=submit]:focus, input[type=reset]:focus, input[type=button]:focus, .prompt:focus { - border-bottom: 0; - } - - figcaption { - font-style: italic; - font-size: px2em( 14px ); - } - - abbr[title], - dfn[title] { border-bottom: 1px dotted $blue; } - - abbr[title] { - font-size: .875em; - text-transform: uppercase; - letter-spacing: 0.125em; - } - - var { - color: $grey-darker; - font-size: 104%; - font-weight: 700; - } - - code, kbd, samp { display: inline-block; } - - code, samp { border: 0; } - - samp { - border-bottom: 1px solid $grey-lighter; - background-color: $grey-lightest; - padding: .125em .375em 0; - margin: 0 .25em; - } - - kbd { - padding: .125em .375em 0; - margin: 0 -.0625em; - background: $grey-lightest; - background: rgba( $grey-lightest, .5 ); - @include box-shadow( 0 0 .5em rgba( #000, .1 ) inset ); - @include border-radius(); - } - - pre { - padding: .5em; - border-left: 5px solid $code-green; - background: $grey-lightest; - @include box-shadow( 0 0 .5em rgba( #000, .1 ) inset ); - } - - /* I've seen lots of cases where 

     does not have a  inside of it, so we plan for both cases. */
-    pre code {
-        display: block;
-        padding: 0;
-        margin: 0;
-        @include box-shadow( 0 );
-        @include border-radius( 0 );
-    }
-
-    s, strike, del { color: $grey-light; }
-}
-
-/* Prettier tables if authors use the correct elements */
-table {
-    caption {
-        caption-side: top;
-        color: $default-color;
-        font-size: px2em( 18px );
-        text-align: left;
-        @include trailer(1);
-    }
-
-    thead, tfoot { border-bottom: 1px solid $grey-lighterer; }
-
-    tr {
-        background-color: #f6f6f6;
-
-        & th { background-color: #f0f0f0; }
-    }
-
-    tr:nth-of-type(even), tr.even { background-color: #f0f0f0; }
-
-    th, td {
-      padding: .25em .5em .2em;
-      border-left: 2px solid $white;
-
-      &:first-child { border-left: none; }
-    }
-
-    tfoot { border-top: 1px solid $grey-lighterer; }
-
-    .checksum {
-        font-size: 0.85em;
-
-        .checksum-half { display: inline-block; }
-    }
-}
-
-.documentation-help { }
-
-.row { }
-
-.row-title {
-    border-top: 5px solid darken($grey-lighterest, 10%);
-    padding: 0.75em 1em 0.5em;
-}
-
-
-/* ! ===== Widget Styles ===== */
-
-%widget {
-    border-top: 5px solid $grey-lightest; // default fallback
-    padding: 1.25em;
-
-    h4 {
-        border-top: 1px solid $grey-lightest;
-        margin-top: 1.75em;
-        padding-top: 0.5em;
-    }
-
-    p, ul {
-        margin-bottom: rhythm( .5 );
-
-        &:last-child { margin-bottom: 0; }
-    }
-
-    li > a { display: inline-block; }
-}
-
-.small-widget,
-.medium-widget,
-.sidebar-widget {
-    @extend %widget;
-}
-
-.widget-title,
-.listing-company {
-    color: $default-color;
-    line-height: 1.25em;
-    margin: 0 0 0.1em;
-    font-family: $alt-font;
-    @include fontface-adjust( $headerthree );
-
-    .prompt { display: none; /* show this at first breakpoint */ }
-
-    & > span { margin-right: .25em; }
-
-    & > span:before { color: $grey-light; }
-}
-
-/* ! ===== Section Specific Widget Colorways ===== */
-
-.small-widget,
-.medium-widget,
-.sidebar-widget {
-
-    .python & { border-top: 4px solid lighten($blue, 20%); }
-    .psf-home & { border-top: 5px solid $default-border-color; }
-    .docs & { border-top: 5px solid $yellow; }
-    .pypl & { border-top: 5px solid $green; }
-    .jobs & { border-top: 5px solid lighten($purple, 20%); }
-    .shop & { border-top: 5px solid $red; }
-}
-
-/* ! ===== Section Specific Widget Icon Colorways ===== */
-
-$names: python, psf, docs, pypl, jobs, shop;
-$colors: $blue, $psf, $yellow, $green, $purple, $red;
-
-@for $i from 1 through length($names) {
-
-    .#{nth($names, $i)} .widget-title > span:before,
-    .#{nth($names, $i)} .listing-company > span:before { color: nth($colors, $i); }
-}
-
-
-/* ! ===== Specific Widget Styles ===== */
-
-.get-started-widget { }
-
-.download-widget {
-
-    p:last-child a { white-space: nowrap; }
-}
-
-.featured-downloads-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5em;
-    justify-content: center;
-    margin-bottom: 2em;
-}
-
-.featured-download-box {
-    background-color: $grey-lighterest;
-    border: 1px solid $default-border-color;
-    border-radius: 5px;
-    display: flex;
-    flex: 1 1 300px;
-    flex-direction: column;
-    min-width: 250px;
-    max-width: 400px;
-    padding: 1.25em;
-
-    h3 {
-        margin-top: 0;
-    }
-
-    .button {
-        @include vertical-gradient( lighten($yellow, 10%), $yellow );
-        border: 1px solid darken($yellow, 20%);
-        white-space: normal;
-
-        &:hover, &:active {
-            background-color: inherit;
-            @include vertical-gradient( lighten($yellow, 20%), $yellow );
-        }
-    }
-
-    .download-buttons {
-        margin-bottom: 0;
-        text-align: center;
-    }
-}
-
-.documentation-widget { }
-
-.jobs-widget { }
-
-.time-posted {
-    display: block;
-    font-size: px2em(14px);
-    font-style: italic;
-    margin-bottom: .75em;
-}
-
-.download-list-widget { @extend .small-widget; }
-.active-release-list-widget { @extend .small-widget; }
-
-.blog-widget { @extend %indent-time-elements; }
-
-.blog-name {
-    display: block;
-    font-family: $default-font-bold;
-    letter-spacing: 0.01em;
-}
-
-.event-widget { @extend %indent-time-elements; }
-
-.most-recent-events { @extend .small-widget; }
-
-.success-stories-widget {
-
-    blockquote {
-        //position: relative;
-        color: $grey;
-        background-color: lighten($yellow, 15%);
-        padding: rhythm(.4) 1em rhythm(.5);
-        margin-bottom: rhythm( .25 );
-        @include adjust-font-size( 16px );
-        @include vertical-gradient( lighten($yellow, 15%), lighten($yellow, 10%) );
-        @include border-radius;
-
-        &:after {
-            @include pointer( 1.5em );
-                left: 20%; bottom: -2.875em;
-            border-top-color: lighten($yellow, 10%);
-        }
-
-        a {
-            color: $grey;
-
-            &:hover, &:focus, &:active { color: $blue; }
-        }
-    }
-
-    .quote-from {
-        @extend %pie-clearfix;
-
-        td {
-            padding: .5em;
-            vertical-align: middle;
-        }
-
-        img { max-height: 5em; }
-
-        p { font-size: px2em( 14px ); }
-    }
-}
-
-/*.statistics-widget {
-    padding-left: .75em;
-
-    .stat {
-        background: lighten($blue, 50%);
-        padding: 0.7em 1em 0.875em;
-        border: 1px solid lighten($blue, 40%);
-        @include border-radius;
-        @include vertical-gradient( lighten($blue, 50%) , lighten($blue, 45%) );
-    }
-
-    .number {
-        color: $grey;
-        font-size: px2em( 42px );
-        line-height: 1em;
-        margin-top: 0;
-        margin-bottom: .05em;
-        text-align: center;
-    }
-    .explanation {
-        font-family: $default-font-italic;
-        font-size: px2em( 18px );
-        line-height: 1.2em;
-        margin-bottom: 0;
-        text-align: center;
-    }
-}*/
-
-.applications-widget {
-    padding-left: .75em;
-
-    ul { border-top: 1px solid $default-border-color; }
-
-    li {
-        padding: .5em 0 .4em;
-        border-bottom: 1px solid $default-border-color;
-    }
-}
-
-.triple-widget { @extend .small-widget; }
-
-.shrubbery {
-    position: relative;
-
-    .give-me-more {
-        color: $grey-lighter;
-        display: none;
-        position: absolute;
-        top: .25em; right: .25em;
-
-        a {
-            color: $grey-light;
-
-            &:hover, &:active { color: $grey; }
-        }
-    }
-}
-
-/* ! ===== PSF Board Meeting Minutes ===== */
-.draft-preview { color: $red; font-family: $default-font-bold; }
-
-
-/* ! ===== Success Stories landing page ===== */
-.featured-success-story {
-    padding: rhythm( .75 ) 0;
-    background: center -230px no-repeat image-url("success-glow2.png") transparent;
-    // @include vertical-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) );
-
-    img { padding: 10px 30px; }
-
-    /*blockquote*/ .success-quote {
-        color: $yellow;
-        font-size: px2em( 26px );
-        line-height: 1.5;
-        position: static;
-        text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-
-        &:before, &:after {
-            color: lighten($blue, 10%);
-            font-style: normal;
-            font-size: px2em( 32px );
-            line-height: 0;
-            vertical-align: text-bottom;
-            position: static;
-        }
-
-        &:before {
-            content: "“";
-            top: auto; left: auto;
-            margin-left: -.2em;
-        }
-
-        &:after {
-            content: "”";
-            bottom: auto; right: auto;
-            margin-right: -.2em;
-        }
-    }
-}
-
-    a.activity-feed {
-        border-bottom: none;
-        font-size: px2em( 12px );
-
-        span { margin-right: .25em; }
-    }
-
-    p.quote-by {
-        color: $grey-lightest;
-        margin-bottom: 0;
-    }
-
-    p.quote-by-organization { color: $grey-lightest; }
-
-.newest-success-stories {
-    padding-top: rhythm( .75 );
-
-    .widget-title { position: relative; }
-}
-
-    /* Success Stories inner pages */
-    /*
-    
    {{ story.name }}
    
-    
    {{ story.get_company_name }}
    */
-    .story-header {
-        background-color: $grey-lighterest;
-        margin: -1.3em 0 0;
-        overflow: hidden;
-        max-height: 24em;
-        border-bottom: 3px solid $yellow;
-
-        img {
-            display: block;
-            margin: 0 auto;
-            min-width: 100%;
-        }
-    }
-
-
-/* ! ===== Blog landing page ===== */
-
-/*h2*/ .welcome-message {
-    font-family: $default-font; /* style like an h4 */
-    font-size: px2em( $headerfour );
-    color: darken($yellow, 10%);
-    @include leader( 0 );
-    @include trailer( .5 );
-
-    .fontface & { font-size: px2em( 18px ); }
-}
-
-.latest-blog-post, .featured-event {
-
-    .call-to-action { }
-
-    .date-posted, .event-date { color: lighten( $grey-light, 6% ); }
-
-    p.excerpt { max-width: none; }
-
-    .readmore {
-        color: $yellow;
-
-        &:hover, &:focus { color: $white; }
-    }
-}
-
-.most-recent-posts {
-    @extend .small-widget;
-    @extend %indent-time-elements;
-
-    li time { position: relative; }
-}
-
-.subscribe-widget { }
-
-.subscription-channels { }
-
-
-/* ! ===== Events landing page ===== */
-
-.most-recent-events {
-
-    .menu { }
-}
-
-/*h3*/ .just-missed {
-    color: $blue;
-    @include leader( .75 );
-}
-
-.list-recent-events, .list-recent-posts {
-    border-top: 1px solid $grey-lighterer;
-
-    li {
-        position: relative;
-        border-bottom: 1px solid $grey-lighterer;
-        padding: 0 0 0.75em;
-
-        .date-start,
-        .date-end,
-        .single-date,
-        .time-start,
-        .time-end,
-        .year {
-            position: relative;
-            top: 0;
-        }
-    }
-
-    .event-title {
-        font-size: px2em(20px);
-        line-height: 1.3em;
-        @include leader(.25);
-    }
-}
-
-    /* Event single page */
-    .single-event-title {
-
-    }
-        .single-event-date {
-            @extend %yellow-colorbox;
-            /* resets as this is an H3 element and it behaves differently */
-            margin-top: .75em;
-            margin-bottom: 1.25em;
-            padding: .5em .75em;
-
-            .date-start { }
-            .date-end { }
-            .single-date { }
-            .time-start { }
-            .time-end { }
-            .year { }
-        }
-        .event-description { padding: rhythm( .75 ) 0; }
-
-        .more-by-location {
-            @extend %grey-colorspace;
-            margin-bottom: 0;
-        }
-
-        .most-recent-events .more-by-location { @extend %grey-colorbox; }
-
-        .more-by-category { }
-
-        .more-by-venue { }
-
-
-/* ! ===== Community landing page ===== */
-.community-success-stories {
-
-    blockquote {
-        padding: 0;
-        color: $grey;
-        line-height: 1.5;
-
-        &:before { content: ''; }
-    }
-}
-
-.python-weekly {
-    background-color: $grey-lighterest;
-    @include border-radius(0 0 8px 8px);
-    padding: .75em 1em;
-}
-
-/*ul*/ .twitter-stream {
-
-    li {
-        background-color: $grey-lighterest;
-        line-height: 1.3;
-        padding: .5em;
-        margin-bottom: .25em;
-
-        .view-on-twitter {
-            font-family: $default-font-bold;
-            font-size: px2em( 12px, 14px );
-        }
-    }
-}
-
-.twitteruser { font-family: $default-font-bold;  }
-
-.twittermention { color: $blue;  }
-
-.mapped-events {
-    border-top: 3px solid $grey-lightest;
-
-    .medium-widget { border-top: 0; }
-}
-
-.tag-wrapper {
-    display: block;
-
-    /*a*/ .tag {
-        white-space: nowrap;
-        color: $grey;
-        font-size: px2em( 14px );
-        vertical-align: baseline;
-        padding: .2em .4em .1em;
-        background-color: $grey-lightest;
-        @include pe-border( $color-top: $grey-lighterest, $color-bottom: $default-border-color );
-
-        &:hover, &:focus {
-            color: $default-color;
-            background-color: darken( $grey-lightest, 8% );
-            @include pe-border( $color-top: darken( $grey-lighterest, 8% ), $color-bottom: darken( $default-border-color, 8% ) );
-        }
-    }
-}
-
-.github-widget { }
-
-.git-avatar, .git-repo {
-    display: inline-block;
-    vertical-align: bottom;
-}
-
-.git-avatar { margin-right: .5em; }
-
-.git-repo { padding-bottom: .25em; }
-
-
-/* ! ===== Stylized lists of items, used on Downloads and others ===== */
-.list-row-headings {
-    font-family: $default-font-bold;
-    padding: .5em .5em .4em .75em;;
-    margin-right: 1.25em;
-}
-
-.list-row-container {
-    border: 1px solid $default-border-color;
-
-    li {
-        padding: .5em .5em .4em .75em;
-        margin-right: 0;
-
-        &:nth-child(odd) { background-color: $grey-lighterest; }
-    }
-}
-
-/* ! ===== Pagination ===== */
-/*  */
-
-.pagination,
-.previous-next {
-    display: block;
-    width: 100%;
-    text-align: center;
-    padding-top: rhythm( .75 );
-}
-
-.pagination {
-
-    li {
-        line-height: 2;
-        @include pe-inline-block;
-    }
-
-    a {
-        @extend %square-block-buttons;
-
-        &:hover, &:focus {
-            color: $grey-dark;
-            background-color: $yellow;
-        }
-
-        &.active {
-            color: $grey-lightest;
-            background-color: $blue;
-        }
-
-        &.disabled,
-        &.disabled:hover,
-        &.disabled:focus {
-            color: $grey-lighter;
-            background-color: transparent;
-        }
-    }
-    .previous a, .next a,
-    .previous a:hover,
-    .next a:hover,
-    .previous a:focus,
-    .next a:focus {
-        border: 0;
-    }
-}
-
-
-/* ! ===== Previous / Next display pattern ===== */
-/* 
    
-    
-        ← Previous
-        
-             in 
-        
-    
-    
-        Next →
-        
-            INE Inc. in Seattle, WA, USA
-        
-    
-
    */
-
-.previous-next {
-
-    .prev-button,
-    .next-button {
-        display: block;
-        padding: .5em .75em .4em;
-        margin-bottom: rhythm( .5);
-
-        &:not(.disabled):hover,
-        &:not(.disabled):focus {
-            color: $grey-dark;
-            background-color: $yellow;
-        }
-    }
-
-    .prev-button-text,
-    .next-button-text {
-        display: block;
-        border-bottom: 1px solid $default-border-color;
-        padding-bottom: .5em;
-    }
-
-    .prevnext-description {
-        display: block;
-        padding-top: .5em;
-    }
-
-    .disabled {
-
-        .prev-button-text,
-        .next-button-text {
-            color: $grey-lighter;
-            border-bottom: 0;
-        }
-    }
-
-    .icon-arrow-right,
-    .icon-arrow-left { vertical-align: bottom; }
-
-    /* Special rules for specific templates */
-    .single-event & {
-        margin-top: rhythm( .75 );
-        border-top: 1px solid $default-border-color;
-    }
-}
-
-
-/* ! ===== Downloads templates ===== */
-.release-number,
-.release-date,
-.release-download,
-.release-enhancements {
-    display: block;
-}
-
-.release-number { font-family: $default-font-bold; }
-
-.release-version,
-.release-status,
-.release-start,
-.release-end,
-.release-pep {
-    display: block;
-}
-.release-version { font-family: $default-font-bold; }
-
-
-.active-release-list-widget {
-
-    .list-row-headings,
-    .list-row-container li { font-size: px2em( 14px ); }
-
-    .list-row-container { margin-bottom: .5em; }
-
-    .release-cycle-chart img {
-        display: block;
-        margin: 0 auto;
-        width: 80%;
-        @media screen and (max-width: 860px) {
-            width: 100%;
-        }
-    }
-}
-
-.download-list-widget {
-
-    .list-row-headings,
-    .list-row-container li { font-size: px2em( 14px ); }
-
-    .list-row-container { margin-bottom: .5em; }
-
-    /*modernizr*/ .no-touch & .list-row-container {
-        height: 16.75em;
-        overflow-y: scroll;
-    }
-}
-
-
-/* ! ===== Blue Widgets ===== */
-.psf-widget, .python-needs-you-widget {
-    @extend %blue-colorbox;
-
-    .main-content & a:not(.button) {
-        color: $yellow;
-
-        &:hover, &:focus { color: lighten($yellow, 25%); }
-    }
-
-    .widget-title, .readmore, .readmore:before {
-        color: $yellow;
-
-        &:hover, &:focus { color: #fff; }
-    }
-
-    p { color: $grey-lighter; }
-
-    /*p*/ .click-these { margin-bottom: 0; }
-}
-
-
-/* ! ===== Feedback messages and Alert levels ===== */
-/* 
    
-        
    Can’t find what you’re looking for? Try our comprehensive Help section
    
-    
    */
-
-.user-feedback {
-    padding: .75em 1em .65em;
-    margin-bottom: rhythm( .75 );
-    @include border-radius();
-
-    p { margin-bottom: 0; }
-
-    a {
-        text-decoration: underline;
-
-        &:hover, &:focus { color: $grey-darker; }
-    }
-}
-
-/* A helpful tip */
-.level-general {
-    background-color: lighten($blue, 50%);
-    border: 1px solid lighten($blue, 40%);
-}
-
-/* A slight warning before completing a task */
-.level-notice {
-    background-color: lighten( $yellow, 30% );
-    border: 2px solid $yellow;
-
-    span {
-        color: darken( $yellow, 40% );
-        font-weight: bold;
-    }
-}
-
-/* Something went wrong */
-.level-error {
-    background-color: lighten( $red, 35% );
-    border: 2px solid $red;
-
-    span {
-        color: darken( $red, 15% );
-        font-weight: bold;
-    }
-    a {
-        color: darken( $blue, 10% );
-        &:hover, &:focus { color: darken( $blue, 20% ); }
-    }
-}
-
-/* Yeah! It worked correctly */
-.level-success {
-    background-color: lighten( $green, 35% );
-    border: 2px solid $green;
-
-    span {
-        color: $green;
-        margin-right: .5em;
-    }
-}
-
-
-/* ! ===== SIDEBAR syles ===== */
-
-/*