diff --git a/bower.json b/bower.json index fe2c560c..23eb67fc 100644 --- a/bower.json +++ b/bower.json @@ -1,10 +1,11 @@ { "name": "responsive-foundation", - "version": "0.1.0.2", + "version": "0.1.0.3", "homepage": "https://github.com/bu-ist/responsive-foundation", "authors": [ "Mike Burns ", - "Ashley Kolodziej " + "Ashley Kolodziej ", + "RJ Foley IV " ], "description": "A front-end framework for developing responsive sites at Boston University.", "main": [ diff --git a/css-dev/burf-theme.scss b/css-dev/burf-theme.scss index 2b54d34d..018c0735 100644 --- a/css-dev/burf-theme.scss +++ b/css-dev/burf-theme.scss @@ -2,3 +2,7 @@ /* ! layout ---------------------- */ @import 'burf-theme/layout'; + +/* ! plugins +---------------------- */ +@import 'burf-theme/plugins'; diff --git a/css-dev/burf-theme/_plugins.scss b/css-dev/burf-theme/_plugins.scss new file mode 100644 index 00000000..6a3699ad --- /dev/null +++ b/css-dev/burf-theme/_plugins.scss @@ -0,0 +1,84 @@ +// 1. Course Feeds +// 2. Hub Indicator + +/* Course Feeds +----------------------------------------------------------------- */ + +$border-coursefeed: $table-border !default; + +.cf-course { + clear: right; +} + +.cf-course table { + width: 100%; +} + +/* Hub Indicator +----------------------------------------------------------------- */ + +.cf-hub-ind { + display: block; + float: unset; + margin: 0 0 20px 20px; + max-width: 305px; + width: 100%; + + .cf-course & { + // This breakpoint is explicit and shouldn’t be altered. + @include breakpoint( xs ) { + float: right; + } + } +} + +.cf-hub-head { + text-decoration: none; +} + +.bu-hub-iconstyles { + display: inline-block; + height: 25px; + margin: 5px 0; + overflow: hidden; + + &::before { + color: $gray_mid; + display: block; + font-size: 65px; + height: 25px; + line-height: 8px; + overflow: hidden; + width: 90px; + + a:hover & { + color: $color-hub; + } + } + +} + +.bu-hub-iconstyles.icon-buhub::before { + margin-right: 0; + width: 70px; +} + +.bu-hub-iconstyles.icon-questionmark::before { + font-size: 16px; + line-height: 17px; +} + +.cf-hub-offerings { + color: $color-hub; + // ! Regardless where this lives, always maintain consistent use of Benton. + font-family: "Benton-Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; + font-size: 12px; + font-weight: 300; + list-style-type: none; + margin: -5px 0 10px; + padding: 0; + + li { + margin-bottom: 7px; + } +} \ No newline at end of file diff --git a/css-dev/burf/_fonts.scss b/css-dev/burf/_fonts.scss index e2e7aa7c..3461e3a4 100644 --- a/css-dev/burf/_fonts.scss +++ b/css-dev/burf/_fonts.scss @@ -1,5 +1,5 @@ /* START: benton ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -11,7 +11,7 @@ 900 - Black (Heavy) */ -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular/019c3a13-b3d7-4c5a-be27-07a8334a43e6-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular/019c3a13-b3d7-4c5a-be27-07a8334a43e6-2.eot?") format("embedded-opentype"), @@ -21,7 +21,7 @@ font-weight: 400; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular-Italic/3295fa07-2a3f-4cd1-ba86-e06161453a51-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Regular-Italic/3295fa07-2a3f-4cd1-ba86-e06161453a51-2.eot?") format("embedded-opentype"), @@ -31,7 +31,7 @@ font-weight: 400; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Medium/8e221891-e89b-4eae-95ca-6346d9a41d20-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Medium/8e221891-e89b-4eae-95ca-6346d9a41d20-2.eot?") format("embedded-opentype"), @@ -41,7 +41,7 @@ font-weight: 500; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Medium-Italic/289d6a90-eab9-4614-9e7d-c0df14839178-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Medium-Italic/289d6a90-eab9-4614-9e7d-c0df14839178-2.eot?") format("embedded-opentype"), @@ -51,7 +51,7 @@ font-weight: 500; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Bold/d4a4a960-2cf2-430e-8b13-cbf6f261ddb9-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Bold/d4a4a960-2cf2-430e-8b13-cbf6f261ddb9-2.eot?") format("embedded-opentype"), @@ -61,7 +61,7 @@ font-weight: 700; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Bold-Italic/f037bfb1-69d7-4441-8d43-3b8c2c6e77d3-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Bold-Italic/f037bfb1-69d7-4441-8d43-3b8c2c6e77d3-2.eot?") format("embedded-opentype"), @@ -71,7 +71,7 @@ font-weight: 700; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Black/bc06c909-a731-43ae-a772-ea42520c81b9-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Black/bc06c909-a731-43ae-a772-ea42520c81b9-2.eot?") format("embedded-opentype"), @@ -81,7 +81,7 @@ font-weight: 900; } -@font-face { +@font-face { font-family: "Benton"; src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Black-Italic/9afa6c31-8572-45ee-8575-c3c541f31e3f-2.eot"); src: url("https://www.bu.edu/cdn/fonts/Benton-Sans-Black-Italic/9afa6c31-8572-45ee-8575-c3c541f31e3f-2.eot?") format("embedded-opentype"), @@ -93,7 +93,7 @@ /* START: benton compressed ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -147,7 +147,7 @@ /* START: capita ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -281,7 +281,7 @@ /* START: pressura ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -355,7 +355,7 @@ /* START: pressura mono ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -429,7 +429,7 @@ /* START: stag ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -583,7 +583,7 @@ /* START: unicod ------------------------------------------------------------------ +----------------------------------------------------------------- 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light @@ -675,3 +675,18 @@ font-weight: 700; } +/* START: BU Default Icons +----------------------------------------------------------------- +*/ + +@font-face { + font-family: "BU-Default-Icons"; + src: url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot"); + src: url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot?#iefix") format("embedded-opentype"), + url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.woff") format("woff"), + url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.ttf") format("truetype"), + url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.svg#bu-default-icons") format("svg"); + font-style: normal; + font-weight: 400; + // unicode-range:U+??????; /* Include all Unicode possiblities */ +} \ No newline at end of file diff --git a/css-dev/burf/_typography.scss b/css-dev/burf/_typography.scss index 66c51e15..7014ede2 100644 --- a/css-dev/burf/_typography.scss +++ b/css-dev/burf/_typography.scss @@ -33,7 +33,7 @@ a:active { font-weight: 400; font-size:16px; line-height:28px; - + p { font-family: 'Benton'; font-weight: 400; @@ -41,7 +41,7 @@ a:active { line-height:28px; margin-bottom: 24px; } - + h1 { font-family: 'Capita'; font-weight: 700; @@ -49,7 +49,7 @@ a:active { line-height:43px; margin-bottom: 22px; } - + h2 { font-family: 'Capita'; font-weight: 700; @@ -57,7 +57,7 @@ a:active { line-height:36px; margin-bottom: 22px; } - + h3 { font-family: 'Capita'; font-weight: 700; @@ -70,7 +70,7 @@ a:active { font-size: 23px; line-height: 26px; } - + h4 { font-family: 'Capita'; font-weight: 700; @@ -78,7 +78,7 @@ a:active { line-height:27px; margin-bottom: 22px; } - + h5 { font-family: 'Capita'; font-weight: 700; @@ -86,7 +86,7 @@ a:active { line-height:26px; margin-bottom: 22px; } - + h6 { font-family: 'Capita'; font-weight: 700; @@ -94,24 +94,24 @@ a:active { line-height:21px; margin-bottom: 22px; } - + #q { font-family: 'Capita'; font-size:18px; } - + #nav li a { font-family: 'Capita'; font-weight: 500; font-size:18px; } - + #utility li a { font-family: 'Capita'; font-weight: 400; font-size:16px; font-style: italic; - } + } } @@ -138,7 +138,7 @@ a:active { font-weight: 400; font-size:16px; line-height:28px; - + p { font-family: 'Benton'; font-weight: 400; @@ -146,7 +146,7 @@ a:active { line-height:28px; margin-bottom: 24px; } - + h1 { font-family: 'Benton'; font-weight: 400; @@ -154,7 +154,7 @@ a:active { line-height:38px; margin-bottom: 22px; } - + h2 { font-family: 'Benton'; font-weight: 400; @@ -162,7 +162,7 @@ a:active { line-height:32px; margin-bottom: 22px; } - + h3 { font-family: 'Benton'; font-weight: 400; @@ -175,7 +175,7 @@ a:active { font-size: 18px; line-height: 21px; } - + h4 { font-family: 'Benton'; font-weight: 700; @@ -183,7 +183,7 @@ a:active { line-height:23px; margin-bottom: 22px; } - + h5 { font-family: 'Benton'; font-weight: 700; @@ -191,7 +191,7 @@ a:active { line-height:21px; margin-bottom: 22px; } - + h6 { font-family: 'Benton'; font-weight: 700; @@ -199,24 +199,24 @@ a:active { line-height:19px; margin-bottom: 22px; } - + #q { font-family: 'Benton'; font-size:18px; } - + #nav li a { font-family: 'Benton'; font-weight: 400; font-size:16px; } - + #utility li a { font-family: 'Capita'; font-weight: 400; font-size:16px; font-style: italic; - } + } } @@ -243,7 +243,7 @@ a:active { font-weight: 400; font-size:18px; line-height:30px; - + p { font-family: 'Capita'; font-weight: 400; @@ -251,7 +251,7 @@ a:active { line-height:30px; margin-bottom: 24px; } - + h1 { font-family: 'Benton'; font-weight: 700; @@ -259,7 +259,7 @@ a:active { line-height:36px; margin-bottom: 22px; } - + h2 { font-family: 'Benton'; font-weight: 700; @@ -267,7 +267,7 @@ a:active { line-height:29px; margin-bottom: 22px; } - + h3 { font-family: 'Benton'; font-weight: 700; @@ -275,12 +275,12 @@ a:active { line-height:26px; margin-bottom: 22px; } - + .widget h3 { font-size: 18px; line-height: 21px; } - + h4 { font-family: 'Benton'; font-weight: 700; @@ -288,7 +288,7 @@ a:active { line-height:23px; margin-bottom: 22px; } - + h5 { font-family: 'Benton'; font-weight: 700; @@ -296,7 +296,7 @@ a:active { line-height:21px; margin-bottom: 22px; } - + h6 { font-family: 'Benton'; font-weight: 700; @@ -304,24 +304,24 @@ a:active { line-height:19px; margin-bottom: 22px; } - + #q { font-family: 'Benton'; font-size:18px; } - + #nav li a { font-family: 'Benton'; font-weight: 700; font-size:16px; } - + #utility li a { font-family: 'Capita'; font-weight: 400; font-size:16px; font-style: italic; - } + } } @@ -348,7 +348,7 @@ a:active { font-weight: 400; font-size:16px; line-height:28px; - + p { font-family: 'Benton'; font-weight: 400; @@ -356,7 +356,7 @@ a:active { line-height:28px; margin-bottom: 24px; } - + h1 { font-family: 'Pressura'; font-weight: 700; @@ -365,7 +365,7 @@ a:active { line-height:43px; margin-bottom: 22px; } - + h2 { font-family: 'Pressura'; font-weight: 700; @@ -374,7 +374,7 @@ a:active { line-height:38px; margin-bottom: 22px; } - + h3 { font-family: 'Pressura'; font-weight: 700; @@ -383,12 +383,12 @@ a:active { line-height:33px; margin-bottom: 22px; } - + .widget h3 { font-size: 20px; line-height: 23px; } - + h4 { font-family: 'Pressura'; font-weight: 700; @@ -397,7 +397,7 @@ a:active { line-height:27px; margin-bottom: 22px; } - + h5 { font-family: 'Pressura'; font-weight: 700; @@ -406,7 +406,7 @@ a:active { line-height:23px; margin-bottom: 22px; } - + h6 { font-family: 'Pressura'; font-weight: 700; @@ -415,26 +415,26 @@ a:active { line-height:21px; margin-bottom: 22px; } - + #q { font-family: 'Pressura'; font-size:18px; text-transform: uppercase; } - + #nav li a { font-family: 'Pressura'; font-weight: 700; font-size:18px; text-transform: uppercase; } - + #utility li a { font-family: 'Capita'; font-weight: 400; font-size:16px; font-style: italic; - } + } } @@ -461,7 +461,7 @@ a:active { font-weight: 400; font-size:16px; line-height:28px; - + p { font-family: 'Benton'; font-weight: 400; @@ -469,7 +469,7 @@ a:active { line-height:28px; margin-bottom: 24px; } - + h1 { font-family: 'Stag'; font-weight: 500; @@ -477,7 +477,7 @@ a:active { line-height:43px; margin-bottom: 22px; } - + h2 { font-family: 'Stag'; font-weight: 500; @@ -485,7 +485,7 @@ a:active { line-height:38px; margin-bottom: 22px; } - + h3 { font-family: 'Stag'; font-weight: 500; @@ -506,7 +506,7 @@ a:active { line-height:28px; margin-bottom: 22px; } - + h5 { font-family: 'Stag'; font-weight: 500; @@ -514,7 +514,7 @@ a:active { line-height:23px; margin-bottom: 22px; } - + h6 { font-family: 'Stag'; font-weight: 500; @@ -522,22 +522,33 @@ a:active { line-height:19px; margin-bottom: 22px; } - + #q { font-family: 'Stag'; font-size:18px; } - + #nav li a { font-family: 'Stag'; font-weight: 500; font-size:18px; } - + #utility li a { font-family: 'Stag'; font-weight: 400; font-size:16px; font-style: italic; - } -} \ No newline at end of file + } +} + +/* START: group 5 (icons, where applicable): BU Default Icons +----------------------------------------------------------------- */ + +.icon-buhub { + content: "\F700"; +} + +.icon-questionmark { + content: "\2753"; +} diff --git a/css-dev/burf/_variables.scss b/css-dev/burf/_variables.scss index 030264cd..873052dc 100644 --- a/css-dev/burf/_variables.scss +++ b/css-dev/burf/_variables.scss @@ -15,13 +15,18 @@ $font-branding: 'Whitney SSm A', 'Whitney SSm B' !default; $black: #000000 !default; $white: #ffffff !default; +$gray_d: #dddddd !default; $gray_darkest: #151515 !default; $gray_darker: #222222 !default; $gray_dark: #333333 !default; +$gray_mid: #555555 !default; $gray_light: #7a7a7a !default; $gray_lighter: #9f9f9f !default; +/// A grayscale variable for hover state of the BU Hub webfont. +// Not intended for editing. +$color-hub: #767676; @@ -42,3 +47,10 @@ $container_M: 970px !default; $container_L: 1170px !default; $MQs: true !default; + + +/* borders +------------------------ */ + +$color-table-border: $gray_d !default; +$table-border: 1px solid $color-table-border !default; \ No newline at end of file