Skip to content

Instantly share code, notes, and snippets.

@csilverman
Last active July 1, 2021 21:29
Show Gist options
  • Save csilverman/f9e25c6dfbcfddcc22bd0e184a628a7e to your computer and use it in GitHub Desktop.
Save csilverman/f9e25c6dfbcfddcc22bd0e184a628a7e to your computer and use it in GitHub Desktop.
:root {
--burgundy-light: #951829;
--gray-light: #d7cfcc;
--gray-xxxlight: #f7f5f1;
--gray-xxxlight-border: 1px solid rgba(212, 204, 202, 0.3);
--gray-charcoal: #222;
--gold: #C6AA76;
--basic-transition: 0.2s all ease;
--sans-serif: "Source Sans Variable","Helvetica Neue","Helvetica","Arial",sans-serif;
--serif: "freight-big-pro","Georgia","Times","Times New Roman",serif;
}
@font-face{
font-display:swap;
font-family:'Source Sans Variable';
font-weight:200 900;
font-stretch:normal;
src:url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Roman.ttf.woff2) format("woff2 supports variations"),url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Roman.ttf.woff2) format("woff2-variations"),url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Roman.ttf.woff) format("woff"),url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Roman.ttf) format("truetype")
}
@font-face{
font-display:swap;
font-family:'Source Sans Variable';
font-weight:200 900;
font-style:italic;
font-stretch:normal;
src:url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Italic.ttf.woff2) format("woff2 supports variations"),url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Italic.ttf.woff2) format("woff2-variations"),url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Italic.ttf.woff) format("woff"),url(https://www.vassar.edu/admissions/assets/fonts/SourceSansVariable-Italic.ttf) format("truetype")
}
/* BASIC STYLES
============ */
a {
transition: 0.4s all ease;
}
p {
font-size: 1.3rem;
font-variation-settings: "wght" 360;
line-height: 1.3;
}
/* Standard links */
p a:not(.btn):hover,
p a:visited:not(.btn):hover {
color: #fff !important;
background-color: #951829 !important;
text-decoration: none;
}
p a:focus,
p a:hover,
p a:visited:focus,
p a:visited:hover,
li a:focus,
li a:hover,
li a:visited:focus,
li a:visited:hover,
h2:not(.all-news-display-title):not(.news-headlines-display-title):not(.featured-news-display-title) a:focus,
h2:not(.all-news-display-title):not(.news-headlines-display-title):not(.featured-news-display-title) a:hover,
h2:not(.all-news-display-title):not(.news-headlines-display-title):not(.featured-news-display-title) a:visited:focus,
h2:not(.all-news-display-title):not(.news-headlines-display-title):not(.featured-news-display-title) a:visited:hover,
figcaption a:focus,
figcaption a:hover,
figcaption a:visited:focus,
figcaption a:visited:hover {
background-color: var(--burgundy-light) !important;
color: #fff !important;
}
p a:visited,
li a:visited {
color: #888;
}
.component--hero-slideshow a:visited,
.bg.dark a:visited {
color: #fff;
}
.footer-nav-outer a:hover,
.footer-nav-outer a:visited:hover,
.footer-nav-outer a:focus,
.footer-nav-outer a:visited:focus,
.component--hero-slideshow .carousel-caption a:focus,
.component--hero-slideshow .carousel-caption a:hover,
.component--hero-slideshow .carousel-caption a:visited:focus,
.component--hero-slideshow .carousel-caption a:visited:hover,
.site-footer a:focus,
.site-footer a:hover,
.site-footer a:visited:focus,
.site-footer a:visited:hover,
.bg.dark a:focus,
.bg.dark a:hover,
.bg.dark a:visited:focus,
.bg.dark a:visited:hover {
background: #fff !important;
color: #222 !important;
}
/*
.component--main-content .content h2.main-content-display-title,
.component--main-content .content h1.main-content-display-title,
.component--main-content-basic .content h2.main-content-display-title,
.component--main-content-basic .content h1.main-content-display-title {
font-size: 3rem;
}
*/
/* Typography
---------- */
/* Bugfix for Safari gradient h2s */
h1 *,
h2 * {
display: inline;
}
h1,
.component--main-content .content h1.main-content-display-title,
.component--main-content-basic .content h1.main-content-display-title,
h1.main-content-display-title,
h1.all-news-display-title {
font-weight: normal !important;
/* This was making h1s disappear on inner pages */
/* background: none !important; */
font-size: 4rem !important;
background: -webkit-linear-gradient(315deg,#641A2B 0%,#ED1C24 70%);
background: -o-linear-gradient(315deg,#641A2B 0%,#ED1C24 70%);
background: linear-gradient(135deg,#641A2B 0%,#ED1C24 70%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.bg.dark h1.main-content-display-title {
color: #fff !important;
}
/*
h2.main-content-display-title,
.field--name-field-main-content-body h2,
.featured-videos-display-title,
.two-column-display-title,
.component--social-with-imagery .content h2.display-title,
.component--facts-stats .content .vassar-stats-facts h2.Row__title,
.component--main-content .content h2.main-content-display-title,
.component--main-content-basic .content h2.main-content-display-title {
font-family: var(--sans-serif) !important;
font-size: 2.2rem !important;
font-variation-settings: "wght" 800 !important;
letter-spacing: -0.02rem !important;
margin-top: 2rem !important;
color: #641a2b !important;
background: -webkit-linear-gradient(315deg,#641A2B 0%,#ED1C24 70%);
background: -o-linear-gradient(315deg,#641A2B 0%,#ED1C24 70%);
background: linear-gradient(135deg,#641A2B 0%,#ED1C24 70%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
line-height: 1.1 !important;
}
*/
.component--social-with-imagery .content h2.display-title,
.component--facts-stats .content .vassar-stats-facts h2.Row__title,
.component--main-content .content h2.main-content-display-title,
.component--main-content-basic .content h2.main-content-display-title {
margin-top: 0 !important;
}
/*
.component--main-content.bg.dark .content h2.main-content-display-title,
.component--main-content-basic.bg.dark .content h2.main-content-display-title {
color: #aaa;
font-variation-settings: "wght" 680 !important;
}
*/
.field--name-field-main-content-body h3 {
font-size: 1.4rem;
font-variation-settings: "wght" 700;
}
.field--name-field-main-content-body h4 {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.06rem;
}
strong,
b {
font-variation-settings: "wght" 660;
}
sup, sub {
font-size: 70%;
font-variation-settings: "wght" 460;
}
blockquote {
font-family: var(--sans-serif);
font-style: normal !important;
padding: 1.4rem;
background: var(--gray-xxxlight);
margin-bottom: 1.4rem;
font-size: 90%;
z-index: -1; /* makes sure it doesn't cover floated images */
}
blockquote:before {
display: none;
}
.intro-text {
font-family: var(--serif);
font-size: 2.4rem !important;
line-height: 1.1 !important;
margin-bottom: 2rem;
margin-top: 0;
}
/* UNIVERSAL NAV
============= */
.menu--actions a:visited,
.menu--roles a:visited,
.menu--main a:visited {
color: #fff !important;
}
.menu--actions a:visited,
.menu--roles a:visited {
background: transparent !important;
}
/* Actions
------- */
.menu--actions a:hover,
.menu--actions a:visited:hover,
.menu--actions a:focus,
.menu--actions a:visited:focus {
background: #fff !important;
color: var(--gray-charcoal) !important;
}
.menu--actions a {
font-weight: 400 !important !important;
}
/* Roles
----- */
.menu--roles .is-active {
background: none !important;
}
.menu--roles a {
font-variation-settings: "wght" 400 !important;
}
.menu--roles a:hover,
.menu--roles a:visited:hover,
.menu--roles a:focus,
.menu--roles a:visited:focus {
background: #fff !important;
color: #000 !important;
}
/* Main nav
-------- */
header #navbar-main #CollapsingNavbar .menu--main a:hover,
header #navbar-main #CollapsingNavbar .menu--main a:visited:hover,
header #navbar-main #CollapsingNavbar .menu--main a:focus,
header #navbar-main #CollapsingNavbar .menu--main a:visited:focus {
background: var(--burgundy-light) !important;
background: #951829 !important;
}
/* UI elements
=========== */
/* Buttons
------- */
/* Square homepage buttons */
.block-button {
border: 1px solid #951829 !important;
font-variation-settings: "wght" 400 !important;
}
.block-button:visited {
color: #fff !important;
}
.block-button:hover,
.block-button:focus,
.block-button:visited:hover,
.block-button:visited:focus {
background: #fff !important;
color: var(--burgundy-light) !important;
}
.bg.dark .block-button {
border: 1px solid #fff;
}
/* Regular buttons */
.btn-primary:visited {
color: #fff !important;
}
.btn-primary:hover,
.btn-primary:visited:hover,
.btn-primary:focus,
.btn-primary:visited:focus {
background: #000 !important;
}
/* Tickers
------- */
.view-display-id-news_headlines_carousel .custom-linked-title a:hover {
color: var(--gray-charcoal) !important;
text-decoration: underline !important;
text-decoration-color: #aaa;
}
.component--news-headlines.carousel .rendered-news-view .carousel .carousel-indicators li {
transition: 0.4s all ease;
}
.component--news-headlines.carousel .rendered-news-view .carousel .carousel-indicators li:hover {
background-color: var(--gold);
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: 0 0.5rem;
opacity: 1;
}
/* Video embeds
------------ */
.embed-responsive,
.ratio {
margin-bottom: 1.4rem;
}
/* Carousels
--------- */
.carousel {
margin-bottom: 1em !important;
}
/* Facts and stats
--------------- */
.Module__desc {
font-family: var(--serif) !important;
font-size: 3rem !important;
}
.component--facts-stats .content .vassar-stats-facts p {
font-family: inherit;
}
/* Clean lists
----------- */
.clean-list {
padding: 0;
}
.clean-list li {
list-style: none;
}
/* NAVIGATION
========== */
li.active.expanded.last ul {
margin: 0;
}
li.active.expanded.last ul li {padding-right: 0;}
/* Main nav
-------- */
.component--secondary-navigation a,
.component--secondary-navigation a:visited {
color: var(--burgundy-light);
}
.component--secondary-navigation .is-active:visited {
color: #444;
}
.component--secondary-navigation a:hover,
.component--secondary-navigation a:visited:hover {
background: var(--burgundy-light) !important;
color: #fff !important;
}
/* Sidenav
------- */
.component--side-navigation {
display: block;
padding: 0.8rem;
}
.component--side-navigation li {
margin: 0;
}
.component--side-navigation a {
padding: 0.2rem 0.4rem;
}
.component--side-navigation a.active:hover,
.component--side-navigation a:visited {
color: var(--burgundy-light) !important;
}
.component--side-navigation .expanded a.active:hover,
.component--side-navigation .expanded a.active:visited:hover {
color: #fff !important;
}
/* HOME
==== */
.component--all-news.top-5 h1.all-news-display-title:hover,
.component--all-news.top-5 h2.all-news-display-title:hover,
.component--all-events.top-5 h1.all-news-display-title:hover,
.component--all-events.top-5 h2.all-news-display-title:hover,
.component--news-headlines.carousel h2.news-headlines-display-title:hover {
background: linear-gradient(135deg, #222 0%, #222 70%) !important;
color: transparent !important;
-webkit-background-clip: text !important;
}
.component--all-news.top-5 h1.all-news-display-title,
.component--all-news.top-5 h2.all-news-display-title,
.component--all-events.top-5 h1.all-news-display-title,
.component--all-events.top-5 h2.all-news-display-title,
.component--news-headlines.carousel h2.news-headlines-display-title {
transition: 0.4s all ease;
}
/* News
---- */
h2.all-news-display-title {
margin: 0.7em 0 0.4em 0;
}
/* News tiles */
.node--news--top-5-card {
padding: 1rem;
}
.node--news--top-5-card h3 {
line-height: 1.3;
}
.node--news--top-5-card h3 a:hover {
color: var(--burgundy-light);
}
.alias--vassar-college-home .node--news--top-5-card:hover,
.alias--vassar-college-home .node--news--top-5-card:focus,
.alias--vassar-college-home .node--news--top-5-card:visited:hover,
.alias--vassar-college-home .node--news--top-5-card:visited:focus {
background: #fff !important;
box-shadow: 0 0.4em 0.4em rgba(0, 0, 0, 0.1);
transform: scale(1.02);
z-index: 10;
border-color: #ddd !important;
border-color: #ddd !important;
border-left: 1px solid #ddd !important;
border-top-color: #951829 !important;
}
/* NEWS
==== */
.u-ArticleGroup--newsSlider-top .u-ArticleFeature {
background-color: var(--gray-xxxlight);
border: var(--gray-xxxlight-border);
}
.rendered-news-view .views-row article:hover img,
.node--news--featured-news-teaser:hover .field--name-field-news-teaser-image img {
opacity: 1;
-webkit-filter: none;
filter: none;
}
.component--featured-news .content .field--name-field-featured-news-handpicked,
.component--featured-news .content .view-content {
grid-template-rows: auto auto 1fr;
}
@media (min-width: 62rem) {
.component--featured-news .content .field--name-field-featured-news-handpicked .field__item:nth-child(4),
.component--featured-news .content .field--name-field-featured-news-handpicked .views-row:nth-child(4),
.component--featured-news .content .view-content .field__item:nth-child(4),
.component--featured-news .content .view-content .views-row:nth-child(4) {
align-self: unset;
}
}
@media (min-width: 62rem) {
.component--featured-news .content .field--name-field-featured-news-handpicked,
.component--featured-news .content .view-content {
grid-gap: 0;
}
}
.field--name-field-news-teaser-image-square {
margin-bottom: 0 !important;
}
.news-title a:focus {
color: #fff !important;
background: var(--burgundy-light);
}
/* News items
---------- */
.not-front .rendered-news-view .views-row article,
.not-front .component--featured-news .views-row article {
border: 1px solid transparent;
border-bottom: 1px solid #ddd !important;
padding: 1.4em;
transition: var(--basic-transition);
will-change: transform;
}
.node--news--featured-news-teaser:hover .field--name-field-news-teaser-copy {
color: var(--burgundy-light) !important;
}
.not-front .rendered-news-view .views-row:hover article,
.not-front .component--featured-news .views-row:hover article {
background: #fff !important;
box-shadow: 0 0.4em 0.4em rgba(0, 0, 0, 0.1);
transform: scale(1.02);
z-index: 10;
border-color: #ddd !important;
border-left-color: #951829 !important;
z-index: 2 !important;
position: relative;
}
.field--name-field-featured-news-handpicked .field__item .node--news--featured-news-teaser:hover .news-title h3 a,
.field--name-field-featured-news-handpicked .views-row .node--news--featured-news-teaser:hover .news-title h3 a,
.view-content .field__item .node--news--featured-news-teaser:hover .news-title h3 a,
.view-content .views-row .node--news--featured-news-teaser:hover .news-title h3 a {
color: var(--burgundy-light);
}
/* /news/all listing
----------------- */
.node--news--teaser,
.alias--news-all .field--name-field-news-teaser-image-square {
margin-bottom: 0 !important;
}
.node--news--teaser:hover .custom-linked-title h2 a,
.node--news--teaser:hover .custom-linked-title h2 a:visited,
.node--news--teaser:focus .custom-linked-title h2 a,
.node--news--teaser:focus .custom-linked-title h2 a:visited,
.node--news--teaser:hover .field--name-field-news-teaser-copy,
.node--news--teaser:hover .field--name-field-news-publish-date,
.node--news--teaser:focus .field--name-field-news-teaser-copy,
.node--news--teaser:focus .field--name-field-news-publish-date {
color: var(--burgundy-light);
}
.node--news--teaser .custom-linked-title h2 {
font-size: 2rem;
}
.field--name-field-news-teaser-copy p {
font-size: 1.2rem;
}
.news-title a:focus {
color: #fff !important;
}
/*
.component--main-content .content h1.main-content-display-title,
.component--main-content-basic .content h1.main-content-display-title {
font-size: 4rem !important;
}
*/
.main-content-display-title .field--type-text {
font-size: inherit !important;
}
@media screen and (min-width: 52.125rem) {
.component--hero-image .field--name-field-hero-image-display-title span {
font-size: 3rem;
}
}
.component--hero-image .field--name-field-hero-image-display-title span {
padding: 1rem 1.4rem;
}
h1.main-content-display-title {
border-bottom: 1px solid #ccc;
margin-bottom: 0.6em;
}
.component--facts-stats .content .vassar-stats-facts dl dt.Module__title {
font-family: var(--sans-serif);
}
.component--featured-news .content h2.featured-news-display-title:hover {
background: linear-gradient(135deg, #222 0%, #222 70%) !important;
color: transparent !important;
-webkit-background-clip: text !important;
}
.component--featured-videos .view-content .views-row button,
.component--featured-videos .view-content .field__item button,
.component--featured-videos .field--name-field-videos-handpicked .views-row button,
.component--featured-videos .field--name-field-videos-handpicked .field__item button {
border: 1px solid #ccc !important;
will-change: transform;
transition: var(--basic-transition) !important;
}
.component--featured-videos .view-content .views-row button:hover,
.component--featured-videos .view-content .field__item button:hover,
.component--featured-videos .field--name-field-videos-handpicked .views-row button:hover,
.component--featured-videos .field--name-field-videos-handpicked .field__item button:hover {
background: #fff !important;
border: 1px solid #ccc !important;
border-top: 1px solid #951829 !important;
box-shadow: 0 0.2em 0.8em 0.25em #ddd !important;
}
/* FOOTER
====== */
.site-footer a {
font-family: var(--sans-serif) !important;
}
.site-footer a:visited {
color: #fff !important;
}
footer.site-footer.default #footer-nav-info .u-VCardContainer .u-VCard--site .org {
font: 600 2rem/1.1 "freight-big-pro","Georgia","Times","Times New Roman",serif !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment