From 119faac7e3086fe03f0b05e2d83d69151e2226a1 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Fri, 12 Jun 2026 09:39:29 -0400 Subject: [PATCH 01/13] First Draft of Homepage Template Creates the first barebones v2 page template for the new homepage. --- .../css/scss/partials/_layout.scss | 134 ++++++++++++++++++ web/app/themes/mitlib-parent/footer-v2.php | 30 ++++ web/app/themes/mitlib-parent/header-v2.php | 66 +++++++++ .../mitlib-parent/templates/page-home-v2.php | 48 +++++++ 4 files changed, 278 insertions(+) create mode 100644 web/app/themes/mitlib-parent/footer-v2.php create mode 100644 web/app/themes/mitlib-parent/header-v2.php create mode 100644 web/app/themes/mitlib-parent/templates/page-home-v2.php diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss b/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss index f9ba3103..6ee30933 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss @@ -307,3 +307,137 @@ html.no-js .js-hidden { clear: both; } } + +/* ==================== */ +/* V2 Layout Experiment */ +/* ==================== */ + +// Layout variables +:root { + --content-side-margins: 32px; + + @media only screen and (max-width: 720px) { + --content-side-margins: 24px; + } + + @media only screen and (max-width: 480px) { + --content-side-margins: 16px; + } + + --actual-max-width: 1280px; // What we want the max width to work out to, margins included + --content-max-width: calc(var(--actual-max-width) - (var(--content-side-margins) * 2)); + + --content-section-vertical-padding: 48px; +} + +// Changes that should only apply to V2 pages (.v2-page body class) +body.v2-page { + background-color: #000; + + #content { + background-color: #fff; + } + + // Adjustments to navigation + header.header-main { + > nav:first-child { + display: none; + + @media only screen and (max-width: 569px) { + display: block; + } + + } + + .header-left, .header-right { + display: flex; + } + + .header-right { + gap: 32px; + + @media only screen and (max-width: 569px) { + gap: 16px; + + a.hidden-non-mobile { + margin-left: 0; + margin-right: 0; + } + } + } + + h1.name-site {margin-left: 0;} + } + +} + +// START: New layout rules for V2 page templates +.wrap-page.full-width { + width: 100%; + max-width: 100%; +} + +// Outer block wrappers for all content blocks +.header-wrapper, .content-wrapper, .footer-wrapper, main#content > section { + display: flex; + justify-content: center; + width: 100%; +} + +.header-wrapper { + background-color: #000; + + > header { + max-width: var(--content-max-width); + padding-left: calc(var(--content-side-margins) - 8px); + padding-right: calc(var(--content-side-margins) - 8px); + } + + .header-right { + justify-content: flex-end; + flex-grow: 1; + } + +} + +.footer-wrapper { + background-color: #000; + + > footer { + //max-width: var(--content-max-width); + } + + .footer-main, .footer-info-institute { + padding-left: var(--content-side-margins); + padding-right: var(--content-side-margins); + max-width: var(--content-max-width); + } + + .links-all { + gap: 32px; + + div.flex-item { + margin-right: 0; + flex-grow: 1; + } + + } + +} + +main#content > section { + padding-top: var(--content-section-vertical-padding); + padding-bottom: var(--content-section-vertical-padding); + + .content-wrapper { + max-width: var(--content-max-width); + text-align: left; + justify-content: flex-start; + + padding-left: var(--content-side-margins); + padding-right: var(--content-side-margins); + } + +} + +// END: New layout rules for V2 page templates \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/footer-v2.php b/web/app/themes/mitlib-parent/footer-v2.php new file mode 100644 index 00000000..4b876067 --- /dev/null +++ b/web/app/themes/mitlib-parent/footer-v2.php @@ -0,0 +1,30 @@ + +
+ +
+ + + + + diff --git a/web/app/themes/mitlib-parent/header-v2.php b/web/app/themes/mitlib-parent/header-v2.php new file mode 100644 index 00000000..19715469 --- /dev/null +++ b/web/app/themes/mitlib-parent/header-v2.php @@ -0,0 +1,66 @@ + section and everything up till div#breadcrumb + * + * @package MITlib_Parent + * @since 0.0.1 + */ + +namespace Mitlib\Parent; + +$menu = 'full'; +if ( 'slim' === get_option( 'menu_style_setting' ) ) { + $menu = 'slim'; +} +?> + + + class="no-js"> + + + + + + + + <?php wp_title( '|', true, 'right' ); ?> + + + + + + + + + + + +> + + +
+
+
+
+ + + + +
+
+ + + + + MIT logo + + + + +
+
+
diff --git a/web/app/themes/mitlib-parent/templates/page-home-v2.php b/web/app/themes/mitlib-parent/templates/page-home-v2.php new file mode 100644 index 00000000..f35a5eb1 --- /dev/null +++ b/web/app/themes/mitlib-parent/templates/page-home-v2.php @@ -0,0 +1,48 @@ + + +
+ +
+
+ Search box +
+
+
+
+ Hours +
+
+
+
+ Getting started +
+
+
+
+ Featured +
+
+
+
+ Collection +
+
+ +
+ + From 3a176bf30dc85238e55293ef3aedf8cf330acb4b Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Wed, 17 Jun 2026 13:58:23 -0400 Subject: [PATCH 02/13] Adding homepage static content --- .../mitlib-parent/templates/page-home-v2.php | 95 ++++++++++++++++++- 1 file changed, 90 insertions(+), 5 deletions(-) diff --git a/web/app/themes/mitlib-parent/templates/page-home-v2.php b/web/app/themes/mitlib-parent/templates/page-home-v2.php index f35a5eb1..68194e6f 100644 --- a/web/app/themes/mitlib-parent/templates/page-home-v2.php +++ b/web/app/themes/mitlib-parent/templates/page-home-v2.php @@ -17,27 +17,112 @@
- Search box +

Welcome to the MIT Libraries

+
- Hours +

Today's hours

+
    +
  1. + Hayden Library + 9am – 9pm today + 24/7 study +
    2. +
  2. + Rotch Library + 9am – 9pm today + 24/7 study +
    3. +
  3. + Barker Library + 9am – 9pm today + 24/7 study +
    4. +
  4. + Lewis Music Library + 9am – 9pm today + +
    5. +
+ See all locations and hours
- Getting started +

Using the Libraries

+
+
+ +
+

Find a study space

 +

Quiet and group spaces - many available 24/7

+
+
+
+ +
+

Find a study space

 +

Quiet and group spaces - many available 24/7

+
+
+
+ +
+

Find a study space

 +

Quiet and group spaces - many available 24/7

+
+
+
+ +
+

Find a study space

 +

Quiet and group spaces - many available 24/7

+
+
+
+
+ +
+

Ask us

+

Get help via email, chat and more.

+ See options +
- Featured + Featured + Events
- Collection +
+
+

Maihaugen Gallery Exhibit

+

Ink, Stone, and Silver Light

+

This exhibition draws on archival materials from the Aga Khan Documentation Center at MIT (AKDC) to explore a century of cultural heritage preservation in Aleppo, Syria.

+ Check it out +
From 4315f2629f380843b0bd79ca845c8da3979b11c4 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 22 Jun 2026 08:17:43 -0400 Subject: [PATCH 03/13] New style structure mocked out --- .../mitlib-parent/css/v2/pages/home.css | 0 .../mitlib-parent/css/v2/partials/footer.css | 0 .../mitlib-parent/css/v2/partials/header.css | 0 web/app/themes/mitlib-parent/css/v2/v2.css | 21 +++ .../mitlib-parent/css/v2/variables/color.css | 153 ++++++++++++++++++ .../css/v2/variables/corners.css | 16 ++ .../mitlib-parent/css/v2/variables/layout.css | 0 .../css/v2/variables/shadows.css | 0 .../css/v2/variables/spacing.css | 34 ++++ .../css/v2/variables/typography.css | 0 web/app/themes/mitlib-parent/functions.php | 6 +- 11 files changed, 229 insertions(+), 1 deletion(-) create mode 100644 web/app/themes/mitlib-parent/css/v2/pages/home.css create mode 100644 web/app/themes/mitlib-parent/css/v2/partials/footer.css create mode 100644 web/app/themes/mitlib-parent/css/v2/partials/header.css create mode 100644 web/app/themes/mitlib-parent/css/v2/v2.css create mode 100644 web/app/themes/mitlib-parent/css/v2/variables/color.css create mode 100644 web/app/themes/mitlib-parent/css/v2/variables/corners.css create mode 100644 web/app/themes/mitlib-parent/css/v2/variables/layout.css create mode 100644 web/app/themes/mitlib-parent/css/v2/variables/shadows.css create mode 100644 web/app/themes/mitlib-parent/css/v2/variables/spacing.css create mode 100644 web/app/themes/mitlib-parent/css/v2/variables/typography.css diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css new file mode 100644 index 00000000..e69de29b diff --git a/web/app/themes/mitlib-parent/css/v2/partials/footer.css b/web/app/themes/mitlib-parent/css/v2/partials/footer.css new file mode 100644 index 00000000..e69de29b diff --git a/web/app/themes/mitlib-parent/css/v2/partials/header.css b/web/app/themes/mitlib-parent/css/v2/partials/header.css new file mode 100644 index 00000000..e69de29b diff --git a/web/app/themes/mitlib-parent/css/v2/v2.css b/web/app/themes/mitlib-parent/css/v2/v2.css new file mode 100644 index 00000000..ba7886f8 --- /dev/null +++ b/web/app/themes/mitlib-parent/css/v2/v2.css @@ -0,0 +1,21 @@ +/* ==================== */ +/* DESIGN SYSTEM TOKENS */ +/* ==================== */ + +@import url('variables/color.css'); +@import url('variables/corners.css'); +@import url('variables/shadows.css'); +@import url('variables/spacing.css'); +@import url('variables/typography.css'); +@import url('variables/layout.css'); + +/* ==================== */ +/* PROJECT-LEVEL STYLES */ +/* ==================== */ + +/* Component and template styles */ +@import url('partials/header.css'); +@import url('partials/footer.css'); + +/* Page-level styles */ +@import url('pages/home.css'); \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/variables/color.css b/web/app/themes/mitlib-parent/css/v2/variables/color.css new file mode 100644 index 00000000..cc10f9ac --- /dev/null +++ b/web/app/themes/mitlib-parent/css/v2/variables/color.css @@ -0,0 +1,153 @@ +/* ================= */ +/* CORE COLOR TOKENS */ +/* ================= */ + +:root { + + /* BLACK & WHITE */ + --color-black: #000000; + --color-white: #ffffff; + + /* ─── Red ─── */ + --color-red-25: #fff5f5; + --color-red-50: #ffe5e5; + --color-red-100: #ffcccc; + --color-red-200: #ff9999; + --color-red-300: #ff6666; + --color-red-400: #ff3333; + --color-red-500: #ff0000; + --color-red-600: #e50000; + --color-red-700: #cc0000; + --color-red-800: #990000; + --color-red-900: #660000; + --color-red-950: #330000; + --color-red-975: #1a0000; + + /* ─── Blue ─── */ + --color-blue-25: #f0f0ff; + --color-blue-50: #e5e5ff; + --color-blue-100: #ccccff; + --color-blue-200: #9999ff; + --color-blue-300: #6666ff; + --color-blue-400: #3333ff; + --color-blue-500: #0000ff; + --color-blue-600: #0000e5; + --color-blue-700: #0000cc; + --color-blue-800: #000099; + --color-blue-900: #000066; + --color-blue-950: #000033; + --color-blue-975: #00001a; + + /* ─── Cyan ─── */ + --color-cyan-25: #f0fcff; + --color-cyan-50: #e5f9ff; + --color-cyan-100: #ccf4ff; + --color-cyan-200: #99e9ff; + --color-cyan-300: #66deff; + --color-cyan-400: #33d3ff; + --color-cyan-500: #00c8ff; + --color-cyan-600: #00b4e5; + --color-cyan-700: #00a0cc; + --color-cyan-800: #007899; + --color-cyan-900: #005066; + --color-cyan-950: #002833; + --color-cyan-975: #00141a; + + /* ─── Gray ─── */ + --color-gray-25: #fafafa; + --color-gray-50: #f7f7f7; + --color-gray-100: #f5f5f5; + --color-gray-200: #e6e6e6; + --color-gray-300: #cccccc; + --color-gray-400: #b3b3b3; + --color-gray-500: #999999; + --color-gray-600: #808080; + --color-gray-700: #666666; + --color-gray-800: #4d4d4d; + --color-gray-900: #333333; + --color-gray-950: #1a1a1a; + --color-gray-975: #0d0d0d; + + /* ─── Green ─── */ + --color-green-25: #f0fff0; + --color-green-50: #e5ffe5; + --color-green-100: #ccffcc; + --color-green-200: #99ff99; + --color-green-300: #66ff66; + --color-green-400: #33ff33; + --color-green-500: #00ff00; + --color-green-600: #00e500; + --color-green-700: #00c200; + --color-green-800: #009900; + --color-green-900: #006600; + --color-green-950: #003300; + --color-green-975: #001a00; + + /* ─── Magenta ─── */ + --color-magenta-25: #fff5ff; + --color-magenta-50: #fff0ff; + --color-magenta-100: #ffe5ff; + --color-magenta-200: #ffccff; + --color-magenta-300: #ff99ff; + --color-magenta-400: #ff66ff; + --color-magenta-500: #ff33ff; + --color-magenta-600: #e500e5; + --color-magenta-700: #cc00cc; + --color-magenta-800: #990099; + --color-magenta-900: #660066; + --color-magenta-950: #330033; + --color-magenta-975: #1a001a; + + /* ─── Yellow ─── */ + --color-yellow-25: #fffdf0; + --color-yellow-50: #fffbe5; + --color-yellow-100: #fff7cc; + --color-yellow-200: #ffef99; + --color-yellow-300: #ffe766; + --color-yellow-400: #ffdf33; + --color-yellow-500: #ffd700; + --color-yellow-600: #e5c100; + --color-yellow-700: #ccac00; + --color-yellow-800: #998100; + --color-yellow-900: #665600; + --color-yellow-950: #332b00; + --color-yellow-975: #1a1600; +} + +/* ================= */ +/* SEMANTIC COLORS */ +/* ================= */ + +:root { + + /* ─── Text ─── */ + --color-text-default: var(--color-gray-950); + --color-text-secondary: var(--color-gray-800); + --color-text-placeholder: var(--color-gray-500); + --color-text-disabled: var(--color-gray-400); + --color-text-suggestion: var(--color-magenta-800); + --color-text-on-color: var(--color-white); + + /* ─── Focus ─── */ + --color-focus-light: var(--color-cyan-700); + --color-focus-dark: var(--color-cyan-500); + + /* ─── Background ─── */ + --color-bg-default: var(--color-white); + --color-bg-disabled: var(--color-gray-400); + + /* ─── Border ─── */ + --color-border-information: var(--color-cyan-800); + --color-border-success: var(--color-green-800); + --color-border-warning: var(--color-yellow-500); + --color-border-danger: var(--color-red-500); + --color-border-suggestion: var(--color-magenta-800); + + /* ─── Icon ─── */ + --color-icon-information: var(--color-cyan-800); + --color-icon-success: var(--color-green-800); + --color-icon-warning: var(--color-black); + --color-icon-danger: var(--color-red-500); + --color-icon-suggestion: var(--color-magenta-800); + +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/variables/corners.css b/web/app/themes/mitlib-parent/css/v2/variables/corners.css new file mode 100644 index 00000000..38c65c40 --- /dev/null +++ b/web/app/themes/mitlib-parent/css/v2/variables/corners.css @@ -0,0 +1,16 @@ +/* ============== */ +/* SPACING TOKENS */ +/* ============== */ + +/* These tokens preserve the appropriate ratios of spacing comapred to our base spacing unit */ + +:root { + --radius-none: 0; + --radius-xs: 2px; + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-2xl: 24px; + --radius-circle: 100%; +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/variables/layout.css b/web/app/themes/mitlib-parent/css/v2/variables/layout.css new file mode 100644 index 00000000..e69de29b diff --git a/web/app/themes/mitlib-parent/css/v2/variables/shadows.css b/web/app/themes/mitlib-parent/css/v2/variables/shadows.css new file mode 100644 index 00000000..e69de29b diff --git a/web/app/themes/mitlib-parent/css/v2/variables/spacing.css b/web/app/themes/mitlib-parent/css/v2/variables/spacing.css new file mode 100644 index 00000000..baa1bf0e --- /dev/null +++ b/web/app/themes/mitlib-parent/css/v2/variables/spacing.css @@ -0,0 +1,34 @@ +/* ============== */ +/* SPACING TOKENS */ +/* ============== */ + +/* These tokens preserve the appropriate ratios of spacing comapred to our base spacing unit */ + +/* BASE TOKEN SCALE */ +:root { + --sp-base: 4px; /* This is the base spacing unit of the scale below */ + + --sp-0: 0; + --sp-025: calc(var(--sp-base) * 0.25); /* 1px */ + --sp-050: calc(var(--sp-base) * 0.5); /* 2px */ + --sp-100: calc(var(--sp-base) * 1); /* 4px */ + --sp-150: calc(var(--sp-base) * 1.5); /* 6px */ + --sp-200: calc(var(--sp-base) * 2); /* 8px */ + --sp-300: calc(var(--sp-base) * 3); /* 12px */ + --sp-400: calc(var(--sp-base) * 4); /* 16px */ + --sp-500: calc(var(--sp-base) * 5); /* 20px */ + --sp-600: calc(var(--sp-base) * 6); /* 24px */ + --sp-800: calc(var(--sp-base) * 8); /* 32px */ + --sp-1000: calc(var(--sp-base) * 10); /* 40px */ + --sp-1200: calc(var(--sp-base) * 12); /* 48px */ + --sp-1600: calc(var(--sp-base) * 16); /* 64px */ + --sp-2000: calc(var(--sp-base) * 20); /* 80px */ + --sp-2400: calc(var(--sp-base) * 24); /* 96px */ + --sp-2800: calc(var(--sp-base) * 28); /* 112px */ + --sp-3200: calc(var(--sp-base) * 32); /* 128px */ +} + +/* SEMANTIC SPACING VALUES */ +:root { + --sp-button-group-gap: var(--sp-200); /* Defines the horizontal space between grouped buttons */ +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/variables/typography.css b/web/app/themes/mitlib-parent/css/v2/variables/typography.css new file mode 100644 index 00000000..e69de29b diff --git a/web/app/themes/mitlib-parent/functions.php b/web/app/themes/mitlib-parent/functions.php index cf08321c..5dd37e3b 100644 --- a/web/app/themes/mitlib-parent/functions.php +++ b/web/app/themes/mitlib-parent/functions.php @@ -171,6 +171,9 @@ function setup_scripts_styles() { wp_register_style( 'super-admin', get_template_directory_uri() . '/css/super-admin.css', array(), $theme_version, false ); + wp_register_style( 'v2', get_template_directory_uri() . '/css/v2/v2.css', array(), $theme_version ); + + wp_register_style( 'adobe-fonts', '//use.typekit.net/ixd2vgq.css', array(), $theme_version ); /** @@ -254,8 +257,9 @@ function setup_scripts_styles() { wp_enqueue_style( 'parent-global' ); wp_enqueue_style( 'parent-ie', get_template_directory_uri() . '/css/ie.css', array( 'parent-styles' ), '20121010' ); wp_style_add_data( 'parent-ie', 'conditional', 'lt IE 9' ); + wp_enqueue_style( 'v2' ); wp_enqueue_style( 'adobe-fonts' ); - + /** * Conditionally enqueue assets. */ From bac2bd850f23f0b109ac620611047d121df8b9c8 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 22 Jun 2026 08:24:17 -0400 Subject: [PATCH 04/13] Moved v2 styles out of old layout partial into new v2 --- .../css/scss/partials/_layout.scss | 136 +----------------- .../mitlib-parent/css/v2/pages/home.css | 109 ++++++++++++++ .../mitlib-parent/css/v2/variables/layout.css | 16 +++ 3 files changed, 126 insertions(+), 135 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss b/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss index 6ee30933..a80400d9 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_layout.scss @@ -306,138 +306,4 @@ html.no-js .js-hidden { display: table; clear: both; } -} - -/* ==================== */ -/* V2 Layout Experiment */ -/* ==================== */ - -// Layout variables -:root { - --content-side-margins: 32px; - - @media only screen and (max-width: 720px) { - --content-side-margins: 24px; - } - - @media only screen and (max-width: 480px) { - --content-side-margins: 16px; - } - - --actual-max-width: 1280px; // What we want the max width to work out to, margins included - --content-max-width: calc(var(--actual-max-width) - (var(--content-side-margins) * 2)); - - --content-section-vertical-padding: 48px; -} - -// Changes that should only apply to V2 pages (.v2-page body class) -body.v2-page { - background-color: #000; - - #content { - background-color: #fff; - } - - // Adjustments to navigation - header.header-main { - > nav:first-child { - display: none; - - @media only screen and (max-width: 569px) { - display: block; - } - - } - - .header-left, .header-right { - display: flex; - } - - .header-right { - gap: 32px; - - @media only screen and (max-width: 569px) { - gap: 16px; - - a.hidden-non-mobile { - margin-left: 0; - margin-right: 0; - } - } - } - - h1.name-site {margin-left: 0;} - } - -} - -// START: New layout rules for V2 page templates -.wrap-page.full-width { - width: 100%; - max-width: 100%; -} - -// Outer block wrappers for all content blocks -.header-wrapper, .content-wrapper, .footer-wrapper, main#content > section { - display: flex; - justify-content: center; - width: 100%; -} - -.header-wrapper { - background-color: #000; - - > header { - max-width: var(--content-max-width); - padding-left: calc(var(--content-side-margins) - 8px); - padding-right: calc(var(--content-side-margins) - 8px); - } - - .header-right { - justify-content: flex-end; - flex-grow: 1; - } - -} - -.footer-wrapper { - background-color: #000; - - > footer { - //max-width: var(--content-max-width); - } - - .footer-main, .footer-info-institute { - padding-left: var(--content-side-margins); - padding-right: var(--content-side-margins); - max-width: var(--content-max-width); - } - - .links-all { - gap: 32px; - - div.flex-item { - margin-right: 0; - flex-grow: 1; - } - - } - -} - -main#content > section { - padding-top: var(--content-section-vertical-padding); - padding-bottom: var(--content-section-vertical-padding); - - .content-wrapper { - max-width: var(--content-max-width); - text-align: left; - justify-content: flex-start; - - padding-left: var(--content-side-margins); - padding-right: var(--content-side-margins); - } - -} - -// END: New layout rules for V2 page templates \ No newline at end of file +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css index e69de29b..eca372cc 100644 --- a/web/app/themes/mitlib-parent/css/v2/pages/home.css +++ b/web/app/themes/mitlib-parent/css/v2/pages/home.css @@ -0,0 +1,109 @@ +/* Changes that should only apply to V2 pages (.v2-page body class) */ +body.v2-page { + background-color: #000; + + #content { + background-color: #fff; + } + + /* Adjustments to navigation */ + header.header-main { + > nav:first-child { + display: none; + + @media only screen and (max-width: 569px) { + display: block; + } + + } + + .header-left, .header-right { + display: flex; + } + + .header-right { + gap: 32px; + + @media only screen and (max-width: 569px) { + gap: 16px; + + a.hidden-non-mobile { + margin-left: 0; + margin-right: 0; + } + } + } + + h1.name-site {margin-left: 0;} + } + +} + +/* START: New layout rules for V2 page templates */ +.wrap-page.full-width { + width: 100%; + max-width: 100%; +} + +/* Outer block wrappers for all content blocks */ +.header-wrapper, .content-wrapper, .footer-wrapper, main#content > section { + display: flex; + justify-content: center; + width: 100%; +} + +.header-wrapper { + background-color: #000; + + > header { + max-width: var(--content-max-width); + padding-left: calc(var(--content-side-margins) - 8px); + padding-right: calc(var(--content-side-margins) - 8px); + } + + .header-right { + justify-content: flex-end; + flex-grow: 1; + } + +} + +.footer-wrapper { + background-color: #000; + + > footer { + //max-width: var(--content-max-width); + } + + .footer-main, .footer-info-institute { + padding-left: var(--content-side-margins); + padding-right: var(--content-side-margins); + max-width: var(--content-max-width); + } + + .links-all { + gap: 32px; + + div.flex-item { + margin-right: 0; + flex-grow: 1; + } + + } + +} + +main#content > section { + padding-top: var(--content-section-vertical-padding); + padding-bottom: var(--content-section-vertical-padding); + + .content-wrapper { + max-width: var(--content-max-width); + text-align: left; + justify-content: flex-start; + + padding-left: var(--content-side-margins); + padding-right: var(--content-side-margins); + } + +} diff --git a/web/app/themes/mitlib-parent/css/v2/variables/layout.css b/web/app/themes/mitlib-parent/css/v2/variables/layout.css index e69de29b..da558acf 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/layout.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/layout.css @@ -0,0 +1,16 @@ +:root { + --content-side-margins: 32px; + + --actual-max-width: 1280px; /* What we want the max width to work out to, margins included */ + --content-max-width: calc(var(--actual-max-width) - (var(--content-side-margins) * 2)); + + --content-section-vertical-padding: 48px; +} + +@media only screen and (max-width: 720px) { + :root{--content-side-margins: 24px;} +} + +@media only screen and (max-width: 480px) { + :root{--content-side-margins: 16px;} +} \ No newline at end of file From c74e78a6030cc366d53e50304db37a00bf63e2ac Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 22 Jun 2026 08:33:03 -0400 Subject: [PATCH 05/13] Split homepage, header, footer styles into appropriate css files --- .../mitlib-parent/css/v2/pages/home.css | 78 +------------------ .../mitlib-parent/css/v2/partials/footer.css | 31 ++++++++ .../mitlib-parent/css/v2/partials/header.css | 53 +++++++++++++ 3 files changed, 87 insertions(+), 75 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css index eca372cc..5638f05a 100644 --- a/web/app/themes/mitlib-parent/css/v2/pages/home.css +++ b/web/app/themes/mitlib-parent/css/v2/pages/home.css @@ -1,40 +1,9 @@ /* Changes that should only apply to V2 pages (.v2-page body class) */ body.v2-page { - background-color: #000; + background-color: var(--color-black); #content { - background-color: #fff; - } - - /* Adjustments to navigation */ - header.header-main { - > nav:first-child { - display: none; - - @media only screen and (max-width: 569px) { - display: block; - } - - } - - .header-left, .header-right { - display: flex; - } - - .header-right { - gap: 32px; - - @media only screen and (max-width: 569px) { - gap: 16px; - - a.hidden-non-mobile { - margin-left: 0; - margin-right: 0; - } - } - } - - h1.name-site {margin-left: 0;} + background-color: var(--color-white); } } @@ -46,53 +15,12 @@ body.v2-page { } /* Outer block wrappers for all content blocks */ -.header-wrapper, .content-wrapper, .footer-wrapper, main#content > section { +.content-wrapper, main#content > section { display: flex; justify-content: center; width: 100%; } -.header-wrapper { - background-color: #000; - - > header { - max-width: var(--content-max-width); - padding-left: calc(var(--content-side-margins) - 8px); - padding-right: calc(var(--content-side-margins) - 8px); - } - - .header-right { - justify-content: flex-end; - flex-grow: 1; - } - -} - -.footer-wrapper { - background-color: #000; - - > footer { - //max-width: var(--content-max-width); - } - - .footer-main, .footer-info-institute { - padding-left: var(--content-side-margins); - padding-right: var(--content-side-margins); - max-width: var(--content-max-width); - } - - .links-all { - gap: 32px; - - div.flex-item { - margin-right: 0; - flex-grow: 1; - } - - } - -} - main#content > section { padding-top: var(--content-section-vertical-padding); padding-bottom: var(--content-section-vertical-padding); diff --git a/web/app/themes/mitlib-parent/css/v2/partials/footer.css b/web/app/themes/mitlib-parent/css/v2/partials/footer.css index e69de29b..76e4e19d 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/footer.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/footer.css @@ -0,0 +1,31 @@ +body.v2-page { + + .footer-wrapper { + background-color: var(--color-black); + display: flex; + justify-content: center; + width: 100%; + + > footer { + //max-width: var(--content-max-width); + } + + .footer-main, .footer-info-institute { + padding-left: var(--content-side-margins); + padding-right: var(--content-side-margins); + max-width: var(--content-max-width); + } + + .links-all { + gap: var(--sp-800); + + div.flex-item { + margin-right: 0; + flex-grow: 1; + } + + } + + } + +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/partials/header.css b/web/app/themes/mitlib-parent/css/v2/partials/header.css index e69de29b..240a1eff 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/header.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/header.css @@ -0,0 +1,53 @@ +body.v2-page { + + /* Adjustments to existing navigation */ + header.header-main { + > nav:first-child { + display: none; + + @media only screen and (max-width: 569px) { + display: block; + } + + } + + .header-left, .header-right { + display: flex; + } + + .header-right { + gap: var(--sp-800); + + @media only screen and (max-width: 569px) { + gap: var(--sp-400); + + a.hidden-non-mobile { + margin-left: 0; + margin-right: 0; + } + } + } + + h1.name-site {margin-left: 0;} + } + + .header-wrapper { + background-color: var(--color-black); + display: flex; + justify-content: center; + width: 100%; + + > header { + max-width: var(--content-max-width); + padding-left: calc(var(--content-side-margins) - 8px); + padding-right: calc(var(--content-side-margins) - 8px); + } + + .header-right { + justify-content: flex-end; + flex-grow: 1; + } + + } + +} \ No newline at end of file From 2b0d17debcb914fde00896dce9a8b4db1cb665ef Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 22 Jun 2026 08:52:27 -0400 Subject: [PATCH 06/13] Made v2 styles conditional to v2 template to simplify style rules --- .../mitlib-parent/css/v2/pages/home.css | 3 - .../mitlib-parent/css/v2/partials/footer.css | 42 +++++----- .../mitlib-parent/css/v2/partials/header.css | 76 +++++++++---------- web/app/themes/mitlib-parent/functions.php | 7 +- web/app/themes/mitlib-parent/header-v2.php | 8 +- 5 files changed, 66 insertions(+), 70 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css index 5638f05a..67555b5c 100644 --- a/web/app/themes/mitlib-parent/css/v2/pages/home.css +++ b/web/app/themes/mitlib-parent/css/v2/pages/home.css @@ -1,4 +1,3 @@ -/* Changes that should only apply to V2 pages (.v2-page body class) */ body.v2-page { background-color: var(--color-black); @@ -8,13 +7,11 @@ body.v2-page { } -/* START: New layout rules for V2 page templates */ .wrap-page.full-width { width: 100%; max-width: 100%; } -/* Outer block wrappers for all content blocks */ .content-wrapper, main#content > section { display: flex; justify-content: center; diff --git a/web/app/themes/mitlib-parent/css/v2/partials/footer.css b/web/app/themes/mitlib-parent/css/v2/partials/footer.css index 76e4e19d..b229d17d 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/footer.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/footer.css @@ -1,29 +1,25 @@ -body.v2-page { - - .footer-wrapper { - background-color: var(--color-black); - display: flex; - justify-content: center; - width: 100%; - - > footer { - //max-width: var(--content-max-width); - } - - .footer-main, .footer-info-institute { - padding-left: var(--content-side-margins); - padding-right: var(--content-side-margins); - max-width: var(--content-max-width); - } +.footer-wrapper { + background-color: var(--color-black); + display: flex; + justify-content: center; + width: 100%; + + > footer { + //max-width: var(--content-max-width); + } - .links-all { - gap: var(--sp-800); + .footer-main, .footer-info-institute { + padding-left: var(--content-side-margins); + padding-right: var(--content-side-margins); + max-width: var(--content-max-width); + } - div.flex-item { - margin-right: 0; - flex-grow: 1; - } + .links-all { + gap: var(--sp-800); + div.flex-item { + margin-right: 0; + flex-grow: 1; } } diff --git a/web/app/themes/mitlib-parent/css/v2/partials/header.css b/web/app/themes/mitlib-parent/css/v2/partials/header.css index 240a1eff..62328b59 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/header.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/header.css @@ -1,53 +1,49 @@ -body.v2-page { +/* Adjustments to existing navigation */ +header.header-main { + > nav:first-child { + display: none; - /* Adjustments to existing navigation */ - header.header-main { - > nav:first-child { - display: none; + @media only screen and (max-width: 569px) { + display: block; + } - @media only screen and (max-width: 569px) { - display: block; - } - - } - - .header-left, .header-right { - display: flex; - } + } - .header-right { - gap: var(--sp-800); + .header-left, .header-right { + display: flex; + } - @media only screen and (max-width: 569px) { - gap: var(--sp-400); + .header-right { + gap: var(--sp-800); - a.hidden-non-mobile { - margin-left: 0; - margin-right: 0; - } - } - } + @media only screen and (max-width: 569px) { + gap: var(--sp-400); - h1.name-site {margin-left: 0;} - } + a.hidden-non-mobile { + margin-left: 0; + margin-right: 0; + } + } + } - .header-wrapper { - background-color: var(--color-black); - display: flex; - justify-content: center; - width: 100%; + h1.name-site {margin-left: 0;} +} - > header { - max-width: var(--content-max-width); - padding-left: calc(var(--content-side-margins) - 8px); - padding-right: calc(var(--content-side-margins) - 8px); - } +.header-wrapper { + background-color: var(--color-black); + display: flex; + justify-content: center; + width: 100%; - .header-right { - justify-content: flex-end; - flex-grow: 1; - } + > header { + max-width: var(--content-max-width); + padding-left: calc(var(--content-side-margins) - 8px); + padding-right: calc(var(--content-side-margins) - 8px); + } + .header-right { + justify-content: flex-end; + flex-grow: 1; } } \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/functions.php b/web/app/themes/mitlib-parent/functions.php index 5dd37e3b..e32afd67 100644 --- a/web/app/themes/mitlib-parent/functions.php +++ b/web/app/themes/mitlib-parent/functions.php @@ -257,9 +257,14 @@ function setup_scripts_styles() { wp_enqueue_style( 'parent-global' ); wp_enqueue_style( 'parent-ie', get_template_directory_uri() . '/css/ie.css', array( 'parent-styles' ), '20121010' ); wp_style_add_data( 'parent-ie', 'conditional', 'lt IE 9' ); - wp_enqueue_style( 'v2' ); + wp_enqueue_style( 'adobe-fonts' ); + // Conditonally load v2 styles for only pages with the v2 header + if (is_page_template( 'templates/page-home-v2.php' )) { + wp_enqueue_style( 'v2' ); + } + /** * Conditionally enqueue assets. */ diff --git a/web/app/themes/mitlib-parent/header-v2.php b/web/app/themes/mitlib-parent/header-v2.php index 19715469..18bc294a 100644 --- a/web/app/themes/mitlib-parent/header-v2.php +++ b/web/app/themes/mitlib-parent/header-v2.php @@ -1,9 +1,11 @@ section and everything up till div#breadcrumb * + * Updated header template originating during the homepage redesign project. + * * @package MITlib_Parent * @since 0.0.1 */ From 78582ffe17323c14e469887fa1d6bec01a37562a Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 22 Jun 2026 09:48:05 -0400 Subject: [PATCH 07/13] Conditional style sheets for v2 and adding FontAwesome latest version via CDN --- web/app/themes/mitlib-parent/functions.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/app/themes/mitlib-parent/functions.php b/web/app/themes/mitlib-parent/functions.php index e32afd67..9805865e 100644 --- a/web/app/themes/mitlib-parent/functions.php +++ b/web/app/themes/mitlib-parent/functions.php @@ -176,6 +176,8 @@ function setup_scripts_styles() { wp_register_style( 'adobe-fonts', '//use.typekit.net/ixd2vgq.css', array(), $theme_version ); + wp_register_style( 'fontawesome', '//cdn.libraries.mit.edu/files/fontawesome/7.1.0/css/all.min.css', array(), $theme_version ); + /** * Register javascript. */ @@ -263,6 +265,7 @@ function setup_scripts_styles() { // Conditonally load v2 styles for only pages with the v2 header if (is_page_template( 'templates/page-home-v2.php' )) { wp_enqueue_style( 'v2' ); + wp_enqueue_style( 'fontawesome' ); } /** From e1e13454959051a18d8d69684056e897e73e908e Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 22 Jun 2026 14:54:00 -0400 Subject: [PATCH 08/13] Rough mock of static content, missing featured section --- .../mitlib-parent/css/v2/pages/home.css | 268 +++++++++++++++++- .../mitlib-parent/css/v2/partials/footer.css | 2 + .../mitlib-parent/css/v2/partials/header.css | 11 +- .../mitlib-parent/css/v2/variables/color.css | 6 +- .../mitlib-parent/css/v2/variables/layout.css | 8 + .../css/v2/variables/typography.css | 97 +++++++ .../mitlib-parent/templates/page-home-v2.php | 88 +++--- 7 files changed, 440 insertions(+), 40 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css index 67555b5c..8cab7c62 100644 --- a/web/app/themes/mitlib-parent/css/v2/pages/home.css +++ b/web/app/themes/mitlib-parent/css/v2/pages/home.css @@ -1,10 +1,12 @@ body.v2-page { background-color: var(--color-black); + color: var(--color-text-default); #content { background-color: var(--color-white); } + } .wrap-page.full-width { @@ -13,12 +15,11 @@ body.v2-page { } .content-wrapper, main#content > section { - display: flex; - justify-content: center; + margin: 0 auto; width: 100%; } -main#content > section { +#content > section { padding-top: var(--content-section-vertical-padding); padding-bottom: var(--content-section-vertical-padding); @@ -32,3 +33,264 @@ main#content > section { } } + +/* ================ */ +/* HERO WITH SEARCH */ +/* ================ */ +#content > #hero { + padding: 0; + color: var(--color-text-on-color); + + .overlay { + padding-top: calc(var(--content-section-vertical-padding) + var(--sp-600)); + padding-bottom: var(--content-section-vertical-padding); + background: linear-gradient(90deg, #1A1A1A 24.52%, rgba(26, 26, 26, 0.50) 70.67%, rgba(26, 26, 26, 0.00) 100%); + } + + .hero-content { + max-width: 800px; + } +} + +/* Style for search box */ +#search-form { + margin: 0; + padding-bottom: 24px; + + label { + font-size: 1.8rem; + margin-bottom: 12px; + font-weight: var(--fw-medium); + display: block; + line-height: 1; + color: var(--color-text-oncolor); + } + + .form-wrapper { + display: flex; + gap: 8px; + + input, button { + padding: 12px 20px; + border-radius: 0; + font-size: 1.8rem; + font-weight: var(--fw-medium); + + margin: 0; + + &:hover:not(:focus) { + outline: 2px solid var(--color-gray-700); + outline-offset: 2px; + } + } + + .search-input-wrapper { + flex-grow: 1; + position: relative; + + i { + position: absolute; + top: 13px; + left: 12px; + font-size: 20px; + color: var(--color-icon-primary); + pointer-events: none; + } + + input { + color: var(--color-black); + border: none; + width: 100%; + padding-left: 46px; + padding-right: 48px; + } + + #clear-search { + display: none; + position: absolute; + top: 8px; + right: 8px; + height: 32px; + width: 32px; + background: none; + color: var(--color-icon-primary); + font-size: 0; + padding: 2px; + border-radius: 100%; + border: 1px solid var(--color-border-default); + cursor: pointer; + + &:hover { + background-color: var(--color-blue-25); + color: var(--color-blue-500); + border-color: var(--color-blue-500); + outline: none; + } + + &::before { + content: '\f00d'; + font-family: FontAwesome; + font-size: 16px; + } + } + } + + button { + background-color: var(--color-red-600); + border: none; + } + + @media (max-width: var(--bp-xs)) { + flex-direction: column; + } + + } + + .form-links { + padding-top: 12px; + + a { + color: var(--color-white); + text-decoration: none; + border-bottom: 1px solid var(--color-red-500); + font-size: 1.4rem; + } + + } + +} + +/* ============= */ +/* TODAY'S HOURS */ +/* ============= */ +section#todays-hours { + background-color: var(--color-gray-900); + color: var(--color-text-on-color); + padding-top: var(--sp-300); + padding-bottom: var(--sp-300); + + h2, ol, li {font-size: var(--font-size-md);} + + h2 { + flex-shrink: 0; + margin-bottom: 0; + } + + ol { + list-style: none; + display: flex; + + li { + flex: 0 1 auto; + border-left: 1px solid var(--color-gray-800); + padding-left: var(--sp-600); + + &:last-child { + border-right: 1px solid var(--color-gray-800); + } + + span { + display: inline-block; + min-width: 120px; + + &.libary-name { + font-weight: var(--font-weight-medium); + } + &.libary-hours, &.libary-study { + font-size: var(--font-size-sm); + } + &.libary-study { + color: var(--color-text-disabled); + } + } + } + } + + a { + color: var(--color-text-on-color); + flex-shrink: 0; + text-decoration-color: var(--color-red-500); + } + + .content-wrapper { + display: flex; + align-items: center; + gap: var(--sp-600); + } +} + +/* =================== */ +/* USING THE LIBRARIES */ +/* =================== */ + +#using-the-libraries { + + .box-wrapper { + display: flex; + flex-direction: row; + gap: var(--sp-600); + } + + .option-boxes > div, .ask-us-box { + background-color: var(--color-bg-subtle); + border-top: 3px solid var(--color-gray-300); + display: flex; + gap: var(--sp-400); + padding: var(--sp-500) var(--sp-500); + + i { + background-color: var(--color-gray-200); + width: 48px; + height: 48px; + flex: 0 0 48px; + padding: 12px; + border-radius: var(--radius-circle); + + &::before { + font-size: var(--font-size-xl); + } + } + + + h3 { + font-size: var(--font-size-lg); + margin-bottom: var(--sp-100); + } + + p { + font-size: var(--font-size-md); + color: var(--color-text-secondary); + } + } + + .option-boxes { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--sp-600); + } + + .ask-us-box { + border-top-color: var(--color-blue-400); + flex-direction: column; + } +} + +/* ================= */ +/* FEATURED & EVENTS */ +/* ================= */ +#featured-and-events { + background-color: var(--color-bg-secondary); +} + +/* =================== */ +/* FEATURED COLLECTION */ +/* =================== */ +#featured-collection { + + .content-wrapper { + display: flex; + gap: var(--sp-1200); + align-items: center; + } + +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/partials/footer.css b/web/app/themes/mitlib-parent/css/v2/partials/footer.css index b229d17d..8e749ae7 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/footer.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/footer.css @@ -24,4 +24,6 @@ } + a {text-decoration: none;} + } \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/partials/header.css b/web/app/themes/mitlib-parent/css/v2/partials/header.css index 62328b59..1d04b2b5 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/header.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/header.css @@ -26,7 +26,16 @@ header.header-main { } } - h1.name-site {margin-left: 0;} + h1.name-site { + margin-left: 0; + } + + a {text-decoration: none;} + a.arrow-right { + &:after { + content: "\f061"; + } + } } .header-wrapper { diff --git a/web/app/themes/mitlib-parent/css/v2/variables/color.css b/web/app/themes/mitlib-parent/css/v2/variables/color.css index cc10f9ac..3cb83854 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/color.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/color.css @@ -114,9 +114,9 @@ --color-yellow-975: #1a1600; } -/* ================= */ +/* =============== */ /* SEMANTIC COLORS */ -/* ================= */ +/* =============== */ :root { @@ -134,6 +134,8 @@ /* ─── Background ─── */ --color-bg-default: var(--color-white); + --color-bg-subtle: var(--color-gray-25); + --color-bg-secondary: var(--color-gray-100); --color-bg-disabled: var(--color-gray-400); /* ─── Border ─── */ diff --git a/web/app/themes/mitlib-parent/css/v2/variables/layout.css b/web/app/themes/mitlib-parent/css/v2/variables/layout.css index da558acf..6945de6d 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/layout.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/layout.css @@ -1,4 +1,12 @@ :root { + + /* Breakpoints */ + --bp-xs: 375px; + --bp-sm: 480px; + --bp-md: 720px; + --bp-lg: 1024px; + + /* Container calculations */ --content-side-margins: 32px; --actual-max-width: 1280px; /* What we want the max width to work out to, margins included */ diff --git a/web/app/themes/mitlib-parent/css/v2/variables/typography.css b/web/app/themes/mitlib-parent/css/v2/variables/typography.css index e69de29b..d5a2300c 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/typography.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/typography.css @@ -0,0 +1,97 @@ +/* ===================== */ +/* RESET V1 TYPE STYLING */ +/* ===================== */ + +h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; +} + +/* =================== */ +/* START OF V2 STYLING */ +/* =================== */ + +/* DESIGN SYSTEM TOKENS */ +:root { + --font-family-base: neue-haas-grotesk-text, Helvetica, Arial, sans-serif; + --font-family-heading: neue-haas-grotesk-display, Helvetica, Arial, sans-serif; + + /* Font Sizes */ + --font-size-base: 1.6rem; /* 16px */ + + --font-size-3xl: 4.0rem; /* 40px */ + --font-size-2xl: 3.2rem; /* 32px */ + --font-size-xl: 2.4rem; /* 24px */ + --font-size-lg: 2.0rem; /* 20px */ + --font-size-md: 1.6rem; /* 16px */ + --font-size-sm: 1.4rem; /* 14px */ + --font-size-xs: 1.2rem; /* 12px */ + --font-size-2xs: 1.1rem; /* 11px */ + --font-size-3xs: 1.0rem; /* 10px */ + + /* Font Weights */ + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Line Heights */ + --font-lh-base: 1.25; +} + +/* APPLYING TO V2 THEME */ +:root { + font-size: 62.5%; /* Sets 1rem to equal 10px, making it easier to calculate sizes based on a 10px base */ +} + +body { + font-family: var(--font-family-base); + font-size: var(--font-size-base); +} + +/* Baseline Heading Styles */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-family-heading); + font-weight: 600; + line-height: 1.25 +} + +h1 { + font-size: var(--font-size-3xl); /* 40px */ +} + +h2 { + font-size: var(--font-size-2xl); /* 32px */ + margin-bottom: var(--sp-600); +} + +h3 { + font-size: var(--font-size-xl); /* 24px */ +} + +h4 { + font-size: var(--font-size-lg); /* 20px */ +} + +h5 { + font-size: var(--font-size-md); /* 16px */ +} + +h6 { + font-size: var(--font-size-sm); /* 14px */ +} + +p { + line-height: 1.35; +} + +a { + text-decoration: underline; + text-decoration-color: var(--color-blue-500); + text-underline-offset: 0.4rem; + font-weight: var(--font-weight-medium); + + &:hover { + color: var(--color-blue-500); + } +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/templates/page-home-v2.php b/web/app/themes/mitlib-parent/templates/page-home-v2.php index 68194e6f..1c29a742 100644 --- a/web/app/themes/mitlib-parent/templates/page-home-v2.php +++ b/web/app/themes/mitlib-parent/templates/page-home-v2.php @@ -15,48 +15,64 @@
-
+ + +
+
-

Welcome to the MIT Libraries

-
-
+

Today's hours

  1. Hayden Library 9am – 9pm today - 24/7 study + + + 24/7 study +
  2. Rotch Library 9am – 9pm today - 24/7 study + + + 24/7 study +
  3. Barker Library 9am – 9pm today - 24/7 study + + + 24/7 study +
  4. Lewis Music Library @@ -64,38 +80,39 @@
- See all locations and hours + See all locations and hours
-
+

Using the Libraries

+
-

Find a study space

 +

Find a study space

Quiet and group spaces - many available 24/7

-

Find a study space

 +

Find a study space

Quiet and group spaces - many available 24/7

-

Find a study space

 +

Find a study space

Quiet and group spaces - many available 24/7

-

Find a study space

 +

Find a study space

Quiet and group spaces - many available 24/7

@@ -107,16 +124,19 @@

Get help via email, chat and more.

See options
+
-
+ -
+
From 0f5ab88e621dfba52c2cf8e9f643332feb3747c0 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 23 Jun 2026 11:39:50 -0400 Subject: [PATCH 10/13] Fix style bugs introduced by new type scale variables in footer --- .../mitlib-parent/css/v2/partials/footer.css | 27 +++++++++++++++++++ .../mitlib-parent/templates/page-home-v2.php | 20 +++++++------- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/v2/partials/footer.css b/web/app/themes/mitlib-parent/css/v2/partials/footer.css index 8e749ae7..b3c12a2f 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/footer.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/footer.css @@ -14,6 +14,8 @@ max-width: var(--content-max-width); } + + .links-all { gap: var(--sp-800); @@ -26,4 +28,29 @@ a {text-decoration: none;} + @media only screen and (min-width: 569px) { + .footer-main .links-primary {margin-left: 184px;} + } + + @media only screen and (max-width: 569px) { + footer {width: 100%;} + + .footer-main.flex-container { + padding-left: 0; + padding-right: 0; + } + + .footer-main > div { + width: 100%; + } + + .links-primary.flex-container { + margin-top: var(--sp-600); + padding-top: var(--sp-800); + padding-bottom: var(--sp-800); + padding-left: var(--sp-500); + } + } + + } \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/templates/page-home-v2.php b/web/app/themes/mitlib-parent/templates/page-home-v2.php index 161ad166..daed2d90 100644 --- a/web/app/themes/mitlib-parent/templates/page-home-v2.php +++ b/web/app/themes/mitlib-parent/templates/page-home-v2.php @@ -96,29 +96,29 @@
- +
-

Find a study space

-

Quiet and group spaces - many available 24/7

+

Get materials

+

Learn how to access articles, books, and more

- +
-

Find a study space

-

Quiet and group spaces - many available 24/7

+

Explore research guides & librarians

+

Guides and librarians for every research interest.

- +
-

Find a study space

-

Quiet and group spaces - many available 24/7

+

Schedule a research consultation

+

For complex research questions

- +

Ask us

Get help via email, chat and more.

From 28d9e193a2dd5b9988dac34391c9a26351fb017a Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 23 Jun 2026 16:13:08 -0400 Subject: [PATCH 11/13] Fixing bugs introduced with new base font size scale in header --- .../mitlib-parent/css/v2/partials/header.css | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/web/app/themes/mitlib-parent/css/v2/partials/header.css b/web/app/themes/mitlib-parent/css/v2/partials/header.css index 198f6e09..cbd7e8a0 100644 --- a/web/app/themes/mitlib-parent/css/v2/partials/header.css +++ b/web/app/themes/mitlib-parent/css/v2/partials/header.css @@ -24,6 +24,10 @@ header.header-main { margin-right: 0; } } + + nav h2 { + margin-bottom: 0; + } } h1.name-site { @@ -31,6 +35,53 @@ header.header-main { } a {text-decoration: none;} + + + /* Desktop style fixes */ + @media only screen and (min-width: 569px) { + /* Style fixes to override old logo sizing for desktop sizes */ + .link-logo-mit { + max-width: 74px; + } + + .name-site {max-width: 104px;} + .logo-mit-lib svg {max-height: 44px;} + + /* Adjust navigation item sizing to new base font size */ + .nav-main .main-nav-link { + padding-left: var(--sp-200); + padding-right: var(--sp-200); + padding-bottom: var(--sp-500); + } + + .link-primary.small a {padding-top: 30px;} + } + + + /* Mobile style fixes */ + @media only screen and (max-width: 568px) { + + padding-left: 0 !important; + + button.menu--toggle { + width: 51px; + padding: 14.85px; + } + + .logo-mit-lib { + padding: 26px 8px 8px 8px; + } + .logo-mit-lib svg {max-height: 28px;} + + a.hidden-non-mobile { + font-size: 12px; + font-weight: 400; + padding: 6.4px; + + i {width: 100%;} + } + } + } .header-wrapper { From 815bc7883b1b1691ed1eb5a25aee18c61d577bde Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 23 Jun 2026 17:48:29 -0400 Subject: [PATCH 12/13] Button styling and responsive fixes --- .../css/v2/components/buttons.css | 28 ++++++++++++ .../mitlib-parent/css/v2/pages/home.css | 43 ++++++++++++++++++- web/app/themes/mitlib-parent/css/v2/v2.css | 8 +++- .../mitlib-parent/css/v2/variables/color.css | 29 +++++++++++++ .../mitlib-parent/css/v2/variables/layout.css | 11 +++-- .../css/v2/variables/typography.css | 15 +++---- .../mitlib-parent/templates/page-home-v2.php | 10 ++--- 7 files changed, 123 insertions(+), 21 deletions(-) create mode 100644 web/app/themes/mitlib-parent/css/v2/components/buttons.css diff --git a/web/app/themes/mitlib-parent/css/v2/components/buttons.css b/web/app/themes/mitlib-parent/css/v2/components/buttons.css new file mode 100644 index 00000000..4e0285fe --- /dev/null +++ b/web/app/themes/mitlib-parent/css/v2/components/buttons.css @@ -0,0 +1,28 @@ +a.button { + border: 1px solid var(--color-button-base-border-primary); + background-color: var(--color-button-base-bg-primary); + color: var(--color-button-base-text-primary); + border-radius: var(--border-radius-none); + display: inline-block; + padding: var(--sp-150) var(--sp-300); + text-decoration: none; + font-size: var(--font-size-md); + font-weight: var(--font-weight-medium); + + &:hover { + background-color: var(--color-button-hover-bg-primary); + border-color: var(--color-button-hover-border-primary); + color: var(--color-button-hover-text-primary); + } + + &.secondary { + border: 1px solid var(--color-button-base-border-secondary); + background-color: var(--color-button-base-bg-secondary); + color: var(--color-button-base-text-secondary); + + &:hover { + background-color: var(--color-button-hover-bg-secondary); + color: var(--color-button-hover-text-secondary); + } + } +} \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css index 9ff662f3..13fbaf42 100644 --- a/web/app/themes/mitlib-parent/css/v2/pages/home.css +++ b/web/app/themes/mitlib-parent/css/v2/pages/home.css @@ -40,6 +40,7 @@ body.v2-page { #content > #hero { padding: 0; background-size: cover; + background-position: center center; color: var(--color-text-on-color); .overlay { @@ -193,6 +194,7 @@ section#todays-hours { flex: 0 1 auto; border-left: 1px solid var(--color-gray-800); padding-left: var(--sp-600); + padding-right: var(--sp-600); &:last-child { border-right: 1px solid var(--color-gray-800); @@ -243,14 +245,14 @@ section#todays-hours { border-top: 3px solid var(--color-gray-300); display: flex; gap: var(--sp-400); - padding: var(--sp-500) var(--sp-500); + padding: var(--sp-500) var(--sp-500); i { background-color: var(--color-gray-200); width: 48px; height: 48px; flex: 0 0 48px; - padding: 12px; + padding: var(--sp-300); border-radius: var(--radius-circle); &::before { @@ -280,6 +282,21 @@ section#todays-hours { border-top-color: var(--color-blue-400); flex-direction: column; } + + /* Adjust layout to stack for smaller screens */ + @media only screen and (max-width: 800px) { + .option-boxes { + grid-template-columns: 1fr; + } + + .box-wrapper { + flex-direction: column-reverse; + } + + .ask-us-box { + flex-direction: row; + } + } } /* ================= */ @@ -300,4 +317,26 @@ section#todays-hours { align-items: center; } + .featured-collection-image { + height: 320px; + max-width: 620px; + width: 100%; + background-size: cover; + background-position: center center; + } + + /* Adjust layout to stack for smaller screens */ + @media only screen and (max-width: 720px) { + .content-wrapper { + flex-direction: column; + gap: var(--sp-800); + } + + .featured-collection-image { + height: 240px; + max-width: 100%; + + } + } + } \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/v2.css b/web/app/themes/mitlib-parent/css/v2/v2.css index c58dfebf..bfec1741 100644 --- a/web/app/themes/mitlib-parent/css/v2/v2.css +++ b/web/app/themes/mitlib-parent/css/v2/v2.css @@ -10,11 +10,17 @@ @import url('variables/typography.css'); @import url('variables/layout.css'); +/* ======================== */ +/* DESIGN SYSTEM COMPONENTS */ +/* ======================== */ + +@import url('components/buttons.css'); + /* ==================== */ /* PROJECT-LEVEL STYLES */ /* ==================== */ -/* Component and template styles */ +/* Template styles */ @import url('partials/header.css'); @import url('partials/footer.css'); diff --git a/web/app/themes/mitlib-parent/css/v2/variables/color.css b/web/app/themes/mitlib-parent/css/v2/variables/color.css index 0202e949..75a3b2cd 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/color.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/color.css @@ -155,4 +155,33 @@ /* ─── Focus ─── */ --color-focus-light: var(--color-cyan-700); --color-focus-dark: var(--color-cyan-500); +} + +/* ========================= */ +/* COMPONENT-SPECIFIC COLORS */ +/* ========================= */ + +:root { +/* ─────── */ +/* Buttons */ +/* ─────── */ + +/* ─── Primary ─── */ +--color-button-base-bg-primary: var(--color-gray-950); +--color-button-base-border-primary: var(--color-gray-950); +--color-button-base-text-primary: var(--color-text-on-color); + +--color-button-hover-bg-primary: var(--color-blue-500); +--color-button-hover-border-primary: var(--color-blue-500); +--color-button-hover-text-primary: var(--color-text-on-color); + +/* ─── Secondary ─── */ +--color-button-base-bg-secondary: var(--color-bg-default); +--color-button-base-border-secondary: var(--color-blue-500); +--color-button-base-text-secondary: var(--color-text-primary); + +--color-button-hover-bg-secondary: var(--color-blue-25); +--color-button-hover-border-secondary: var(--color-blue-500); +--color-button-hover-text-secondary: var(--color-blue-500); + } \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/v2/variables/layout.css b/web/app/themes/mitlib-parent/css/v2/variables/layout.css index 6945de6d..3480a7d1 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/layout.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/layout.css @@ -1,10 +1,13 @@ :root { /* Breakpoints */ - --bp-xs: 375px; - --bp-sm: 480px; - --bp-md: 720px; - --bp-lg: 1024px; + --bp-2xs: 375px; + --bp-xs: 480px; + --bp-sm: 600px; + --bp-md: 720px; + --bp-lg: 900px; + --bp-xl: 1024px; + --bp-2xl: 1280px; /* Container calculations */ --content-side-margins: 32px; diff --git a/web/app/themes/mitlib-parent/css/v2/variables/typography.css b/web/app/themes/mitlib-parent/css/v2/variables/typography.css index a0d5db70..30e10847 100644 --- a/web/app/themes/mitlib-parent/css/v2/variables/typography.css +++ b/web/app/themes/mitlib-parent/css/v2/variables/typography.css @@ -117,13 +117,10 @@ a.link-on-dark { } } -a.arrow-right { - - &::after { - content: '\f061'; - font-family: FontAwesome; - font-size: 1.2rem; - text-decoration: none !important; - padding-left: var(--sp-100); - } +.eyebrow { + color: var(--color-text-secondary); + text-transform: uppercase; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + letter-spacing: 0.05em; } \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/templates/page-home-v2.php b/web/app/themes/mitlib-parent/templates/page-home-v2.php index daed2d90..5fd9200a 100644 --- a/web/app/themes/mitlib-parent/templates/page-home-v2.php +++ b/web/app/themes/mitlib-parent/templates/page-home-v2.php @@ -80,7 +80,7 @@ - See all locations and hours + See all locations and hours
@@ -122,7 +122,7 @@

Ask us

Get help via email, chat and more.

- See options + See options
@@ -134,14 +134,14 @@
From a64d7a7b359d41e11a5ce104d32e80827853433f Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Wed, 24 Jun 2026 08:59:41 -0400 Subject: [PATCH 13/13] Responsive hours --- .../mitlib-parent/css/v2/pages/home.css | 68 ++++++++++++++++++- .../mitlib-parent/templates/page-home-v2.php | 30 ++++---- 2 files changed, 80 insertions(+), 18 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/v2/pages/home.css b/web/app/themes/mitlib-parent/css/v2/pages/home.css index 13fbaf42..62969cb8 100644 --- a/web/app/themes/mitlib-parent/css/v2/pages/home.css +++ b/web/app/themes/mitlib-parent/css/v2/pages/home.css @@ -204,13 +204,13 @@ section#todays-hours { display: inline-block; min-width: 120px; - &.libary-name { + &.library-name { font-weight: var(--font-weight-medium); } - &.libary-hours, &.libary-study { + &.library-hours, &.library-study { font-size: var(--font-size-sm); } - &.libary-study { + &.library-study { color: var(--color-text-disabled); } } @@ -226,6 +226,68 @@ section#todays-hours { align-items: center; gap: var(--sp-600); } + + /* Responsive styles to progressively hide library hours, then stack */ + @media only screen and (max-width: 1210px) { + ol li.hour-lewis { + display: none; + } + } + + @media only screen and (max-width: 940px) { + ol li.hour-barker { + display: none; + } + } + + @media only screen and (max-width: 780px) { + padding-top: var(--sp-600); + padding-bottom: var(--sp-600); + + h2 { + color: var(--color-gray-400); + text-transform: uppercase; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + letter-spacing: 0.05em; + } + + .content-wrapper { + flex-direction: column; + align-items: flex-start; + gap: var(--sp-300); + } + + ol { + flex-direction: column; + gap: var(--sp-100); + + li { + border: none; + padding-left: 0; + padding-right: 0; + + &:last-child { + border-right: none; + } + + span.library-name { + width: 160px; + + a { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + } + } + } + + li.hour-lewis, li.hour-barker { + display: block; + } + } + + + } } /* =================== */ diff --git a/web/app/themes/mitlib-parent/templates/page-home-v2.php b/web/app/themes/mitlib-parent/templates/page-home-v2.php index 5fd9200a..7a6f9f44 100644 --- a/web/app/themes/mitlib-parent/templates/page-home-v2.php +++ b/web/app/themes/mitlib-parent/templates/page-home-v2.php @@ -51,33 +51,33 @@

Today's hours

  1. - Hayden Library - 9am – 9pm today - + Hayden Library + 9am – 9pm today + 24/7 study
    2. -
  2. - Rotch Library - 9am – 9pm today - +
  3. + Rotch Library + 9am – 9pm today + 24/7 study
    4. -
  4. - Barker Library - 9am – 9pm today - +
  5. + Barker Library + 9am – 9pm today + 24/7 study
    6. -
  6. - Lewis Music Library - 9am – 9pm today - +
  7. + Lewis Music Library + 9am – 9pm today +
See all locations and hours