diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7bf6eb1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +bower_components +node_modules diff --git a/404.php b/404.php new file mode 100755 index 0000000..95c8331 --- /dev/null +++ b/404.php @@ -0,0 +1,13 @@ +[--modifierName|__elementName] + +### Block +*Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.* + +Syntax: `.nav` + + + + +### Block__element + +Syntax: `.nav__item` + +Parts of a block and have no standalone meaning. Any element is semantically tied to its block. + + +### componentName--modifierName + +Syntax: `.nav__item--last` + + + + +We use SCSS as our preprocessor, mostly for variables and mixins. Do not nest selectors as this can quickly become difficult to read. + +### Utility classes + +Syntax: `.u-` + +It is recommended to create utility selectors as necessary, these should be prefixed with `u-` and should be universal. These selectors should not be modified from their initial definition. If you need to use more than one utility selector in a given element, create a new `componentName` selector. + + .u-textCenter + .u-bgColorRed + + +### Format + +Define the css selectors with an opening curly on the first line. All declarations must be indented 2 spaces on the following lines, one declaration per line, in alphabetical order. Single declaration selectors can remain on one line. All indentation should be 2 character spaces. Use 'single quotes' over "double quotes" where applicable. + + /* Multi declaration selector */ + .row { + float:left; + position: relative; + width: 100%; + } + + /* Single declaration selector */ + .row--even { background: $altWhite; } + .row--active { background: $blue; } + + .u-alignLeft { float:left; } + +`js-` selectors should never be styled and only be used for event interactions. + + +## HTML + +Use semantic HTML5 Markup. Never use an ID unless necessary. See [CSS](#css) section for information about class naming. + +## Javascript + +Use jQuery. All files should be located in `src/js`. Try to keep all Javascript lines to a maximum of 80 characters. This can be unavoidable in some cases, so if you must break 80 characters, do not exceed 120. All events should be called using `js-` prefixed selector. + +### Commenting + +Use `/*! COMMENT */` as a comment block. Use multiline comments over single line comments. + +### Format + +Each JS file should use jQuery and be wrapped with an IIFE. Each method should be documented with a few words or sentence about what the interaction is doing. Indentation should be 2 character spaces. Use single quotes over double quotes. + + ;(function(window, $) { + + /*! + * Document ready + */ + $(function() { + + /*! + * Toggle mobile nav + */ + $('.js-toggleNav').on('click', function(e) { + e.preventDefault(); + $('body').toggleClass('is-showingMobileNav'); + }); + + // ... + }); + })(window, jQuery); + +### Custom classes + +When creating custom classes, use a separate file with the class created using prototypical inheritance. Private variables should be appended with `_` as opposed to prefixing. Comments should be able to be read by jsdoc use multiline, `/** COMMENT */`. Comments that begin with `/*!` are ignored by jsdoc. + + ;(function(window, $){ + + /** + * A Custom Class + * + * @param {String=} options - description. + * @constructor + */ + function CustomClass(title) { + this.title_ = title || 'Title'; + }; + + /** + * Gets the title + * + * @memberof CustomClass + * @returns {String} + */ + CustomClass.prototype.getTitle = function() { + var self = this; + return self.title_; + }; + + /** + * Bind to window + */ + window.CustomClass = CustomClass; + + })(window, jQuery); + +Usage in main application file. + + ;(function(window, $, CustomClass) { + + var item = new CustomClass(); + console.log(item.getTitle()); // Title + + })(window, $, CustomClass); + +## Questions + +If there are any questions please chat / email / hangout / call [joel@uconn.edu](mailto:joel@uconn.edu) diff --git a/archive.php b/archive.php new file mode 100755 index 0000000..341a2a0 --- /dev/null +++ b/archive.php @@ -0,0 +1,40 @@ +query_vars['author'] ) ) { + $author = new TimberUser( $wp_query->query_vars['author'] ); + $data['author'] = $author; + $data['title'] = 'Author Archives: ' . $author->name(); +} +Timber::render( array( 'author.twig', 'archive.twig' ), $data ); diff --git a/bin/install-wp-tests.sh b/bin/install-wp-tests.sh new file mode 100755 index 0000000..e25169f --- /dev/null +++ b/bin/install-wp-tests.sh @@ -0,0 +1,112 @@ +#!/usr/bin/env bash + +if [ $# -lt 3 ]; then + echo "usage: $0 [db-host] [wp-version]" + exit 1 +fi + +DB_NAME=$1 +DB_USER=$2 +DB_PASS=$3 +DB_HOST=${4-localhost} +WP_VERSION=${5-latest} + +WP_TESTS_DIR=${WP_TESTS_DIR-/tmp/wordpress-tests-lib} +WP_CORE_DIR=${WP_CORE_DIR-/tmp/wordpress/} + +download() { + if [ `which curl` ]; then + curl -s "$1" > "$2"; + elif [ `which wget` ]; then + wget -nv -O "$2" "$1" + fi +} + +if [[ $WP_VERSION =~ [0-9]+\.[0-9]+(\.[0-9]+)? ]]; then + WP_TESTS_TAG="tags/$WP_VERSION" +else + # http serves a single offer, whereas https serves multiple. we only want one + download http://api.wordpress.org/core/version-check/1.7/ /tmp/wp-latest.json + grep '[0-9]+\.[0-9]+(\.[0-9]+)?' /tmp/wp-latest.json + LATEST_VERSION=$(grep -o '"version":"[^"]*' /tmp/wp-latest.json | sed 's/"version":"//') + if [[ -z "$LATEST_VERSION" ]]; then + echo "Latest WordPress version could not be found" + exit 1 + fi + WP_TESTS_TAG="tags/$LATEST_VERSION" +fi + +set -ex + +install_wp() { + + if [ -d $WP_CORE_DIR ]; then + return; + fi + + mkdir -p $WP_CORE_DIR + + if [ $WP_VERSION == 'latest' ]; then + local ARCHIVE_NAME='latest' + else + local ARCHIVE_NAME="wordpress-$WP_VERSION" + fi + + download https://wordpress.org/${ARCHIVE_NAME}.tar.gz /tmp/wordpress.tar.gz + tar --strip-components=1 -zxmf /tmp/wordpress.tar.gz -C $WP_CORE_DIR + + download https://raw.github.com/markoheijnen/wp-mysqli/master/db.php $WP_CORE_DIR/wp-content/db.php +} + +install_test_suite() { + # portable in-place argument for both GNU sed and Mac OSX sed + if [[ $(uname -s) == 'Darwin' ]]; then + local ioption='-i .bak' + else + local ioption='-i' + fi + + # set up testing suite if it doesn't yet exist + if [ ! -d $WP_TESTS_DIR ]; then + # set up testing suite + mkdir -p $WP_TESTS_DIR + svn co --quiet https://develop.svn.wordpress.org/${WP_TESTS_TAG}/tests/phpunit/includes/ $WP_TESTS_DIR/includes + fi + + cd $WP_TESTS_DIR + + if [ ! -f wp-tests-config.php ]; then + download https://develop.svn.wordpress.org/${WP_TESTS_TAG}/wp-tests-config-sample.php "$WP_TESTS_DIR"/wp-tests-config.php + sed $ioption "s:dirname( __FILE__ ) . '/src/':'$WP_CORE_DIR':" "$WP_TESTS_DIR"/wp-tests-config.php + sed $ioption "s/youremptytestdbnamehere/$DB_NAME/" "$WP_TESTS_DIR"/wp-tests-config.php + sed $ioption "s/yourusernamehere/$DB_USER/" "$WP_TESTS_DIR"/wp-tests-config.php + sed $ioption "s/yourpasswordhere/$DB_PASS/" "$WP_TESTS_DIR"/wp-tests-config.php + sed $ioption "s|localhost|${DB_HOST}|" "$WP_TESTS_DIR"/wp-tests-config.php + fi + +} + +install_db() { + # parse DB_HOST for port or socket references + local PARTS=(${DB_HOST//\:/ }) + local DB_HOSTNAME=${PARTS[0]}; + local DB_SOCK_OR_PORT=${PARTS[1]}; + local EXTRA="" + + if ! [ -z $DB_HOSTNAME ] ; then + if [ $(echo $DB_SOCK_OR_PORT | grep -e '^[0-9]\{1,\}$') ]; then + EXTRA=" --host=$DB_HOSTNAME --port=$DB_SOCK_OR_PORT --protocol=tcp" + elif ! [ -z $DB_SOCK_OR_PORT ] ; then + EXTRA=" --socket=$DB_SOCK_OR_PORT" + elif ! [ -z $DB_HOSTNAME ] ; then + EXTRA=" --host=$DB_HOSTNAME --protocol=tcp" + fi + fi + + # create database + mysqladmin create $DB_NAME --user="$DB_USER" --password="$DB_PASS"$EXTRA +} + +install_wp +install_test_suite +install_db \ No newline at end of file diff --git a/dist/css/app.css b/dist/css/app.css new file mode 100755 index 0000000..07ad4dd --- /dev/null +++ b/dist/css/app.css @@ -0,0 +1,2009 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + box-sizing: content-box; + /* 2 */ } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +/* uconn.css v1.0.0 */ +@font-face { + font-family: 'icons'; + src: url("//uconn.edu/shared/fonts/icons/icons.eot"); + src: url("//uconn.edu/shared/fonts/icons/icons.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/icons/icons.ttf") format("truetype"), url("//uconn.edu/shared/fonts/icons/icons.woff") format("woff"), url("//uconn.edu/shared/fonts/icons/icons.svg#icons") format("svg"); + font-weight: normal; + font-style: normal; } + +[class*="icon-"] { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.icon-a-z:before { + content: "\e600"; } + +.icon-search:before { + content: "\e601"; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.svg#proxima_nova_ltsemibold") format("svg"), url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.ttf") format("truetype"); + font-weight: bold; + font-style: normal; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.svg#proxima_novabold_italic") format("svg"), url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.ttf") format("truetype"); + font-weight: bold; + font-style: italic; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold") format("svg"), url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.ttf") format("truetype"); + font-weight: 500; + font-style: normal; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular") format("svg"), url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic") format("svg"), url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.ttf") format("truetype"); + font-weight: normal; + font-style: italic; } + +.uc_font--proxima-nova, .uc_title__levelOne, .uc_title__levelTwo { + font-family: "Proxima Nova"; } + +@font-face { + font-family: "UConn"; + src: url("//uconn.edu/shared/fonts/uconn/uconn.eot"); + src: url("//uconn.edu/shared/fonts/uconn/uconn.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/uconn/uconn.svg#uconnregular") format("svg"), url("//uconn.edu/shared/fonts/uconn/uconn.woff") format("woff"), url("//uconn.edu/shared/fonts/uconn/uconn.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } + +.uc_font--uconn { + font-family: "UConn"; + letter-spacing: 3px; + font-size: 50px; } + +/** + * @name Color Classes + * @description Sets the specified color property to the specified color. + * @markup .uc_[COLOR NAME]-[COLOR TYPE] + * + * @state .uc_[COLOR NAME]-c = sets the color to COLOR NAME. + * @state .uc_[COLOR NAME]-bg = sets the background-color to COLOR NAME. + * @state .uc_[COLOR NAME]-bd = sets the border-color to COLOR NAME. + */ +.uc_lightBlue-c { + color: #03357a; } + +.uc_lightBlue-bg { + background-color: #03357a; } + +.uc_lightBlue-bd { + border-color: #03357a; } + +.uc_darkBlue-c { + color: #01062c; } + +.uc_darkBlue-bg { + background-color: #01062c; } + +.uc_darkBlue-bd { + border-color: #01062c; } + +.uc_buttonBlue-c { + color: #1a4798; } + +.uc_buttonBlue-bg { + background-color: #1a4798; } + +.uc_buttonBlue-bd { + border-color: #1a4798; } + +.uc_textLightBlue-c { + color: #008cba; } + +.uc_textLightBlue-bg { + background-color: #008cba; } + +.uc_textLightBlue-bd { + border-color: #008cba; } + +.uc_textDarkBlue-c { + color: #263a75; } + +.uc_textDarkBlue-bg { + background-color: #263a75; } + +.uc_textDarkBlue-bd { + border-color: #263a75; } + +.uc_textYellow-c { + color: #ffa902; } + +.uc_textYellow-bg { + background-color: #ffa902; } + +.uc_textYellow-bd { + border-color: #ffa902; } + +.uc_bannerDarkBlue-c { + color: #000e2f; } + +.uc_bannerDarkBlue-bg { + background-color: #000e2f; } + +.uc_bannerDarkBlue-bd { + border-color: #000e2f; } + +.uc_grey-c { + color: #7C878E; } + +.uc_grey-bg { + background-color: #7C878E; } + +.uc_grey-bd { + border-color: #7C878E; } + +.uc_halfBlack-c { + color: rgba(0, 0, 0, 0.5); } + +.uc_halfBlack-bg { + background-color: rgba(0, 0, 0, 0.5); } + +.uc_halfBlack-bd { + border-color: rgba(0, 0, 0, 0.5); } + +/** + * @name Gradient Classes + * @description Sets the background-image property to the specified gradient. + * @markup .uc_[COLOR A]-to-[COLOR B] + * + * @state .uc_[COLOR A]-to-[COLOR B]--reverse = Reverses the order of the colors in the gradient. + */ +.uc_lightBlue-to-darkBlue { + background-image: linear-gradient(to bottom, #03357a, #01062c); } + +.uc_lightBlue-to-darkBlue--reverse { + background-image: linear-gradient(to bottom, #03357a, #01062c); } + +.uc_banner { + background-color: #000e2f; + height: 4em; } + +.uc_banner__inner { + max-width: 80em; + margin: auto; + box-sizing: border-box; + padding: 0 0.5em; } + +.uc_banner__logo { + color: white; + font-size: 3em; + float: left; + margin: 0; + line-height: 1.333em; } + +.uc_banner__name { + display: none; + float: left; + color: #9faab2; + font-size: 1em; + width: 10em; + letter-spacing: 0.055em; + word-spacing: 0.02em; + padding-left: 0.25em; + margin: 1em 0; + font-weight: bold; + font-style: normal; + border-left: 2px solid #3f4760; + line-height: 1em; } + @media (min-width: 27em) { + .uc_banner__name { + display: block; } } + @media (min-width: 34em) { + .uc_banner__name { + line-height: 2em; + width: auto; } } + +.uc_banner__buttons { + display: none; + float: right; + height: 2.3em; + width: 5.25em; + margin: 0.8em 0; + position: relative; + z-index: 2; } + @media (min-width: 21em) { + .uc_banner__buttons { + display: block; } } + +.uc_banner__button { + display: block; + color: white; + background-color: #1a4798; + text-decoration: none; + width: 2.3em; + height: 2.3em; + text-align: center; + vertical-align: top; } + .uc_banner__button span { + font-size: 1.5em; + line-height: 1.533em; } + +.uc_banner__button--search { + float: left; } + +.uc_banner__button--az { + float: right; } + +.uc_banner__searchForm { + position: absolute; + z-index: -1; + top: 0; + left: 0; + height: 2.3em; + transform: translateX(-100%); + box-sizing: border-box; + width: 15em; + transition: width 0.25s ease, opacity 0.25s ease-out,transform 0.25s ease; + background-color: #0f2857; + border: 0.1em solid #1a4798; + opacity: 0; + transform: translateX(-90%); + pointer-events: none; } + .uc_banner__searchForm.active { + outline: none; + opacity: 1; + transform: translateX(-100%); + pointer-events: all; } + +.uc_banner__searchBar { + display: block; + float: left; + width: 12.5em; + height: 100%; + box-sizing: border-box; + background: transparent; + color: white; + border: none; + padding-left: 0.5em; + outline: none; } + +.uc_banner__dropdownButton { + width: 2.3em; + height: 100%; + float: right; + background-color: #0f2857; + position: relative; + cursor: pointer; } + .uc_banner__dropdownButton:hover, .uc_banner__dropdownButton.active { + background-color: #13336c; } + .uc_banner__dropdownButton.active .uc_banner__dropdownBody { + opacity: 1; + transform: translateY(0); + pointer-events: all; } + +.uc_banner__dropdownButtonTriangle { + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + margin: -0.2165em 0 0 -0.3em; + border-left: 0.433em solid transparent; + border-right: 0.433em solid transparent; + border-top: 0.5em solid white; } + +.uc_banner__dropdownBody { + position: absolute; + top: 100%; + right: 0; + z-index: -1; + width: 10em; + overflow-y: hidden; + background-color: white; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); + opacity: 0; + transform: translateY(0.5em); + pointer-events: none; + transition: transform 0.2s ease, opacity 0.2s ease; } + +.uc_banner__dropdownElement { + width: 10em; + line-height: 2em; + text-align: center; } + .uc_banner__dropdownElement:hover { + color: #008cba; } + +.uc_banner__dropdownElement--selected { + background-color: #03357a; + color: white; } + .uc_banner__dropdownElement--selected:hover { + color: white; } + +.uc_title__levelOne { + color: #01062c; + font-size: 1.5em; } + .uc_title__levelOne a { + color: inherit; + text-decoration: none; } + +.uc_title__levelTwo { + color: #7C878E; + font-size: 0.9em; } + .uc_title__levelTwo a { + color: inherit; + text-decoration: none; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-Book.otf); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-BookItalic.otf); + font-weight: normal; + font-style: italic; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-Bold.otf); + font-weight: bold; + font-style: normal; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-BoldItalic.otf); + font-weight: bold; + font-style: italic; } + +html { + font-family: 'Gotham'; } + +.master-wrapper::after { + content: "mobile"; + display: block; + visibility: hidden; + pointer-events: none; + position: absolute; + top: 0; + left: 0; } + +@media only screen and (min-width: 38em) { + .master-wrapper::after { + content: "tablet"; } } + +@media only screen and (min-width: 48em) { + .master-wrapper::after { + content: "tabletLarge"; } } + +@media only screen and (min-width: 62em) { + .master-wrapper::after { + content: "desktop"; } } + +.pageHeader { + background-color: #666; } + +.pageHeader__titles { + float: left; } + +.uc_title__levelTwo { + color: #757c7c; } + +.uc_title__levelOne { + color: white; } + +.pageHeader__actionButtons { + float: left; + width: 100%; + height: 3em; } + +.pageHeader__actionButton { + display: block; + float: right; + width: 40%; + height: 2em; + max-width: 8em; + margin: 0.5em; + text-align: center; + line-height: 2.2em; + color: #636263; + font-weight: bold; + text-decoration: none; + background-color: #3a3f4e; + transition: color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), background-color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .pageHeader__actionButton:hover { + background-color: #0f1937; + color: white; } + +.pageNav { + width: 100vw; + background-color: #383838; + border-top: 0.2em solid #161616 !important; + border-bottom: 0.75em solid; } + +.u-degreesColor .pageNav { + border-color: #C1133D; } + +.u-concentrationsColor .pageNav { + border-color: #EF7C02; } + +.u-campusesColor .pageNav { + border-color: #1982BE; } + +.u-for-studentsColor .pageNav { + border-color: #76B700; } + +.u-about-usColor .pageNav { + border-color: #9A2D98; } + +.u-our-workColor .pageNav { + border-color: #f3D33D; } + +.u-talk-to-usColor .pageNav { + border-color: #6c686c; } + +.u-how-to-applyColor .pageNav { + border-color: #194472; } + +.pageNav__toggle { + display: none; } + +.pageNav__toggleLabel { + box-sizing: border-box; + display: block; + width: 2em; + height: 2em; + margin: 0.5em; + padding: 0; + border: 0; + outline: 0; + cursor: pointer; + background-color: transparent; + position: relative; } + +.pageNav__toggleLabelBar { + width: 2em; + height: 0.15em; + background-color: white; + position: absolute; } + +.pageNav__toggleLabelBar--top { + left: 50%; + top: 25%; + transform: translate(-50%, -50%) rotate(0deg); + transition: transform 0.125s cubic-bezier(0.6, 0.06, 0.59, 1), top 0.125s cubic-bezier(0.6, 0.06, 0.59, 1) 0.125s; } + +.pageNav__toggle:checked ~ .pageNav__toggleLabel > .pageNav__toggleLabelBar--top { + top: 50%; + transform: translate(-50%, -50%) rotate(45deg); + transition: transform 0.125s cubic-bezier(0.6, 0.06, 0.59, 1) 0.125s, top 0.125s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.pageNav__toggleLabelBar--middle { + left: 50%; + top: 50%; + opacity: 1; + transform: translate(-50%, -50%); + transition: opacity 0.125s cubic-bezier(0.6, 0.06, 0.59, 1) 0.125s; } + +.pageNav__toggle:checked ~ .pageNav__toggleLabel > .pageNav__toggleLabelBar--middle { + opacity: 0; + transition: opacity 0.125s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.pageNav__toggleLabelBar--bottom { + left: 50%; + top: 75%; + transform: translate(-50%, -50%) rotate(180deg); + transition: transform 0.125s cubic-bezier(0.6, 0.06, 0.59, 1), top 0.125s cubic-bezier(0.6, 0.06, 0.59, 1) 0.125s; } + +.pageNav__toggle:checked ~ .pageNav__toggleLabel > .pageNav__toggleLabelBar--bottom { + top: 50%; + transform: translate(-50%, -50%) rotate(135deg); + transition: transform 0.125s cubic-bezier(0.6, 0.06, 0.59, 1) 0.125s, top 0.125s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.pageNav__toggle:checked ~ .pageNav__inner { + height: 12em; } + +.pageNav__inner { + width: 100%; + height: 0; + overflow-y: hidden; + transition: height 0.25s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.pageNav__link { + display: block; + text-decoration: none; + font-size: 0.8em; + line-height: 2.5em; + font-weight: bold; + color: #7a7878; + padding-left: 0.5em; + transform: translateX(0em); + transition: transform 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .pageNav__link::before { + content: ""; + position: absolute; + left: 0em; + top: 50%; + width: 0; + height: 0; + border-color: inherit; + border-left: 0.5em solid; + border-top: 0.433em solid transparent; + border-bottom: 0.433em solid transparent; + opacity: 0; + transform: translate(0.2em, -65%); + transition: transform 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .pageNav__link:hover { + color: white; + transform: translateX(0.5em); } + .pageNav__link:hover::before { + opacity: 1; + transform: translate(-0.2em, -65%); } + +.pageNav__link--degrees { + border-color: #C1133D; } + .pageNav__link--degrees::hover { + background-color: #C1133D; } + +.pageNav__link--degrees:hover, +.pageNav__link--degrees.active { + color: #C1133D; } + +.pageNav__link--concentrations { + border-color: #EF7C02; } + .pageNav__link--concentrations::hover { + background-color: #EF7C02; } + +.pageNav__link--concentrations:hover, +.pageNav__link--concentrations.active { + color: #EF7C02; } + +.pageNav__link--campuses { + border-color: #1982BE; } + .pageNav__link--campuses::hover { + background-color: #1982BE; } + +.pageNav__link--campuses:hover, +.pageNav__link--campuses.active { + color: #1982BE; } + +.pageNav__link--for-students { + border-color: #76B700; } + .pageNav__link--for-students::hover { + background-color: #76B700; } + +.pageNav__link--for-students:hover, +.pageNav__link--for-students.active { + color: #76B700; } + +.pageNav__link--about-us { + border-color: #9A2D98; } + .pageNav__link--about-us::hover { + background-color: #9A2D98; } + +.pageNav__link--about-us:hover, +.pageNav__link--about-us.active { + color: #9A2D98; } + +.pageNav__link--our-work { + border-color: #f3D33D; } + .pageNav__link--our-work::hover { + background-color: #f3D33D; } + +.pageNav__link--our-work:hover, +.pageNav__link--our-work.active { + color: #f3D33D; } + +.pageNav__link--talk-to-us { + border-color: #6c686c; } + .pageNav__link--talk-to-us::hover { + background-color: #6c686c; } + +.pageNav__link--talk-to-us:hover, +.pageNav__link--talk-to-us.active { + color: #6c686c; } + +.pageNav__link--how-to-apply { + border-color: #194472; } + .pageNav__link--how-to-apply::hover { + background-color: #194472; } + +.pageNav__link--how-to-apply:hover, +.pageNav__link--how-to-apply.active { + color: #194472; } + +.subPage { + margin-bottom: 1em; } + +.subPageNav { + margin-top: 1em; } + +.subPageNav__link { + margin-left: 1em; + position: relative; + text-decoration: none; } + .subPageNav__link::before { + content: ""; + position: absolute; + top: 50%; + left: -1em; + transform: translateY(-50%); + width: 0; + height: 0; + border-right: 0.5em solid; + border-color: inherit; + border-top: 0.43em solid transparent; + border-bottom: 0.43em solid transparent; } + +.subPageMain { + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; + -ms-flex-pack: distribute; + justify-content: space-around; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin-left: -1em; + margin-right: -1em; } + +.subPageBody, +.subPageAside { + box-sizing: border-box; + width: 100%; + padding: 1em; } + +.subPageBody { + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; } + +.subPageAside__inner { + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } + +.subPageBody__inner { + width: 100%; + background-color: #f0f0f0; + padding: 1em; } + +.subPageAside__Image { + box-sizing: border-box; + width: 100%; + margin: 0; + overflow: hidden; } + .subPageAside__Image img { + max-width: 100%; + vertical-align: bottom; } + +.subPageAside__Banner { + display: block; + text-decoration: none; + box-sizing: border-box; + width: 100%; + padding: 2em; + text-align: center; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } + +.subPage--degrees h1, +.subPage--degrees h2, +.subPage--degrees h3, +.subPage--degrees h4, +.subPage--degrees h5, +.subPage--degrees h6, +.subPage--degrees a { + color: #C1133D; + border-color: #C1133D; } + +.subPage--degrees .subPageAside__Banner { + background-color: #C1133D; } + .subPage--degrees .subPageAside__Banner h3 { + color: white; } + +.subPage--concentrations h1, +.subPage--concentrations h2, +.subPage--concentrations h3, +.subPage--concentrations h4, +.subPage--concentrations h5, +.subPage--concentrations h6, +.subPage--concentrations a { + color: #EF7C02; + border-color: #EF7C02; } + +.subPage--concentrations .subPageAside__Banner { + background-color: #EF7C02; } + .subPage--concentrations .subPageAside__Banner h3 { + color: white; } + +.subPage--campuses h1, +.subPage--campuses h2, +.subPage--campuses h3, +.subPage--campuses h4, +.subPage--campuses h5, +.subPage--campuses h6, +.subPage--campuses a { + color: #1982BE; + border-color: #1982BE; } + +.subPage--campuses .subPageAside__Banner { + background-color: #1982BE; } + .subPage--campuses .subPageAside__Banner h3 { + color: white; } + +.subPage--for-students h1, +.subPage--for-students h2, +.subPage--for-students h3, +.subPage--for-students h4, +.subPage--for-students h5, +.subPage--for-students h6, +.subPage--for-students a { + color: #76B700; + border-color: #76B700; } + +.subPage--for-students .subPageAside__Banner { + background-color: #76B700; } + .subPage--for-students .subPageAside__Banner h3 { + color: white; } + +.subPage--about-us h1, +.subPage--about-us h2, +.subPage--about-us h3, +.subPage--about-us h4, +.subPage--about-us h5, +.subPage--about-us h6, +.subPage--about-us a { + color: #9A2D98; + border-color: #9A2D98; } + +.subPage--about-us .subPageAside__Banner { + background-color: #9A2D98; } + .subPage--about-us .subPageAside__Banner h3 { + color: white; } + +.subPage--our-work h1, +.subPage--our-work h2, +.subPage--our-work h3, +.subPage--our-work h4, +.subPage--our-work h5, +.subPage--our-work h6, +.subPage--our-work a { + color: #f3D33D; + border-color: #f3D33D; } + +.subPage--our-work .subPageAside__Banner { + background-color: #f3D33D; } + .subPage--our-work .subPageAside__Banner h3 { + color: white; } + +.subPage--talk-to-us h1, +.subPage--talk-to-us h2, +.subPage--talk-to-us h3, +.subPage--talk-to-us h4, +.subPage--talk-to-us h5, +.subPage--talk-to-us h6, +.subPage--talk-to-us a { + color: #6c686c; + border-color: #6c686c; } + +.subPage--talk-to-us .subPageAside__Banner { + background-color: #6c686c; } + .subPage--talk-to-us .subPageAside__Banner h3 { + color: white; } + +.subPage--how-to-apply h1, +.subPage--how-to-apply h2, +.subPage--how-to-apply h3, +.subPage--how-to-apply h4, +.subPage--how-to-apply h5, +.subPage--how-to-apply h6, +.subPage--how-to-apply a { + color: #194472; + border-color: #194472; } + +.subPage--how-to-apply .subPageAside__Banner { + background-color: #194472; } + .subPage--how-to-apply .subPageAside__Banner h3 { + color: white; } + +.mainFooter { + background-color: black; + color: white; + padding: 1em 0; } + +.mainFooter__superNav, +.mainFooter__subNav { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-align: center; + align-items: center; } + +.mainFooter__superNav { + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 3em; } + +.mainFooter__subNav { + -ms-flex-pack: start; + justify-content: flex-start; } + +.mainFooter__social { + padding-right: 2em; + margin-bottom: 0.5em; } + +.mainFooter__apply { + margin-top: 0.5em; } + +.socialNav ul { + list-style: none; + padding-left: 0; + margin: 0; } + +.socialNav li { + float: left; } + +.socialNav__link { + display: block; + width: 3em; + height: 3em; + border-radius: 50%; + margin: 0.5em; + position: relative; } + .socialNav__link#facebook { + background: url(../img/footer-icons/facebook.png) no-repeat center/cover; } + .socialNav__link#twitter { + background: url(../img/footer-icons/twitter.png) no-repeat center/cover; } + .socialNav__link#instagram { + background: url(../img/footer-icons/instagram.png) no-repeat center/cover; } + .socialNav__link#youtube { + background: url(../img/footer-icons/youtube.png) no-repeat center/cover; } + .socialNav__link::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 2.75em; + height: 2.75em; + z-index: 1; + border-radius: 50%; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: inherit; + opacity: 0; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .socialNav__link:hover::before, .socialNav__link.active::before { + width: calc(100% + 10px); + height: calc(100% + 10px); + opacity: 1; } + +.socialNav__link--first { + margin-left: 0; } + +.mainFooter__applyButton { + display: block; + font-size: 1.5em; + color: black; + text-decoration: none; + background-color: white; + padding: 1em 1.5em; + position: relative; } + .mainFooter__applyButton::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + z-index: 1; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: inherit; + opacity: 0; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .mainFooter__applyButton:hover::before, .mainFooter__applyButton.active::before { + width: calc(100% + 10px); + height: calc(100% + 10px); + opacity: 1; } + +.mainFooter__subNavLink { + display: block; + margin: 0.5em 1em; + color: white; + text-decoration: none; + position: relative; } + .mainFooter__subNavLink::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + width: 0%; + height: 1px; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .mainFooter__subNavLink:hover::after { + width: 100%; } + +.degreeCards { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + -ms-flex-align: center; + align-items: center; + margin: 1em 0; } + +.degreeCard { + display: block; + width: 100%; + max-width: 24em; + margin: 0 0 1em; + position: relative; + overflow: hidden; + background-color: black; + cursor: pointer; + position: relative; } + .degreeCard::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + z-index: 1; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: #C1133D; + opacity: 0; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .degreeCard:hover::before, .degreeCard.active::before { + width: calc(100% + -2em); + height: calc(100% + -2em); + opacity: 1; } + +.degreeCard__background { + max-width: 100%; + vertical-align: bottom; + transition: opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.degreeCard__label { + position: absolute; + top: 50%; + left: 50%; + width: 80%; + transform: translate(-50%, -50%); + color: white; + text-align: center; } + .degreeCard__label h1 { + font-size: 1.25em; + margin: 0; } + .degreeCard__label h4 { + font-weight: lighter; + margin: 0.5em 0 0; } + +.degreeCard__learnMore { + transform: translateY(-100%); + opacity: 0; + transition: 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); + color: #C1133D; } + +.degreeCard:hover .degreeCard__background { + opacity: 0.5; } + +.degreeCard:hover .degreeCard__learnMore { + transform: translateY(50%); + opacity: 1; } + +.degreeBanner { + background: url(../img/degrees/degrees-redirect-bg.jpg) no-repeat center/cover; + overflow-y: hidden; } + +.degreeBanner__inner { + width: 100%; + max-width: 28em; + margin: 4em auto; + box-sizing: border-box; + padding: 0.5em; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } + +.degreeBanner__btn { + box-sizing: border-box; + text-align: center; + display: block; + padding: 0.5em; + color: white; + text-decoration: none; + margin: 0.5em 0; + position: relative; + transition: background-color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .degreeBanner__btn:hover { + background-color: white; + color: #C1133D; } + .degreeBanner__btn::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + z-index: 1; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: #C1133D; + opacity: 0; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .degreeBanner__btn:hover::before, .degreeBanner__btn.active::before { + width: calc(100% + 0.5em); + height: calc(100% + 0.5em); + opacity: 1; } + +.degreeBanner__btn--small { + width: 47.5%; + background-color: #C1133D; } + +.degreeBanner__btn--large { + width: 100%; + padding: 2em; + background-image: linear-gradient(173deg, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 50%); } + +.cameraIcon { + display: inline-block; + width: 2em; + height: 2em; + margin-right: 0.5em; + vertical-align: middle; + background: url(../img/degrees/camera-icon.png) no-repeat center/cover; } + +.concentrationsContainer { + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: stretch; + align-items: stretch; } + +.concentrationTiles { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.concentrationTile { + width: 90vw; + height: 50vw; + display: block; + margin: 1em 0; + text-decoration: none; } + +.concentrationTile--2dAnimation { + background: url(../img/concentrations/2dAnimation.jpg) no-repeat center/cover; } + +.concentrationTile--3dAnimation { + background: url(../img/concentrations/3dAnimation.jpg) no-repeat center/cover; } + +.concentrationTile--businessStrategies { + background: url(../img/concentrations/businessStrategies.jpg) no-repeat center/cover; } + +.concentrationTile--digitalHumanities { + background: url(../img/concentrations/digitalHumanities.jpg) no-repeat center/cover; } + +.concentrationTile--gameDesign { + background: url(../img/concentrations/gameDesign.jpg) no-repeat center/cover; } + +.concentrationTile--webDesign { + background: url(../img/concentrations/webDesign.jpg) no-repeat center/cover; } + +.concentrationTile__inner { + width: 100%; + height: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + position: relative; + background-color: transparent; + transition: background-color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .concentrationTile__inner::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + z-index: 1; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: white; + opacity: 0; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .concentrationTile__inner:hover::before, .concentrationTile__inner.active::before { + width: calc(100% + -1.5em); + height: calc(100% + -1.5em); + opacity: 1; } + .concentrationTile__inner:hover { + background-color: rgba(0, 0, 0, 0.5); } + +.concentrationTile__text { + width: 60%; + text-align: center; + color: white; + font-weight: bold; + background: rgba(239, 124, 2, 0.8); + padding: 0.5em; + transition: background-color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.concentrationTile__inner:hover .concentrationTile__text { + color: #EF7C02; + background-color: transparent; } + +.concentrationInfoContainer { + display: none; + position: relative; } + +.concentrationInfo { + z-index: 0; + position: absolute; + top: 0; + left: 0; + opacity: 0; + width: 100%; + transition: opacity 0.3s cubic-bezier(0.6, 0.06, 0.59, 1); } + .concentrationInfo.active { + opacity: 1; + z-index: 1; } + .concentrationInfo h1 { + box-sizing: border-box; + color: white; + font-size: 1.5em; + text-align: center; + width: 100%; + padding: 0.5em; + background-color: #EF7C02; } + .concentrationInfo li { + margin: 0.3em 0; } + .concentrationInfo h3 { + box-sizing: border-box; + color: #EF7C02; + text-align: center; + width: 100%; + padding: 0.5em; + border: 0.25em solid #EF7C02; } + +.concentrationInfo__button { + display: block; + width: 50%; } + +.aboutUsTiles { + max-width: 60em; + margin: 0 auto; + overflow-y: hidden; } + +.aboutUsTile { + box-sizing: border-box; + margin: 0 auto; + max-width: 30em; + width: 100%; + padding: 0.5em; } + +.aboutUsTile__inner { + display: block; + color: white; + text-decoration: none; + width: 100%; + height: 100%; + position: relative; } + .aboutUsTile__inner img { + max-width: 100%; + margin: 0 auto; + display: block; + vertical-align: text-bottom; } + +.aboutUsTile--large { + max-width: 100%; } + .aboutUsTile--large .aboutUsTile__caption { + position: absolute; + top: 20%; + left: 50%; + transform: translate(-50%, -50%); } + .aboutUsTile--large .aboutUsTile__caption img { + width: 2.5em; + height: 2.5em; + float: left; + margin-right: 0.5em; + display: none; } + .aboutUsTile--large .aboutUsTile__captionText { + float: left; + width: 15em; + font-size: 1.2em; + font-weight: bold; + margin: 0; + text-align: center; } + +.aboutUsTile--small .aboutUsTile__inner::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + z-index: 10; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: #9A2D98; + opacity: 0; + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.aboutUsTile--small .aboutUsTile__inner:hover::before, .aboutUsTile--small .aboutUsTile__inner.active::before { + width: calc(100% + -1em); + height: calc(100% + -1em); + opacity: 1; } + +.aboutUsTile--small .aboutUsTile__inner .aboutUsTile__caption { + position: absolute; + top: 50%; + left: 50%; + width: calc(100% - 2em); + height: calc(100% - 2em); + transform: translate(-50%, -50%); + background-color: rgba(0, 0, 0, 0.75); + transition: width 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), height 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + +.aboutUsTile--small .aboutUsTile__inner .aboutUsTile__captionText { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + margin: 0; } + +.aboutUsTile--small .aboutUsTile__inner:hover .aboutUsTile__caption { + width: 100%; + height: 100%; } + +.contactCards { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.contactCard { + width: 100%; + max-width: 14em; + -ms-flex-preferred-size: 14em; + flex-basis: 14em; + margin: 1.5em 0.5em; + float: left; } + +.contactCard--red hr { + border-color: #c41f40; } + +.contactCard--orange hr { + border-color: #ef7d22; } + +.contactCard--yellow hr { + border-color: #f2d43c; } + +.contactCard--green hr { + border-color: #73b843; } + +.contactCard--blue hr { + border-color: #1f83c0; } + +.contactCard__top { + width: 100%; + margin: 0 0 0.5em; + display: -ms-flexbox; + display: flex; + -ms-flex-align: end; + align-items: flex-end; + -ms-flex-pack: start; + justify-content: flex-start; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } + .contactCard__top img { + height: 130px; + height: auto; } + .contactCard__top figcaption { + padding-left: 0.5em; } + .contactCard__top h3 { + margin: 0; + font-size: 0.7em; } + .contactCard__top h3:last-child { + color: #8d848d; } + +.contactCard__bottom { + width: 100%; + margin: 0; + background-color: #383638; + overflow-y: hidden; } + .contactCard__bottom hr { + margin-bottom: 0.75em; } + +.contactCard__bottomInner { + padding: 0.75em 0.75em 0.25em; } + .contactCard__bottomInner a, .contactCard__bottomInner h4 { + color: #e4e4e4; + text-transform: uppercase; } + .contactCard__bottomInner a { + text-decoration: none; } + .contactCard__bottomInner h4 { + margin: 0 0 0.1em; + font-size: 0.6em; } + +.applyCampus { + width: 100%; + float: left; + padding: 2em; + box-sizing: border-box; } + +.applyCampus__inner { + width: 100%; + margin: 0; } + .applyCampus__inner img { + max-width: 100%; } + .applyCampus__inner figcaption { + border-left: 0.1em solid #194472; + margin: 0.5em 0 0 0.2em; + box-sizing: border-box; + padding-left: 1em; } + .applyCampus__inner figcaption h1 { + font-size: 3em; + padding: 0.4em 0 0.2em; + margin: 0; } + +.applyCampus__link { + color: #7a7878; + text-decoration: none; + display: block; + font-weight: bold; + letter-spacing: 0.1em; + padding: 0.2em 0; + position: relative; + transform: translateX(0em); + transition: transform 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), color 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .applyCampus__link::before { + content: ""; + position: absolute; + left: 0em; + top: 0.35em; + width: 0; + height: 0; + border-top: 0.433em solid transparent; + border-bottom: 0.433em solid transparent; + border-left: 0.5em solid #194472; + opacity: 0; + transform: translateX(0em); + transition: transform 0.15s cubic-bezier(0.6, 0.06, 0.59, 1), opacity 0.15s cubic-bezier(0.6, 0.06, 0.59, 1); } + .applyCampus__link:hover { + color: black; + transform: translateX(0.5em); } + .applyCampus__link:hover::before { + opacity: 1; + transform: translateX(-1em); } + +.u-floatRight { + float: right; } + +.u-container { + padding: 0 1em; + display: block; + max-width: 80em; + overflow-y: hidden; + margin-left: auto; + margin-right: auto; } + +.u-blackBG { + background-color: black; } + +.u-indent { + margin-left: 2em; } + +.u-degreesColor .u-color { + color: #C1133D; } + +.u-degreesColor .u-backgroundColor { + background-color: #C1133D; } + +.u-degreesColor .u-borderColor { + border-color: #C1133D; } + +.u-degreesColor .u-s-backgroundColor::before, +.u-degreesColor .u-s-backgroundColor::after { + background-color: #C1133D; } + +.u-degreesColor .u-h-backgroundColor:hover { + background-color: #C1133D; } + +.u-concentrationsColor .u-color { + color: #EF7C02; } + +.u-concentrationsColor .u-backgroundColor { + background-color: #EF7C02; } + +.u-concentrationsColor .u-borderColor { + border-color: #EF7C02; } + +.u-concentrationsColor .u-s-backgroundColor::before, +.u-concentrationsColor .u-s-backgroundColor::after { + background-color: #EF7C02; } + +.u-concentrationsColor .u-h-backgroundColor:hover { + background-color: #EF7C02; } + +.u-campusesColor .u-color { + color: #1982BE; } + +.u-campusesColor .u-backgroundColor { + background-color: #1982BE; } + +.u-campusesColor .u-borderColor { + border-color: #1982BE; } + +.u-campusesColor .u-s-backgroundColor::before, +.u-campusesColor .u-s-backgroundColor::after { + background-color: #1982BE; } + +.u-campusesColor .u-h-backgroundColor:hover { + background-color: #1982BE; } + +.u-for-studentsColor .u-color { + color: #76B700; } + +.u-for-studentsColor .u-backgroundColor { + background-color: #76B700; } + +.u-for-studentsColor .u-borderColor { + border-color: #76B700; } + +.u-for-studentsColor .u-s-backgroundColor::before, +.u-for-studentsColor .u-s-backgroundColor::after { + background-color: #76B700; } + +.u-for-studentsColor .u-h-backgroundColor:hover { + background-color: #76B700; } + +.u-about-usColor .u-color { + color: #9A2D98; } + +.u-about-usColor .u-backgroundColor { + background-color: #9A2D98; } + +.u-about-usColor .u-borderColor { + border-color: #9A2D98; } + +.u-about-usColor .u-s-backgroundColor::before, +.u-about-usColor .u-s-backgroundColor::after { + background-color: #9A2D98; } + +.u-about-usColor .u-h-backgroundColor:hover { + background-color: #9A2D98; } + +.u-our-workColor .u-color { + color: #f3D33D; } + +.u-our-workColor .u-backgroundColor { + background-color: #f3D33D; } + +.u-our-workColor .u-borderColor { + border-color: #f3D33D; } + +.u-our-workColor .u-s-backgroundColor::before, +.u-our-workColor .u-s-backgroundColor::after { + background-color: #f3D33D; } + +.u-our-workColor .u-h-backgroundColor:hover { + background-color: #f3D33D; } + +.u-talk-to-usColor .u-color { + color: #6c686c; } + +.u-talk-to-usColor .u-backgroundColor { + background-color: #6c686c; } + +.u-talk-to-usColor .u-borderColor { + border-color: #6c686c; } + +.u-talk-to-usColor .u-s-backgroundColor::before, +.u-talk-to-usColor .u-s-backgroundColor::after { + background-color: #6c686c; } + +.u-talk-to-usColor .u-h-backgroundColor:hover { + background-color: #6c686c; } + +.u-how-to-applyColor .u-color { + color: #194472; } + +.u-how-to-applyColor .u-backgroundColor { + background-color: #194472; } + +.u-how-to-applyColor .u-borderColor { + border-color: #194472; } + +.u-how-to-applyColor .u-s-backgroundColor::before, +.u-how-to-applyColor .u-s-backgroundColor::after { + background-color: #194472; } + +.u-how-to-applyColor .u-h-backgroundColor:hover { + background-color: #194472; } + +@media screen and (min-width: 38em) { + .subPageAside__Image, + .subPageAside__Banner { + width: 50%; } + .concentrationTile { + width: 40vw; + height: 25vw; } + .aboutUsTile { + max-width: 50%; + float: left; } + .aboutUsTile--large { + max-width: 100%; } + .aboutUsTile--large .aboutUsTile__caption { + width: 21em; } + .aboutUsTile--large .aboutUsTile__caption img { + display: block; } + .aboutUsTile--large .aboutUsTile__captionText { + text-align: left; } } + +@media screen and (min-width: 48em) { + .pageNav .u-container { + padding: 0; } + .pageNav__toggleLabel { + display: none; } + .pageNav__inner { + height: 3em !important; } + .pageNav__link { + width: 16.66667%; + float: left; + box-sizing: border-box; + margin: 0.5em 0; + padding: 0; + text-align: center; } + .pageNav__link::before { + top: 100%; + left: 0; + width: 100%; + height: 1em; + opacity: 1; + border: none; } + .pageNav__link:hover { + transform: translate(0, 0); } + .pageHeader__actionButtons { + float: right; + width: 20em; + margin-top: 2.5em; } + .subPageBody { + width: 60%; } + .subPageAside { + width: 40%; } + .subPageAside__Image, + .subPageAside__Banner { + width: 100%; } + .degreeCards { + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } + .degreeCard { + width: 33%; } + .applyCampus { + width: 50%; } } + +@media screen and (min-width: 62em) { + .pageNav__link { + border-left: 0.1em solid grey; } + .pageNav__link:first-child { + border-left: none; } + .degreeCard__label h1 { + font-size: 1.75em; } + .concentrationTiles { + width: 60%; } + .concentrationTile { + width: 45%; + height: 15em; } + .concentrationTile__inner.active { + background-color: rgba(0, 0, 0, 0.5); } + .concentrationTile__inner.active .concentrationTile__text { + color: #EF7C02; + background-color: transparent; } + .concentrationInfoContainer { + display: block; + width: 40%; } + .aboutUsTile { + max-width: 20em; } + .aboutUsTile--large { + max-width: 40em; } + .applyCampus__inner figcaption h1 { + font-size: 4em; } } diff --git a/dist/css/app.min.css b/dist/css/app.min.css new file mode 100755 index 0000000..d87f63e --- /dev/null +++ b/dist/css/app.min.css @@ -0,0 +1 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:icons;src:url(//uconn.edu/shared/fonts/icons/icons.eot);src:url(//uconn.edu/shared/fonts/icons/icons.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/icons/icons.ttf) format("truetype"),url(//uconn.edu/shared/fonts/icons/icons.woff) format("woff"),url(//uconn.edu/shared/fonts/icons/icons.svg#icons) format("svg");font-weight:400;font-style:normal}[class*=icon-]{font-family:icons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-a-z:before{content:"\e600"}.icon-search:before{content:"\e601"}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.svg#proxima_nova_ltsemibold) format("svg"),url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.svg#proxima_novabold_italic) format("svg"),url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold) format("svg"),url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular) format("svg"),url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic) format("svg"),url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.ttf) format("truetype");font-weight:400;font-style:italic}.uc_font--proxima-nova,.uc_title__levelOne,.uc_title__levelTwo{font-family:"Proxima Nova"}@font-face{font-family:UConn;src:url(//uconn.edu/shared/fonts/uconn/uconn.eot);src:url(//uconn.edu/shared/fonts/uconn/uconn.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/uconn/uconn.svg#uconnregular) format("svg"),url(//uconn.edu/shared/fonts/uconn/uconn.woff) format("woff"),url(//uconn.edu/shared/fonts/uconn/uconn.ttf) format("truetype");font-weight:400;font-style:normal}.uc_font--uconn{font-family:UConn;letter-spacing:3px;font-size:50px}.uc_lightBlue-c{color:#03357a}.uc_lightBlue-bg{background-color:#03357a}.uc_lightBlue-bd{border-color:#03357a}.uc_darkBlue-c{color:#01062c}.uc_darkBlue-bg{background-color:#01062c}.uc_darkBlue-bd{border-color:#01062c}.uc_buttonBlue-c{color:#1a4798}.uc_buttonBlue-bg{background-color:#1a4798}.uc_buttonBlue-bd{border-color:#1a4798}.uc_textLightBlue-c{color:#008cba}.uc_textLightBlue-bg{background-color:#008cba}.uc_textLightBlue-bd{border-color:#008cba}.uc_textDarkBlue-c{color:#263a75}.uc_textDarkBlue-bg{background-color:#263a75}.uc_textDarkBlue-bd{border-color:#263a75}.uc_textYellow-c{color:#ffa902}.uc_textYellow-bg{background-color:#ffa902}.uc_textYellow-bd{border-color:#ffa902}.uc_bannerDarkBlue-c{color:#000e2f}.uc_bannerDarkBlue-bg{background-color:#000e2f}.uc_bannerDarkBlue-bd{border-color:#000e2f}.uc_grey-c{color:#7C878E}.uc_grey-bg{background-color:#7C878E}.uc_grey-bd{border-color:#7C878E}.uc_halfBlack-c{color:rgba(0,0,0,.5)}.uc_halfBlack-bg{background-color:rgba(0,0,0,.5)}.uc_halfBlack-bd{border-color:rgba(0,0,0,.5)}.uc_lightBlue-to-darkBlue,.uc_lightBlue-to-darkBlue--reverse{background-image:linear-gradient(to bottom,#03357a,#01062c)}.uc_banner{background-color:#000e2f;height:4em}.uc_banner__inner{max-width:80em;margin:auto;box-sizing:border-box;padding:0 .5em}.uc_banner__logo{color:#fff;font-size:3em;float:left;margin:0;line-height:1.333em}.uc_banner__name{display:none;float:left;color:#9faab2;font-size:1em;width:10em;letter-spacing:.055em;word-spacing:.02em;padding-left:.25em;margin:1em 0;font-weight:700;font-style:normal;border-left:2px solid #3f4760;line-height:1em}@media (min-width:27em){.uc_banner__name{display:block}}@media (min-width:34em){.uc_banner__name{line-height:2em;width:auto}}.uc_banner__buttons{display:none;float:right;height:2.3em;width:5.25em;margin:.8em 0;position:relative;z-index:2}@media (min-width:21em){.uc_banner__buttons{display:block}}.uc_banner__button{display:block;color:#fff;background-color:#1a4798;text-decoration:none;width:2.3em;height:2.3em;text-align:center;vertical-align:top}.uc_banner__button span{font-size:1.5em;line-height:1.533em}.uc_banner__button--search{float:left}.uc_banner__button--az{float:right}.uc_banner__searchForm{position:absolute;z-index:-1;top:0;left:0;height:2.3em;box-sizing:border-box;width:15em;transition:width .25s ease,opacity .25s ease-out,transform .25s ease;background-color:#0f2857;border:.1em solid #1a4798;opacity:0;transform:translateX(-90%);pointer-events:none}.uc_banner__searchForm.active{outline:0;opacity:1;transform:translateX(-100%);pointer-events:all}.uc_banner__searchBar{display:block;float:left;width:12.5em;height:100%;box-sizing:border-box;background:0 0;color:#fff;border:none;padding-left:.5em;outline:0}.uc_banner__dropdownButton{width:2.3em;height:100%;float:right;background-color:#0f2857;position:relative;cursor:pointer}.uc_banner__dropdownButton.active,.uc_banner__dropdownButton:hover{background-color:#13336c}.uc_banner__dropdownButton.active .uc_banner__dropdownBody{opacity:1;transform:translateY(0);pointer-events:all}.uc_banner__dropdownButtonTriangle{position:absolute;top:50%;left:50%;width:0;height:0;margin:-.2165em 0 0 -.3em;border-left:.433em solid transparent;border-right:.433em solid transparent;border-top:.5em solid #fff}.uc_banner__dropdownBody{position:absolute;top:100%;right:0;z-index:-1;width:10em;overflow-y:hidden;background-color:#fff;box-shadow:0 0 1em rgba(0,0,0,.5);opacity:0;transform:translateY(.5em);pointer-events:none;transition:transform .2s ease,opacity .2s ease}.uc_banner__dropdownElement{width:10em;line-height:2em;text-align:center}.uc_banner__dropdownElement:hover{color:#008cba}.uc_banner__dropdownElement--selected{background-color:#03357a;color:#fff}.uc_banner__dropdownElement--selected:hover{color:#fff}.uc_title__levelOne a,.uc_title__levelTwo a{color:inherit;text-decoration:none}.uc_title__levelOne{font-size:1.5em}@font-face{font-family:Gotham;src:url(../fonts/Gotham-Book.otf);font-weight:400;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/Gotham-BookItalic.otf);font-weight:400;font-style:italic}@font-face{font-family:Gotham;src:url(../fonts/Gotham-Bold.otf);font-weight:700;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/Gotham-BoldItalic.otf);font-weight:700;font-style:italic}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Gotham}.master-wrapper::after{content:"mobile";display:block;visibility:hidden;pointer-events:none;position:absolute;top:0;left:0}@media only screen and (min-width:38em){.master-wrapper::after{content:"tablet"}}@media only screen and (min-width:48em){.master-wrapper::after{content:"tabletLarge"}}@media only screen and (min-width:62em){.master-wrapper::after{content:"desktop"}}.pageHeader{background-color:#666}.pageHeader__titles{float:left}.uc_title__levelTwo{font-size:.9em;color:#757c7c}.uc_title__levelOne{color:#fff}.pageHeader__actionButtons{float:left;width:100%;height:3em}.pageHeader__actionButton{display:block;float:right;width:40%;height:2em;max-width:8em;margin:.5em;text-align:center;line-height:2.2em;color:#636263;font-weight:700;text-decoration:none;background-color:#3a3f4e;transition:color .15s cubic-bezier(.6,.06,.59,1),background-color .15s cubic-bezier(.6,.06,.59,1)}.pageHeader__actionButton:hover{background-color:#0f1937;color:#fff}.pageNav{width:100vw;background-color:#383838;border-top:.2em solid #161616!important;border-bottom:.75em solid}.u-degreesColor .pageNav{border-color:#C1133D}.u-concentrationsColor .pageNav{border-color:#EF7C02}.u-campusesColor .pageNav{border-color:#1982BE}.u-for-studentsColor .pageNav{border-color:#76B700}.u-about-usColor .pageNav{border-color:#9A2D98}.u-our-workColor .pageNav{border-color:#f3D33D}.u-talk-to-usColor .pageNav{border-color:#6c686c}.u-how-to-applyColor .pageNav{border-color:#194472}.pageNav__toggle{display:none}.pageNav__toggleLabel{box-sizing:border-box;display:block;width:2em;height:2em;margin:.5em;padding:0;border:0;outline:0;cursor:pointer;background-color:transparent;position:relative}.pageNav__toggleLabelBar{width:2em;height:.15em;background-color:#fff;position:absolute}.pageNav__toggleLabelBar--top{left:50%;top:25%;transform:translate(-50%,-50%) rotate(0);transition:transform 125ms cubic-bezier(.6,.06,.59,1),top 125ms cubic-bezier(.6,.06,.59,1) 125ms}.pageNav__toggle:checked~.pageNav__toggleLabel>.pageNav__toggleLabelBar--top{top:50%;transform:translate(-50%,-50%) rotate(45deg);transition:transform 125ms cubic-bezier(.6,.06,.59,1) 125ms,top 125ms cubic-bezier(.6,.06,.59,1)}.pageNav__toggleLabelBar--middle{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%);transition:opacity 125ms cubic-bezier(.6,.06,.59,1) 125ms}.pageNav__toggle:checked~.pageNav__toggleLabel>.pageNav__toggleLabelBar--middle{opacity:0;transition:opacity 125ms cubic-bezier(.6,.06,.59,1)}.pageNav__toggleLabelBar--bottom{left:50%;top:75%;transform:translate(-50%,-50%) rotate(180deg);transition:transform 125ms cubic-bezier(.6,.06,.59,1),top 125ms cubic-bezier(.6,.06,.59,1) 125ms}.pageNav__toggle:checked~.pageNav__toggleLabel>.pageNav__toggleLabelBar--bottom{top:50%;transform:translate(-50%,-50%) rotate(135deg);transition:transform 125ms cubic-bezier(.6,.06,.59,1) 125ms,top 125ms cubic-bezier(.6,.06,.59,1)}.pageNav__toggle:checked~.pageNav__inner{height:12em}.pageNav__inner{width:100%;height:0;overflow-y:hidden;transition:height .25s cubic-bezier(.6,.06,.59,1)}.pageNav__link::before,.subPageNav__link::before{content:"";top:50%;width:0;height:0}.pageNav__link{display:block;text-decoration:none;font-size:.8em;line-height:2.5em;font-weight:700;color:#7a7878;padding-left:.5em;transform:translateX(0);transition:transform .15s cubic-bezier(.6,.06,.59,1),color .15s cubic-bezier(.6,.06,.59,1)}.subPageBody,.subPageMain{display:-ms-flexbox;-ms-flex-align:stretch}.pageNav__link::before{position:absolute;left:0;border-color:inherit;border-left:.5em solid;border-top:.433em solid transparent;border-bottom:.433em solid transparent;opacity:0;transform:translate(.2em,-65%);transition:transform .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1)}.pageNav__link:hover{color:#fff;transform:translateX(.5em)}.pageNav__link:hover::before{opacity:1;transform:translate(-.2em,-65%)}.pageNav__link--degrees{border-color:#C1133D}.pageNav__link--degrees::hover{background-color:#C1133D}.pageNav__link--degrees.active,.pageNav__link--degrees:hover{color:#C1133D}.pageNav__link--concentrations{border-color:#EF7C02}.pageNav__link--concentrations::hover{background-color:#EF7C02}.pageNav__link--concentrations.active,.pageNav__link--concentrations:hover{color:#EF7C02}.pageNav__link--campuses{border-color:#1982BE}.pageNav__link--campuses::hover{background-color:#1982BE}.pageNav__link--campuses.active,.pageNav__link--campuses:hover{color:#1982BE}.pageNav__link--for-students{border-color:#76B700}.pageNav__link--for-students::hover{background-color:#76B700}.pageNav__link--for-students.active,.pageNav__link--for-students:hover{color:#76B700}.pageNav__link--about-us{border-color:#9A2D98}.pageNav__link--about-us::hover{background-color:#9A2D98}.pageNav__link--about-us.active,.pageNav__link--about-us:hover{color:#9A2D98}.pageNav__link--our-work{border-color:#f3D33D}.pageNav__link--our-work::hover{background-color:#f3D33D}.pageNav__link--our-work.active,.pageNav__link--our-work:hover{color:#f3D33D}.pageNav__link--talk-to-us{border-color:#6c686c}.pageNav__link--talk-to-us::hover{background-color:#6c686c}.pageNav__link--talk-to-us.active,.pageNav__link--talk-to-us:hover{color:#6c686c}.pageNav__link--how-to-apply{border-color:#194472}.pageNav__link--how-to-apply::hover{background-color:#194472}.pageNav__link--how-to-apply.active,.pageNav__link--how-to-apply:hover{color:#194472}.subPage{margin-bottom:1em}.subPageNav{margin-top:1em}.subPageNav__link{margin-left:1em;position:relative;text-decoration:none}.subPageNav__link::before{position:absolute;left:-1em;transform:translateY(-50%);border-right:.5em solid;border-color:inherit;border-top:.43em solid transparent;border-bottom:.43em solid transparent}.mainFooter__applyButton::before,.socialNav__link::before{content:"";top:50%;z-index:1;transform:translate(-50%,-50%);transition:width .15s cubic-bezier(.6,.06,.59,1),height .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1);left:50%}.subPageMain{display:flex;align-items:stretch;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-left:-1em;margin-right:-1em}.subPageAside,.subPageBody{box-sizing:border-box;width:100%;padding:1em}.subPageBody{display:flex;align-items:stretch}.subPageAside__inner{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;-ms-flex-flow:row wrap;flex-flow:row wrap}.subPageBody__inner{width:100%;background-color:#f0f0f0;padding:1em}.subPageAside__Image{box-sizing:border-box;width:100%;margin:0;overflow:hidden}.subPageAside__Image img{max-width:100%;vertical-align:bottom}.subPageAside__Banner{text-decoration:none;box-sizing:border-box;width:100%;padding:2em;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.subPage--degrees a,.subPage--degrees h1,.subPage--degrees h2,.subPage--degrees h3,.subPage--degrees h4,.subPage--degrees h5,.subPage--degrees h6{color:#C1133D;border-color:#C1133D}.subPage--degrees .subPageAside__Banner{background-color:#C1133D}.subPage--degrees .subPageAside__Banner h3{color:#fff}.subPage--concentrations a,.subPage--concentrations h1,.subPage--concentrations h2,.subPage--concentrations h3,.subPage--concentrations h4,.subPage--concentrations h5,.subPage--concentrations h6{color:#EF7C02;border-color:#EF7C02}.subPage--concentrations .subPageAside__Banner{background-color:#EF7C02}.subPage--concentrations .subPageAside__Banner h3{color:#fff}.subPage--campuses a,.subPage--campuses h1,.subPage--campuses h2,.subPage--campuses h3,.subPage--campuses h4,.subPage--campuses h5,.subPage--campuses h6{color:#1982BE;border-color:#1982BE}.subPage--campuses .subPageAside__Banner{background-color:#1982BE}.subPage--campuses .subPageAside__Banner h3{color:#fff}.subPage--for-students a,.subPage--for-students h1,.subPage--for-students h2,.subPage--for-students h3,.subPage--for-students h4,.subPage--for-students h5,.subPage--for-students h6{color:#76B700;border-color:#76B700}.subPage--for-students .subPageAside__Banner{background-color:#76B700}.subPage--for-students .subPageAside__Banner h3{color:#fff}.subPage--about-us a,.subPage--about-us h1,.subPage--about-us h2,.subPage--about-us h3,.subPage--about-us h4,.subPage--about-us h5,.subPage--about-us h6{color:#9A2D98;border-color:#9A2D98}.subPage--about-us .subPageAside__Banner{background-color:#9A2D98}.subPage--about-us .subPageAside__Banner h3{color:#fff}.subPage--our-work a,.subPage--our-work h1,.subPage--our-work h2,.subPage--our-work h3,.subPage--our-work h4,.subPage--our-work h5,.subPage--our-work h6{color:#f3D33D;border-color:#f3D33D}.subPage--our-work .subPageAside__Banner{background-color:#f3D33D}.subPage--our-work .subPageAside__Banner h3{color:#fff}.subPage--talk-to-us a,.subPage--talk-to-us h1,.subPage--talk-to-us h2,.subPage--talk-to-us h3,.subPage--talk-to-us h4,.subPage--talk-to-us h5,.subPage--talk-to-us h6{color:#6c686c;border-color:#6c686c}.subPage--talk-to-us .subPageAside__Banner{background-color:#6c686c}.subPage--talk-to-us .subPageAside__Banner h3{color:#fff}.subPage--how-to-apply a,.subPage--how-to-apply h1,.subPage--how-to-apply h2,.subPage--how-to-apply h3,.subPage--how-to-apply h4,.subPage--how-to-apply h5,.subPage--how-to-apply h6{color:#194472;border-color:#194472}.subPage--how-to-apply .subPageAside__Banner{background-color:#194472}.subPage--how-to-apply .subPageAside__Banner h3{color:#fff}.mainFooter{background-color:#000;color:#fff;padding:1em 0}.mainFooter__subNav,.mainFooter__superNav{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center}.mainFooter__superNav{-ms-flex-pack:justify;justify-content:space-between;margin-bottom:3em}.mainFooter__subNav{-ms-flex-pack:start;justify-content:flex-start}.mainFooter__social{padding-right:2em;margin-bottom:.5em}.mainFooter__apply{margin-top:.5em}.socialNav ul{list-style:none;padding-left:0;margin:0}.socialNav li{float:left}.socialNav__link{display:block;width:3em;height:3em;border-radius:50%;margin:.5em;position:relative}.socialNav__link#facebook{background:url(../img/footer-icons/facebook.png) center/cover no-repeat}.socialNav__link#twitter{background:url(../img/footer-icons/twitter.png) center/cover no-repeat}.socialNav__link#instagram{background:url(../img/footer-icons/instagram.png) center/cover no-repeat}.socialNav__link#youtube{background:url(../img/footer-icons/youtube.png) center/cover no-repeat}.socialNav__link::before{position:absolute;width:2.75em;height:2.75em;border-radius:50%;border:1px solid;border-color:inherit;opacity:0}.socialNav__link.active::before,.socialNav__link:hover::before{width:calc(100% + 10px);height:calc(100% + 10px);opacity:1}.socialNav__link--first{margin-left:0}.mainFooter__applyButton{display:block;font-size:1.5em;color:#000;text-decoration:none;background-color:#fff;padding:1em 1.5em;position:relative}.mainFooter__applyButton::before{position:absolute;width:100%;height:100%;border:1px solid;border-color:inherit;opacity:0}.degreeBanner__btn::before,.degreeCard::before{border:1px solid #C1133D;z-index:1;content:""}.mainFooter__applyButton.active::before,.mainFooter__applyButton:hover::before{width:calc(100% + 10px);height:calc(100% + 10px);opacity:1}.mainFooter__subNavLink{display:block;margin:.5em 1em;color:#fff;text-decoration:none;position:relative}.mainFooter__subNavLink::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:1px;transition:width .15s cubic-bezier(.6,.06,.59,1)}.mainFooter__subNavLink:hover::after{width:100%}.degreeCards{display:-ms-flexbox;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;-ms-flex-align:center;align-items:center;margin:1em 0}.degreeCard{display:block;width:100%;max-width:24em;margin:0 0 1em;overflow:hidden;background-color:#000;cursor:pointer;position:relative}.degreeCard::before,.degreeCard__label{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}.degreeCard::before{width:100%;height:100%;opacity:0;transition:width .15s cubic-bezier(.6,.06,.59,1),height .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1)}.degreeCard.active::before,.degreeCard:hover::before{width:calc(100% + -2em);height:calc(100% + -2em);opacity:1}.degreeCard__background{max-width:100%;vertical-align:bottom;transition:opacity .15s cubic-bezier(.6,.06,.59,1)}.degreeCard__label{width:80%;color:#fff;text-align:center}.degreeCard__label h1{font-size:1.25em;margin:0}.degreeCard__label h4{font-weight:lighter;margin:.5em 0 0}.degreeCard__learnMore{transform:translateY(-100%);opacity:0;transition:.15s cubic-bezier(.6,.06,.59,1);color:#C1133D}.degreeCard:hover .degreeCard__background{opacity:.5}.degreeCard:hover .degreeCard__learnMore{transform:translateY(50%);opacity:1}.degreeBanner{background:url(../img/degrees/degrees-redirect-bg.jpg) center/cover no-repeat;overflow-y:hidden}.degreeBanner__inner{width:100%;max-width:28em;margin:4em auto;box-sizing:border-box;padding:.5em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-flow:row wrap;flex-flow:row wrap}.degreeBanner__btn{box-sizing:border-box;text-align:center;display:block;padding:.5em;color:#fff;text-decoration:none;margin:.5em 0;position:relative;transition:background-color .15s cubic-bezier(.6,.06,.59,1),color .15s cubic-bezier(.6,.06,.59,1)}.degreeBanner__btn:hover{background-color:#fff;color:#C1133D}.degreeBanner__btn::before{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);opacity:0;transition:width .15s cubic-bezier(.6,.06,.59,1),height .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1)}.degreeBanner__btn.active::before,.degreeBanner__btn:hover::before{width:calc(100% + .5em);height:calc(100% + .5em);opacity:1}.degreeBanner__btn--small{width:47.5%;background-color:#C1133D}.degreeBanner__btn--large{width:100%;padding:2em;background-image:linear-gradient(173deg,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 50%)}.cameraIcon{display:inline-block;width:2em;height:2em;margin-right:.5em;vertical-align:middle;background:url(../img/degrees/camera-icon.png) center/cover no-repeat}.concentrationsContainer{display:-ms-flexbox!important;display:flex!important;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:center;justify-content:center;-ms-flex-align:stretch;align-items:stretch}.concentrationTiles{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:distribute;justify-content:space-around}.concentrationTile{width:90vw;height:50vw;display:block;margin:1em 0;text-decoration:none}.concentrationTile--2dAnimation{background:url(../img/concentrations/2dAnimation.jpg) center/cover no-repeat}.concentrationTile--3dAnimation{background:url(../img/concentrations/3dAnimation.jpg) center/cover no-repeat}.concentrationTile--businessStrategies{background:url(../img/concentrations/businessStrategies.jpg) center/cover no-repeat}.concentrationTile--digitalHumanities{background:url(../img/concentrations/digitalHumanities.jpg) center/cover no-repeat}.concentrationTile--gameDesign{background:url(../img/concentrations/gameDesign.jpg) center/cover no-repeat}.concentrationTile--webDesign{background:url(../img/concentrations/webDesign.jpg) center/cover no-repeat}.concentrationTile__inner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;background-color:transparent;transition:background-color .15s cubic-bezier(.6,.06,.59,1)}.concentrationTile__inner::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;z-index:1;transform:translate(-50%,-50%);border:1px solid #fff;opacity:0;transition:width .15s cubic-bezier(.6,.06,.59,1),height .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1)}.concentrationTile__inner.active::before,.concentrationTile__inner:hover::before{width:calc(100% + -1.5em);height:calc(100% + -1.5em);opacity:1}.concentrationTile__inner:hover{background-color:rgba(0,0,0,.5)}.concentrationTile__text{width:60%;text-align:center;color:#fff;font-weight:700;background:rgba(239,124,2,.8);padding:.5em;transition:background-color .15s cubic-bezier(.6,.06,.59,1),color .15s cubic-bezier(.6,.06,.59,1)}.concentrationTile__inner:hover .concentrationTile__text{color:#EF7C02;background-color:transparent}.concentrationInfoContainer{display:none;position:relative}.concentrationInfo{z-index:0;position:absolute;top:0;left:0;opacity:0;width:100%;transition:opacity .3s cubic-bezier(.6,.06,.59,1)}.concentrationInfo.active{opacity:1;z-index:1}.concentrationInfo h1{box-sizing:border-box;color:#fff;font-size:1.5em;text-align:center;width:100%;padding:.5em;background-color:#EF7C02}.concentrationInfo li{margin:.3em 0}.concentrationInfo h3{box-sizing:border-box;color:#EF7C02;text-align:center;width:100%;padding:.5em;border:.25em solid #EF7C02}.concentrationInfo__button{display:block;width:50%}.aboutUsTiles{max-width:60em;margin:0 auto;overflow-y:hidden}.aboutUsTile{box-sizing:border-box;margin:0 auto;max-width:30em;width:100%;padding:.5em}.aboutUsTile__inner{display:block;color:#fff;text-decoration:none;width:100%;height:100%;position:relative}.aboutUsTile__inner img{max-width:100%;margin:0 auto;display:block;vertical-align:text-bottom}.aboutUsTile--large{max-width:100%}.aboutUsTile--large .aboutUsTile__caption{position:absolute;top:20%;left:50%;transform:translate(-50%,-50%)}.aboutUsTile--large .aboutUsTile__caption img{width:2.5em;height:2.5em;float:left;margin-right:.5em;display:none}.aboutUsTile--large .aboutUsTile__captionText{float:left;width:15em;font-size:1.2em;font-weight:700;margin:0;text-align:center}.aboutUsTile--small .aboutUsTile__inner::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;z-index:10;transform:translate(-50%,-50%);border:1px solid #9A2D98;opacity:0;transition:width .15s cubic-bezier(.6,.06,.59,1),height .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1)}.aboutUsTile--small .aboutUsTile__inner.active::before,.aboutUsTile--small .aboutUsTile__inner:hover::before{width:calc(100% + -1em);height:calc(100% + -1em);opacity:1}.aboutUsTile--small .aboutUsTile__inner .aboutUsTile__caption{position:absolute;top:50%;left:50%;width:calc(100% - 2em);height:calc(100% - 2em);transform:translate(-50%,-50%);background-color:rgba(0,0,0,.75);transition:width .15s cubic-bezier(.6,.06,.59,1),height .15s cubic-bezier(.6,.06,.59,1)}.aboutUsTile--small .aboutUsTile__inner .aboutUsTile__captionText{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;margin:0}.aboutUsTile--small .aboutUsTile__inner:hover .aboutUsTile__caption{width:100%;height:100%}.contactCards{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:distribute;justify-content:space-around}.contactCard{width:100%;max-width:14em;-ms-flex-preferred-size:14em;flex-basis:14em;margin:1.5em .5em;float:left}.contactCard--red hr{border-color:#c41f40}.contactCard--orange hr{border-color:#ef7d22}.contactCard--yellow hr{border-color:#f2d43c}.contactCard--green hr{border-color:#73b843}.contactCard--blue hr{border-color:#1f83c0}.contactCard__top{width:100%;margin:0 0 .5em;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.contactCard__top img{height:130px;height:auto}.contactCard__top figcaption{padding-left:.5em}.contactCard__top h3{margin:0;font-size:.7em}.contactCard__top h3:last-child{color:#8d848d}.contactCard__bottom{width:100%;margin:0;background-color:#383638;overflow-y:hidden}.contactCard__bottom hr{margin-bottom:.75em}.contactCard__bottomInner{padding:.75em .75em .25em}.contactCard__bottomInner a,.contactCard__bottomInner h4{color:#e4e4e4;text-transform:uppercase}.contactCard__bottomInner a{text-decoration:none}.contactCard__bottomInner h4{margin:0 0 .1em;font-size:.6em}.applyCampus{width:100%;float:left;padding:2em;box-sizing:border-box}.applyCampus__inner{width:100%;margin:0}.applyCampus__inner img{max-width:100%}.applyCampus__inner figcaption{border-left:.1em solid #194472;margin:.5em 0 0 .2em;box-sizing:border-box;padding-left:1em}.applyCampus__inner figcaption h1{font-size:3em;padding:.4em 0 .2em;margin:0}.applyCampus__link{color:#7a7878;text-decoration:none;display:block;font-weight:700;letter-spacing:.1em;padding:.2em 0;position:relative;transform:translateX(0);transition:transform .15s cubic-bezier(.6,.06,.59,1),color .15s cubic-bezier(.6,.06,.59,1)}.applyCampus__link::before{content:"";position:absolute;left:0;top:.35em;width:0;height:0;border-top:.433em solid transparent;border-bottom:.433em solid transparent;border-left:.5em solid #194472;opacity:0;transform:translateX(0);transition:transform .15s cubic-bezier(.6,.06,.59,1),opacity .15s cubic-bezier(.6,.06,.59,1)}.applyCampus__link:hover{color:#000;transform:translateX(.5em)}.applyCampus__link:hover::before{opacity:1;transform:translateX(-1em)}.u-floatRight{float:right}.u-container{padding:0 1em;display:block;max-width:80em;overflow-y:hidden;margin-left:auto;margin-right:auto}.u-blackBG{background-color:#000}.u-degreesColor .u-backgroundColor,.u-degreesColor .u-h-backgroundColor:hover,.u-degreesColor .u-s-backgroundColor::after,.u-degreesColor .u-s-backgroundColor::before{background-color:#C1133D}.u-indent{margin-left:2em}.u-degreesColor .u-color{color:#C1133D}.u-degreesColor .u-borderColor{border-color:#C1133D}.u-concentrationsColor .u-backgroundColor,.u-concentrationsColor .u-h-backgroundColor:hover,.u-concentrationsColor .u-s-backgroundColor::after,.u-concentrationsColor .u-s-backgroundColor::before{background-color:#EF7C02}.u-concentrationsColor .u-color{color:#EF7C02}.u-concentrationsColor .u-borderColor{border-color:#EF7C02}.u-campusesColor .u-backgroundColor,.u-campusesColor .u-h-backgroundColor:hover,.u-campusesColor .u-s-backgroundColor::after,.u-campusesColor .u-s-backgroundColor::before{background-color:#1982BE}.u-campusesColor .u-color{color:#1982BE}.u-campusesColor .u-borderColor{border-color:#1982BE}.u-for-studentsColor .u-backgroundColor,.u-for-studentsColor .u-h-backgroundColor:hover,.u-for-studentsColor .u-s-backgroundColor::after,.u-for-studentsColor .u-s-backgroundColor::before{background-color:#76B700}.u-for-studentsColor .u-color{color:#76B700}.u-for-studentsColor .u-borderColor{border-color:#76B700}.u-about-usColor .u-backgroundColor,.u-about-usColor .u-h-backgroundColor:hover,.u-about-usColor .u-s-backgroundColor::after,.u-about-usColor .u-s-backgroundColor::before{background-color:#9A2D98}.u-about-usColor .u-color{color:#9A2D98}.u-about-usColor .u-borderColor{border-color:#9A2D98}.u-our-workColor .u-backgroundColor,.u-our-workColor .u-h-backgroundColor:hover,.u-our-workColor .u-s-backgroundColor::after,.u-our-workColor .u-s-backgroundColor::before{background-color:#f3D33D}.u-our-workColor .u-color{color:#f3D33D}.u-our-workColor .u-borderColor{border-color:#f3D33D}.u-talk-to-usColor .u-backgroundColor,.u-talk-to-usColor .u-h-backgroundColor:hover,.u-talk-to-usColor .u-s-backgroundColor::after,.u-talk-to-usColor .u-s-backgroundColor::before{background-color:#6c686c}.u-talk-to-usColor .u-color{color:#6c686c}.u-talk-to-usColor .u-borderColor{border-color:#6c686c}.u-how-to-applyColor .u-backgroundColor,.u-how-to-applyColor .u-h-backgroundColor:hover,.u-how-to-applyColor .u-s-backgroundColor::after,.u-how-to-applyColor .u-s-backgroundColor::before{background-color:#194472}.u-how-to-applyColor .u-color{color:#194472}.u-how-to-applyColor .u-borderColor{border-color:#194472}@media screen and (min-width:38em){.subPageAside__Banner,.subPageAside__Image{width:50%}.concentrationTile{width:40vw;height:25vw}.aboutUsTile{max-width:50%;float:left}.aboutUsTile--large{max-width:100%}.aboutUsTile--large .aboutUsTile__caption{width:21em}.aboutUsTile--large .aboutUsTile__caption img{display:block}.aboutUsTile--large .aboutUsTile__captionText{text-align:left}}@media screen and (min-width:48em){.pageNav .u-container{padding:0}.pageNav__toggleLabel{display:none}.pageNav__inner{height:3em!important}.pageNav__link{width:16.66667%;float:left;box-sizing:border-box;margin:.5em 0;padding:0;text-align:center}.pageNav__link::before{top:100%;left:0;width:100%;height:1em;opacity:1;border:none}.pageNav__link:hover{transform:translate(0,0)}.pageHeader__actionButtons{float:right;width:20em;margin-top:2.5em}.subPageBody{width:60%}.subPageAside{width:40%}.subPageAside__Banner,.subPageAside__Image{width:100%}.degreeCards{-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:distribute;justify-content:space-around}.degreeCard{width:33%}.applyCampus{width:50%}}@media screen and (min-width:62em){.pageNav__link{border-left:.1em solid grey}.pageNav__link:first-child{border-left:none}.degreeCard__label h1{font-size:1.75em}.concentrationTiles{width:60%}.concentrationTile{width:45%;height:15em}.concentrationTile__inner.active{background-color:rgba(0,0,0,.5)}.concentrationTile__inner.active .concentrationTile__text{color:#EF7C02;background-color:transparent}.concentrationInfoContainer{display:block;width:40%}.aboutUsTile{max-width:20em}.aboutUsTile--large{max-width:40em}.applyCampus__inner figcaption h1{font-size:4em}} \ No newline at end of file diff --git a/dist/css/base/mixins.css b/dist/css/base/mixins.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/base/mixins.min.css b/dist/css/base/mixins.min.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/base/pages/concentrations.css b/dist/css/base/pages/concentrations.css new file mode 100644 index 0000000..6a570a3 --- /dev/null +++ b/dist/css/base/pages/concentrations.css @@ -0,0 +1,46 @@ +.concentrationTiles { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.concentrationTile { + width: 90vw; + height: 45vw; + display: block; + margin: 1em 0; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + +.concentrationTile--2dAnimation { + background: url(../img/concentrations/2dAnimation.jpg) no-repeat center/cover; } + +.concentrationTile--3dAnimation { + background: url(../img/concentrations/3dAnimation.jpg) no-repeat center/cover; } + +.concentrationTile--businessStrategies { + background: url(../img/concentrations/businessStrategies.jpg) no-repeat center/cover; } + +.concentrationTile--digitalHumanities { + background: url(../img/concentrations/digitalHumanities.jpg) no-repeat center/cover; } + +.concentrationTile--gameDesign { + background: url(../img/concentrations/gameDesign.jpg) no-repeat center/cover; } + +.concentrationTile--webDesign { + background: url(../img/concentrations/webDesign.jpg) no-repeat center/cover; } + +.concentrationTile__inner { + width: 75%; } diff --git a/dist/css/base/pages/concentrations.min.css b/dist/css/base/pages/concentrations.min.css new file mode 100644 index 0000000..6606abd --- /dev/null +++ b/dist/css/base/pages/concentrations.min.css @@ -0,0 +1 @@ +.concentrationTiles{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.concentrationTile{width:90vw;height:45vw;margin:1em 0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.concentrationTile--2dAnimation{background:url(../img/concentrations/2dAnimation.jpg) center/cover no-repeat}.concentrationTile--3dAnimation{background:url(../img/concentrations/3dAnimation.jpg) center/cover no-repeat}.concentrationTile--businessStrategies{background:url(../img/concentrations/businessStrategies.jpg) center/cover no-repeat}.concentrationTile--digitalHumanities{background:url(../img/concentrations/digitalHumanities.jpg) center/cover no-repeat}.concentrationTile--gameDesign{background:url(../img/concentrations/gameDesign.jpg) center/cover no-repeat}.concentrationTile--webDesign{background:url(../img/concentrations/webDesign.jpg) center/cover no-repeat}.concentrationTile__inner{width:75%} \ No newline at end of file diff --git a/dist/css/base/pages/degrees.css b/dist/css/base/pages/degrees.css new file mode 100644 index 0000000..a8021a0 --- /dev/null +++ b/dist/css/base/pages/degrees.css @@ -0,0 +1,13 @@ +.degreeCards { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.degreeCard { + width: 10em; } diff --git a/dist/css/base/pages/degrees.min.css b/dist/css/base/pages/degrees.min.css new file mode 100644 index 0000000..620b047 --- /dev/null +++ b/dist/css/base/pages/degrees.min.css @@ -0,0 +1 @@ +.degreeCards{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.degreeCard{width:10em} \ No newline at end of file diff --git a/dist/css/base/typography.css b/dist/css/base/typography.css new file mode 100644 index 0000000..6378833 --- /dev/null +++ b/dist/css/base/typography.css @@ -0,0 +1,26 @@ +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-Book.otf); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-BookItalic.otf); + font-weight: normal; + font-style: italic; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-Bold.otf); + font-weight: bold; + font-style: normal; } + +@font-face { + font-family: 'Gotham'; + src: url(../fonts/Gotham-BoldItalic.otf); + font-weight: bold; + font-style: italic; } + +html { + font-family: 'Gotham'; } diff --git a/dist/css/base/typography.min.css b/dist/css/base/typography.min.css new file mode 100644 index 0000000..94615b9 --- /dev/null +++ b/dist/css/base/typography.min.css @@ -0,0 +1 @@ +@font-face{font-family:Gotham;src:url(../fonts/Gotham-Book.otf);font-weight:400;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/Gotham-BookItalic.otf);font-weight:400;font-style:italic}@font-face{font-family:Gotham;src:url(../fonts/Gotham-Bold.otf);font-weight:700;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/Gotham-BoldItalic.otf);font-weight:700;font-style:italic}html{font-family:Gotham} \ No newline at end of file diff --git a/dist/css/desktop.css b/dist/css/desktop.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/desktop.min.css b/dist/css/desktop.min.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/screen.css b/dist/css/screen.css new file mode 100755 index 0000000..9a196ee --- /dev/null +++ b/dist/css/screen.css @@ -0,0 +1,354 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + box-sizing: content-box; + /* 2 */ } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } diff --git a/dist/css/screen.min.css b/dist/css/screen.min.css new file mode 100755 index 0000000..f5dfd22 --- /dev/null +++ b/dist/css/screen.min.css @@ -0,0 +1 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/dist/css/screens/desktop.css b/dist/css/screens/desktop.css new file mode 100644 index 0000000..ae832ba --- /dev/null +++ b/dist/css/screens/desktop.css @@ -0,0 +1,18 @@ +.degreeCard__label h1 { + font-size: 1.75em; } + +.concentrationTiles { + width: 60%; } + +.concentrationTile { + width: 45%; + height: 15em; } + +.concentrationTile__inner.active { + background-color: rgba(0, 0, 0, 0.5); } + .concentrationTile__inner.active .concentrationTile__text { + background-color: transparent; } + +.concentrationInfoContainer { + display: block; + width: 40%; } diff --git a/dist/css/screens/desktop.min.css b/dist/css/screens/desktop.min.css new file mode 100644 index 0000000..134a357 --- /dev/null +++ b/dist/css/screens/desktop.min.css @@ -0,0 +1 @@ +.degreeCard__label h1{font-size:1.75em}.concentrationTiles{width:60%}.concentrationTile{width:45%;height:15em}.concentrationTile__inner.active{background-color:rgba(0,0,0,.5)}.concentrationTile__inner.active .concentrationTile__text{background-color:transparent}.concentrationInfoContainer{display:block;width:40%} \ No newline at end of file diff --git a/dist/css/screens/elements/subpageLayout--tabletLarge.css b/dist/css/screens/elements/subpageLayout--tabletLarge.css new file mode 100644 index 0000000..44bc8cc --- /dev/null +++ b/dist/css/screens/elements/subpageLayout--tabletLarge.css @@ -0,0 +1,5 @@ +.subPageBody { + width: 60%; } + +.subPageAside { + width: 40%; } diff --git a/dist/css/screens/elements/subpageLayout--tabletLarge.min.css b/dist/css/screens/elements/subpageLayout--tabletLarge.min.css new file mode 100644 index 0000000..925fee2 --- /dev/null +++ b/dist/css/screens/elements/subpageLayout--tabletLarge.min.css @@ -0,0 +1 @@ +.subPageBody{width:60%}.subPageAside{width:40%} \ No newline at end of file diff --git a/dist/css/screens/elements/subpageLayout-desktop.css b/dist/css/screens/elements/subpageLayout-desktop.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/screens/elements/subpageLayout-desktop.min.css b/dist/css/screens/elements/subpageLayout-desktop.min.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/screens/elements/subpageLayout-tablet.css b/dist/css/screens/elements/subpageLayout-tablet.css new file mode 100644 index 0000000..13fd4cd --- /dev/null +++ b/dist/css/screens/elements/subpageLayout-tablet.css @@ -0,0 +1,3 @@ +.subPageAside__Image, +.subPageAside__Banner { + width: 50%; } diff --git a/dist/css/screens/elements/subpageLayout-tablet.min.css b/dist/css/screens/elements/subpageLayout-tablet.min.css new file mode 100644 index 0000000..b3a063a --- /dev/null +++ b/dist/css/screens/elements/subpageLayout-tablet.min.css @@ -0,0 +1 @@ +.subPageAside__Banner,.subPageAside__Image{width:50%} \ No newline at end of file diff --git a/dist/css/screens/elements/subpageLayout-tabletLarge.css b/dist/css/screens/elements/subpageLayout-tabletLarge.css new file mode 100644 index 0000000..1f3d478 --- /dev/null +++ b/dist/css/screens/elements/subpageLayout-tabletLarge.css @@ -0,0 +1,9 @@ +.subPageBody { + width: 60%; } + +.subPageAside { + width: 40%; } + +.subPageAside__Image, +.subPageAside__Banner { + width: 100%; } diff --git a/dist/css/screens/elements/subpageLayout-tabletLarge.min.css b/dist/css/screens/elements/subpageLayout-tabletLarge.min.css new file mode 100644 index 0000000..93c59b6 --- /dev/null +++ b/dist/css/screens/elements/subpageLayout-tabletLarge.min.css @@ -0,0 +1 @@ +.subPageBody{width:60%}.subPageAside{width:40%}.subPageAside__Banner,.subPageAside__Image{width:100%} \ No newline at end of file diff --git a/dist/css/screens/pages/concentrations-desktop.css b/dist/css/screens/pages/concentrations-desktop.css new file mode 100644 index 0000000..22e4ba6 --- /dev/null +++ b/dist/css/screens/pages/concentrations-desktop.css @@ -0,0 +1,2 @@ +.concentrationTiles { + width: 60%; } diff --git a/dist/css/screens/pages/concentrations-desktop.min.css b/dist/css/screens/pages/concentrations-desktop.min.css new file mode 100644 index 0000000..eec9929 --- /dev/null +++ b/dist/css/screens/pages/concentrations-desktop.min.css @@ -0,0 +1 @@ +.concentrationTiles{width:60%} \ No newline at end of file diff --git a/dist/css/screens/pages/concentrations-tablet.css b/dist/css/screens/pages/concentrations-tablet.css new file mode 100644 index 0000000..4f79d20 --- /dev/null +++ b/dist/css/screens/pages/concentrations-tablet.css @@ -0,0 +1,3 @@ +.concentrationTile { + width: 40vw; + height: 25vw; } diff --git a/dist/css/screens/pages/concentrations-tablet.min.css b/dist/css/screens/pages/concentrations-tablet.min.css new file mode 100644 index 0000000..4f4e344 --- /dev/null +++ b/dist/css/screens/pages/concentrations-tablet.min.css @@ -0,0 +1 @@ +.concentrationTile{width:40vw;height:25vw} \ No newline at end of file diff --git a/dist/css/screens/pages/degrees-desktop.css b/dist/css/screens/pages/degrees-desktop.css new file mode 100644 index 0000000..368f5a4 --- /dev/null +++ b/dist/css/screens/pages/degrees-desktop.css @@ -0,0 +1,2 @@ +.degreeCard__label h1 { + font-size: 1.75em; } diff --git a/dist/css/screens/pages/degrees-desktop.min.css b/dist/css/screens/pages/degrees-desktop.min.css new file mode 100644 index 0000000..5248b4c --- /dev/null +++ b/dist/css/screens/pages/degrees-desktop.min.css @@ -0,0 +1 @@ +.degreeCard__label h1{font-size:1.75em} \ No newline at end of file diff --git a/dist/css/screens/pages/degrees-tabletLarge.css b/dist/css/screens/pages/degrees-tabletLarge.css new file mode 100644 index 0000000..841208c --- /dev/null +++ b/dist/css/screens/pages/degrees-tabletLarge.css @@ -0,0 +1,10 @@ +.degreeCards { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.degreeCard { + width: 33%; } diff --git a/dist/css/screens/pages/degrees-tabletLarge.min.css b/dist/css/screens/pages/degrees-tabletLarge.min.css new file mode 100644 index 0000000..17fb200 --- /dev/null +++ b/dist/css/screens/pages/degrees-tabletLarge.min.css @@ -0,0 +1 @@ +.degreeCards{-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.degreeCard{width:33%} \ No newline at end of file diff --git a/dist/css/screens/tablet.css b/dist/css/screens/tablet.css new file mode 100644 index 0000000..938cac0 --- /dev/null +++ b/dist/css/screens/tablet.css @@ -0,0 +1,7 @@ +.subPageAside__Image, +.subPageAside__Banner { + width: 50%; } + +.concentrationTile { + width: 40vw; + height: 25vw; } diff --git a/dist/css/screens/tablet.min.css b/dist/css/screens/tablet.min.css new file mode 100644 index 0000000..b2224a5 --- /dev/null +++ b/dist/css/screens/tablet.min.css @@ -0,0 +1 @@ +.subPageAside__Banner,.subPageAside__Image{width:50%}.concentrationTile{width:40vw;height:25vw} \ No newline at end of file diff --git a/dist/css/screens/tabletLarge.css b/dist/css/screens/tabletLarge.css new file mode 100644 index 0000000..6459e62 --- /dev/null +++ b/dist/css/screens/tabletLarge.css @@ -0,0 +1,20 @@ +.subPageBody { + width: 60%; } + +.subPageAside { + width: 40%; } + +.subPageAside__Image, +.subPageAside__Banner { + width: 100%; } + +.degreeCards { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.degreeCard { + width: 33%; } diff --git a/dist/css/screens/tabletLarge.min.css b/dist/css/screens/tabletLarge.min.css new file mode 100644 index 0000000..8ee2580 --- /dev/null +++ b/dist/css/screens/tabletLarge.min.css @@ -0,0 +1 @@ +.subPageBody{width:60%}.subPageAside{width:40%}.subPageAside__Banner,.subPageAside__Image{width:100%}.degreeCards{-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.degreeCard{width:33%} \ No newline at end of file diff --git a/dist/css/uconn/uconn.css b/dist/css/uconn/uconn.css new file mode 100644 index 0000000..d266567 --- /dev/null +++ b/dist/css/uconn/uconn.css @@ -0,0 +1,347 @@ +/* uconn.css v1.0.0 */ +@font-face { + font-family: 'icons'; + src: url("//uconn.edu/shared/fonts/icons/icons.eot"); + src: url("//uconn.edu/shared/fonts/icons/icons.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/icons/icons.ttf") format("truetype"), url("//uconn.edu/shared/fonts/icons/icons.woff") format("woff"), url("//uconn.edu/shared/fonts/icons/icons.svg#icons") format("svg"); + font-weight: normal; + font-style: normal; } + +[class*="icon-"] { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.icon-a-z:before { + content: "\e600"; } + +.icon-search:before { + content: "\e601"; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.svg#proxima_nova_ltsemibold") format("svg"), url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.ttf") format("truetype"); + font-weight: bold; + font-style: normal; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.svg#proxima_novabold_italic") format("svg"), url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.ttf") format("truetype"); + font-weight: bold; + font-style: italic; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold") format("svg"), url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.ttf") format("truetype"); + font-weight: 500; + font-style: normal; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular") format("svg"), url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Proxima Nova"; + src: url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot"); + src: url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic") format("svg"), url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.woff") format("woff"), url("//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.ttf") format("truetype"); + font-weight: normal; + font-style: italic; } + +.uc_font--proxima-nova, .uc_title__levelOne, .uc_title__levelTwo { + font-family: "Proxima Nova"; } + +@font-face { + font-family: "UConn"; + src: url("//uconn.edu/shared/fonts/uconn/uconn.eot"); + src: url("//uconn.edu/shared/fonts/uconn/uconn.eot?#iefix") format("embedded-opentype"), url("//uconn.edu/shared/fonts/uconn/uconn.svg#uconnregular") format("svg"), url("//uconn.edu/shared/fonts/uconn/uconn.woff") format("woff"), url("//uconn.edu/shared/fonts/uconn/uconn.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } + +.uc_font--uconn { + font-family: "UConn"; + letter-spacing: 3px; + font-size: 50px; } + +/** + * @name Color Classes + * @description Sets the specified color property to the specified color. + * @markup .uc_[COLOR NAME]-[COLOR TYPE] + * + * @state .uc_[COLOR NAME]-c = sets the color to COLOR NAME. + * @state .uc_[COLOR NAME]-bg = sets the background-color to COLOR NAME. + * @state .uc_[COLOR NAME]-bd = sets the border-color to COLOR NAME. + */ +.uc_lightBlue-c { + color: #03357a; } + +.uc_lightBlue-bg { + background-color: #03357a; } + +.uc_lightBlue-bd { + border-color: #03357a; } + +.uc_darkBlue-c { + color: #01062c; } + +.uc_darkBlue-bg { + background-color: #01062c; } + +.uc_darkBlue-bd { + border-color: #01062c; } + +.uc_buttonBlue-c { + color: #1a4798; } + +.uc_buttonBlue-bg { + background-color: #1a4798; } + +.uc_buttonBlue-bd { + border-color: #1a4798; } + +.uc_textLightBlue-c { + color: #008cba; } + +.uc_textLightBlue-bg { + background-color: #008cba; } + +.uc_textLightBlue-bd { + border-color: #008cba; } + +.uc_textDarkBlue-c { + color: #263a75; } + +.uc_textDarkBlue-bg { + background-color: #263a75; } + +.uc_textDarkBlue-bd { + border-color: #263a75; } + +.uc_textYellow-c { + color: #ffa902; } + +.uc_textYellow-bg { + background-color: #ffa902; } + +.uc_textYellow-bd { + border-color: #ffa902; } + +.uc_bannerDarkBlue-c { + color: #000e2f; } + +.uc_bannerDarkBlue-bg { + background-color: #000e2f; } + +.uc_bannerDarkBlue-bd { + border-color: #000e2f; } + +.uc_grey-c { + color: #7C878E; } + +.uc_grey-bg { + background-color: #7C878E; } + +.uc_grey-bd { + border-color: #7C878E; } + +.uc_halfBlack-c { + color: rgba(0, 0, 0, 0.5); } + +.uc_halfBlack-bg { + background-color: rgba(0, 0, 0, 0.5); } + +.uc_halfBlack-bd { + border-color: rgba(0, 0, 0, 0.5); } + +/** + * @name Gradient Classes + * @description Sets the background-image property to the specified gradient. + * @markup .uc_[COLOR A]-to-[COLOR B] + * + * @state .uc_[COLOR A]-to-[COLOR B]--reverse = Reverses the order of the colors in the gradient. + */ +.uc_lightBlue-to-darkBlue { + background-image: linear-gradient(to bottom, #03357a, #01062c); } + +.uc_lightBlue-to-darkBlue--reverse { + background-image: linear-gradient(to bottom, #03357a, #01062c); } + +.uc_banner { + background-color: #000e2f; + height: 4em; } + +.uc_banner__inner { + max-width: 80em; + margin: auto; + box-sizing: border-box; + padding: 0 0.5em; } + +.uc_banner__logo { + color: white; + font-size: 3em; + float: left; + margin: 0; + line-height: 1.333em; } + +.uc_banner__name { + display: none; + float: left; + color: #9faab2; + font-size: 1em; + width: 10em; + letter-spacing: 0.055em; + word-spacing: 0.02em; + padding-left: 0.25em; + margin: 1em 0; + font-weight: bold; + font-style: normal; + border-left: 2px solid #3f4760; + line-height: 1em; } + @media (min-width: 27em) { + .uc_banner__name { + display: block; } } + @media (min-width: 34em) { + .uc_banner__name { + line-height: 2em; + width: auto; } } + +.uc_banner__buttons { + display: none; + float: right; + height: 2.3em; + width: 5.25em; + margin: 0.8em 0; + position: relative; + z-index: 2; } + @media (min-width: 21em) { + .uc_banner__buttons { + display: block; } } + +.uc_banner__button { + display: block; + color: white; + background-color: #1a4798; + text-decoration: none; + width: 2.3em; + height: 2.3em; + text-align: center; + vertical-align: top; } + .uc_banner__button span { + font-size: 1.5em; + line-height: 1.533em; } + +.uc_banner__button--search { + float: left; } + +.uc_banner__button--az { + float: right; } + +.uc_banner__searchForm { + position: absolute; + z-index: -1; + top: 0; + left: 0; + height: 2.3em; + transform: translateX(-100%); + box-sizing: border-box; + width: 15em; + transition: width 0.25s ease, opacity 0.25s ease-out,transform 0.25s ease; + background-color: #0f2857; + border: 0.1em solid #1a4798; + opacity: 0; + transform: translateX(-90%); + pointer-events: none; } + .uc_banner__searchForm.active { + outline: none; + opacity: 1; + transform: translateX(-100%); + pointer-events: all; } + +.uc_banner__searchBar { + display: block; + float: left; + width: 12.5em; + height: 100%; + box-sizing: border-box; + background: transparent; + color: white; + border: none; + padding-left: 0.5em; + outline: none; } + +.uc_banner__dropdownButton { + width: 2.3em; + height: 100%; + float: right; + background-color: #0f2857; + position: relative; + cursor: pointer; } + .uc_banner__dropdownButton:hover, .uc_banner__dropdownButton.active { + background-color: #13336c; } + .uc_banner__dropdownButton.active .uc_banner__dropdownBody { + opacity: 1; + transform: translateY(0); + pointer-events: all; } + +.uc_banner__dropdownButtonTriangle { + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + margin: -0.2165em 0 0 -0.3em; + border-left: 0.433em solid transparent; + border-right: 0.433em solid transparent; + border-top: 0.5em solid white; } + +.uc_banner__dropdownBody { + position: absolute; + top: 100%; + right: 0; + z-index: -1; + width: 10em; + overflow-y: hidden; + background-color: white; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); + opacity: 0; + transform: translateY(0.5em); + pointer-events: none; + transition: transform 0.2s ease, opacity 0.2s ease; } + +.uc_banner__dropdownElement { + width: 10em; + line-height: 2em; + text-align: center; } + .uc_banner__dropdownElement:hover { + color: #008cba; } + +.uc_banner__dropdownElement--selected { + background-color: #03357a; + color: white; } + .uc_banner__dropdownElement--selected:hover { + color: white; } + +.uc_title__levelOne { + color: #01062c; + font-size: 1.5em; } + .uc_title__levelOne a { + color: inherit; + text-decoration: none; } + +.uc_title__levelTwo { + color: #7C878E; + font-size: 0.9em; } + .uc_title__levelTwo a { + color: inherit; + text-decoration: none; } diff --git a/dist/css/uconn/uconn.min.css b/dist/css/uconn/uconn.min.css new file mode 100644 index 0000000..f0d09bd --- /dev/null +++ b/dist/css/uconn/uconn.min.css @@ -0,0 +1 @@ +@font-face{font-family:icons;src:url(//uconn.edu/shared/fonts/icons/icons.eot);src:url(//uconn.edu/shared/fonts/icons/icons.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/icons/icons.ttf) format("truetype"),url(//uconn.edu/shared/fonts/icons/icons.woff) format("woff"),url(//uconn.edu/shared/fonts/icons/icons.svg#icons) format("svg");font-weight:400;font-style:normal}[class*=icon-]{font-family:icons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-a-z:before{content:"\e600"}.icon-search:before{content:"\e601"}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.svg#proxima_nova_ltsemibold) format("svg"),url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.svg#proxima_novabold_italic) format("svg"),url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold) format("svg"),url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular) format("svg"),url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:"Proxima Nova";src:url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot);src:url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic) format("svg"),url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.woff) format("woff"),url(//uconn.edu/shared/fonts/proximanova_italic_macroman/ProximaNova-RegIt-webfont.ttf) format("truetype");font-weight:400;font-style:italic}.uc_font--proxima-nova,.uc_title__levelOne,.uc_title__levelTwo{font-family:"Proxima Nova"}@font-face{font-family:UConn;src:url(//uconn.edu/shared/fonts/uconn/uconn.eot);src:url(//uconn.edu/shared/fonts/uconn/uconn.eot?#iefix) format("embedded-opentype"),url(//uconn.edu/shared/fonts/uconn/uconn.svg#uconnregular) format("svg"),url(//uconn.edu/shared/fonts/uconn/uconn.woff) format("woff"),url(//uconn.edu/shared/fonts/uconn/uconn.ttf) format("truetype");font-weight:400;font-style:normal}.uc_font--uconn{font-family:UConn;letter-spacing:3px;font-size:50px}.uc_lightBlue-c{color:#03357a}.uc_lightBlue-bg{background-color:#03357a}.uc_lightBlue-bd{border-color:#03357a}.uc_darkBlue-c{color:#01062c}.uc_darkBlue-bg{background-color:#01062c}.uc_darkBlue-bd{border-color:#01062c}.uc_buttonBlue-c{color:#1a4798}.uc_buttonBlue-bg{background-color:#1a4798}.uc_buttonBlue-bd{border-color:#1a4798}.uc_textLightBlue-c{color:#008cba}.uc_textLightBlue-bg{background-color:#008cba}.uc_textLightBlue-bd{border-color:#008cba}.uc_textDarkBlue-c{color:#263a75}.uc_textDarkBlue-bg{background-color:#263a75}.uc_textDarkBlue-bd{border-color:#263a75}.uc_textYellow-c{color:#ffa902}.uc_textYellow-bg{background-color:#ffa902}.uc_textYellow-bd{border-color:#ffa902}.uc_bannerDarkBlue-c{color:#000e2f}.uc_bannerDarkBlue-bg{background-color:#000e2f}.uc_bannerDarkBlue-bd{border-color:#000e2f}.uc_grey-c{color:#7C878E}.uc_grey-bg{background-color:#7C878E}.uc_grey-bd{border-color:#7C878E}.uc_halfBlack-c{color:rgba(0,0,0,.5)}.uc_halfBlack-bg{background-color:rgba(0,0,0,.5)}.uc_halfBlack-bd{border-color:rgba(0,0,0,.5)}.uc_lightBlue-to-darkBlue,.uc_lightBlue-to-darkBlue--reverse{background-image:linear-gradient(to bottom,#03357a,#01062c)}.uc_banner{background-color:#000e2f;height:4em}.uc_banner__inner{max-width:80em;margin:auto;box-sizing:border-box;padding:0 .5em}.uc_banner__logo{color:#fff;font-size:3em;float:left;margin:0;line-height:1.333em}.uc_banner__name{display:none;float:left;color:#9faab2;font-size:1em;width:10em;letter-spacing:.055em;word-spacing:.02em;padding-left:.25em;margin:1em 0;font-weight:700;font-style:normal;border-left:2px solid #3f4760;line-height:1em}@media (min-width:27em){.uc_banner__name{display:block}}@media (min-width:34em){.uc_banner__name{line-height:2em;width:auto}}.uc_banner__buttons{display:none;float:right;height:2.3em;width:5.25em;margin:.8em 0;position:relative;z-index:2}@media (min-width:21em){.uc_banner__buttons{display:block}}.uc_banner__button{display:block;color:#fff;background-color:#1a4798;text-decoration:none;width:2.3em;height:2.3em;text-align:center;vertical-align:top}.uc_banner__button span{font-size:1.5em;line-height:1.533em}.uc_banner__button--search{float:left}.uc_banner__button--az{float:right}.uc_banner__searchForm{position:absolute;z-index:-1;top:0;left:0;height:2.3em;box-sizing:border-box;width:15em;transition:width .25s ease,opacity .25s ease-out,transform .25s ease;background-color:#0f2857;border:.1em solid #1a4798;opacity:0;transform:translateX(-90%);pointer-events:none}.uc_banner__searchForm.active{outline:0;opacity:1;transform:translateX(-100%);pointer-events:all}.uc_banner__searchBar{display:block;float:left;width:12.5em;height:100%;box-sizing:border-box;background:0 0;color:#fff;border:none;padding-left:.5em;outline:0}.uc_banner__dropdownButton{width:2.3em;height:100%;float:right;background-color:#0f2857;position:relative;cursor:pointer}.uc_banner__dropdownButton.active,.uc_banner__dropdownButton:hover{background-color:#13336c}.uc_banner__dropdownButton.active .uc_banner__dropdownBody{opacity:1;transform:translateY(0);pointer-events:all}.uc_banner__dropdownButtonTriangle{position:absolute;top:50%;left:50%;width:0;height:0;margin:-.2165em 0 0 -.3em;border-left:.433em solid transparent;border-right:.433em solid transparent;border-top:.5em solid #fff}.uc_banner__dropdownBody{position:absolute;top:100%;right:0;z-index:-1;width:10em;overflow-y:hidden;background-color:#fff;box-shadow:0 0 1em rgba(0,0,0,.5);opacity:0;transform:translateY(.5em);pointer-events:none;transition:transform .2s ease,opacity .2s ease}.uc_banner__dropdownElement{width:10em;line-height:2em;text-align:center}.uc_banner__dropdownElement:hover{color:#008cba}.uc_banner__dropdownElement--selected{background-color:#03357a;color:#fff}.uc_banner__dropdownElement--selected:hover{color:#fff}.uc_title__levelOne{color:#01062c;font-size:1.5em}.uc_title__levelOne a{color:inherit;text-decoration:none}.uc_title__levelTwo{color:#7C878E;font-size:.9em}.uc_title__levelTwo a{color:inherit;text-decoration:none} \ No newline at end of file diff --git a/dist/fonts/Gotham-Bold.otf b/dist/fonts/Gotham-Bold.otf new file mode 100644 index 0000000..fc21902 Binary files /dev/null and b/dist/fonts/Gotham-Bold.otf differ diff --git a/dist/fonts/Gotham-BoldItalic.otf b/dist/fonts/Gotham-BoldItalic.otf new file mode 100644 index 0000000..c94e043 Binary files /dev/null and b/dist/fonts/Gotham-BoldItalic.otf differ diff --git a/dist/fonts/Gotham-Book.otf b/dist/fonts/Gotham-Book.otf new file mode 100644 index 0000000..d9c993f Binary files /dev/null and b/dist/fonts/Gotham-Book.otf differ diff --git a/dist/fonts/Gotham-BookItalic.otf b/dist/fonts/Gotham-BookItalic.otf new file mode 100644 index 0000000..f83daaa Binary files /dev/null and b/dist/fonts/Gotham-BookItalic.otf differ diff --git a/dist/img/about-us/department-overview.jpg b/dist/img/about-us/department-overview.jpg new file mode 100644 index 0000000..982ae0e Binary files /dev/null and b/dist/img/about-us/department-overview.jpg differ diff --git a/dist/img/about-us/our-labs.jpg b/dist/img/about-us/our-labs.jpg new file mode 100644 index 0000000..87325a3 Binary files /dev/null and b/dist/img/about-us/our-labs.jpg differ diff --git a/dist/img/about-us/our-team.jpg b/dist/img/about-us/our-team.jpg new file mode 100644 index 0000000..29ec9ee Binary files /dev/null and b/dist/img/about-us/our-team.jpg differ diff --git a/dist/img/about-us/outreach.jpg b/dist/img/about-us/outreach.jpg new file mode 100644 index 0000000..bba98a3 Binary files /dev/null and b/dist/img/about-us/outreach.jpg differ diff --git a/dist/img/about-us/play-button.png b/dist/img/about-us/play-button.png new file mode 100644 index 0000000..931de63 Binary files /dev/null and b/dist/img/about-us/play-button.png differ diff --git a/dist/img/about-us/research.jpg b/dist/img/about-us/research.jpg new file mode 100644 index 0000000..9e1bc28 Binary files /dev/null and b/dist/img/about-us/research.jpg differ diff --git a/dist/img/about-us/student-experience.jpg b/dist/img/about-us/student-experience.jpg new file mode 100644 index 0000000..57bd216 Binary files /dev/null and b/dist/img/about-us/student-experience.jpg differ diff --git a/dist/img/concentrations/2dAnimation.jpg b/dist/img/concentrations/2dAnimation.jpg new file mode 100644 index 0000000..e1de048 Binary files /dev/null and b/dist/img/concentrations/2dAnimation.jpg differ diff --git a/dist/img/concentrations/3dAnimation.jpg b/dist/img/concentrations/3dAnimation.jpg new file mode 100644 index 0000000..ca04b81 Binary files /dev/null and b/dist/img/concentrations/3dAnimation.jpg differ diff --git a/dist/img/concentrations/businessStrategies.jpg b/dist/img/concentrations/businessStrategies.jpg new file mode 100644 index 0000000..6095d06 Binary files /dev/null and b/dist/img/concentrations/businessStrategies.jpg differ diff --git a/dist/img/concentrations/digitalHumanities.jpg b/dist/img/concentrations/digitalHumanities.jpg new file mode 100644 index 0000000..78b8bf0 Binary files /dev/null and b/dist/img/concentrations/digitalHumanities.jpg differ diff --git a/dist/img/concentrations/gameDesign.jpg b/dist/img/concentrations/gameDesign.jpg new file mode 100644 index 0000000..3e3cd40 Binary files /dev/null and b/dist/img/concentrations/gameDesign.jpg differ diff --git a/dist/img/concentrations/webDesign.jpg b/dist/img/concentrations/webDesign.jpg new file mode 100644 index 0000000..2c2ecfa Binary files /dev/null and b/dist/img/concentrations/webDesign.jpg differ diff --git a/dist/img/degrees/camera-icon.png b/dist/img/degrees/camera-icon.png new file mode 100644 index 0000000..35a7f1a Binary files /dev/null and b/dist/img/degrees/camera-icon.png differ diff --git a/dist/img/degrees/degrees-redirect-bg.jpg b/dist/img/degrees/degrees-redirect-bg.jpg new file mode 100644 index 0000000..71df34f Binary files /dev/null and b/dist/img/degrees/degrees-redirect-bg.jpg differ diff --git a/dist/img/degrees/graduate-aside.jpg b/dist/img/degrees/graduate-aside.jpg new file mode 100644 index 0000000..a71730d Binary files /dev/null and b/dist/img/degrees/graduate-aside.jpg differ diff --git a/dist/img/degrees/graduate-card-background.jpg b/dist/img/degrees/graduate-card-background.jpg new file mode 100644 index 0000000..836b92c Binary files /dev/null and b/dist/img/degrees/graduate-card-background.jpg differ diff --git a/dist/img/degrees/online-card-background.jpg b/dist/img/degrees/online-card-background.jpg new file mode 100644 index 0000000..868790c Binary files /dev/null and b/dist/img/degrees/online-card-background.jpg differ diff --git a/dist/img/degrees/undergrad-aside.jpg b/dist/img/degrees/undergrad-aside.jpg new file mode 100644 index 0000000..db42b12 Binary files /dev/null and b/dist/img/degrees/undergrad-aside.jpg differ diff --git a/dist/img/degrees/undergrad-card-background.jpg b/dist/img/degrees/undergrad-card-background.jpg new file mode 100644 index 0000000..8754d0b Binary files /dev/null and b/dist/img/degrees/undergrad-card-background.jpg differ diff --git a/dist/img/footer-icons/facebook.png b/dist/img/footer-icons/facebook.png new file mode 100644 index 0000000..bd7cd04 Binary files /dev/null and b/dist/img/footer-icons/facebook.png differ diff --git a/dist/img/footer-icons/instagram.png b/dist/img/footer-icons/instagram.png new file mode 100644 index 0000000..5a6643a Binary files /dev/null and b/dist/img/footer-icons/instagram.png differ diff --git a/dist/img/footer-icons/twitter.png b/dist/img/footer-icons/twitter.png new file mode 100644 index 0000000..a49b15e Binary files /dev/null and b/dist/img/footer-icons/twitter.png differ diff --git a/dist/img/footer-icons/youtube.png b/dist/img/footer-icons/youtube.png new file mode 100644 index 0000000..402facd Binary files /dev/null and b/dist/img/footer-icons/youtube.png differ diff --git a/dist/img/how-to-apply/stamford.jpg b/dist/img/how-to-apply/stamford.jpg new file mode 100644 index 0000000..2dec8a0 Binary files /dev/null and b/dist/img/how-to-apply/stamford.jpg differ diff --git a/dist/img/how-to-apply/storrs.jpg b/dist/img/how-to-apply/storrs.jpg new file mode 100644 index 0000000..a344d9d Binary files /dev/null and b/dist/img/how-to-apply/storrs.jpg differ diff --git a/dist/img/navigation/navButtonBg.png b/dist/img/navigation/navButtonBg.png new file mode 100644 index 0000000..b5f78d8 Binary files /dev/null and b/dist/img/navigation/navButtonBg.png differ diff --git a/dist/img/talk-to-us/bill-congdon.png b/dist/img/talk-to-us/bill-congdon.png new file mode 100644 index 0000000..f00ebb7 Binary files /dev/null and b/dist/img/talk-to-us/bill-congdon.png differ diff --git a/dist/img/talk-to-us/clarissa-ceglio.png b/dist/img/talk-to-us/clarissa-ceglio.png new file mode 100644 index 0000000..ba80268 Binary files /dev/null and b/dist/img/talk-to-us/clarissa-ceglio.png differ diff --git a/dist/img/talk-to-us/dan-pejril.png b/dist/img/talk-to-us/dan-pejril.png new file mode 100644 index 0000000..0e14d98 Binary files /dev/null and b/dist/img/talk-to-us/dan-pejril.png differ diff --git a/dist/img/talk-to-us/dennis-recchia.png b/dist/img/talk-to-us/dennis-recchia.png new file mode 100644 index 0000000..b22c861 Binary files /dev/null and b/dist/img/talk-to-us/dennis-recchia.png differ diff --git a/dist/img/talk-to-us/joel-salisbury.png b/dist/img/talk-to-us/joel-salisbury.png new file mode 100644 index 0000000..da66446 Binary files /dev/null and b/dist/img/talk-to-us/joel-salisbury.png differ diff --git a/dist/img/talk-to-us/ken-bowen.png b/dist/img/talk-to-us/ken-bowen.png new file mode 100644 index 0000000..fa254dc Binary files /dev/null and b/dist/img/talk-to-us/ken-bowen.png differ diff --git a/dist/img/talk-to-us/matthew-worwood.png b/dist/img/talk-to-us/matthew-worwood.png new file mode 100644 index 0000000..3f11c57 Binary files /dev/null and b/dist/img/talk-to-us/matthew-worwood.png differ diff --git a/dist/img/talk-to-us/michael-toomey.png b/dist/img/talk-to-us/michael-toomey.png new file mode 100644 index 0000000..3d13465 Binary files /dev/null and b/dist/img/talk-to-us/michael-toomey.png differ diff --git a/dist/img/talk-to-us/michael-vertefeuille.png b/dist/img/talk-to-us/michael-vertefeuille.png new file mode 100644 index 0000000..c013a6f Binary files /dev/null and b/dist/img/talk-to-us/michael-vertefeuille.png differ diff --git a/dist/img/talk-to-us/philip-dwire.png b/dist/img/talk-to-us/philip-dwire.png new file mode 100644 index 0000000..b73fb75 Binary files /dev/null and b/dist/img/talk-to-us/philip-dwire.png differ diff --git a/dist/img/talk-to-us/samantha-olschan.png b/dist/img/talk-to-us/samantha-olschan.png new file mode 100644 index 0000000..ae03b60 Binary files /dev/null and b/dist/img/talk-to-us/samantha-olschan.png differ diff --git a/dist/img/talk-to-us/stacey-webb.png b/dist/img/talk-to-us/stacey-webb.png new file mode 100644 index 0000000..cf0dc60 Binary files /dev/null and b/dist/img/talk-to-us/stacey-webb.png differ diff --git a/dist/img/talk-to-us/steve-harper.png b/dist/img/talk-to-us/steve-harper.png new file mode 100644 index 0000000..f954b9b Binary files /dev/null and b/dist/img/talk-to-us/steve-harper.png differ diff --git a/dist/img/talk-to-us/tim-hunter.png b/dist/img/talk-to-us/tim-hunter.png new file mode 100644 index 0000000..e365cab Binary files /dev/null and b/dist/img/talk-to-us/tim-hunter.png differ diff --git a/dist/img/talk-to-us/tom-scheinfeldt.png b/dist/img/talk-to-us/tom-scheinfeldt.png new file mode 100644 index 0000000..7cc162a Binary files /dev/null and b/dist/img/talk-to-us/tom-scheinfeldt.png differ diff --git a/dist/js/main.js b/dist/js/main.js new file mode 100644 index 0000000..dd5c1be --- /dev/null +++ b/dist/js/main.js @@ -0,0 +1,216 @@ + var currentQuery; + +;(function(window, $) { + + /** + * Remove the extended border mixin from relevant elements at various screen sizes. + */ + function updateExtendedBorders() { + switch(currentQuery) { + case 'mobile': + $('.concentrationTile__inner').removeClass('active'); + break; + case 'tablet': + $('.concentrationTile__inner').removeClass('active'); + break; + case 'tabletLarge': + $('.concentrationTile__inner').removeClass('active'); + break; + case 'desktop': + $('.concentrationTile.active').find('.concentrationTile__inner').addClass('active'); + break; + } + } + + /** + * Determines which media query the window is currently within. + */ + function updateCurrentQuery() { + currentQuery = window.getComputedStyle($('.master-wrapper').get(0), '::after').getPropertyValue('content'); + currentQuery = currentQuery.replace(/"/g, ''); + + //Remove extended border from relevant elements + updateExtendedBorders(); + + } + updateCurrentQuery(); + + + $(window).on('resize', function(e) { + + //Make sure current media query is always up to date + updateCurrentQuery(); + + }); + + //Concentrations page + $('.concentrationTile').on('click', function(e) { + if(currentQuery === 'desktop') { + + //Don't go right to the link + e.preventDefault(); + + //Specify which tile is active + $('.concentrationTile').removeClass('active'); + $(this).addClass('active'); + + //Extend specification to inner tile as well + $('.concentrationTile__inner').removeClass('active'); + $(this).find('.concentrationTile__inner').addClass('active'); + + //Make the relevant info visible in the sidebar + $('.concentrationInfo').removeClass('active'); + if($(this).hasClass('concentrationTile--2dAnimation')) { + $('.concentrationInfo--2dAnimation').addClass('active'); + } else if($(this).hasClass('concentrationTile--3dAnimation')) { + $('.concentrationInfo--3dAnimation').addClass('active'); + } else if($(this).hasClass('concentrationTile--webDesign')) { + $('.concentrationInfo--webDesign').addClass('active'); + } else if($(this).hasClass('concentrationTile--gameDesign')) { + $('.concentrationInfo--gameDesign').addClass('active'); + } else if($(this).hasClass('concentrationTile--businessStrategies')) { + $('.concentrationInfo--businessStrategies').addClass('active'); + } else if($(this).hasClass('concentrationTile--digitalHumanities')) { + $('.concentrationInfo--digitalHumanities').addClass('active'); + } + + } + }); + + +})(window, jQuery); + + + +;(function() { + + /// Basic selector function + function _(sel, ctx) { return (ctx || document).querySelectorAll(sel) } + + window.addEventListener('load', function() { + + var searchButton = _('.uc_banner__button--search'), + searchForm = _('.uc_banner__searchForm'), + dropdownButton = _('.uc_banner__dropdownButton'), + dropdownBody = _('.uc_banner__dropdownBody'), + dropdownElements = _('.uc_banner__dropdownElement'); + + dropdownButton.addEventListener('click', function() { + console.log('hi'); + + dropdownButton.toggleClass('active'); + + }, false); + + searchButton.addEventListener('click', function() { + + searchForm.toggleClass('active'); + dropdownButton.removeClass('active'); + + }, false); + + + + }); + + NodeList.prototype.addEventListener = function(_event, _method, _capture) { + this.forEach(function(el) { + el.addEventListener(_event, _method, (_capture || true)); + }); + } + + + NodeList.prototype.toggleClass = function(_class) { + this.forEach(function(el) { + el.toggleClass(_class); + }); + }; + Element.prototype.toggleClass = function(_class) { + + if(this.hasClass(_class)) { + + this.removeClass(_class); + + } else { + + this.addClass(_class); + + } + }; + + NodeList.prototype.addClass = function(_class) { + this.forEach(function(el) { + el.addClass(_class); + }); + } + Element.prototype.addClass = function(_class) { + + if(this.classList) {//ClassList Support + + this.classList.add(_class); + + return this; + + } else {//Fallback to regex + + var classes = this.className.split(' '); + + if(classes.indexOf(classToAdd) === -1) { + + this.className = this.className + (classes.length > 0 ? ' ' : '') + classToAdd; + + } + + return this; + } + }; + + NodeList.prototype.removeClass = function(_class) { + this.forEach(function(el) { + el.removeClass(_class); + }); + } + Element.prototype.removeClass = function(_class) { + + if(this.classList) { + + this.classList.remove(_class); + + return this; + + } else { + + var finalClassName = ''; + + this.className.split(' ').forEach(function(cl) { + + if(cl != _class) { finalClassName += cl + ' ' } + + }); + + this.className = finalClassName.replace(/[ /t]+$/, ''); + + return this; + + } + }; + + NodeList.prototype.hasClass = function(_class) { + this.forEach(function(el) { + el.hasClass(_class); + }); + } + Element.prototype.hasClass = function(_class) { + console.log('hi'); + if(this.classList) { + + return this.classList.contains(_class); + + } else { + + return this.className.split(' ').indexOf(_class) != -1; + + } + }; + +})(); diff --git a/dist/js/main.min.js b/dist/js/main.min.js new file mode 100644 index 0000000..e0ae88d --- /dev/null +++ b/dist/js/main.min.js @@ -0,0 +1 @@ +var currentQuery;!function(t,e){function n(){switch(currentQuery){case"mobile":e(".concentrationTile__inner").removeClass("active");break;case"tablet":e(".concentrationTile__inner").removeClass("active");break;case"tabletLarge":e(".concentrationTile__inner").removeClass("active");break;case"desktop":e(".concentrationTile.active").find(".concentrationTile__inner").addClass("active")}}function s(){currentQuery=t.getComputedStyle(e(".master-wrapper").get(0),"::after").getPropertyValue("content"),currentQuery=currentQuery.replace(/"/g,""),n()}s(),e(t).on("resize",function(t){s()}),e(".concentrationTile").on("click",function(t){"desktop"===currentQuery&&(t.preventDefault(),e(".concentrationTile").removeClass("active"),e(this).addClass("active"),e(".concentrationTile__inner").removeClass("active"),e(this).find(".concentrationTile__inner").addClass("active"),e(".concentrationInfo").removeClass("active"),e(this).hasClass("concentrationTile--2dAnimation")?e(".concentrationInfo--2dAnimation").addClass("active"):e(this).hasClass("concentrationTile--3dAnimation")?e(".concentrationInfo--3dAnimation").addClass("active"):e(this).hasClass("concentrationTile--webDesign")?e(".concentrationInfo--webDesign").addClass("active"):e(this).hasClass("concentrationTile--gameDesign")?e(".concentrationInfo--gameDesign").addClass("active"):e(this).hasClass("concentrationTile--businessStrategies")?e(".concentrationInfo--businessStrategies").addClass("active"):e(this).hasClass("concentrationTile--digitalHumanities")&&e(".concentrationInfo--digitalHumanities").addClass("active"))})}(window,jQuery),function(){function t(t,e){return(e||document).querySelectorAll(t)}window.addEventListener("load",function(){var e=t(".uc_banner__button--search"),n=t(".uc_banner__searchForm"),s=t(".uc_banner__dropdownButton");t(".uc_banner__dropdownBody"),t(".uc_banner__dropdownElement");s.addEventListener("click",function(){console.log("hi"),s.toggleClass("active")},!1),e.addEventListener("click",function(){n.toggleClass("active"),s.removeClass("active")},!1)}),NodeList.prototype.addEventListener=function(t,e,n){this.forEach(function(s){s.addEventListener(t,e,n||!0)})},NodeList.prototype.toggleClass=function(t){this.forEach(function(e){e.toggleClass(t)})},Element.prototype.toggleClass=function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)},NodeList.prototype.addClass=function(t){this.forEach(function(e){e.addClass(t)})},Element.prototype.addClass=function(t){if(this.classList)return this.classList.add(t),this;var e=this.className.split(" ");return-1===e.indexOf(classToAdd)&&(this.className=this.className+(e.length>0?" ":"")+classToAdd),this},NodeList.prototype.removeClass=function(t){this.forEach(function(e){e.removeClass(t)})},Element.prototype.removeClass=function(t){if(this.classList)return this.classList.remove(t),this;var e="";return this.className.split(" ").forEach(function(n){n!=t&&(e+=n+" ")}),this.className=e.replace(/[ \/t]+$/,""),this},NodeList.prototype.hasClass=function(t){this.forEach(function(e){e.hasClass(t)})},Element.prototype.hasClass=function(t){return console.log("hi"),this.classList?this.classList.contains(t):-1!=this.className.split(" ").indexOf(t)}}(); \ No newline at end of file diff --git a/footer.php b/footer.php new file mode 100755 index 0000000..7abdade --- /dev/null +++ b/footer.php @@ -0,0 +1,13 @@ +

Timber not activated. Make sure you activate the plugin in ' . esc_url( admin_url( 'plugins.php' ) ) . '

'; + } ); + return; +} + +Timber::$dirname = array('templates', 'views'); + +class StarterSite extends TimberSite { + + function __construct() { + add_theme_support( 'post-formats' ); + add_theme_support( 'post-thumbnails' ); + add_theme_support( 'menus' ); + add_filter( 'timber_context', array( $this, 'add_to_context' ) ); + add_filter( 'get_twig', array( $this, 'add_to_twig' ) ); + add_action( 'init', array( $this, 'register_post_types' ) ); + add_action( 'init', array( $this, 'register_taxonomies' ) ); + parent::__construct(); + } + + function register_post_types() { + //this is where you can register custom post types + } + + function register_taxonomies() { + //this is where you can register custom taxonomies + } + + function add_to_context( $context ) { + $context['foo'] = 'bar'; + $context['stuff'] = 'I am a value set in your functions.php file'; + $context['notes'] = 'These values are available everytime you call Timber::get_context();'; + $context['menu'] = new TimberMenu(); + $context['site'] = $this; + return $context; + } + + function add_to_twig( $twig ) { + /* this is where you can add your own fuctions to twig */ + $twig->addExtension( new Twig_Extension_StringLoader() ); + $twig->addFilter( 'myfoo', new Twig_Filter_Function( 'myfoo' ) ); + return $twig; + } + +} + +new StarterSite(); + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..cacd39c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,77 @@ +var gulp = require('gulp'), + plumber = require('gulp-plumber'), + rename = require('gulp-rename'); +var autoprefixer = require('gulp-autoprefixer'); +var concat = require('gulp-concat'); +var uglify = require('gulp-uglify'); +var imagemin = require('gulp-imagemin'), + cache = require('gulp-cache'); +var minifycss = require('gulp-clean-css'); +var sass = require('gulp-sass'); +var browserSync = require('browser-sync'); +var connect = require('gulp-connect-php'); + +gulp.task('browser-sync', function() { + browserSync({ + server: { + baseDir: "./" + } + }); +}); + +gulp.task('bs-reload', function () { + browserSync.reload(); +}); + +gulp.task('images', function(){ + gulp.src('src/img/**/*') + .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) + .pipe(gulp.dest('dist/img/')); +}); + +gulp.task('styles', function(){ + gulp.src(['src/scss/**/*.scss']) + .pipe(plumber({ + errorHandler: function (error) { + console.log(error.message); + this.emit('end'); + }})) + .pipe(sass()) + .pipe(autoprefixer('last 2 versions')) + .pipe(gulp.dest('dist/css/')) + .pipe(rename({suffix: '.min'})) + .pipe(minifycss()) + .pipe(gulp.dest('dist/css/')) + .pipe(browserSync.reload({stream:true})) +}); + +gulp.task('scripts', function(){ + return gulp.src('src/js/**/*.js') + .pipe(plumber({ + errorHandler: function (error) { + console.log(error.message); + this.emit('end'); + }})) + .pipe(concat('main.js')) + .pipe(gulp.dest('dist/js/')) + .pipe(rename({suffix: '.min'})) + .pipe(uglify()) + .pipe(gulp.dest('dist/js/')) + .pipe(browserSync.reload({stream:true})) +}); + +gulp.task('connect-sync', function() { + connect.server({}, function (){ + browserSync({ + proxy: '127.0.0.1:8000', + keepalive:false + }); + }); +}); + +gulp.task('default', ['connect-sync'], function(){ + gulp.watch("src/scss/**/*.scss", ['styles']); + gulp.watch("src/js/*.js", ['scripts']); + gulp.watch("*.html", ['bs-reload']); + gulp.watch("**/*.php", ['bs-reload']); +}); diff --git a/header.php b/header.php new file mode 100755 index 0000000..4d809fd --- /dev/null +++ b/header.php @@ -0,0 +1,7 @@ +/wp-admin/plugins.php'; + return; +} +$context = Timber::get_context(); +$context['posts'] = Timber::get_posts(); +$context['foo'] = 'bar'; +$templates = array( 'index.twig' ); +if ( is_home() ) { + array_unshift( $templates, 'home.twig' ); +} +Timber::render( $templates, $context ); diff --git a/package.json b/package.json new file mode 100755 index 0000000..3fa5545 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "DMDStarter", + "version": "1.0.0", + "description": "A starter for our departmental projects.", + "main": "gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Joel Salisbury", + "license": "ISC", + "devDependencies": { + "browser-sync": "2.11.2", + "gulp-autoprefixer": "3.1.0", + "gulp-cache": "0.4.3", + "gulp-concat": "2.6.0", + "gulp-imagemin": "2.4.0", + "gulp-clean-css": "2.0.4", + "gulp-plumber": "1.1.0", + "gulp-rename": "1.2.2", + "gulp-sass": "2.2.0", + "gulp-uglify": "1.5.3", + "gulp-util":"3.0.7", + "gulp-connect-php": "0.0.7", + "gulp": "3.9.0" + } +} diff --git a/page.php b/page.php new file mode 100755 index 0000000..ed6c432 --- /dev/null +++ b/page.php @@ -0,0 +1,27 @@ +post_name . '.twig', 'page.twig' ), $context ); \ No newline at end of file diff --git a/screenshot.png b/screenshot.png new file mode 100755 index 0000000..f6e706e Binary files /dev/null and b/screenshot.png differ diff --git a/search.php b/search.php new file mode 100755 index 0000000..b8b1cba --- /dev/null +++ b/search.php @@ -0,0 +1,18 @@ +ID ) ) { + Timber::render( 'single-password.twig', $context ); +} else { + Timber::render( array( 'single-' . $post->ID . '.twig', 'single-' . $post->post_type . '.twig', 'single.twig' ), $context ); +} diff --git a/src/js/concentrations.js b/src/js/concentrations.js new file mode 100644 index 0000000..9ea8a7f --- /dev/null +++ b/src/js/concentrations.js @@ -0,0 +1,81 @@ + var currentQuery; + +;(function(window, $) { + + /** + * Remove the extended border mixin from relevant elements at various screen sizes. + */ + function updateExtendedBorders() { + switch(currentQuery) { + case 'mobile': + $('.concentrationTile__inner').removeClass('active'); + break; + case 'tablet': + $('.concentrationTile__inner').removeClass('active'); + break; + case 'tabletLarge': + $('.concentrationTile__inner').removeClass('active'); + break; + case 'desktop': + $('.concentrationTile.active').find('.concentrationTile__inner').addClass('active'); + break; + } + } + + /** + * Determines which media query the window is currently within. + */ + function updateCurrentQuery() { + currentQuery = window.getComputedStyle($('.master-wrapper').get(0), '::after').getPropertyValue('content'); + currentQuery = currentQuery.replace(/"/g, ''); + + //Remove extended border from relevant elements + updateExtendedBorders(); + + } + updateCurrentQuery(); + + + $(window).on('resize', function(e) { + + //Make sure current media query is always up to date + updateCurrentQuery(); + + }); + + //Concentrations page + $('.concentrationTile').on('click', function(e) { + if(currentQuery === 'desktop') { + + //Don't go right to the link + e.preventDefault(); + + //Specify which tile is active + $('.concentrationTile').removeClass('active'); + $(this).addClass('active'); + + //Extend specification to inner tile as well + $('.concentrationTile__inner').removeClass('active'); + $(this).find('.concentrationTile__inner').addClass('active'); + + //Make the relevant info visible in the sidebar + $('.concentrationInfo').removeClass('active'); + if($(this).hasClass('concentrationTile--2dAnimation')) { + $('.concentrationInfo--2dAnimation').addClass('active'); + } else if($(this).hasClass('concentrationTile--3dAnimation')) { + $('.concentrationInfo--3dAnimation').addClass('active'); + } else if($(this).hasClass('concentrationTile--webDesign')) { + $('.concentrationInfo--webDesign').addClass('active'); + } else if($(this).hasClass('concentrationTile--gameDesign')) { + $('.concentrationInfo--gameDesign').addClass('active'); + } else if($(this).hasClass('concentrationTile--businessStrategies')) { + $('.concentrationInfo--businessStrategies').addClass('active'); + } else if($(this).hasClass('concentrationTile--digitalHumanities')) { + $('.concentrationInfo--digitalHumanities').addClass('active'); + } + + } + }); + + +})(window, jQuery); diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/src/js/nav.js b/src/js/nav.js new file mode 100644 index 0000000..e69de29 diff --git a/src/js/uconn.js b/src/js/uconn.js new file mode 100644 index 0000000..3c9656b --- /dev/null +++ b/src/js/uconn.js @@ -0,0 +1,132 @@ +;(function() { + + /// Basic selector function + function _(sel, ctx) { return (ctx || document).querySelectorAll(sel) } + + window.addEventListener('load', function() { + + var searchButton = _('.uc_banner__button--search'), + searchForm = _('.uc_banner__searchForm'), + dropdownButton = _('.uc_banner__dropdownButton'), + dropdownBody = _('.uc_banner__dropdownBody'), + dropdownElements = _('.uc_banner__dropdownElement'); + + dropdownButton.addEventListener('click', function() { + console.log('hi'); + + dropdownButton.toggleClass('active'); + + }, false); + + searchButton.addEventListener('click', function() { + + searchForm.toggleClass('active'); + dropdownButton.removeClass('active'); + + }, false); + + + + }); + + NodeList.prototype.addEventListener = function(_event, _method, _capture) { + this.forEach(function(el) { + el.addEventListener(_event, _method, (_capture || true)); + }); + } + + + NodeList.prototype.toggleClass = function(_class) { + this.forEach(function(el) { + el.toggleClass(_class); + }); + }; + Element.prototype.toggleClass = function(_class) { + + if(this.hasClass(_class)) { + + this.removeClass(_class); + + } else { + + this.addClass(_class); + + } + }; + + NodeList.prototype.addClass = function(_class) { + this.forEach(function(el) { + el.addClass(_class); + }); + } + Element.prototype.addClass = function(_class) { + + if(this.classList) {//ClassList Support + + this.classList.add(_class); + + return this; + + } else {//Fallback to regex + + var classes = this.className.split(' '); + + if(classes.indexOf(classToAdd) === -1) { + + this.className = this.className + (classes.length > 0 ? ' ' : '') + classToAdd; + + } + + return this; + } + }; + + NodeList.prototype.removeClass = function(_class) { + this.forEach(function(el) { + el.removeClass(_class); + }); + } + Element.prototype.removeClass = function(_class) { + + if(this.classList) { + + this.classList.remove(_class); + + return this; + + } else { + + var finalClassName = ''; + + this.className.split(' ').forEach(function(cl) { + + if(cl != _class) { finalClassName += cl + ' ' } + + }); + + this.className = finalClassName.replace(/[ /t]+$/, ''); + + return this; + + } + }; + + NodeList.prototype.hasClass = function(_class) { + this.forEach(function(el) { + el.hasClass(_class); + }); + } + Element.prototype.hasClass = function(_class) { + console.log('hi'); + if(this.classList) { + + return this.classList.contains(_class); + + } else { + + return this.className.split(' ').indexOf(_class) != -1; + + } + }; + +})(); diff --git a/src/scss/app.scss b/src/scss/app.scss new file mode 100755 index 0000000..5391dd2 --- /dev/null +++ b/src/scss/app.scss @@ -0,0 +1,21 @@ +@import 'base/variables'; +@import 'base/mixins'; + +@import 'base/normalize'; +@import 'uconn/uconn'; +@import 'base/typography'; +@import 'base/global'; +@import 'base/utilities'; + + +@media screen and (min-width: $tabletWidth) { + @import 'screens/tablet'; +} + +@media screen and (min-width: $tabletLargeWidth) { + @import 'screens/tabletLarge'; +} + +@media screen and (min-width: $desktopWidth) { + @import 'screens/desktop'; +} diff --git a/src/scss/base/_global.scss b/src/scss/base/_global.scss new file mode 100755 index 0000000..fa8b741 --- /dev/null +++ b/src/scss/base/_global.scss @@ -0,0 +1,28 @@ +// Global CSS goes here + +.master-wrapper { + &::after { + content:"mobile"; + display:block; + visibility:hidden; + pointer-events:none; + position:absolute; + top:0; + left:0; + } + @include define-breakpoint("tablet", $tabletWidth); + @include define-breakpoint("tabletLarge", $tabletLargeWidth); + @include define-breakpoint("desktop", $desktopWidth); +} + +@import 'elements/header'; +@import 'elements/nav'; +@import 'elements/subpageLayout'; +@import 'elements/footer'; + +@import 'pages/degrees'; +@import 'pages/concentrations'; +@import 'pages/about-us'; +@import 'pages/talk-to-us'; +@import 'pages/apply-now'; + diff --git a/src/scss/base/_normalize.scss b/src/scss/base/_normalize.scss new file mode 100755 index 0000000..5e5e3c8 --- /dev/null +++ b/src/scss/base/_normalize.scss @@ -0,0 +1,424 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + box-sizing: content-box; /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/src/scss/base/_utilities.scss b/src/scss/base/_utilities.scss new file mode 100644 index 0000000..c299b63 --- /dev/null +++ b/src/scss/base/_utilities.scss @@ -0,0 +1,46 @@ +// Our Utilities + +.u-floatRight{ + float:right; +} + +.u-container { + padding:0 $page-container-padding; + display:block; + max-width:$page-max-width; + overflow-y:hidden; + margin-left:auto; + margin-right:auto; +} + +.u-blackBG { + background-color:black; +} + +.u-indent { + margin-left:2em; +} + +@each $val in $colorNames { + $name : nth($val, 1); + $color : nth($val, 2); + .u-#{$name}Color { + .u-color { + color:$color; + } + .u-backgroundColor { + background-color:$color; + } + .u-borderColor { + border-color:$color; + } + .u-s-backgroundColor::before, + .u-s-backgroundColor::after { + background-color:$color; + } + + .u-h-backgroundColor:hover { + background-color:$color; + } + } +} diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss new file mode 100755 index 0000000..75d90c7 --- /dev/null +++ b/src/scss/base/_variables.scss @@ -0,0 +1,38 @@ +// Variables go here + +//Colors +$degrees-color:#C1133D; +$concentrations-color:#EF7C02; +$campuses-color:#1982BE; +$for-students-color:#76B700; +$about-us-color:#9A2D98; +$our-work-color:#f3D33D; +$talk-to-us-color:#383638; +$how-to-apply-color:#194472; + + +//Global Page Variables +$page-max-width:80em; +$page-container-padding:1em; + +//Breakpoins +$tabletWidth:38em; +$tabletLargeWidth:48em; +$desktopWidth:62em; + +$animation-easing-function:cubic-bezier(.6,.06,.59,1); + + +//Utility Arrays +$pages: (degrees, concentrations, our-work, for-students, campuses, talk-to-us, about-us); + +$colorNames: ( + (degrees, $degrees-color), + (concentrations, $concentrations-color), + (campuses, $campuses-color), + (for-students, $for-students-color), + (about-us, $about-us-color), + (our-work, $our-work-color), + (talk-to-us, lighten($talk-to-us-color, 20%)), + (how-to-apply, $how-to-apply-color) + ); diff --git a/src/scss/base/elements/footer.scss b/src/scss/base/elements/footer.scss new file mode 100644 index 0000000..6b7fb86 --- /dev/null +++ b/src/scss/base/elements/footer.scss @@ -0,0 +1,107 @@ +.mainFooter { + background-color:black; + color:white; + padding:1em 0; +} + +.mainFooter__superNav, +.mainFooter__subNav { + display:flex; + flex-flow:row wrap; + align-items:center; +} + +.mainFooter__superNav { + justify-content:space-between; + margin-bottom:3em; +} + +.mainFooter__subNav { + justify-content:flex-start; +} + +.mainFooter__social { + padding-right:2em; + margin-bottom:0.5em; +} + +.mainFooter__apply { + margin-top:0.5em; +} + +.socialNav { + ul { + list-style:none; + padding-left:0; + margin:0; + } + li { + float:left; + + } +} + +.socialNav__link { + display:block; + width:3em; + height:3em; + border-radius:50%; + margin:0.5em; + position:relative; + + &#facebook { + background:url(../img/footer-icons/facebook.png) no-repeat center / cover; + } + &#twitter { + background:url(../img/footer-icons/twitter.png) no-repeat center / cover; + } + &#instagram { + background:url(../img/footer-icons/instagram.png) no-repeat center / cover; + } + &#youtube { + background:url(../img/footer-icons/youtube.png) no-repeat center / cover; + } + + @include extendedBorder(before, 10px, inherit, 1, 2.75em, 2.75em, true, true); + +} +.socialNav__link--first { + margin-left:0; +} + +.mainFooter__applyButton { + display:block; + font-size:1.5em; + color:black; + text-decoration:none; + background-color:white; + padding:1em 1.5em; + position:relative; + + @include extendedBorder(before, 10px, inherit, 1, 100%); +} + +.mainFooter__subNavLink { + display:block; + margin:0.5em 1em; + color:white; + text-decoration:none; + position:relative; + + &::after { + content:""; + position:absolute; + top:100%; + left:50%; + transform:translateX(-50%); + width:0%; + height:1px; + transition:width 0.15s $animation-easing-function; + } + &:hover::after { + width:100%; + } +} + + + diff --git a/src/scss/base/elements/header.scss b/src/scss/base/elements/header.scss new file mode 100644 index 0000000..db44a7c --- /dev/null +++ b/src/scss/base/elements/header.scss @@ -0,0 +1,41 @@ + +.pageHeader { + background-color:#666; +} + +.pageHeader__titles { + float:left; +} + +.uc_title__levelTwo { + color:#757c7c; +} + +.uc_title__levelOne { + color:white; +} + +.pageHeader__actionButtons { + float:left; + width:100%; + height:3em; +} +.pageHeader__actionButton { + display:block; + float:right; + width:40%; + height:2em; + max-width:8em; + margin:0.5em; + text-align:center; + line-height:2.2em; + color:#636263; + font-weight:bold; + text-decoration:none; + background-color:#3a3f4e; + transition:color 0.15s $animation-easing-function, background-color 0.15s $animation-easing-function; + &:hover { + background-color:#0f1937; + color:white; + } +} diff --git a/src/scss/base/elements/nav.scss b/src/scss/base/elements/nav.scss new file mode 100644 index 0000000..4f1b598 --- /dev/null +++ b/src/scss/base/elements/nav.scss @@ -0,0 +1,145 @@ + +.pageNav { + width:100vw; + background-color:#383838; + border-top:0.2em solid #161616 !important; + border-bottom:0.75em solid; +} + +@each $c in $colorNames { + .u-#{nth($c,1)}Color .pageNav { + border-color:nth($c,2); + } +} + +.pageNav__toggle { + display:none; +} + + +.pageNav__toggleLabel { + box-sizing:border-box; + display:block; + width:2em; + height:2em; + margin:0.5em; + padding:0; + border:0; + outline:0; + cursor:pointer; + background-color:transparent; + position:relative; + +} + +.pageNav__toggleLabelBar { + width:2em; + height:0.15em; + background-color:white; + position:absolute; +} + +.pageNav__toggleLabelBar--top { + left:50%; + top:25%; + transform:translate(-50%,-50%) rotate(0deg); + transition:transform 0.125s $animation-easing-function, top 0.125s $animation-easing-function 0.125s; +} + +.pageNav__toggle:checked ~ .pageNav__toggleLabel > .pageNav__toggleLabelBar--top{ + top:50%; + transform:translate(-50%,-50%) rotate(45deg); + transition:transform 0.125s $animation-easing-function 0.125s, top 0.125s $animation-easing-function; +} + +.pageNav__toggleLabelBar--middle { + left:50%; + top:50%; + opacity:1; + transform:translate(-50%,-50%); + transition:opacity 0.125s $animation-easing-function 0.125s; +} + +.pageNav__toggle:checked ~ .pageNav__toggleLabel > .pageNav__toggleLabelBar--middle{ + opacity:0; + transition:opacity 0.125s $animation-easing-function; +} + +.pageNav__toggleLabelBar--bottom { + left:50%; + top:75%; + transform:translate(-50%,-50%) rotate(180deg); + transition:transform 0.125s $animation-easing-function, top 0.125s $animation-easing-function 0.125s; +} + +.pageNav__toggle:checked ~ .pageNav__toggleLabel > .pageNav__toggleLabelBar--bottom{ + top:50%; + transform:translate(-50%,-50%) rotate(135deg); + transition:transform 0.125s $animation-easing-function 0.125s, top 0.125s $animation-easing-function; +} + +.pageNav__toggle:checked ~ .pageNav__inner { + height:12em; +} + +.pageNav__inner { + width:100%; + height:0; + overflow-y:hidden; + transition:height 0.25s $animation-easing-function; +} + +.pageNav__link { + display:block; + text-decoration:none; + font-size:0.8em; + line-height:2.5em; + font-weight:bold; + color:#7a7878; + padding-left:0.5em; + transform:translateX(0em); + transition:transform 0.15s $animation-easing-function, color 0.15s $animation-easing-function; + + &::before { + content:""; + position:absolute; + left:0em; + top:50%; + width: 0; + height: 0; + border-color:inherit; + border-left: 0.5em solid; + border-top: 0.433em solid transparent; + border-bottom: 0.433em solid transparent; + opacity:0; + transform:translate(0.2em, -65%); + transition:transform 0.15s $animation-easing-function, opacity 0.15s $animation-easing-function; + } + + &:hover { + color:white; + transform:translateX(0.5em); + + &::before { + opacity:1; + transform:translate(-0.2em, -65%); + } + } +} + +@each $c in $colorNames { + .pageNav__link--#{nth($c,1)} { + border-color:nth($c,2); + &::hover { + background-color:nth($c,2); + } + } + .pageNav__link--#{nth($c,1)}:hover, + .pageNav__link--#{nth($c,1)}.active { + color:nth($c,2); + } +} + + + + diff --git a/src/scss/base/elements/subpageLayout.scss b/src/scss/base/elements/subpageLayout.scss new file mode 100644 index 0000000..6d856ef --- /dev/null +++ b/src/scss/base/elements/subpageLayout.scss @@ -0,0 +1,106 @@ + +.subPage { + margin-bottom:1em; +} + +.subPageNav { + margin-top:1em; +} + +.subPageNav__link { + margin-left:1em; + position:relative; + text-decoration:none; + &::before { + content: ""; + position:absolute; + top:50%; + left:-1em; + transform:translateY(-50%); + width: 0; + height: 0; + border-right:0.5em solid; + border-color:inherit; + border-top: 0.43em solid transparent; + border-bottom: 0.43em solid transparent; + } +} + +.subPageMain { + display:flex; + align-items:stretch; + justify-content:space-around; + flex-flow:row wrap; + margin-left:-1em; + margin-right:-1em; +} + +.subPageBody, +.subPageAside { + box-sizing:border-box; + width:100%; + padding:1em; +} + +.subPageBody { + display:flex; + align-items:stretch; +} + +.subPageAside__inner { + display:flex; + align-items:stretch; + justify-content:center; + flex-flow:row wrap; +} + +.subPageBody__inner { + width:100%; + background-color:#f0f0f0; + padding:1em; +} + +.subPageAside__Image { + box-sizing:border-box; + width:100%; + margin:0; + overflow:hidden; + img { + max-width:100%; + vertical-align:bottom; + } +} + +.subPageAside__Banner { + display:block; + text-decoration:none; + box-sizing:border-box; + width:100%; + padding:2em; + text-align:center; + display:flex; + align-items:center; +} + +@each $val in $colorNames { + $name : nth($val, 1); + $color : nth($val, 2); + .subPage--#{$name} { + h1, + h2, + h3, + h4, + h5, + h6, + a { + color:$color; + border-color:$color; + } + .subPageAside__Banner { + background-color:$color; + h3 { + color:white; + } + } + } +} diff --git a/src/scss/base/mixins.scss b/src/scss/base/mixins.scss new file mode 100644 index 0000000..8584b45 --- /dev/null +++ b/src/scss/base/mixins.scss @@ -0,0 +1,109 @@ + +@mixin extendedBorder($element, $offset, $color, $z-index, $width, $height:$width, $opacity:true, $round:false) { + &::#{$element} { + content:""; + position:absolute; + top:50%; + left:50%; + width:$width; + height:$height; + z-index:$z-index; + @if $round { + border-radius:50%; + } + transform:translate(-50%, -50%); + border:1px solid; + border-color: #{$color}; + @if $opacity { + opacity:0; + transition: width 0.15s $animation-easing-function, height 0.15s $animation-easing-function, opacity 0.15s $animation-easing-function; + } @else { + transition: width 0.15s $animation-easing-function, height 0.15s $animation-easing-function; + } + } + &:hover::#{$element}, + &.active::#{$element} { + width:calc(100% + #{$offset}); + height:calc(100% + #{$offset}); + opacity:1; + } +} + + +@mixin popCorner($offset, $color, $z-index, $width, $height:$width, $flip:false, $opacity:true) { + &::before { + content:" "; + position:absolute; + top:0; + border-top:1px solid #{$color}; + @if $flip { + left:0; + border-left:1px solid #{$color}; + } @else { + right:0; + border-right:1px solid #{$color}; + } + width:$width; + height:$height; + transform:translate(0%, 0%); + @if $opacity { + opacity:0; + transition:transform 0.15s $animation-easing-function, opacity 0.15s $animation-easing-function; + } @else { + transition:transform 0.15s $animation-easing-function; + } + } + &:hover::before { + @if $flip { + transform:translate(-$offset, -$offset); + } @else { + transform:translate($offset, -$offset); + } + @if $opacity { + opacity:1; + } + } + &::after { + content:" "; + position:absolute; + bottom:0; + border-bottom:1px solid #{$color}; + @if $flip { + right:0; + border-right:1px solid #{$color}; + } @else { + left:0; + border-left:1px solid #{$color}; + } + width:$width; + height:$height; + transform:translate(0%, 0%); + @if $opacity { + opacity:0; + transition:transform 0.15s $animation-easing-function, opacity 0.15s $animation-easing-function; + } @else { + transition:transform 0.15s $animation-easing-function; + } + } + &:hover::after { + @if $flip { + transform:translate($offset, $offset); + } @else { + transform:translate(-$offset, $offset); + } + @if $opacity { + opacity:1; + } + } +} + +@mixin define-breakpoint($name, $width) { + @media only screen and (min-width: $width) { + &::after { + content: $name; + } + } + +} + + diff --git a/src/scss/base/pages/about-us.scss b/src/scss/base/pages/about-us.scss new file mode 100644 index 0000000..81a890f --- /dev/null +++ b/src/scss/base/pages/about-us.scss @@ -0,0 +1,92 @@ +.aboutUsTiles { + max-width:60em; + margin:0 auto; + overflow-y:hidden; +} + +.aboutUsTile { + box-sizing:border-box; + margin:0 auto; + max-width:30em; + width:100%; + padding:0.5em; + +} + +.aboutUsTile__inner { + display:block; + color:white; + text-decoration:none; + width:100%; + height:100%; + position:relative; + + img { + max-width:100%; + margin:0 auto; + display:block; + vertical-align:text-bottom; + } +} + +.aboutUsTile--large { + max-width:100%; + .aboutUsTile__caption { + position:absolute; + top:20%; + left:50%; + transform:translate(-50%,-50%); + + img { + width:2.5em; + height:2.5em; + float:left; + margin-right:0.5em; + display:none; + } + + } + + .aboutUsTile__captionText { + float:left; + width:15em; + font-size:1.2em; + font-weight:bold; + margin:0; + text-align:center; + } +} + +.aboutUsTile--small { + .aboutUsTile__inner { + @include extendedBorder(before, -1em, $about-us-color, 10, 100%); + .aboutUsTile__caption { + position:absolute; + top:50%; + left:50%; + width:calc(100% - 2em); + height:calc(100% - 2em); + transform:translate(-50%,-50%); + background-color:rgba(0,0,0,0.75); + transition:width 0.15s $animation-easing-function, height 0.15s $animation-easing-function; + } + + .aboutUsTile__captionText { + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); + text-align:center; + margin:0; + } + + &:hover { + .aboutUsTile__caption { + width:100%; + height:100%; + } + } + } +} + + diff --git a/src/scss/base/pages/apply-now.scss b/src/scss/base/pages/apply-now.scss new file mode 100644 index 0000000..265e13b --- /dev/null +++ b/src/scss/base/pages/apply-now.scss @@ -0,0 +1,65 @@ +.applyCampus { + width:100%; + float:left; + padding:2em; + box-sizing:border-box; +} + +.applyCampus__inner { + width:100%; + margin:0; + + img { + max-width:100%; + } + + figcaption { + border-left:0.1em solid $how-to-apply-color; + margin:0.5em 0 0 0.2em; + box-sizing:border-box; + padding-left:1em; + + h1 { + font-size:3em; + padding:0.4em 0 0.2em; + margin:0; + } + } +} + +.applyCampus__link { + color:#7a7878; + text-decoration:none; + display:block; + font-weight:bold; + letter-spacing:0.1em; + padding:0.2em 0; + position:relative; + transform:translateX(0em); + transition:transform 0.15s $animation-easing-function, color 0.15s $animation-easing-function; + + &::before { + content:""; + position:absolute; + left:0em; + top:0.35em; + width: 0; + height: 0; + border-top: 0.433em solid transparent; + border-bottom: 0.433em solid transparent; + border-left: 0.5em solid $how-to-apply-color; + opacity:0; + transform:translateX(0em); + transition:transform 0.15s $animation-easing-function, opacity 0.15s $animation-easing-function; + } + + &:hover { + color:black; + transform:translateX(0.5em); + + &::before { + opacity:1; + transform:translateX(-1em); + } + } +} diff --git a/src/scss/base/pages/concentrations.scss b/src/scss/base/pages/concentrations.scss new file mode 100644 index 0000000..a2596fb --- /dev/null +++ b/src/scss/base/pages/concentrations.scss @@ -0,0 +1,105 @@ + +.concentrationsContainer { + display:flex !important; + flex-flow:row wrap; + justify-content:center; + align-items:stretch; +} + +.concentrationTiles { + display:flex; + flex-flow:row wrap; + justify-content: space-around; +} + +.concentrationTile { + width:90vw; + height:50vw; + display:block; + margin:1em 0; + text-decoration:none; +} + +$backgrounds: ('2dAnimation', '3dAnimation', 'businessStrategies', 'digitalHumanities', 'gameDesign', 'webDesign'); +@each $val in $backgrounds { + .concentrationTile--#{$val} { + background:url(../img/concentrations/#{$val}.jpg) no-repeat center / cover; + } +} + +.concentrationTile__inner { + width:100%; + height:100%; + display:flex; + align-items:center; + justify-content:center; + position:relative; + background-color:transparent; + transition:background-color 0.15s $animation-easing-function; + @include extendedBorder(before, -1.5em, white, 1, 100%); + + &:hover { + background-color:rgba(0,0,0,0.5); + } +} + +.concentrationTile__text { + width:60%; + text-align:center; + color:white; + font-weight:bold; + background:transparentize($concentrations-color, 0.2); + padding:0.5em; + transition:background-color 0.15s $animation-easing-function, color 0.15s $animation-easing-function; +} + +.concentrationTile__inner:hover .concentrationTile__text { + color:$concentrations-color; + background-color:transparent; +} + +.concentrationInfoContainer { + display:none; + position:relative; +} + +.concentrationInfo { + z-index:0; + position:absolute; + top:0; + left:0; + opacity:0; + width:100%; + transition:opacity 0.3s $animation-easing-function; + + &.active { + opacity:1; + z-index:1; + } + + h1 { + box-sizing:border-box; + color:white; + font-size:1.5em; + text-align:center; + width:100%; + padding:0.5em; + background-color:$concentrations-color; + } + li { + margin:0.3em 0; + } + h3 { + box-sizing:border-box; + color:$concentrations-color; + text-align:center; + width:100%; + padding:0.5em; + border:0.25em solid $concentrations-color; + } +} +.concentrationInfo__button { + display:block; + width:50%; + +} diff --git a/src/scss/base/pages/degrees.scss b/src/scss/base/pages/degrees.scss new file mode 100644 index 0000000..53a1dd8 --- /dev/null +++ b/src/scss/base/pages/degrees.scss @@ -0,0 +1,145 @@ +.degreeCards { + display:flex; + flex-flow:column wrap; + align-items:center; + margin:1em 0; +} + +.degreeCard { + display:block; + width:100%; + max-width:24em; + margin:0 0 1em; + position:relative; + overflow:hidden; + background-color:black; + cursor:pointer; + + position:relative; + + @include extendedBorder(before, -2em, $degrees-color, 1, 100%); + +} + +.degreeCard__background { + max-width:100%; + vertical-align:bottom; + transition:opacity 0.15s $animation-easing-function; +} + +.degreeCard__label { + position:absolute; + top:50%; + left:50%; + width:80%; + transform:translate(-50%, -50%); + color:white; + text-align:center; + + h1 { + font-size:1.25em; + margin:0 + } + h4 { + font-weight:lighter; + margin:0.5em 0 0; + } +} + +.degreeCard__learnMore { + transform:translateY(-100%); + opacity:0; + transition:0.15s $animation-easing-function; + color:$degrees-color; +} + +.degreeCard:hover { + .degreeCard__background { + opacity:0.5; + } + .degreeCard__learnMore { + transform:translateY(50%); + opacity:1; + } +} + +.degreeBanner { + background:url(../img/degrees/degrees-redirect-bg.jpg) no-repeat center / cover; + overflow-y:hidden; +} + +.degreeBanner__inner { + width:100%; + max-width:28em; + margin:4em auto; + box-sizing:border-box; + padding:0.5em; + display:flex; + justify-content:space-between; + flex-flow:row wrap; +} + +.degreeBanner__btn { + box-sizing:border-box; + text-align:center; + display:block; + padding:0.5em; + color:white; + text-decoration:none; + margin:0.5em 0; + position:relative; + + transition: background-color 0.15s $animation-easing-function, color 0.15s $animation-easing-function; + &:hover { + background-color:white; + color:$degrees-color; + } + @include extendedBorder(before, 0.5em, $degrees-color, 1, 100%); +} +.degreeBanner__btn--small { + width:47.5%; + background-color:$degrees-color; +} +.degreeBanner__btn--large { + width:100%; + padding:2em; + background-image: linear-gradient(173deg, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 50%); +} +.cameraIcon { + display:inline-block; + width:2em; + height:2em; + margin-right:0.5em; + vertical-align:middle; + background:url(../img/degrees/camera-icon.png) no-repeat center / cover; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/scss/base/pages/talk-to-us.scss b/src/scss/base/pages/talk-to-us.scss new file mode 100644 index 0000000..9617a88 --- /dev/null +++ b/src/scss/base/pages/talk-to-us.scss @@ -0,0 +1,76 @@ +.contactCards { + display:flex; + flex-flow:row wrap; + justify-content:space-around; +} + +.contactCard { + width:100%; + max-width:14em; + flex-basis:14em; + margin:1.5em 0.5em; + float:left; +} + +.contactCard--red hr { + border-color:#c41f40; +} +.contactCard--orange hr { + border-color:#ef7d22; +} +.contactCard--yellow hr { + border-color:#f2d43c; +} +.contactCard--green hr { + border-color:#73b843; +} +.contactCard--blue hr { + border-color:#1f83c0; +} + +.contactCard__top { + width:100%; + margin:0 0 0.5em; + display:flex; + align-items:flex-end; + justify-content:flex-start; + flex-flow:row nowrap; + img { + height:130px; + height:auto; + } + figcaption { + padding-left:0.5em; + } + h3 { + margin:0; + font-size:0.7em; + &:last-child { + color:#8d848d; + } + } +} +.contactCard__bottom { + width:100%; + margin:0; + background-color:$talk-to-us-color; + overflow-y:hidden; + + hr { + margin-bottom:0.75em; + } +} +.contactCard__bottomInner { + padding:0.75em 0.75em 0.25em; + a, h4 { + color:#e4e4e4; + text-transform:uppercase; + } + a { + text-decoration:none; + } + h4 { + margin:0 0 0.1em; + font-size:0.6em; + } +} diff --git a/src/scss/base/typography.scss b/src/scss/base/typography.scss new file mode 100644 index 0000000..5c3f02f --- /dev/null +++ b/src/scss/base/typography.scss @@ -0,0 +1,28 @@ +@font-face { + font-family:'Gotham'; + src:url(../fonts/Gotham-Book.otf); + font-weight:normal; + font-style:normal; +} +@font-face { + font-family:'Gotham'; + src:url(../fonts/Gotham-BookItalic.otf); + font-weight:normal; + font-style:italic; +} +@font-face { + font-family:'Gotham'; + src:url(../fonts/Gotham-Bold.otf); + font-weight:bold; + font-style:normal; +} +@font-face { + font-family:'Gotham'; + src:url(../fonts/Gotham-BoldItalic.otf); + font-weight:bold; + font-style:italic; +} + +html { + font-family:'Gotham'; +} diff --git a/src/scss/screens/desktop.scss b/src/scss/screens/desktop.scss new file mode 100644 index 0000000..3e2526f --- /dev/null +++ b/src/scss/screens/desktop.scss @@ -0,0 +1,7 @@ +@import 'elements/nav-desktop'; + +@import 'pages/degrees-desktop'; + +@import 'pages/concentrations-desktop'; +@import 'pages/about-us-desktop'; +@import 'pages/how-to-apply-desktop'; diff --git a/src/scss/screens/elements/header-tabletLarge.scss b/src/scss/screens/elements/header-tabletLarge.scss new file mode 100644 index 0000000..370f674 --- /dev/null +++ b/src/scss/screens/elements/header-tabletLarge.scss @@ -0,0 +1,5 @@ +.pageHeader__actionButtons { + float:right; + width:20em; + margin-top:2.5em; +} diff --git a/src/scss/screens/elements/nav-desktop.scss b/src/scss/screens/elements/nav-desktop.scss new file mode 100644 index 0000000..5675dc9 --- /dev/null +++ b/src/scss/screens/elements/nav-desktop.scss @@ -0,0 +1,7 @@ +.pageNav__link { + border-left:0.1em solid grey; + + &:first-child { + border-left:none; + } +} diff --git a/src/scss/screens/elements/nav-tabletLarge.scss b/src/scss/screens/elements/nav-tabletLarge.scss new file mode 100644 index 0000000..e2dfd52 --- /dev/null +++ b/src/scss/screens/elements/nav-tabletLarge.scss @@ -0,0 +1,35 @@ +.pageNav { + .u-container { + padding:0; + } +} + +.pageNav__toggleLabel { + display:none; +} + +.pageNav__inner { + height:3em !important; +} + +.pageNav__link { + width:(100% / 6); + float:left; + box-sizing:border-box; + margin:0.5em 0; + padding:0; + text-align:center; + + &::before { + top:100%; + left:0; + width:100%; + height:1em; + opacity:1; + border:none; + } + + &:hover { + transform:translate(0,0); + } +} diff --git a/src/scss/screens/elements/subpageLayout-desktop.scss b/src/scss/screens/elements/subpageLayout-desktop.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/screens/elements/subpageLayout-tablet.scss b/src/scss/screens/elements/subpageLayout-tablet.scss new file mode 100644 index 0000000..e718cae --- /dev/null +++ b/src/scss/screens/elements/subpageLayout-tablet.scss @@ -0,0 +1,5 @@ + +.subPageAside__Image, +.subPageAside__Banner { + width:50%; +} diff --git a/src/scss/screens/elements/subpageLayout-tabletLarge.scss b/src/scss/screens/elements/subpageLayout-tabletLarge.scss new file mode 100644 index 0000000..60e46ec --- /dev/null +++ b/src/scss/screens/elements/subpageLayout-tabletLarge.scss @@ -0,0 +1,12 @@ +.subPageBody { + width:60%; +} + +.subPageAside { + width:40%; +} + +.subPageAside__Image, +.subPageAside__Banner { + width:100%; +} diff --git a/src/scss/screens/pages/about-us-desktop.scss b/src/scss/screens/pages/about-us-desktop.scss new file mode 100644 index 0000000..2a95c2f --- /dev/null +++ b/src/scss/screens/pages/about-us-desktop.scss @@ -0,0 +1,6 @@ +.aboutUsTile { + max-width:20em; +} +.aboutUsTile--large { + max-width:40em; +} diff --git a/src/scss/screens/pages/about-us-tablet.scss b/src/scss/screens/pages/about-us-tablet.scss new file mode 100644 index 0000000..b6d1c8f --- /dev/null +++ b/src/scss/screens/pages/about-us-tablet.scss @@ -0,0 +1,20 @@ +.aboutUsTile { + max-width:50%; + float:left; +} +.aboutUsTile--large { + max-width:100%; + + .aboutUsTile__caption { + width:21em; + + img { + display:block; + } + } + + .aboutUsTile__captionText { + text-align:left; + } +} + diff --git a/src/scss/screens/pages/concentrations-desktop.scss b/src/scss/screens/pages/concentrations-desktop.scss new file mode 100644 index 0000000..7d85a03 --- /dev/null +++ b/src/scss/screens/pages/concentrations-desktop.scss @@ -0,0 +1,23 @@ + +.concentrationTiles { + width:60%; +} + +.concentrationTile { + width:45%; + height:15em; +} + +.concentrationTile__inner.active { + background-color:rgba(0,0,0,0.5); + + .concentrationTile__text { + color:$concentrations-color; + background-color:transparent; + } +} + +.concentrationInfoContainer { + display:block; + width:40%; +} diff --git a/src/scss/screens/pages/concentrations-tablet.scss b/src/scss/screens/pages/concentrations-tablet.scss new file mode 100644 index 0000000..a29de83 --- /dev/null +++ b/src/scss/screens/pages/concentrations-tablet.scss @@ -0,0 +1,4 @@ +.concentrationTile { + width:40vw; + height:25vw; +} diff --git a/src/scss/screens/pages/degrees-desktop.scss b/src/scss/screens/pages/degrees-desktop.scss new file mode 100644 index 0000000..2347f00 --- /dev/null +++ b/src/scss/screens/pages/degrees-desktop.scss @@ -0,0 +1,3 @@ +.degreeCard__label h1 { + font-size:1.75em; +} diff --git a/src/scss/screens/pages/degrees-tabletLarge.scss b/src/scss/screens/pages/degrees-tabletLarge.scss new file mode 100644 index 0000000..9019aac --- /dev/null +++ b/src/scss/screens/pages/degrees-tabletLarge.scss @@ -0,0 +1,8 @@ +.degreeCards { + flex-flow:row wrap; + justify-content:space-around; +} + +.degreeCard { + width:33%; +} diff --git a/src/scss/screens/pages/how-to-apply-desktop.scss b/src/scss/screens/pages/how-to-apply-desktop.scss new file mode 100644 index 0000000..d9731f8 --- /dev/null +++ b/src/scss/screens/pages/how-to-apply-desktop.scss @@ -0,0 +1,3 @@ +.applyCampus__inner figcaption h1 { + font-size:4em; +} diff --git a/src/scss/screens/pages/how-to-apply-tabletLarge.scss b/src/scss/screens/pages/how-to-apply-tabletLarge.scss new file mode 100644 index 0000000..c7b67b0 --- /dev/null +++ b/src/scss/screens/pages/how-to-apply-tabletLarge.scss @@ -0,0 +1,3 @@ +.applyCampus { + width:50%; +} diff --git a/src/scss/screens/tablet.scss b/src/scss/screens/tablet.scss new file mode 100644 index 0000000..319b941 --- /dev/null +++ b/src/scss/screens/tablet.scss @@ -0,0 +1,6 @@ + +@import 'elements/subpageLayout-tablet'; + + +@import 'pages/concentrations-tablet'; +@import 'pages/about-us-tablet'; diff --git a/src/scss/screens/tabletLarge.scss b/src/scss/screens/tabletLarge.scss new file mode 100644 index 0000000..4923183 --- /dev/null +++ b/src/scss/screens/tabletLarge.scss @@ -0,0 +1,6 @@ +@import 'elements/nav-tabletLarge'; +@import 'elements/header-tabletLarge'; +@import 'elements/subpageLayout-tabletLarge'; + +@import 'pages/degrees-tabletLarge'; +@import 'pages/how-to-apply-tabletLarge'; diff --git a/src/scss/uconn/base/variables.scss b/src/scss/uconn/base/variables.scss new file mode 100644 index 0000000..b627365 --- /dev/null +++ b/src/scss/uconn/base/variables.scss @@ -0,0 +1,48 @@ +$prefix: uc; + +// +// USAGE: +// asign a short name to each color in the $uconn-colors array +// list the color names of two colors to create a gradient class for said colors. +// + +$uconn-colors: ( + (lightBlue, #03357a), + (darkBlue, #01062c), + (buttonBlue, rgb(26,71,152)), + (textLightBlue, #008cba), + (textDarkBlue, #263a75), + (textYellow, #ffa902), + (bannerDarkBlue, #000e2f), + (grey, #7C878E), + (halfBlack, rgba(0,0,0,0.5)) +) !default; + +// Hard Coded Variables to create referenceable values from the array +$lightBlue : nth(nth($uconn-colors,1),2); +$darkBlue : nth(nth($uconn-colors,2),2); +$buttonBlue : nth(nth($uconn-colors,3),2); +$textLightBlue : nth(nth($uconn-colors,4),2); +$textDarkBlue : nth(nth($uconn-colors,5),2); +$textYellow : nth(nth($uconn-colors,6),2); +$bannerDarkBlue : nth(nth($uconn-colors,7),2); +$grey : nth(nth($uconn-colors,8),2); +$halfBlack : nth(nth($uconn-colors,9),2); + +// +// USAGE: +// list the start and ending index of the gradient colors +// from the $uconn-colors array. +// + +$uconn-gradients: ( + (1, 2), +) !default; + + +$uconn-font: "UConn" !default; +$secondary-font: "Proxima Nova" !default; +$fallback-fonts: Verdana, Arial, Helvetica, sans-serif !default; +$font-base-url: "//uconn.edu/shared/fonts" !default; + +$banner-max-width:80em; diff --git a/src/scss/uconn/components/banner.scss b/src/scss/uconn/components/banner.scss new file mode 100644 index 0000000..5b9a963 --- /dev/null +++ b/src/scss/uconn/components/banner.scss @@ -0,0 +1,186 @@ + +.#{$prefix}_banner { + background-color:$bannerDarkBlue; + height:4em; +} + +.#{$prefix}_banner__inner { + max-width:$banner-max-width; + margin:auto; + box-sizing:border-box; + padding:0 0.5em; +} + +.#{$prefix}_banner__logo { + color:white; + font-size:3em; + float:left; + margin:0; + line-height:1.333em; +} + +.#{$prefix}_banner__name { + display:none; + float:left; + color: #9faab2; + font-size: 1em; + width:10em; + letter-spacing: 0.055em; + word-spacing: 0.02em; + padding-left:0.25em; + margin:1em 0; + font-weight: bold; + font-style: normal; + border-left: 2px solid #3f4760; + line-height:1em; + + @media(min-width:27em) { + display:block; + } + @media(min-width:34em) { + line-height:2em; + width:auto; + } +} + +.#{$prefix}_banner__buttons { + display:none; + float:right; + height:2.3em; + width:5.25em; + margin:0.8em 0; + position:relative; + z-index:2; + @media(min-width:21em) { + display:block; + } +} + +.#{$prefix}_banner__button { + display:block; + color:white; + background-color:$buttonBlue; + text-decoration:none; + width:2.3em; + height:2.3em; + text-align:center; + vertical-align:top; + + span { + font-size:1.5em; + line-height:1.533em; + } +} + +.#{$prefix}_banner__button--search { + float:left; +} + +.#{$prefix}_banner__button--az { + float:right; +} + +.#{$prefix}_banner__searchForm { + position:absolute; + z-index:-1; + top:0; + left:0; + height:2.3em; + transform:translateX(-100%); + box-sizing:border-box; + width:15em; + transition:width 0.25s ease, opacity 0.25s ease-out,transform 0.25s ease; + background-color:darken($buttonBlue, 15%); + border:0.1em solid $buttonBlue; + opacity:0; + transform:translateX(-90%); + pointer-events:none; + + &.active { + outline:none; + opacity:1; + transform:translateX(-100%); + pointer-events:all; + } +} + +.#{$prefix}_banner__searchBar { + display:block; + float:left; + width:12.5em; + height:100%; + box-sizing:border-box; + background:transparent; + color:white; + border:none; + padding-left:0.5em; + outline:none; +} + +.#{$prefix}_banner__dropdownButton { + width:2.3em; + height:100%; + float:right; + background-color:darken($buttonBlue, 15%); + position:relative; + cursor:pointer; + + &:hover, + &.active { + background-color:darken($buttonBlue, 10%); + } + + &.active { + .#{$prefix}_banner__dropdownBody { + opacity:1; + transform:translateY(0); + pointer-events:all; + } + } +} + +.#{$prefix}_banner__dropdownButtonTriangle { + position:absolute; + top:50%; + left:50%; + width: 0; + height: 0; + margin:-0.2165em 0 0 -0.3em; + border-left: 0.433em solid transparent; + border-right: 0.433em solid transparent; + border-top: 0.5em solid white; + +} + +.#{$prefix}_banner__dropdownBody { + position:absolute; + top:100%; + right:0; + z-index:-1; + width:10em; + overflow-y:hidden; + background-color:white; + box-shadow:0 0 1em rgba(0,0,0,0.5); + opacity:0; + transform:translateY(0.5em); + pointer-events:none; + transition:transform 0.2s ease, opacity 0.2s ease; +} + +.#{$prefix}_banner__dropdownElement { + width:10em; + line-height:2em; + text-align:center; + &:hover { + color:$textLightBlue; + } +} + +.#{$prefix}_banner__dropdownElement--selected { + background-color:$lightBlue; + color:white; + + &:hover { + color:white; + } +} diff --git a/src/scss/uconn/components/color-utils.scss b/src/scss/uconn/components/color-utils.scss new file mode 100644 index 0000000..4303f3e --- /dev/null +++ b/src/scss/uconn/components/color-utils.scss @@ -0,0 +1,40 @@ + +/** + * @name Color Classes + * @description Sets the specified color property to the specified color. + * @markup .uc_[COLOR NAME]-[COLOR TYPE] + * + * @state .uc_[COLOR NAME]-c = sets the color to COLOR NAME. + * @state .uc_[COLOR NAME]-bg = sets the background-color to COLOR NAME. + * @state .uc_[COLOR NAME]-bd = sets the border-color to COLOR NAME. + */ + +$color-types: ((c,color), (bg,background-color), (bd,border-color)); + +@each $c in $uconn-colors { + @each $ct in $color-types { + .#{$prefix}_#{nth($c,1)}-#{nth($ct,1)} { + #{nth($ct,2)}:nth($c,2); + } + } +} + +/** + * @name Gradient Classes + * @description Sets the background-image property to the specified gradient. + * @markup .uc_[COLOR A]-to-[COLOR B] + * + * @state .uc_[COLOR A]-to-[COLOR B]--reverse = Reverses the order of the colors in the gradient. + */ + +@each $g in $uconn-gradients { + $a: nth(nth($uconn-colors,nth($g,1)),2); + $b: nth(nth($uconn-colors,nth($g,2)),2); + .#{$prefix}_#{nth(nth($uconn-colors,nth($g,1)),1)}-to-#{nth(nth($uconn-colors,nth($g,2)),1)} { + background-image:linear-gradient(to bottom, #{nth(nth($uconn-colors,nth($g,1)),2)}, #{nth(nth($uconn-colors,nth($g,2)),2)}); + } + .#{$prefix}_#{nth(nth($uconn-colors,nth($g,1)),1)}-to-#{nth(nth($uconn-colors,nth($g,2)),1)}--reverse { + background-image:linear-gradient(to bottom, #{nth(nth($uconn-colors,nth($g,1)),2)}, #{nth(nth($uconn-colors,nth($g,2)),2)}); + } +} + diff --git a/src/scss/uconn/components/titles.scss b/src/scss/uconn/components/titles.scss new file mode 100644 index 0000000..e83f6c8 --- /dev/null +++ b/src/scss/uconn/components/titles.scss @@ -0,0 +1,22 @@ + +.#{$prefix}_title__levelOne { + @extend .#{$prefix}_font--proxima-nova; + color:$darkBlue; + font-size:1.5em; + + a { + color:inherit; + text-decoration:none; + } +} + +.#{$prefix}_title__levelTwo { + @extend .#{$prefix}_font--proxima-nova; + color:$grey; + font-size:0.9em; + + a { + color:inherit; + text-decoration:none; + } +} diff --git a/src/scss/uconn/fonts/_icons.scss b/src/scss/uconn/fonts/_icons.scss new file mode 100755 index 0000000..8021305 --- /dev/null +++ b/src/scss/uconn/fonts/_icons.scss @@ -0,0 +1,30 @@ +@font-face { + font-family: 'icons'; + src:url($font-base-url+'/icons/icons.eot'); + src:url($font-base-url+'/icons/icons.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/icons/icons.ttf') format('truetype'), + url($font-base-url+'/icons/icons.woff') format('woff'), + url($font-base-url+'/icons/icons.svg#icons') format('svg'); + font-weight: normal; + font-style: normal; +} +[class*="icon-"] { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-a-z:before { + content: "\e600"; +} +.icon-search:before { + content: "\e601"; +} diff --git a/src/scss/uconn/fonts/_proxima-nova.scss b/src/scss/uconn/fonts/_proxima-nova.scss new file mode 100755 index 0000000..bf18bbf --- /dev/null +++ b/src/scss/uconn/fonts/_proxima-nova.scss @@ -0,0 +1,56 @@ +@font-face { + font-family: $secondary-font; + src: url($font-base-url+'/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot'); + src: url($font-base-url+'/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/proximanova_bold_macroman/ProximaNova-Bold-webfont.svg#proxima_nova_ltsemibold') format('svg'), + url($font-base-url+'/proximanova_bold_macroman/ProximaNova-Bold-webfont.woff') format('woff'), + url($font-base-url+'/proximanova_bold_macroman/ProximaNova-Bold-webfont.ttf') format('truetype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: $secondary-font; + src: url($font-base-url+'/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot'); + src: url($font-base-url+'/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.svg#proxima_novabold_italic') format('svg'), + url($font-base-url+'/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.woff') format('woff'), + url($font-base-url+'/proximanova_bolditalic_macroman/ProximaNova-BoldIt-webfont.ttf') format('truetype'); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: $secondary-font; + src: url($font-base-url+'/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot'); + src: url($font-base-url+'/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg'), + url($font-base-url+'/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.woff') format('woff'), + url($font-base-url+'/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: $secondary-font; + src: url($font-base-url+'/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot'); + src: url($font-base-url+'/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/proximanova_regular_macroman/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular') format('svg'), + url($font-base-url+'/proximanova_regular_macroman/ProximaNova-Reg-webfont.woff') format('woff'), + url($font-base-url+'/proximanova_regular_macroman/ProximaNova-Reg-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: $secondary-font; + src: url($font-base-url+'/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot'); + src: url($font-base-url+'/proximanova_italic_macroman/ProximaNova-RegIt-webfont.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/proximanova_italic_macroman/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic') format('svg'), + url($font-base-url+'/proximanova_italic_macroman/ProximaNova-RegIt-webfont.woff') format('woff'), + url($font-base-url+'/proximanova_italic_macroman/ProximaNova-RegIt-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: italic; + +} + +.#{$prefix}_font--proxima-nova { + font-family:$secondary-font; +} diff --git a/src/scss/uconn/fonts/_uconn.scss b/src/scss/uconn/fonts/_uconn.scss new file mode 100755 index 0000000..0340855 --- /dev/null +++ b/src/scss/uconn/fonts/_uconn.scss @@ -0,0 +1,16 @@ +@font-face { + font-family: $uconn-font; + src: url($font-base-url+'/uconn/uconn.eot'); + src: url($font-base-url+'/uconn/uconn.eot?#iefix') format('embedded-opentype'), + url($font-base-url+'/uconn/uconn.svg#uconnregular') format('svg'), + url($font-base-url+'/uconn/uconn.woff') format('woff'), + url($font-base-url+'/uconn/uconn.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +.#{$prefix}_font--uconn { + font-family: $uconn-font; + letter-spacing:3px; + font-size:50px; +} diff --git a/src/scss/uconn/uconn.scss b/src/scss/uconn/uconn.scss new file mode 100644 index 0000000..ebe5bcf --- /dev/null +++ b/src/scss/uconn/uconn.scss @@ -0,0 +1,11 @@ +/* uconn.css v1.0.0 */ + +@import 'base/variables'; + +@import 'fonts/_icons'; +@import 'fonts/_proxima-nova'; +@import 'fonts/_uconn'; + +@import 'components/color-utils'; +@import 'components/banner'; +@import 'components/titles'; diff --git a/style.css b/style.css new file mode 100755 index 0000000..05ec795 --- /dev/null +++ b/style.css @@ -0,0 +1,5 @@ +/* + * Theme Name: DMD Website Redesign based on DMD Starter Theme + * Description: Theme for Dat Dem Dere DMD + * Author: UConn Digital Media and Design: Tim Morris and Joel Salisbury + */ diff --git a/templates/404.twig b/templates/404.twig new file mode 100755 index 0000000..81d700a --- /dev/null +++ b/templates/404.twig @@ -0,0 +1,5 @@ +{% extends "base.twig" %} + +{% block content %} + Sorry, we couldn't find what you're looking for. +{% endblock %} diff --git a/templates/author.twig b/templates/author.twig new file mode 100755 index 0000000..636cbd4 --- /dev/null +++ b/templates/author.twig @@ -0,0 +1,7 @@ +{% extends "base.twig" %} + +{% block content %} + {% for post in posts %} + {% include ["tease-"~post.post_type~".twig", "tease.twig"] %} + {% endfor %} +{% endblock %} diff --git a/templates/base.twig b/templates/base.twig new file mode 100755 index 0000000..9ae35ab --- /dev/null +++ b/templates/base.twig @@ -0,0 +1,64 @@ +{% block html_head_container %} + +{% include 'html-header.twig' %} + {% block head %} + {% endblock %} + +{% endblock %} + + +
+ {% block header %} +
+

+ {{site.name}} +

+ +
+ {% endblock %} +
+ +
+ {% if title %}

{{title}}

{% endif %} +
+ {% block content %} + Sorry, no content + {% endblock %} +
+ {% if sidebar %} + + {% endif %} +
+ + {% block footer %} +
+
+ {% include 'footer.twig' %} +
+
+ {{ function('wp_footer') }} + {% endblock %} + + + + + diff --git a/templates/comment.twig b/templates/comment.twig new file mode 100755 index 0000000..72fadd0 --- /dev/null +++ b/templates/comment.twig @@ -0,0 +1,4 @@ +
+
{{comment.author.name}} says
+
{{comment.comment_content|wpautop}}
+
diff --git a/templates/footer.twig b/templates/footer.twig new file mode 100755 index 0000000..4f2bb14 --- /dev/null +++ b/templates/footer.twig @@ -0,0 +1 @@ +Copyright {{"now"|date('Y')}} diff --git a/templates/html-header.twig b/templates/html-header.twig new file mode 100755 index 0000000..0818078 --- /dev/null +++ b/templates/html-header.twig @@ -0,0 +1,23 @@ + + + + + + + + + {% if wp_title %} + {{ wp_title }} - {{ site.name }} + {% else %} + {{ site.name }} + {% endif %} + + + + + + + + + + {{function('wp_head')}} diff --git a/templates/index.twig b/templates/index.twig new file mode 100755 index 0000000..7a90dfd --- /dev/null +++ b/templates/index.twig @@ -0,0 +1,9 @@ +{% extends "base.twig" %} + +{% block content %} +

{{foo}}

+

{{qux}}

+ {% for post in posts %} + {% include ['tease-'~post.post_type~'.twig', 'tease.twig'] %} + {% endfor %} +{% endblock %} diff --git a/templates/page-plugin.twig b/templates/page-plugin.twig new file mode 100755 index 0000000..712785d --- /dev/null +++ b/templates/page-plugin.twig @@ -0,0 +1,7 @@ +{% extends "base.twig" %} + +{% block content %} +
+ {{content}} +
+{% endblock %} \ No newline at end of file diff --git a/templates/page.twig b/templates/page.twig new file mode 100755 index 0000000..89e2bab --- /dev/null +++ b/templates/page.twig @@ -0,0 +1,10 @@ +{% extends "base.twig" %} + +{% block content %} +
+

{{post.title}}

+
+ {{post.content}} +
+
+{% endblock %} diff --git a/templates/sidebar.twig b/templates/sidebar.twig new file mode 100755 index 0000000..ae3e17b --- /dev/null +++ b/templates/sidebar.twig @@ -0,0 +1 @@ +Sidebar in Timber. Add HTML to your hearts content. \ No newline at end of file diff --git a/templates/single-password.twig b/templates/single-password.twig new file mode 100755 index 0000000..a88b456 --- /dev/null +++ b/templates/single-password.twig @@ -0,0 +1,9 @@ +{% extends "base.twig" %} + +{% block content %} +
+ + + +
+{% endblock %} diff --git a/templates/single.twig b/templates/single.twig new file mode 100755 index 0000000..07d212b --- /dev/null +++ b/templates/single.twig @@ -0,0 +1,23 @@ +{% extends "base.twig" %} + +{% block content %} +
+

{{post.title}}

+

+ By + {{ post.author.name }} • {{ post.post_date|date}} +

+
+ {{post.content}} +
+
+

Comments

+ {{ comment_form }} +
+ {% for cmt in post.get_comments() %} + {% include "comment.twig" with {comment:cmt} %} + {% endfor %} +
+
+
+{% endblock %} diff --git a/templates/tease-post.twig b/templates/tease-post.twig new file mode 100755 index 0000000..a0168e1 --- /dev/null +++ b/templates/tease-post.twig @@ -0,0 +1,9 @@ +{% extends "tease.twig" %} + +{% block content %} +

{{post.title}}

+

{{post.get_preview(25)}}

+ {% if post.thumbnail.src %} + + {% endif %} +{% endblock %} diff --git a/templates/tease.twig b/templates/tease.twig new file mode 100755 index 0000000..48048fb --- /dev/null +++ b/templates/tease.twig @@ -0,0 +1,9 @@ +
+ {% block content %} +

{{post.title}}

+

{{post.get_preview}}

+ {% if post.get_thumbnail %} + + {% endif %} + {% endblock %} +
diff --git a/tests/bootstrap.php b/tests/bootstrap.php new file mode 100755 index 0000000..22b3dd8 --- /dev/null +++ b/tests/bootstrap.php @@ -0,0 +1,27 @@ +assertEquals('StarterSite', get_class($context['site'])); + $this->assertTrue(current_theme_supports('post-thumbnails')); + $this->assertEquals('bar', $context['foo']); + } + + function testLoading() { + $str = Timber::compile('tease.twig'); + $this->assertStringStartsWith('
', $str); + $this->assertStringEndsWith('
', $str); + } + + static function _setupStarterTheme(){ + $dest = WP_CONTENT_DIR.'/themes/timber-starter-theme/'; + $src = __DIR__.'/../../timber-starter-theme/'; + if (is_dir($src)) { + self::_copyDirectory($src, $dest); + switch_theme('timber-starter-theme'); + } else { + echo 'no its not'; + } + } + + static function _copyDirectory($src, $dst){ + $dir = opendir($src); + @mkdir($dst); + while(false !== ( $file = readdir($dir)) ) { + if (( $file != '.' ) && ( $file != '..' )) { + if ( is_dir($src . '/' . $file) ) { + self::_copyDirectory($src . '/' . $file,$dst . '/' . $file); + } + else { + copy($src . '/' . $file,$dst . '/' . $file); + } + } + } + closedir($dir); + } + + }