diff --git a/assets/icons/lab.png b/assets/icons/lab.png new file mode 100644 index 0000000000000000000000000000000000000000..d23cc5b5afb1240db7b81b2d3666c75af2a7d51c Binary files /dev/null and b/assets/icons/lab.png differ diff --git a/assets/icons/positions.png b/assets/icons/positions.png new file mode 100644 index 0000000000000000000000000000000000000000..8e4f25ea42656f3d4adf284b73620e9cd54c47d6 Binary files /dev/null and b/assets/icons/positions.png differ diff --git a/assets/icons/ruler.png b/assets/icons/ruler.png new file mode 100644 index 0000000000000000000000000000000000000000..c7b56aa0f819e350af267a9698fe1021ba13b421 Binary files /dev/null and b/assets/icons/ruler.png differ diff --git a/assets/icons/talent.png b/assets/icons/talent.png new file mode 100644 index 0000000000000000000000000000000000000000..f8d5d0cc3137f73072bf9f47902bb7b89bcc1d73 Binary files /dev/null and b/assets/icons/talent.png differ diff --git a/style.css b/style.css index 69f39ca827bcecaa743aa9310e5e099c24e016d5..a5c5cf568fecdf6894546d2ff6f3c16c5cf17469 100644 --- a/style.css +++ b/style.css @@ -4,6 +4,127 @@ h2.wdn-brand { text-transform: uppercase; } +.icon-band { + text-align: center; + font-family: "Gotham SSm A", "Gotham SSm B", Verdana, "Verdana Ref", Geneva, Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif; + font-weight: 400; + font-style: normal; + text-transform: uppercase; + font-size: 1.1em; + line-height: 1.4em; +} +.icon-band img { + max-height: 90px; + margin-bottom: 1em; +} +.icon-band a { + font-weight: bold; +} +/* Factoids **********************/ +.view-factoids { + background-color: #454545; + height: 320px; +} +.view-factoids .wdn-col { + position: relative; +} +.view-factoids .wdn-col .red-circle { + height: 0; + padding: 40% 0 50% 0; + background-color: #d2232a; + border-radius: 100%; + width: 90%; + top: 0; + position: relative; + left: 0; +} +.view-factoids .wdn-col .red-circle .ring { + height: 0; + padding: 12% 0 77% 0; + border: solid 2px #e970a3; + border-radius: 100%; + width: 90%; + top: 4%; + left: 5%; + position: absolute; +} +.view-factoids .views-field-field-number { + font-family: "Tungsten A", "Tungsten B", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "Arial Narrow", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-weight: 400; + font-style: normal; + width: 80%; + color: #fff; + text-align: center; + font-size: 4em; + line-height: 1em; + word-break: break-word; + position: relative; + left: 10%; +} +.view-factoids .views-field-title { + left: 10%; + top: 0.5em; + width: 80%; + color: #fff; + text-align: center; + position: relative; + font-size: .75em; + font-family: "Gotham SSm A", "Gotham SSm B", Verdana, "Verdana Ref", Geneva, Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif; + font-weight: 400; + font-style: normal; +} +/** Black Bands **********************/ +.black-button-band, +.black-band { + background-color: #222; + color: #fff; +} +.black-band { + margin-top: -0.6em; +} +.black-band .wdn-button { + font-size: 1em; +} +.black-button-band, +.black-band h3 { + font-size: 1.25em; + color: #fff; +} +.black-button-band ul li.wdn-col { + margin-bottom: 1em; + text-align: center; +} +.black-button-band ul li.wdn-col a { + color: #fff; + border-bottom: none; + list-style: none; + font-family: "Gotham SSm A", "Gotham SSm B", Verdana, "Verdana Ref", Geneva, Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif; + font-weight: 400; + font-style: normal; + border: solid 2px #fff; + padding: 1em; + text-align: center; + display: inline-block; + display: flex; + align-items: center; + font-size: .7em; + height: 6em; + line-height: 1.4em; + max-width: 118px; +} +/** Image headers **********************/ +.stretch-band { + position: relative; +} +.stretch-band .image-overlay { + position: absolute; + top: 1em; + text-align: center; + width: 100%; +} +.stretch-band .image-overlay h2 { + font-size: 3.5em; +} /****************************************************************************************************** * Home ******************************************************************************************************/ @@ -100,8 +221,10 @@ h2.wdn-brand { color: #fff; border-radius: 4px; text-transform: uppercase; - letter-spacing: 0.02em; display: inline-block; + font-size: .75em; + text-align: center; + width: 100%; } .view-impact .views-row:not(:last-child) { border-bottom: 1px solid #bbb; @@ -116,6 +239,13 @@ h2.wdn-brand { .view-featured-questions-answers .field-name-body p { margin-top: 0; } +.view-featured-questions-answers .view-content .wdn-button { + width: 100%; + text-align: left; + padding-left: 30px; + background-image: url('df'); + background-repeat: no-repeat; +} /****************************************************************************************************** * Educational Programs ******************************************************************************************************/ diff --git a/style.less b/style.less index a171c67ef061297a57c383ab1f8625a802fb0a34..a7cb301e9ee101b1206c60fb2fc121550147c62c 100644 --- a/style.less +++ b/style.less @@ -10,6 +10,125 @@ h2.wdn-brand { text-transform: uppercase; } +.icon-band { + text-align: center; + .sans-serif-font(); + text-transform: uppercase; + font-size: 1.1em; + line-height: 1.4em; + + img { + max-height: 90px; + margin-bottom: 1em; + } + a { + //color: #474746; + font-weight: bold; + } +} + +/* Factoids **********************/ +.view-factoids { + background-color: #454545; + height: 320px; + + .wdn-col { + position: relative; + } + .wdn-col .red-circle { + height: 0; + padding: 40% 0 50% 0; + background-color: #d2232a; + border-radius: 100%; + width: 90%; + top: 0; + position: relative; + left: 0; + } + .wdn-col .red-circle .ring { + height: 0; + padding: 12% 0 77% 0; + border: solid 2px #e970a3; + border-radius: 100%; + width: 90%; + top: 4%; + left: 5%; + position: absolute; + } + .views-field-field-number { + .brand-font(); + width: 80%; + color: #fff; + text-align: center; + font-size: 4em; + line-height: 1em; + word-break: break-word; + position: relative; + left: 10%; + } + .views-field-title { + left: 10%; + top: 0.5em; + width: 80%; + color: #fff; + text-align: center; + position: relative; + font-size: .75em; + .sans-serif-font(); + } +} + +/** Black Bands **********************/ +.black-button-band, .black-band { + background-color: #222; + color: #fff; +} +.black-band { + margin-top: -.6em; +} +.black-band .wdn-button { + font-size: 1em; +} +.black-button-band, .black-band h3 { + font-size: 1.25em; + color: #fff; +} +.black-button-band ul li.wdn-col { + margin-bottom: 1em; + text-align: center; +} +.black-button-band ul li.wdn-col a { + color: #fff; + border-bottom: none; + list-style: none; + .sans-serif-font(); + border: solid 2px #fff; + padding: 1em; + text-align: center; + display: inline-block; + display: flex; + align-items: center; + font-size: .7em; + height: 6em; + line-height: 1.4em; + max-width: 118px; +} + + +/** Image headers **********************/ +.stretch-band { + position: relative; + + .image-overlay { + position: absolute; + top: 1em; + text-align: center; + width: 100%; + } + .image-overlay h2 { + font-size: 3.5em; + } +} /****************************************************************************************************** * Home @@ -110,8 +229,10 @@ h2.wdn-brand { color: #fff; border-radius: 4px; text-transform: uppercase; - letter-spacing: 0.02em; display: inline-block; + font-size: .75em; + text-align: center; + width: 100%; } } .views-row:not(:last-child) { @@ -128,11 +249,19 @@ h2.wdn-brand { .view-featured-questions-answers { .field-name-body { font-size: .8em; - + p { margin-top: 0; } } + + .view-content .wdn-button { + width: 100%; + text-align: left; + padding-left: 30px; + background-image: url('df'); + background-repeat: no-repeat; + } }