From e7c4d9cc923811e46b39dbf604997ce30d53f4d2 Mon Sep 17 00:00:00 2001 From: Ryan Lerch Date: Jan 16 2018 12:47:04 +0000 Subject: tidy up css and font files this commit does some general tidyup of how we handle some of the CSS and font files. First, the two fonts we use, open sans and fontawesome are now set up to be pulled down from the central copies we have hosted on apps.fp.org/global. Note that due to CORS restrictions, this means these fonts will work on prod, but not when testing locally. If you install the fonts locally on the system you are looking at the test site at, it will use the fonts. Details on this have been added to the dev documentation. Second, we remove the cantarell and comfortaa fonts in the repo, as these were not being used. We also delete the style-patternlab.css file that was not being used either. --- diff --git a/docs/dev-guide.rst b/docs/dev-guide.rst index 1a81f72..fc5a47c 100644 --- a/docs/dev-guide.rst +++ b/docs/dev-guide.rst @@ -82,6 +82,14 @@ If you do not have Vagrant set up, follow these steps: Once you start the development server in the guest, you should be able to access Fedora Hubs by navigating to http://localhost:5000/ on the browser in your host. +Note that on the development environment, the fonts we get from apps.fedoraproject.org/global +(defined in the master template) will not be downloaded due to CORS restrictions on these files. +On the system that you are browsing your test site, install the fonts locally to work around this. + + $ sudo dnf install fontawesome-fonts open-sans-fonts + +You may also need to restart your browser for it to see the new local copies of the fonts. + Happy hacking! diff --git a/hubs/static/css/fonts/Cantarell-Bold-webfont.eot b/hubs/static/css/fonts/Cantarell-Bold-webfont.eot deleted file mode 100644 index 755fb56..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Bold-webfont.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Bold-webfont.svg b/hubs/static/css/fonts/Cantarell-Bold-webfont.svg deleted file mode 100644 index fca9252..0000000 --- a/hubs/static/css/fonts/Cantarell-Bold-webfont.svg +++ /dev/null @@ -1,143 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Designer : Dave Crossland -Foundry URL : http://abattis.org - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/hubs/static/css/fonts/Cantarell-Bold-webfont.ttf b/hubs/static/css/fonts/Cantarell-Bold-webfont.ttf deleted file mode 100644 index a4fe14e..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Bold-webfont.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Bold-webfont.woff b/hubs/static/css/fonts/Cantarell-Bold-webfont.woff deleted file mode 100644 index 1f437f3..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Bold-webfont.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.eot b/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.eot deleted file mode 100644 index a308562..0000000 Binary files a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.svg b/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.svg deleted file mode 100644 index 92f1767..0000000 --- a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.svg +++ /dev/null @@ -1,143 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Designer : Dave Crossland -Foundry URL : http://abattis.org - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.ttf b/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.ttf deleted file mode 100644 index e28e364..0000000 Binary files a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.woff b/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.woff deleted file mode 100644 index eaae0a9..0000000 Binary files a/hubs/static/css/fonts/Cantarell-BoldOblique-webfont.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Oblique-webfont.eot b/hubs/static/css/fonts/Cantarell-Oblique-webfont.eot deleted file mode 100644 index fabd128..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Oblique-webfont.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Oblique-webfont.svg b/hubs/static/css/fonts/Cantarell-Oblique-webfont.svg deleted file mode 100644 index 313ab3d..0000000 --- a/hubs/static/css/fonts/Cantarell-Oblique-webfont.svg +++ /dev/null @@ -1,143 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Designer : Dave Crossland -Foundry URL : http://abattis.org - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/hubs/static/css/fonts/Cantarell-Oblique-webfont.ttf b/hubs/static/css/fonts/Cantarell-Oblique-webfont.ttf deleted file mode 100644 index 2330ccd..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Oblique-webfont.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Oblique-webfont.woff b/hubs/static/css/fonts/Cantarell-Oblique-webfont.woff deleted file mode 100644 index c7d1ea8..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Oblique-webfont.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Regular-webfont.eot b/hubs/static/css/fonts/Cantarell-Regular-webfont.eot deleted file mode 100644 index 7022696..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Regular-webfont.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Regular-webfont.svg b/hubs/static/css/fonts/Cantarell-Regular-webfont.svg deleted file mode 100644 index 3c11cb6..0000000 --- a/hubs/static/css/fonts/Cantarell-Regular-webfont.svg +++ /dev/null @@ -1,143 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Designer : Dave Crossland -Foundry URL : http://abattis.org - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/hubs/static/css/fonts/Cantarell-Regular-webfont.ttf b/hubs/static/css/fonts/Cantarell-Regular-webfont.ttf deleted file mode 100644 index ff7a11d..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Regular-webfont.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Cantarell-Regular-webfont.woff b/hubs/static/css/fonts/Cantarell-Regular-webfont.woff deleted file mode 100644 index cab5bd8..0000000 Binary files a/hubs/static/css/fonts/Cantarell-Regular-webfont.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.eot b/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.eot deleted file mode 100644 index 8755c78..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.svg b/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.svg deleted file mode 100644 index ffc745c..0000000 --- a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.svg +++ /dev/null @@ -1,2644 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.ttf b/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.ttf deleted file mode 100644 index adcddfe..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.woff b/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.woff deleted file mode 100644 index 6887a69..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.woff2 b/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.woff2 deleted file mode 100644 index 5825d54..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-300/Comfortaa-300.woff2 and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-300/LICENSE.txt b/hubs/static/css/fonts/Comfortaa-300/LICENSE.txt deleted file mode 100644 index e0bfe25..0000000 --- a/hubs/static/css/fonts/Comfortaa-300/LICENSE.txt +++ /dev/null @@ -1,94 +0,0 @@ -Copyright (c) 2010, 2011 Johan Aakerlund (aajohan@gmail.com), -with Reserved Font Name "Comfortaa". - -This Font Software is licensed under the SIL Open Font License, Version 1.1. -This license is copied below, and is also available with a FAQ at: -http://scripts.sil.org/OFL - - ------------------------------------------------------------ -SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ------------------------------------------------------------ - -PREAMBLE -The goals of the Open Font License (OFL) are to stimulate worldwide -development of collaborative font projects, to support the font creation -efforts of academic and linguistic communities, and to provide a free and -open framework in which fonts may be shared and improved in partnership -with others. - -The OFL allows the licensed fonts to be used, studied, modified and -redistributed freely as long as they are not sold by themselves. The -fonts, including any derivative works, can be bundled, embedded, -redistributed and/or sold with any software provided that any reserved -names are not used by derivative works. The fonts and derivatives, -however, cannot be released under any other type of license. The -requirement for fonts to remain under this license does not apply -to any document created using the fonts or their derivatives. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this license and clearly marked as such. This may -include source files, build scripts and documentation. - -"Reserved Font Name" refers to any names specified as such after the -copyright statement(s). - -"Original Version" refers to the collection of Font Software components as -distributed by the Copyright Holder(s). - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to a -new environment. - -"Author" refers to any designer, engineer, programmer, technical -writer or other person who contributed to the Font Software. - -PERMISSION & CONDITIONS -Permission is hereby granted, free of charge, to any person obtaining -a copy of the Font Software, to use, study, copy, merge, embed, modify, -redistribute, and sell modified and unmodified copies of the Font -Software, subject to the following conditions: - -1) Neither the Font Software nor any of its individual components, -in Original or Modified Versions, may be sold by itself. - -2) Original or Modified Versions of the Font Software may be bundled, -redistributed and/or sold with any software, provided that each copy -contains the above copyright notice and this license. These can be -included either as stand-alone text files, human-readable headers or -in the appropriate machine-readable metadata fields within text or -binary files as long as those fields can be easily viewed by the user. - -3) No Modified Version of the Font Software may use the Reserved Font -Name(s) unless explicit written permission is granted by the corresponding -Copyright Holder. This restriction only applies to the primary font name as -presented to the users. - -4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font -Software shall not be used to promote, endorse or advertise any -Modified Version, except to acknowledge the contribution(s) of the -Copyright Holder(s) and the Author(s) or with their explicit written -permission. - -5) The Font Software, modified or unmodified, in part or in whole, -must be distributed entirely under this license, and must not be -distributed under any other license. The requirement for fonts to -remain under this license does not apply to any document created -using the Font Software. - -TERMINATION -This license becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT -OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM -OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.eot b/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.eot deleted file mode 100644 index 2c48526..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.svg b/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.svg deleted file mode 100644 index 9ca007a..0000000 --- a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.svg +++ /dev/null @@ -1,2651 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.ttf b/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.ttf deleted file mode 100644 index 579c924..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.woff b/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.woff deleted file mode 100644 index 61d4515..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.woff2 b/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.woff2 deleted file mode 100644 index ebf13e8..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-700/Comfortaa-700.woff2 and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-700/LICENSE.txt b/hubs/static/css/fonts/Comfortaa-700/LICENSE.txt deleted file mode 100644 index e0bfe25..0000000 --- a/hubs/static/css/fonts/Comfortaa-700/LICENSE.txt +++ /dev/null @@ -1,94 +0,0 @@ -Copyright (c) 2010, 2011 Johan Aakerlund (aajohan@gmail.com), -with Reserved Font Name "Comfortaa". - -This Font Software is licensed under the SIL Open Font License, Version 1.1. -This license is copied below, and is also available with a FAQ at: -http://scripts.sil.org/OFL - - ------------------------------------------------------------ -SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ------------------------------------------------------------ - -PREAMBLE -The goals of the Open Font License (OFL) are to stimulate worldwide -development of collaborative font projects, to support the font creation -efforts of academic and linguistic communities, and to provide a free and -open framework in which fonts may be shared and improved in partnership -with others. - -The OFL allows the licensed fonts to be used, studied, modified and -redistributed freely as long as they are not sold by themselves. The -fonts, including any derivative works, can be bundled, embedded, -redistributed and/or sold with any software provided that any reserved -names are not used by derivative works. The fonts and derivatives, -however, cannot be released under any other type of license. The -requirement for fonts to remain under this license does not apply -to any document created using the fonts or their derivatives. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this license and clearly marked as such. This may -include source files, build scripts and documentation. - -"Reserved Font Name" refers to any names specified as such after the -copyright statement(s). - -"Original Version" refers to the collection of Font Software components as -distributed by the Copyright Holder(s). - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to a -new environment. - -"Author" refers to any designer, engineer, programmer, technical -writer or other person who contributed to the Font Software. - -PERMISSION & CONDITIONS -Permission is hereby granted, free of charge, to any person obtaining -a copy of the Font Software, to use, study, copy, merge, embed, modify, -redistribute, and sell modified and unmodified copies of the Font -Software, subject to the following conditions: - -1) Neither the Font Software nor any of its individual components, -in Original or Modified Versions, may be sold by itself. - -2) Original or Modified Versions of the Font Software may be bundled, -redistributed and/or sold with any software, provided that each copy -contains the above copyright notice and this license. These can be -included either as stand-alone text files, human-readable headers or -in the appropriate machine-readable metadata fields within text or -binary files as long as those fields can be easily viewed by the user. - -3) No Modified Version of the Font Software may use the Reserved Font -Name(s) unless explicit written permission is granted by the corresponding -Copyright Holder. This restriction only applies to the primary font name as -presented to the users. - -4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font -Software shall not be used to promote, endorse or advertise any -Modified Version, except to acknowledge the contribution(s) of the -Copyright Holder(s) and the Author(s) or with their explicit written -permission. - -5) The Font Software, modified or unmodified, in part or in whole, -must be distributed entirely under this license, and must not be -distributed under any other license. The requirement for fonts to -remain under this license does not apply to any document created -using the Font Software. - -TERMINATION -This license becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT -OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM -OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.eot b/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.eot deleted file mode 100644 index a350907..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.eot and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.svg b/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.svg deleted file mode 100644 index f5d2848..0000000 --- a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.svg +++ /dev/null @@ -1,2620 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.ttf b/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.ttf deleted file mode 100644 index f68d1cc..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.ttf and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.woff b/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.woff deleted file mode 100644 index 1057958..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.woff and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.woff2 b/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.woff2 deleted file mode 100644 index 14c5487..0000000 Binary files a/hubs/static/css/fonts/Comfortaa-regular/Comfortaa-regular.woff2 and /dev/null differ diff --git a/hubs/static/css/fonts/Comfortaa-regular/LICENSE.txt b/hubs/static/css/fonts/Comfortaa-regular/LICENSE.txt deleted file mode 100644 index e0bfe25..0000000 --- a/hubs/static/css/fonts/Comfortaa-regular/LICENSE.txt +++ /dev/null @@ -1,94 +0,0 @@ -Copyright (c) 2010, 2011 Johan Aakerlund (aajohan@gmail.com), -with Reserved Font Name "Comfortaa". - -This Font Software is licensed under the SIL Open Font License, Version 1.1. -This license is copied below, and is also available with a FAQ at: -http://scripts.sil.org/OFL - - ------------------------------------------------------------ -SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ------------------------------------------------------------ - -PREAMBLE -The goals of the Open Font License (OFL) are to stimulate worldwide -development of collaborative font projects, to support the font creation -efforts of academic and linguistic communities, and to provide a free and -open framework in which fonts may be shared and improved in partnership -with others. - -The OFL allows the licensed fonts to be used, studied, modified and -redistributed freely as long as they are not sold by themselves. The -fonts, including any derivative works, can be bundled, embedded, -redistributed and/or sold with any software provided that any reserved -names are not used by derivative works. The fonts and derivatives, -however, cannot be released under any other type of license. The -requirement for fonts to remain under this license does not apply -to any document created using the fonts or their derivatives. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this license and clearly marked as such. This may -include source files, build scripts and documentation. - -"Reserved Font Name" refers to any names specified as such after the -copyright statement(s). - -"Original Version" refers to the collection of Font Software components as -distributed by the Copyright Holder(s). - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to a -new environment. - -"Author" refers to any designer, engineer, programmer, technical -writer or other person who contributed to the Font Software. - -PERMISSION & CONDITIONS -Permission is hereby granted, free of charge, to any person obtaining -a copy of the Font Software, to use, study, copy, merge, embed, modify, -redistribute, and sell modified and unmodified copies of the Font -Software, subject to the following conditions: - -1) Neither the Font Software nor any of its individual components, -in Original or Modified Versions, may be sold by itself. - -2) Original or Modified Versions of the Font Software may be bundled, -redistributed and/or sold with any software, provided that each copy -contains the above copyright notice and this license. These can be -included either as stand-alone text files, human-readable headers or -in the appropriate machine-readable metadata fields within text or -binary files as long as those fields can be easily viewed by the user. - -3) No Modified Version of the Font Software may use the Reserved Font -Name(s) unless explicit written permission is granted by the corresponding -Copyright Holder. This restriction only applies to the primary font name as -presented to the users. - -4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font -Software shall not be used to promote, endorse or advertise any -Modified Version, except to acknowledge the contribution(s) of the -Copyright Holder(s) and the Author(s) or with their explicit written -permission. - -5) The Font Software, modified or unmodified, in part or in whole, -must be distributed entirely under this license, and must not be -distributed under any other license. The requirement for fonts to -remain under this license does not apply to any document created -using the Font Software. - -TERMINATION -This license becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT -OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM -OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/hubs/static/css/style-patternlab.css b/hubs/static/css/style-patternlab.css deleted file mode 100644 index 196c6f8..0000000 --- a/hubs/static/css/style-patternlab.css +++ /dev/null @@ -1,2223 +0,0 @@ -/* - ,, ,, ,, - .M"""bgd mm db `7MM mm mm `7MM OO OO OO -,MI "Y MM MM MM MM MM 88 88 88 -`MMb. mmMMmm ,pW"Wq.`7MMpdMAo. `7Mb,od8 `7MM .P"Ybmmm MMpMMMb.mmMMmm mmMMmm MMpMMMb. .gP"Ya `7Mb,od8 .gP"Ya || || || - `YMMNq. MM 6W' `Wb MM `Wb MM' "' MM :MI I8 MM MM MM MM MM MM ,M' Yb MM' "',M' Yb || || || -. `MM MM 8M M8 MM M8 MM MM WmmmP" MM MM MM MM MM MM 8M"""""" MM 8M"""""" `' `' `' -Mb dM MM YA. ,A9 MM ,AP MM MM 8M MM MM MM MM MM MM YM. , MM YM. , ,, ,, ,, -P"Ybmmd" `Mbmo`Ybmd9' MMbmmd' .JMML. .JMML.YMMMMMb .JMML JMML.`Mbmo `Mbmo.JMML JMML.`Mbmmd'.JMML. `Mbmmd' db db db - MM 6' dP - .JMML. Ybmmmd' - -Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray! -You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet. -So please don't use these styles. They're just here to put together the demo, and nothing more. -They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself. - -Atomic design is philosophically complimentary with these CSS approaches: - -* SMACSS by Jonathan Snook http://smacss.com/ -* OOCSS by Nicole Sullivan http://oocss.org/ -* BEM CSS Methology : http://bem.info/method/ -* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines - -So feel free to use any of these approaches. Or don't. It's totally up to you. - -*/ -/*------------------------------------*\ - $TABLE OF CONTENTS - based generally on Harry Roberts excellent CSS Guidelines https://github.com/csswizardry/CSS-Guidelines -\*------------------------------------*/ -/** - * ABSTRACTS..............Declarations of Sass variables and mixins - * Mixins.................Mixin styles that are included in the site - * Variables..............Variables for styles that are used in the site - * - * BASE...................Base/reset styles for certain elements - * Animation..............Animation base styles - * Forms..................Form field base styles - * Global Classes.........Base styles used across the entirety of the site - * Headings...............Base styles for headings (h1, h2, etc.) - * Links..................Base styles for links - * Lists..................Base styles lists - * Main...................Base styles for main section - * Media..................Base styles for various media (videos, iframes, etc.) - * Reset..................Reset base styles (i.e. Display block on certain elements) - * Tables.................Base styles for tables - * Text...................Base styles for text elements - * - * COMPONENTS.............Styles for certain components - * Accordion..............Styles for accordion components - * Article................Styles for article components - * Blocks.................Styles for block components - * Buttons................Styles for button components - * Carousels..............Styles for carousels - * Comments...............Styles for comments component - * Footer.................Styles for the footer component - * Forms..................Styles for form components - * Header.................Styles for header component - * Icons..................Styles for icons - * Lists..................Styles for types of lists - * Main...................Styles for main section - * Messaging..............Styles for alerts/messaging components - * Nav....................Styles for navigation components - * Sections...............Styles for section components - * Tabs...................Styles for tabs - * Text...................Styles for text components - * Tooltip................Styles for tooltips - - * - * LAYOUT.................Styles that affect the site's general layout - * Layout.................Layout styles - * - * UTILITIES..............Styles that require a utility class - * - * - * OBJECTS................Styles for object types - * Widgets................Styles specific for widget patterns - * Modals................Styles specific for modal patterns - */ -/*------------------------------------*\ - $ABSTRACTS -\*------------------------------------*/ -/*------------------------------------*\ - #MIXINS -\*------------------------------------*/ -/** CSS Transition - * Usage: @include transition(width,0.3s,ease-out); - */ -/** Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback - * Usage: @include font-size(1, large); - */ -/*------------------------------------*\ - #VARIABLES -\*------------------------------------*/ -/*------------------------------------*\ - #COLORS -\*------------------------------------*/ -/* - * 1) Color variables involve a two-tier system to keep colors in sync. The - * first tier defines the brand and neutral colors, and the second tier - * defines the application of those colors. - */ -/* - * Brand Colors - * 1) Brand color variables use English names to define colors to make palettes easier to - * identify. Names are generated using this tool: http://chir.ag/projects/name-that-color/ - * 2) Brand color variables should typically not be used directly in Sass partials. Instead, use - * second-tier application colors. - * - */ -/* - * Neutral Colors - * 1) Neutral color variables use a numbered system to define variables for better maintainability. - * "$color-gray-10" means "10% gray", which is a gray closer to white than to black. For more info - * read https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3#.brevrq67p - */ -/** - * Utility Colors - * 1) Utility colors are colors used to provide feedback, such as alert messages, - * form validation, etc. - */ -/* - * Text Colors - * 1) These are non-linked text colors, such as body copy. - */ -/* - * Heading Colors - * 1) These are non-linked heading colors, such as h2, h3, etc. - */ -/* - * Text Link Colors - * 1) These are for linked text, such as a link found within an article, - * navigation link, footer link, etc. - */ -/* - * Border Colors - * 1) Border colors are used as decoration or dividers, such as as a seperator - * for navigation items, block borders, etc. - */ -/*------------------------------------*\ - #TYPOGRAPHY -\*------------------------------------*/ -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-ExtraBold.ttf") format("opentype"); - font-weight: 900; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Bold.ttf") format("opentype"); - font-weight: 700; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Regular.ttf") format("opentype"); - font-weight: 500; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Light.ttf") format("opentype"); - font-weight: 300; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-ExtraBoldItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 900; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-BoldItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 700; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-SemiboldItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 600; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Italic.ttf") format("opentype"); - font-style: italic; - font-weight: 500; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-LightItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 300; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Black.otf") format("opentype"); - font-weight: 900; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-ExtraBold.otf") format("opentype"); - font-weight: 800; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Bold.otf") format("opentype"); - font-weight: 700; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-SemiBold.otf") format("opentype"); - font-weight: 600; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Regular.otf") format("opentype"); - font-weight: 400; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Light.otf") format("opentype"); - font-weight: 300; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-UltraLight.otf") format("opentype"); - font-weight: 200; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Hairline.otf") format("opentype"); - font-weight: 100; } - -/* Override on the styleguide module */ -.sg-pattern-category-body { - font-size: 100% !important; } - -/*------------------------------------*\ - #LAYOUT -\*------------------------------------*/ -/** - * Spacing Defaults - */ -/*------------------------------------*\ - #BORDERS -\*------------------------------------*/ -/** - * Border Width - */ -/** - * Border Radius - */ -/*------------------------------------*\ - #ANIMATION -\*------------------------------------*/ -/** - * Animation Duration - */ -/** - * Animation Easing - */ -/*------------------------------------*\ - #BREAKPOINTS -\*------------------------------------*/ -/** - * Breakpoints - */ -/*------------------------------------*\ - $BASE -\*------------------------------------*/ -/*------------------------------------*\ - #BODY -\*------------------------------------*/ -/** - * Body base styles - */ - -/*------------------------------------*\ - #ANIMATION -\*------------------------------------*/ -/** - * Fade Animation - */ -.animate-fade { - -webkit-transition: opacity 0.3s ease-out; - -moz-transition: opacity 0.3s ease-out; - -ms-transition: opacity 0.3s ease-out; - -o-transition: opacity 0.3s ease-out; - transition: opacity 0.3s ease-out; } - .animate-fade:hover { - opacity: 0; } - -/*------------------------------------*\ - #FORMS -\*------------------------------------*/ -/** - * Fieldset base styles - */ -fieldset { - border: 0; - padding: 0; - margin: 0; } - -/** - * Label base styles - */ -label { - display: block; - padding-bottom: 0.2rem; - font-weight: bold; } - -/** - * Form button, input, select, and text area base styles - * 1) Zero out margin and inherit font styles - */ -button, input, select, textarea { - font-family: inherit; - font-size: 100%; - margin: 0; } - -/** - * Input and text area base styles - * 1) Width entire container, gray border, padding - */ -input, textarea { - width: 100%; - border: 1px solid #a5a5a5; - border-radius: 3px; - padding: 1rem; } - -/** - * Input areas base styles - * 1) Get rid of webkit appearance of these areas - */ -input[type=text], input[type=search], input[type=url], input[type=number], textarea { - -webkit-appearance: none; } - -/** - * Button/Submit button base styles - */ -button, input[type="submit"] { - padding: 0.5em; - background: #444444; - border: 1px solid gray; - cursor: pointer; } - -/** - * Checkboxes/Radio button base styles - */ -input[type="checkbox"], -input[type="radio"] { - width: auto; - margin-right: 0.3em; } - -/** - * Search cancel button and search decoration webkit appearance none - */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/*------------------------------------*\ - #GLOBAL CLASSES -\*------------------------------------*/ -/** - * Hide on small screens - */ -@media all and (max-width: 46.8em) { - .hide-small { - display: none; } } - -/** - * Hide on medium screens - */ -@media all and (min-width: 46.8em) and (max-width: 50em) { - .hide-med { - display: none; } } - -/** - * Hide on large screens - */ -@media all and (min-width: 50em) { - .hide-large { - display: none; } } - -/** - * Show valid text color - */ -.valid { - color: #03804d; } - -/** - * Show error text color - */ -.error { - color: #b12a0b; } - -/** - * Show warning text color - */ -.warning { - color: #a59b15; } - -/** - * Show informational text color - */ -.information { - color: #0192d0; } - -/** - * Display secondary font family - */ -.font-secondary { - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/*------------------------------------*\ - #HEADINGS -\*------------------------------------*/ -/** - * Heading 1 - */ -h1 { - font-size: 3rem; - line-height: 1.2; - text-transform: uppercase !important; - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/** - * Heading 2 - */ -h2 { - font-size: 2.4rem; - line-height: 1.2; - font-weight: 700; - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/** - * Heading 3 - */ -h3 { - line-height: 1.2; - font-size: 1.5rem; - font-weight: 600; - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/** - * Heading 4 - */ -h4 { - font-size: 1.3rem; - font-weight: 500; - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/** - * Heading 5 - */ -h5 { - font-size: 1.4rem; - font-weight: 600; - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/** - * Heading 6 - */ -h6 { - font-size: 1.1rem; - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; } - -/** - * Subheading - */ -.subheading { - font-family: "Montserrat", Georgia, Times, "Times New Roman", serif; - font-weight: normal; } - -/*------------------------------------*\ - #LINKS -\*------------------------------------*/ -/** - * Links - */ -a { - color: #428bca; - text-decoration: none; - outline: 0; - transition: all 0.2s ease; } - -/*------------------------------------*\ - #LINKS -\*------------------------------------*/ -/** - * Ordered/Unordered list base styles - */ -ol, ul { - margin: 0; - padding: 0; - list-style: none; } - -/** - * Definition list base styles - */ -dl { - overflow: hidden; - margin: 0 0 1em; } - -/** - * Terms/Names base styles - */ -dt { - font-weight: bold; } - -/** - * Definition list description base styles - */ -dd { - margin-left: 0; } - -/*------------------------------------*\ - #MAIN -\*------------------------------------*/ -/** - * Main content area - */ -[role=main] { - flex: 1; } - -/*------------------------------------*\ - #MEDIA ELEMENTS -\*------------------------------------*/ -/** - * Make media elements responsive - */ -img, video, object { - max-width: 100%; - height: auto; } - -/** - * Iframe base styles - */ -iframe { - margin-bottom: 1em; } - -/** - * Figure base styles - */ -figure { - margin-bottom: 1em; - /** - * Figure image base styles - */ } - figure img { - margin-bottom: 0.5em; } - -/** - * Figure caption base styles - */ -figcaption { - font-style: italic; } - -/*------------------------------------*\ - #RESET -\*------------------------------------*/ -/** - * Use border box on all elements - */ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - -/** - * Zero out margin and padding on most elements as base style - */ -html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { - margin: 0; - padding: 0; } - -/** - * Display block as base for these elements - */ -header, footer, nav, section, article, hgroup, figure { - display: block; } - -/*------------------------------------*\ - #TEXT -\*------------------------------------*/ -/** - * Paragraph base styles - */ -p { - margin-bottom: 1em; } - -/** - * Blockquote base styles - */ -blockquote { - font-style: italic; - border-left: 1px solid gray; - color: gray; - padding-left: 1em; - margin-bottom: 1em; } - -/** - * Horizontal rule base styles - */ -hr { - border: 0; - height: 2px; - background: #d9d9d9; - margin: 2em 0; } - -/** - * Abbreviation base styles - */ -abbr { - border-bottom: 1px dotted gray; - cursor: help; } - -/*------------------------------------*\ - $COMPONENTS -\*------------------------------------*/ -/*------------------------------------*\ - #BLOCKS -\*------------------------------------*/ -/** - * 1) Blocks are collections of text and/or images/media working together as a unit. - */ -/*------------------------------------*\ - #HERO BLOCK -\*------------------------------------*/ -.c-block-hero { - display: block; - position: relative; } - -/** - * Hero Image - * 1) This is the primary hero image that runs full-bleed across the layout - */ -.c-block-hero__img { - display: block; - width: 100%; - max-height: 50vh; - object-fit: cover; } - -/** - * Hero Headline - * 1) This sits overtop of the hero image when space permits - */ -.c-block-hero__headline { - background: rgba(0, 0, 0, 0.5); - color: white; - padding: 1rem; - font-size: 2.6rem; - transition: all 0.2s ease; } - @media all and (min-width: 50em) { - .c-block-hero__headline { - position: absolute; - top: 3rem; - left: 1rem; - width: 50%; - border-radius: 3px; } } - .c-block-hero:hover .c-block-hero__headline, .c-block-hero:focus .c-block-hero__headline { - background: #444444; } - -.c-block-hero h2 { - font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important; - font-weight: 200; - text-transform: capitalize !important; } - -/*------------------------------------*\ - #MEDIA BLOCK -\*------------------------------------*/ -/** - * 1) Media block contains an image (or some other media) on the left - * and text on the right. - * 2) For more info, read http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ - */ -.c-block-media { - display: flex; - transition: all 0.2s ease; } - .c-block-media:hover .c-block-media__headline, .c-block-media:focus .c-block-media__headline { - color: #428bca; } - .c-block-media.small { - font-size: 0.95rem; } - -/** - * Media Container - * 1) This is the container that holds the block image (or media) - */ -.c-block-media__media { - width: 20%; - max-width: 11em; - margin-right: 1rem; } - .c-block-media--small .c-block-media__media { - max-width: 3.5em; - margin-right: 0.5rem; } - @media all and (min-width: 46.8em) { - .c-block-media__media { - width: 50%; - margin-right: 1.5rem; } } - -.c-block-media__img { - border-radius: 3px; } - -.c-block-media__headline { - margin-bottom: 0.2em; - color: #428bca; - transition: all 0.2s ease; } - .c-block-media--small .c-block-media__headline { - font-size: 1.0625rem; } - -.c-block-media__body { - display: flex; - flex-direction: column; - justify-content: center; - flex: 1; } - -.c-block-media__excerpt { - color: #a5a5a5; - transition: all 0.2s ease; } - .c-block-media--small .c-block-media__excerpt { - margin-bottom: 0; - line-height: 1.2; } - -/*------------------------------------*\ - #TOUT BLOCK -\*------------------------------------*/ -/** - * 1) The tout block contains an image and headline overlayed over the image. - */ -.c-block-tout { - display: inline-block; - margin-bottom: 0.5em; - position: relative; - overflow: hidden; - border-radius: 3px; } - -/** - * Tout image - */ -.c-block-tout__img { - display: block; } - -/** - * Tout headline - */ -.c-block-tout__headline { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background: rgba(0, 0, 0, 0.5); - color: white; - padding: 0.5em; - font-size: 1.4rem; - transition: all 0.2s ease; } - .c-block-tout:hover .c-block-tout__headline, .c-block-tout:focus .c-block-tout__headline { - padding-bottom: 2rem; } - -/*------------------------------------*\ - #TILE BLOCK -\*------------------------------------*/ -/** - * 1) The tile block contains a span and headline overlayed on a background - */ -.c-block-tile { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - background: rgba(0, 0, 0, 0.5); - color: white; - border-radius: 3px; - padding: 1em 1em; - text-align: center; - overflow: hidden; - transition: all 0.2s ease; } - .c-block-tile:hover, .c-block-tile:focus { - background: rgba(0, 0, 0, 0.7); - color: white; } - @media all and (min-width: 55rem) { - .c-block-tile { - padding: 4em 1em; } } - -/** - * Featured tile block - */ -.c-block-tile--featured { - min-height: 200px; } - -/** - * Tile block value - */ -.c-block-tile__value { - font-size: 1.5rem; - line-height: 1.2; - /** - * Tile value when inside featured tile parent selector - */ } - .c-block-tile--featured .c-block-tile__value { - font-size: 2.5rem; } - @media all and (min-width: 46.8em) { - .c-block-tile--featured .c-block-tile__value { - font-size: 5rem; } } - @media all and (min-width: 55rem) { - .c-block-tile__value { - font-size: 3rem; } } - -.c-block-tile__label { - color: #d9d9d9; - font-weight: normal; - font-size: 1.0625rem; } - -/*------------------------------------*\ - #BUTTONS -\*------------------------------------*/ -/** - * Button - */ -.c-btn { - display: inline-block; - background: #428bca; - color: white; - line-height: 1; - font-weight: bold; - padding: .75rem 3rem; - border: 0; - border-radius: 3px; - text-align: center; - transition: background 0.2s ease; - transition: text-shadow 0.2s ease; - text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); - /** - * Disabled button - */ } - .c-btn:hover, .c-btn:focus { - background: gray; - color: white; - text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); } - .c-btn.disabled { - background: #d9d9d9; - color: gray; } - -/** - * Small button - */ -.c-btn-small { - padding: 0.5em; } - -/** - * Large button - */ -.c-btn-large { - padding: 0.5em; - text-transform: uppercase; - background: gray; - font-size: 1.4rem; - font-weight: normal; } - -/** - * Text button - */ -.c-text-btn { - position: relative; - background: none; - border: none; - font-style: normal; - font-weight: 600; - font-size: 1.2rem; } - .c-text-btn:after { - position: absolute; - content: ""; - height: 20px; - width: 20px; - background: url("../../../images/icon-arrowhead.svg") no-repeat; - top: 9px; - right: -26px; - transition: all 0.2s ease; } - .c-text-btn:hover, .c-text-btn:focus { - color: #444444; } - .c-text-btn:hover:after, .c-text-btn:focus:after { - right: -28px; } - .c-block-media--small .c-text-btn { - font-size: 1rem; } - -/** - * Button on overlay - */ -.c-btn--overlay { - background: #a5a5a5; } - -/*------------------------------------*\ - #CAROUSEL -\*------------------------------------*/ -/** - * Horizontal carousel - */ -.carousel-horizontal { - margin-bottom: 1em; - overflow: hidden; - position: relative; } - -/** - * Carousel island container - */ -.carousel-island-container { - overflow: hidden; } - -/** - * Carousel container - */ -.carousel-container { - position: relative; } - -/** - * Carousel list - */ -/** - * Carousel controls - */ -.carousel-controls { - display: table; - width: 100%; - margin: -0.5em 0 1em; - /** - * Carousel pagination - */ - /** - * Carousel next button - */ } - .carousel-controls a, .carousel-controls div { - display: table-cell; - padding: 0.5em; } - .carousel-controls .carousel-pagination { - text-align: center; } - .carousel-controls .carousel-next { - text-align: right; } - -/*------------------------------------*\ - #FOOTER -\*------------------------------------*/ -/** - * Footer - */ -.c-footer { - clear: both; - overflow: hidden; - background: #3b4a20; - color: white; - line-height: 1.2; - padding: 1em 0; } - -/** - * Footer nav - */ -.c-footer__info { - max-width: 40em; } - .c-footer__info a { - color: #d9d9d9; - /*text-decoration: underline;*/ } - .c-footer__info a:hover, .c-footer__info a:focus { - text-decoration: none; } - -/*------------------------------------*\ - #FOOTER NAVIGATION -\*------------------------------------*/ -/** - * Footer Nav - */ -.c-footer-nav { - display: block; - margin-right: 1rem; } - -/** - * Footer Nav List - */ -.c-footer-nav__list { - display: flex; - flex-direction: column; } - @media all and (min-width: 24em) { - .c-footer-nav__list { - flex-direction: row; } } - -/** - * Footer Nav List Item - */ -.c-footer-nav__item { - width: 50%; } - @media all and (min-width: 24em) { - .c-footer-nav__item { - width: inherit; } } - -/** - * Footer Nav Links - */ -.c-footer-nav__link { - font-weight: bold; - display: block; - padding: 1rem 2rem 1rem 0; - color: white; } - .c-footer-nav__link:hover, .c-footer-nav__link:focus { - color: #a5a5a5; } - -/*------------------------------------*\ - #FORMS -\*------------------------------------*/ -/** - * Search form - */ -.c-search-form { - display: none; } - .c-search-form.is-active { - display: block; - position: absolute; - top: 67px; - right: 2px; - width: 100%; - padding: 1em; - box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.2); - background: white; - z-index: 1; } - @media all and (min-width: 29.75em) { - .c-search-form { - display: block; } } - -/** - * Search input - */ -.c-search-form__input { - padding: 0.5rem; } - -/** - * Stacked form button wrapper - */ -.c-form__actions { - margin-bottom: 2rem; } - -/*------------------------------------*\ - #FIELDS -\*------------------------------------*/ -.c-field { - margin-bottom: 1rem; } - -.c-field__note { - font-size: 0.875rem; } - .c-field__note a { - /*text-decoration: underline;*/ } - -/*------------------------------------*\ - #HEADER -\*------------------------------------*/ -/** - * Header - */ -.c-header { - display: flex; - align-items: center; - box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.2); - padding: 0.5em 0; } - @media all and (min-height: 46.8em) { - .c-header { - padding: 1em 0; } } - -/** - * Header Controls - * 1) This container holds the primary nav and search menu - */ -.c-header__controls { - margin-left: auto; - display: flex; - align-items: center; - padding-right: 1rem; } - -/** - * Nav toggle button - * 1) Styles for the general nav toggle button - */ -.nav-toggle { - display: block; - padding: 0.9rem 1rem 0.7rem; - font-size: 1.3rem; - line-height: 1; } - @media all and (min-width: 46.8em) { - .nav-toggle { - display: none; } } - @media all and (max-width: 17em) { - .nav-toggle { - padding-left: 0.2rem; - padding-right: 0.2rem; } } - -/** - * Search nav toggle button - * 1) Specific nav toggle button for the search form - */ -.nav-toggle-search { - display: block; } - @media all and (min-width: 29.75em) { - .nav-toggle-search { - display: none; } } - -/*------------------------------------*\ - #LOGO -\*------------------------------------*/ -.c-logo { - display: block; - max-width: 200px; } - .c-box__header .c-logo { - max-width: 12em; - margin: 0 auto; } - -.c-logo-link { - display: inline-block; - padding: 0.2rem 1rem; } - -/*------------------------------------*\ - #ICONS -\*------------------------------------*/ -/** - * Icon fonts - */ -@font-face { - font-family: 'icons'; - src: url("../fonts/icons.eot"); - src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg"); - font-weight: normal; - font-style: normal; } - -/** - * Use the following CSS code if you want to use data attributes for inserting your icons - */ -[data-icon]:before { - font-family: 'icons'; - content: attr(data-icon); - speak: none; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; } - -/** - * Icons and icon pseudo-elements - */ -.icon-twitter:before, .icon-stumbleupon:before, .icon-pinterest:before, .icon-linkedin:before, .icon-google-plus:before, .icon-search:before, .icon-play:before, .icon-menu:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-bubble:before, .icon-facebook:before, .icon-feed:before, .icon-youtube:before, .icon-tag:before, .icon-tumblr:before, .icon-instagram, .icon-podcast, .icon-apple, .icon-android, .icon-arrow:after, .icon-envelope:before { - font-family: 'icons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; } - -/** - * Twitter icon - */ -.icon-twitter:before { - content: "\74"; } - -/** - * Stumbleupon icon - */ -.icon-stumbleupon:before { - content: "\75"; } - -/** - * Pinterest icon - */ -.icon-pinterest:before { - content: "\70"; } - -/** - * LinkedIn icon - */ -.icon-linkedin:before { - content: "\69"; } - -/** - * Google plus icon - */ -.icon-google-plus:before { - content: "\67"; } - -/** - * Icon search - */ -.icon-search:before { - content: "\73"; } - -/** - * Play button icon - */ -.icon-play:before { - content: "\61"; } - -/** - * Menu icon - */ -.icon-menu:before { - content: "\21"; } - -/** - * Arrow left icon - */ -.icon-arrow-left:before { - content: "\23"; } - -/** - * Arrow right icon - */ -.icon-arrow-right:before { - content: "\24"; } - -/** - * Bubble icon - */ -.icon-bubble:before { - content: "\25"; } - -/** - * Facebook icon - */ -.icon-facebook:before { - content: "\66"; } - -/** - * Feed icon - */ -.icon-feed:before { - content: "\27"; } - -/** - * YouTube icon - */ -.icon-youtube:before { - content: "\79"; } - -/** - * Tag icon - */ -.icon-tag:before { - content: "\28"; } - -/** - * Tumblr icon - */ -.icon-tumblr:before { - content: "\6d"; } - -/** - * Instagram icon - */ -.icon-instagram:before { - content: "\22"; } - -/** - * Podcast icon - */ -.icon-podcast:before { - content: "\26"; } - -/** - * Android icon - */ -.icon-android:before { - content: "\29"; } - -/** - * Twitter icon - */ -.icon-apple:before { - content: "\2a"; } - -/** - * Envelope icon - */ -.icon-envelope:before { - content: "\2b"; } - -/** - * Arrow icon - */ -.icon-arrow:after { - content: "\61"; - display: inline-block; - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transform: rotate(90deg); } - -/** - * Play icon - */ -.icon-play:before { - font-size: 0.7rem; - padding-left: 0.2em; } - -/** - * Play box icon - */ -.icon-play-box { - display: block; - margin-left: 2em; } - -/** - * Play box icon before - */ -.icon-play-box:before { - padding: 0.25em; - background: gray; - color: white; - margin-left: -1.7rem; - margin-right: 0.5em; } - -/*------------------------------------*\ - #LISTS -\*------------------------------------*/ -/** - * Inline list - */ -.inline-list li { - display: inline-block; } - -/** - * Social list - */ -.social-list li { - margin: 0 0.4rem 1em 0; } -.social-list a { - font-size: 1.6em; } - -/** - * Headline list - */ -.headline-list { - margin-bottom: 1em; } - .headline-list.flush { - margin: 0; } - .headline-list h4 { - font-weight: normal; } - .headline-list li { - padding: 0.25em 0; - border-top: 1px solid #a5a5a5; } - -/** - * Post list - */ -.post-list li { - margin-bottom: 1em; } - -/** - * Bullet list - */ -.bullet-list { - list-style: square; - margin: 0 0 1em 1.2em; - line-height: 1.3; } - .bullet-list li { - margin-bottom: 1em; } - -/** - * Text list - */ -.text-list { - margin: 0 0 1em; - line-height: 1.3; } - .text-list li { - margin-bottom: 1em; } - -/** - * Media List - */ -.c-media-list__item { - margin-bottom: 1.5em; } - -/** - * Tile list - */ -.c-tile-list { - display: flex; - flex-direction: column; } - @media all and (min-width: 55rem) { - .c-tile-list { - flex-direction: row; - flex-wrap: wrap; } } - -/** - * Tile list item - */ -.c-tile-list__item { - width: 100%; - margin-bottom: 1em; - position: relative; } - .c-tile-list__item:nth-child(2n) { - padding-right: 0; } - @media all and (min-width: 55rem) { - .c-tile-list__item { - width: 50%; - margin: 0; - padding: 0 1em 1em 0; } } - -/** Thumbnail list - * - */ -.c-thumbnail-list li { - margin-bottom: 1.5em; } - -.c-thumbnail-list .c-block-media__media { - width: 80px; } - -.c-thumbnail-list .c-block-media__headline { - text-transform: none !important; - font-size: 1.5em; } - -/** - * Color bars list - */ -.c-color-bars-list li { - max-width: 480px; - position: relative; - height: 80px; - padding-top: 15px; - padding-left: 20px; - border: 1px solid #d5d5d5; - border-top: 0; - color: #55595c; - font-size: 1.3rem; - font-weight: bold; } - .c-color-bars-list li:first-child { - border-top: 1px solid #d5d5d5; } - .c-color-bars-list li.cur { - height: 120px; } - .c-color-bars-list li.cur:before { - position: absolute; - height: 100%; - width: 10px; - bottom: 0px; - left: 0px; - content: ""; - background: #3c6eb4; } - .c-color-bars-list li.prev:before { - position: absolute; - height: 100%; - width: 10px; - bottom: 0px; - left: 0px; - content: ""; - background: #79db32; } - .c-color-bars-list li.old { - color: #d5d5d5; } - -/** - * Ticket list - */ -.c-ticket-list { - max-width: 480px; } - .c-ticket-list li { - border: 1px solid #d5d5d5; - border-top: 0; - padding: 15px 20px; - color: gray; } - .c-ticket-list:first-child { - border-top: 1px solid #d5d5d5; } - .c-ticket-list .list-item-title, .c-ticket-list .list-item-data { - float: left; } - .c-ticket-list .list-item-title { - border-radius: 20px; - padding: 4px 10px; - background: gray; - color: white; - font-size: 1.2rem; - font-weight: bold; } - .c-ticket-list .origin { - float: right; - margin-top: 3px; } - .c-ticket-list .origin p { - display: inline-block; - margin-right: 2px; } - .c-ticket-list .origin img { - margin-bottom: 5px; } - .c-ticket-list .c-widget-action-btn.btn { - float: right; - padding: 3px 15px; } - .c-ticket-list .c-widget-action-btn.btn img { - display: block; } - .c-ticket-list .list-subheader { - font-size: 1.2rem; - font-weight: bold; } - .c-ticket-list .list-item-info, .c-ticket-list .list-item-data { - margin: 0; - font-size: 1.2rem; } - -/*------------------------------------*\ - #MESSAGING -\*------------------------------------*/ -/** - * Alert - */ -.alert { - text-align: center; - padding: 0 1rem; - background: #f7f9f9; - overflow: hidden; - font-size: 1em; - animation: slideDown 2s forwards; } - .alert a { - color: inherit; - /*text-decoration: underline;*/ } - -/** - * Error alert - */ -.alert--error { - color: #b12a0b; - background: #fdded8; } - -/** - * Success alert - */ -.alert--success { - color: #03804d; - background: #d4f3e6; } - -/** - * Warning alert - */ -.alert--warning { - color: #a59b15; - background: #fffecf; } - -/** - * Info alert - */ -.alert--info { - color: #0192d0; - background: #d3f2ff; } - -/** - * Slidedown animation - */ -@keyframes slideDown { - 0% { - max-height: 0; - padding: 0; } - - 100% { - padding: 1rem; - max-height: 12em; } } - -/** - * Overlay - */ -.c-overlay { - display: block; - padding: 1em; - background: rgba(0, 0, 0, 0.7); - border-radius: 3px; - position: relative; - height: 100%; - width: 100%; - top: 0; - left: 0; - border-radius: 3px; - text-align: center; - padding: 1em; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; } - .c-overlay.is-hidden { - display: none; } - .c-tile-grid__primary .c-overlay { - position: absolute; } - .c-tile-list__item .c-overlay { - position: absolute; } - .c-section .c-overlay { - position: absolute; } - -/** -* Overlay Intro -*/ -.c-overlay__intro { - font-size: 1.5rem; - color: white; } - -/*------------------------------------*\ - #PRIMARY NAVIGATION -\*------------------------------------*/ -/** - * Navigation tag - */ -.c-primary-nav { - display: none; } - .c-primary-nav.is-active { - display: block; - position: absolute; - padding: 1em 2em; - top: 67px; - right: 0; - box-shadow: -3px 3px 5px -2px rgba(0, 0, 0, 0.2); - z-index: 2; - background: white; } - @media all and (min-width: 46.8em) { - .c-primary-nav { - display: block; - margin-right: 1rem; } } - -/** - * Nav List - */ -.c-primary-nav__list { - display: none; } - @media all and (min-width: 46.8em) { - .c-primary-nav__list { - display: flex; } } - .c-primary-nav--is-active .c-primary-nav__list { - display: block; } - -/** - * Nav Links - */ -.c-primary-nav__link { - font-weight: bold; - display: block; - padding: 1rem; } - -/** - * Pagination - */ -.pagination { - overflow: hidden; } - .pagination li { - float: left; - border-right: 1px solid #d9d9d9; } - .pagination li:last-child { - border: 0; } - .pagination a { - padding: 1em; } - -/*------------------------------------*\ - #PAGE HEADER -\*------------------------------------*/ -/** - * 1) The page header contains the page's heading, as perhaps other page information - * such as description or actions (edit, delete, etc). - */ -.c-page-header__title { - padding: 1rem 0 0.5rem; - position: relative; - color: #444444; } - .c-page-header__title:after { - content: ""; - display: block; - position: absolute; - width: 3rem; - height: 0.5rem; - bottom: 0; - background: #a5a5a5; } - -/*------------------------------------*\ - #SECTIONS -\*------------------------------------*/ -/** - * Section - */ -.c-section { - position: relative; - margin: 0 0 2em; } - @media all and (min-width: 39.8em) { - .l-sidebar .c-section { - margin-right: 2em; - width: 50%; } - .l-sidebar .c-section:last-child { - margin-right: 0; } } - @media all and (min-width: 50em) { - .l-sidebar .c-section { - width: 100%; - margin-right: 0; } } - -/** - * Section title - */ -.c-section__title { - position: relative; - color: #444444; - margin-bottom: 1.5rem; } - .c-section__title:after { - content: ""; - display: block; - position: absolute; - width: 2rem; - height: 0.3rem; - top: 30px; - left: 1px; - background: #a5a5a5; } - -/** - * Section block - */ -.c-tile-grid { - background: url(../../images/sample/hero-mountains.jpg) no-repeat 50% 50% #444444; - background-size: cover; } - -.c-tile-grid__inner { - display: flex; - flex-direction: column; } - @media all and (min-width: 46.8em) { - .c-tile-grid__inner { - flex-direction: row; } } - -.c-tile-grid__primary { - display: flex; - position: relative; - width: 100%; - margin-bottom: 1rem; } - @media all and (min-width: 46.8em) { - .c-tile-grid__primary { - width: 50%; } } - @media all and (min-width: 55rem) { - .c-tile-grid__primary { - width: 30%; } } - -.c-tile-grid__secondary { - flex: 1; } - @media all and (min-width: 46.8em) { - .c-tile-grid__secondary { - padding: 0 0 0 1em; } } - -/*------------------------------------*\ - #TEXT -\*------------------------------------*/ -/** - * Passages of text - */ -.text a { - text-decoration: none; } -.text ul { - list-style: disc; - margin: 0 0 1em 1.2em; } - .text ul ul { - margin-bottom: 0; } -.text ol { - list-style: decimal; - margin: 0 0 1em 1.5em; } - .text ol ol { - margin-bottom: 0; } - -/** - * Text passage - */ -.s-text-passage { - margin-bottom: 1rem; } - -/** - * Image within text passage - */ -.c-text-passage__img { - /* - border-radius: $border-radius; - margin-bottom: 1rem; - */ } - -/*------------------------------------*\ - #BOX -\*------------------------------------*/ -/** - * 1) This component is a modal-like - */ -.c-box { - border: 1px solid gray; - border-radius: 3px; - padding: 2rem; - margin: 2rem; - align-self: center; - justify-content: center; - max-width: 32em; - margin: 2rem auto; } - -.c-box__header { - text-align: center; - margin-bottom: 2rem; } - -/*------------------------------------*\ - #FEEDBACK -\*------------------------------------*/ -/** - * 1) Feedback consists of components that give information back to the user. Examples include progress bars, progress wheels, etc. - */ -/** -* Progress bar -*/ -.c-progress { - -webkit-appearance: none; - appearance: none; - border: 1px solid rgba(0, 0, 0, 0.5); - background: #cdcaa2; - background-size: auto; - width: 100%; - max-width: 300px; - height: 0.5rem; - border-radius: 3px; - margin-bottom: 1em; } - -.c-progress::-moz-progress-bar { - background-color: #3884ee; - background-size: 300px 50px; - border-radius: 3px; } - -.c-progress::-webkit-progress-value { - background-color: #3884ee; - background-size: 300px 50px; - border-radius: 3px; } - -progress[value]::-webkit-progress-bar { - border-radius: 3px; } - -.anim::-moz-progress-bar { - -moz-transition: width 4s ease; } - -.anim::-webkit-progress-value { - -webkit-transition: width 4s ease; - -o-transition: width 4s ease; - transition: width 4s ease; } - -.c-progress.start::-moz-progress-bar { - width: 0% !important; - background: #cdcaa2 !important; } - -.c-progress.start::-webkit-progress-value { - width: 0% !important; - background: #cdcaa2 !important; } - -/*------------------------------------*\ - $LAYOUT -\*------------------------------------*/ -/*------------------------------------*\ - #LAYOUT -\*------------------------------------*/ -/** - * Layout container - */ -.l { - max-width: 80em; - margin: 0 auto; - padding: 1rem; } - -/*------------------------------------*\ - #TEMPLATES -\*------------------------------------*/ -/** - * 2 column layout - */ -.l--two-col { - display: flex; - flex-direction: column; - /** - * Sidebar - */ } - @media all and (min-width: 50em) { - .l--two-col .l-main { - width: 70%; - padding-right: 1em; } } - @media all and (min-width: 39.8em) { - .l--two-col .l-sidebar { - display: flex; } } - @media all and (min-width: 50em) { - .l--two-col .l-sidebar { - flex-direction: column; - width: 30%; - padding: 0 0 0 1em; } } - @media all and (min-width: 50em) { - .l--two-col { - flex-direction: row; } } - -/*------------------------------------*\ - #GRIDS -\*------------------------------------*/ -/** - * Grid - */ -.g { - overflow: hidden; - margin: 0 -0.5em; } - -/** - * Grid item - */ -.gi { - padding: 0.5em; } - .gi img { - display: block; } - @media all and (min-width: 46.8em) { - .gi { - float: left; } } - -/** - * 2 up grid - */ -@media all and (min-width: 46.8em) { - .g-2up > .gi { - float: left; - width: 50%; } - .g-2up > .gi:nth-of-type(odd) { - clear: left; } } - -/** - * Grid side by side - */ -.g-half > .gi { - float: left; - width: 50%; } - .g-half > .gi:nth-of-type(odd) { - clear: left; } - -/** - * 3 up grid - */ -@media all and (min-width: 46.8em) { - .g-3up > .gi { - float: left; - width: 50%; } - .g-3up > .gi:nth-of-type(2n+1) { - clear: left; } } -@media all and (min-width: 50em) { - .g-3up > .gi { - width: 33.3333333%; } - .g-3up > .gi:nth-of-type(2n+1) { - clear: none; } - .g-3up > .gi:nth-of-type(3n+1) { - clear: left; } } - -/** - * 4 up grid - */ -@media all and (min-width: 46.8em) { - .g-4up > .gi { - float: left; - width: 50%; } - .g-4up > .gi:nth-of-type(2n+1) { - clear: both; } } -@media all and (min-width: 50em) { - .g-4up > .gi { - width: 25%; } - .g-4up > .gi:nth-of-type(2n+1) { - clear: none; } - .g-4up > .gi:nth-of-type(4n+1) { - clear: left; } } - -/** - * Quarter grid always displayed side by side - */ -.g-quarter > .gi { - float: left; - width: 24%; } - .g-quarter > .gi:nth-of-type(4n+1) { - clear: left; } - -/** - * Grid max 4 up - */ -@media all and (min-width: 29.75em) { - .g-max4 > .gi { - float: left; - width: 50%; } - .g-max4 > .gi:nth-of-type(2n+1) { - clear: both; } } -@media all and (min-width: 39.8em) { - .g-max4 > .gi { - width: 33.3333333%; } - .g-max4 > .gi:nth-of-type(2n+1) { - clear: none; } - .g-max4 > .gi:nth-of-type(3n+1) { - clear: left; } } -@media all and (min-width: 50em) { - .g-max4 > .gi { - width: 25%; } - .g-max4 > .gi:nth-of-type(3n+1) { - clear: none; } - .g-max4 > .gi:nth-of-type(4n+1) { - clear: left; } } - -/** - * Grid max of 5 up - */ -.g-max5 > .gi { - float: left; - width: 50%; } - .g-max5 > .gi:nth-of-type(2n+1) { - clear: both; } -@media all and (min-width: 39.8em) { - .g-max5 > .gi { - width: 33.3333333%; } - .g-max5 > .gi:nth-of-type(2n+1) { - clear: none; } - .g-max5 > .gi:nth-of-type(3n+1) { - clear: left; } } -@media all and (min-width: 46.8em) { - .g-max5 > .gi { - width: 25%; } - .g-max5 > .gi:nth-of-type(3n+1) { - clear: none; } - .g-max5 > .gi:nth-of-type(4n+1) { - clear: left; } } -@media all and (min-width: 48em) { - .g-max5 > .gi { - width: 20%; } - .g-max5 > .gi:nth-of-type(4n+1) { - clear: none; } - .g-max5 > .gi:nth-of-type(5n+1) { - clear: left; } } - -/*------------------------------------*\ - WIP -\*------------------------------------*/ -#atoms-fonts .sg-pattern-example div { - font-size: 140%; } - -/*------------------------------------*\ - #TYPOGRAPHY -\*------------------------------------*/ -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-ExtraBold.ttf") format("opentype"); - font-weight: 900; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Bold.ttf") format("opentype"); - font-weight: 700; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Regular.ttf") format("opentype"); - font-weight: 500; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Light.ttf") format("opentype"); - font-weight: 300; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-ExtraBoldItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 900; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-BoldItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 700; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-SemiboldItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 600; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-Italic.ttf") format("opentype"); - font-style: italic; - font-weight: 500; } - -@font-face { - font-family: "Open Sans"; - src: url("../../fonts/OpenSans-LightItalic.ttf") format("opentype"); - font-style: italic; - font-weight: 300; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Black.otf") format("opentype"); - font-weight: 900; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-ExtraBold.otf") format("opentype"); - font-weight: 800; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Bold.otf") format("opentype"); - font-weight: 700; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-SemiBold.otf") format("opentype"); - font-weight: 600; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Regular.otf") format("opentype"); - font-weight: 400; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Light.otf") format("opentype"); - font-weight: 300; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-UltraLight.otf") format("opentype"); - font-weight: 200; } - -@font-face { - font-family: "Montserrat"; - src: url("../../fonts/Montserrat-Hairline.otf") format("opentype"); - font-weight: 100; } - -/* Override on the styleguide module */ -.sg-pattern-category-body { - font-size: 100% !important; } - -/*------------------------------------*\ - #OBJECTS -\*------------------------------------*/ -/** - * Widget header - */ -.c-widget-header.card-header { - padding: 10px 10px 5px 10px; - max-width: 480px; - border: 1px solid #d5d5d5; - border-radius: 0 !important; - background: #f7f7f9; } - -.c-widget-header h6 { - font-family: "Open Sans"; - font-size: 1.3rem; - font-weight: normal; } - -.c-widget-header-btn { - margin-top: -29px; - float: right; } - -/** - * Widget action button - */ -.c-widget-action-btn.btn { - padding: 5px 10px; - color: #a07cbc; - font-weight: bold; } - .c-widget-action-btn.btn:hover, .c-widget-action-btn.btn:focus, .c-widget-action-btn.btn:active, .c-widget-action-btn.btn:active:focus { - color: #a07cbc; } - -/** - * Widget view more button - */ -.c-widget-view-more-btn button { - padding: 0px; - margin-right: 5px; - color: gray; - font-size: 1.2rem; } - .c-widget-view-more-btn button:hover, .c-widget-view-more-btn button:focus { - color: #55595c; } -.c-widget-view-more-btn img { - margin-top: 2px; } - -/** - * Widget meeting event - */ -.c-widget-meeting-event { - max-width: 480px; - border: 1px solid #d5d5d5; - padding: 15px 20px; } - .c-widget-meeting-event h6, .c-widget-meeting-event h5, .c-widget-meeting-event p { - color: #55595c; - font-family: "Open Sans"; } - .c-widget-meeting-event h5 { - font-weight: bold; - font-size: 2rem; } - .c-widget-meeting-event h6 { - margin-top: 2px; - margin-bottom: 10px; - font-size: 1.1rem; } - .c-widget-meeting-event .date, .c-widget-meeting-event .time-ch { - font-size: 0.9rem; - float: left; } - .c-widget-meeting-event button { - float: right; } - .c-widget-meeting-event .date { - margin-right: 20px; } - .c-widget-meeting-event .time-ch p, .c-widget-meeting-event .time-ch a { - padding: 0; - margin: 0; } - -/** - * Widget meeting request - */ -.c-widget-meeting-request { - max-width: 480px; - border: 1px solid #d5d5d5; - padding: 15px 20px; } - .c-widget-meeting-request h6, .c-widget-meeting-request h5 { - color: #55595c; - font-family: "Open Sans"; } - .c-widget-meeting-request h5 { - float: left; - font-weight: bold; - font-size: 2rem; } - .c-widget-meeting-request h6 { - margin-top: 2px; - margin-bottom: 10px; - font-size: 1.1rem; } - .c-widget-meeting-request .meeting-request-btn { - float: right; } - -.modal-header { - background-color: #eceeef; } - -.modal-footer { - border-top: 0px !important; } - -.modal h4 { - text-transform: none !important; } - -.modal-card { - background-color: #d5d5d5; - padding: 15px; } - -.modal-body h4 { - font-weight: 600 !important; } diff --git a/hubs/static/css/style.css b/hubs/static/css/style.css index defa6b5..628c691 100644 --- a/hubs/static/css/style.css +++ b/hubs/static/css/style.css @@ -1,5 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); - body { background-color: #fff; } diff --git a/hubs/templates/master.html b/hubs/templates/master.html index 717c85e..1b5e93f 100644 --- a/hubs/templates/master.html +++ b/hubs/templates/master.html @@ -8,7 +8,8 @@ - + +