From 199e1353dc32ab8b42455bea4377819bdf7c440a Mon Sep 17 00:00:00 2001 From: Mike Decker Date: Wed, 26 Jun 2024 08:50:28 -0700 Subject: [PATCH] Updated decanter and tailwind --- themes/stanford_profile_theme/.yarnrc.yml | 1 + themes/stanford_profile_theme/dist/base.css | 1014 ++++---- themes/stanford_profile_theme/package.json | 9 +- .../stanford_profile_theme.info.yml | 2 +- .../block--system-branding-block.html.twig | 8 +- ...aragraph-row--su-page-components.html.twig | 4 +- .../templates/form/input.html.twig | 30 +- .../templates/layouts/one-column.html.twig | 2 +- .../templates/layouts/three-column.html.twig | 10 +- .../templates/layouts/two-column.html.twig | 14 +- .../templates/menu/menu--main.html.twig | 2 +- .../menu/menu--secondary-nav.html.twig | 4 +- .../templates/menu/menu.html.twig | 4 +- .../templates/menu/menu_local_tasks.html.twig | 4 +- .../templates/page/global-footer.html.twig | 162 +- .../templates/page/page.html.twig | 6 +- .../patterns/pattern-events-list.html.twig | 4 +- .../patterns/pattern-localfooter.html.twig | 26 +- .../templates/region/region--help.html.twig | 2 +- themes/stanford_profile_theme/yarn.lock | 2073 +++++++++++++---- 20 files changed, 2390 insertions(+), 991 deletions(-) create mode 100644 themes/stanford_profile_theme/.yarnrc.yml diff --git a/themes/stanford_profile_theme/.yarnrc.yml b/themes/stanford_profile_theme/.yarnrc.yml new file mode 100644 index 000000000..3186f3f07 --- /dev/null +++ b/themes/stanford_profile_theme/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/themes/stanford_profile_theme/dist/base.css b/themes/stanford_profile_theme/dist/base.css index a42e518d4..ddce865de 100644 --- a/themes/stanford_profile_theme/dist/base.css +++ b/themes/stanford_profile_theme/dist/base.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */ /* @@ -17,7 +17,7 @@ /* 2 */ border-style: solid; /* 2 */ - border-color: currentColor; + border-color: #e5e7eb; /* 2 */ } @@ -31,9 +31,13 @@ 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; @@ -43,8 +47,15 @@ html { -o-tab-size: 4; tab-size: 4; /* 3 */ - font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 4 */ + -webkit-font-feature-settings: normal; + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ } /* @@ -116,8 +127,10 @@ strong { } /* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. */ code, @@ -126,8 +139,13 @@ samp, pre { font-family: "Roboto Mono", Menlo, "Courier New", monospace; /* 1 */ - font-size: 1em; + -webkit-font-feature-settings: normal; + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ } /* @@ -186,10 +204,19 @@ select, textarea { font-family: inherit; /* 1 */ + -webkit-font-feature-settings: inherit; + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ font-size: 100%; /* 1 */ + font-weight: inherit; + /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; + /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -213,9 +240,9 @@ select { */ button, -[type='button'], -[type='reset'], -[type='submit'] { +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -334,6 +361,14 @@ menu { padding: 0; } +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + /* Prevent resizing textareas horizontally by default. */ @@ -430,16 +465,229 @@ video { height: auto; } -/* -Ensure the default browser behavior of the `hidden` attribute. -*/ +/* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } +[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { + color: #6b7280; + opacity: 1; +} + +input::-moz-placeholder, textarea::-moz-placeholder { + color: #6b7280; + opacity: 1; +} + +input:-ms-input-placeholder, textarea:-ms-input-placeholder { + color: #6b7280; + opacity: 1; +} + +input::-ms-input-placeholder, textarea::-ms-input-placeholder { + color: #6b7280; + opacity: 1; +} + +input::placeholder,textarea::placeholder { + color: #6b7280; + opacity: 1; +} + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-webkit-date-and-time-value { + min-height: 1.5em; + text-align: inherit; +} + +::-webkit-datetime-edit { + display: -webkit-inline-box; + display: inline-flex; +} + +::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { + padding-top: 0; + padding-bottom: 0; +} + +select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +[multiple],[size]:where(select:not([size="1"])) { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + print-color-adjust: unset; +} + +[type='checkbox'],[type='radio'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-flex-negative: 0; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +[type='checkbox'] { + border-radius: 0px; +} + +[type='radio'] { + border-radius: 100%; +} + +[type='checkbox']:focus,[type='radio']:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +[type='checkbox']:checked,[type='radio']:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + [type='checkbox']:checked { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='radio']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + [type='radio']:checked { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='checkbox']:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +@media (forced-colors: active) { + [type='checkbox']:indeterminate { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='file'] { + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit; +} + +[type='file']:focus { + outline: 1px solid ButtonText; + outline: 1px auto -webkit-focus-ring-color; +} + html { - font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2E2D29; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -448,7 +696,7 @@ html { } body { - background-color: #FFFFFF; + background-color: #fff; color: #2E2D29; overflow-x: hidden; font-size: 1.8rem; @@ -754,186 +1002,117 @@ table thead + tbody { border-top: 1px solid #D5D5D4; } -[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - border-radius: 0px; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-shadow: 0 0 #0000; -} - -[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #2563eb; -} - -input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - color: #6b7280; - opacity: 1; -} - -input::-moz-placeholder, textarea::-moz-placeholder { - color: #6b7280; - opacity: 1; -} - -input:-ms-input-placeholder, textarea:-ms-input-placeholder { - color: #6b7280; - opacity: 1; -} - -input::-ms-input-placeholder, textarea::-ms-input-placeholder { - color: #6b7280; - opacity: 1; -} - -input::placeholder,textarea::placeholder { - color: #6b7280; - opacity: 1; -} - -::-webkit-datetime-edit-fields-wrapper { - padding: 0; -} - -::-webkit-date-and-time-value { - min-height: 1.5em; -} - -select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - color-adjust: exact; -} - -[multiple] { - background-image: initial; - background-position: initial; - background-repeat: unset; - background-size: initial; - padding-right: 0.75rem; - -webkit-print-color-adjust: unset; - color-adjust: unset; -} - -[type='checkbox'],[type='radio'] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: 0; - -webkit-print-color-adjust: exact; - color-adjust: exact; - display: inline-block; - vertical-align: middle; - background-origin: border-box; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 1rem; - width: 1rem; - color: #2563eb; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } -[type='checkbox'] { - border-radius: 0px; -} - -[type='radio'] { - border-radius: 100%; -} - -[type='checkbox']:focus,[type='radio']:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 2px; +::-webkit-backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -} - -[type='checkbox']:checked,[type='radio']:checked { - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -[type='checkbox']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); -} - -[type='radio']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); -} - -[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { - border-color: transparent; - background-color: currentColor; -} - -[type='checkbox']:indeterminate { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { - border-color: transparent; - background-color: currentColor; -} - -[type='file'] { - background: unset; - border-color: inherit; - border-width: 0; - border-radius: 0; - padding: 0; - font-size: unset; - line-height: inherit; -} - -[type='file']:focus { - outline: 1px auto -webkit-focus-ring-color; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } -*, ::before, ::after { +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -945,6 +1124,9 @@ select { --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -976,10 +1158,22 @@ select { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } -.su-button { - font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; +.input { + display: block; + border-color: #D5D5D4; + color: #2E2D29; + font-size: 1.8rem; + line-height: 1.3; +} + +.button { + font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; display: inline-block; border: none; @@ -992,31 +1186,24 @@ select { transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; padding: 1rem 2rem; background-color: #B1040E; - color: #FFFFFF; + color: #fff; } -.su-button:active, .su-button:hover, .su-button:focus { +.button:active, .button:hover, .button:focus { text-decoration: underline; } -.su-button:hover, .su-button:focus { +.button:hover, .button:focus { background-color: #2E2D29; - color: #FFFFFF; + color: #fff; } -.su-button:focus { +.button:focus { -webkit-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } -.su-list-unstyled { - margin-top: 0; - margin-bottom: 0; - padding-left: 0; - list-style-type: none; -} - -.su-centered-container, .su-cc { +.centered-container, .cc { padding-left: 20px; padding-right: 20px; margin-left: auto; @@ -1024,74 +1211,89 @@ select { } @media (min-width: 576px) { - .su-centered-container, .su-cc { + .centered-container, .cc { padding-left: 30px; padding-right: 30px; } } @media (min-width: 768px) { - .su-centered-container, .su-cc { + .centered-container, .cc { padding-left: 50px; padding-right: 50px; } } @media (min-width: 992px) { - .su-centered-container, .su-cc { + .centered-container, .cc { padding-left: 80px; padding-right: 80px; } } @media (min-width: 1200px) { - .su-centered-container, .su-cc { + .centered-container, .cc { padding-left: 100px; padding-right: 100px; } } @media (min-width: 1500px) { - .su-centered-container, .su-cc { + .centered-container, .cc { padding-left: 100px; padding-right: 100px; } } +@media print { +} + @media only screen and (min-width: 1700px) { - .su-centered-container, .su-cc { + .centered-container, .cc { padding-left: calc((100% - 1500px)/2); padding-right: calc((100% - 1500px)/2); } } -.su-grid-gap { +.centered-container .centered-container, .centered-container .cc, .cc .centered-container, .cc .cc { + padding-left: 0; + padding-right: 0; +} + +.grid-gap { grid-gap: 20px; gap: 20px; } @media (min-width: 992px) { - .su-grid-gap { + .grid-gap { grid-gap: 36px; gap: 36px; } } @media (min-width: 1200px) { - .su-grid-gap { + .grid-gap { grid-gap: 40px; gap: 40px; } } @media (min-width: 1500px) { - .su-grid-gap { + .grid-gap { grid-gap: 48px; gap: 48px; } } -.su-logo { +.list-unstyled { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + list-style-type: none; +} + +.logo { display: inline-block; font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; font-weight: 400; @@ -1112,148 +1314,148 @@ select { -moz-osx-font-smoothing: grayscale; } -.su-logo:focus { +.logo:focus { color: #8C1515; } -.su-logo:hover { +.logo:hover { color: #8C1515; } -.su-rs-py-1 { +.rs-py-1 { padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 768px) { - .su-rs-py-1 { + .rs-py-1 { padding-top: 2.6rem; padding-bottom: 2.6rem; } } @media (min-width: 1500px) { - .su-rs-py-1 { + .rs-py-1 { padding-top: 2.7rem; padding-bottom: 2.7rem; } } -.su-rs-mb-2 { +.rs-mb-2 { margin-bottom: 3rem; } @media (min-width: 768px) { - .su-rs-mb-2 { + .rs-mb-2 { margin-bottom: 3.6rem; } } @media (min-width: 1500px) { - .su-rs-mb-2 { + .rs-mb-2 { margin-bottom: 3.8rem; } } -.su-rs-pt-4 { +.rs-pt-4 { padding-top: 3.4rem; } @media (min-width: 768px) { - .su-rs-pt-4 { + .rs-pt-4 { padding-top: 5.8rem; } } @media (min-width: 1500px) { - .su-rs-pt-4 { + .rs-pt-4 { padding-top: 6.1rem; } } -.su-rs-pb-5 { +.rs-pb-5 { padding-bottom: 3.8rem; } @media (min-width: 768px) { - .su-rs-pb-5 { + .rs-pb-5 { padding-bottom: 7.2rem; } } @media (min-width: 1500px) { - .su-rs-pb-5 { + .rs-pb-5 { padding-bottom: 7.6rem; } } -.su-type-4 { +.type-4 { font-size: 1.75em; letter-spacing: -0.016em; } @media (min-width: 768px) { - .su-type-4 { + .type-4 { font-size: 2.07em; } } @media (min-width: 992px) { - .su-type-4 { + .type-4 { font-size: 2.44em; } } -.su-type-3 { +.type-3 { font-size: 1.52em; letter-spacing: -0.014em; } @media (min-width: 768px) { - .su-type-3 { + .type-3 { font-size: 1.73em; } } @media (min-width: 992px) { - .su-type-3 { + .type-3 { font-size: 1.95em; } } -.su-basefont-19 { +.basefont-19 { font-size: 1.6rem; } @media (min-width: 768px) { - .su-basefont-19 { + .basefont-19 { font-size: 1.8rem; } } @media (min-width: 1500px) { - .su-basefont-19 { + .basefont-19 { font-size: 1.9rem; } } -.su-basefont-20 { +.basefont-20 { font-size: 1.8rem; } @media (min-width: 768px) { - .su-basefont-20 { + .basefont-20 { font-size: 1.9rem; } } @media (min-width: 1500px) { - .su-basefont-20 { + .basefont-20 { font-size: 2rem; } } -.su-sr-only { +.sr-only { position: absolute; width: 1px; height: 1px; @@ -1265,452 +1467,482 @@ select { border-width: 0; } -.su-relative { +.relative { position: relative; } -.su-top-6 { +.top-6 { top: 0.6rem; } -.su-float-right { +.float-right { float: right; } -.su-mr-7 { - margin-right: 0.7rem; +.-ml-2 { + margin-left: -0.2rem; } -.su--mt-3 { +.-mt-3 { margin-top: -0.3rem; } -.su--ml-2 { - margin-left: -0.2rem; -} - -.su-mt-5 { - margin-top: 0.5rem; +.mb-10 { + margin-bottom: 1rem; } -.su-mb-9 { +.mb-9 { margin-bottom: 0.9rem; } -.su-mb-10 { - margin-bottom: 1rem; +.ml-19 { + margin-left: 1.9rem; } -.su-mr-19 { +.mr-19 { margin-right: 1.9rem; } -.su-ml-19 { - margin-left: 1.9rem; +.mr-7 { + margin-right: 0.7rem; +} + +.mt-5 { + margin-top: 0.5rem; } -.su-inline-block { +.inline-block { display: inline-block; } -.su-flex { +.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } -.su-grid { +.grid { display: grid; } -.su-hidden { - display: none; -} - -.su-w-6\/12 { - width: 50%; +.w-3\/12 { + width: 25%; } -.su-w-9\/12 { - width: 75%; +.w-40 { + width: 4rem; } -.su-w-3\/12 { - width: 25%; +.w-6\/12 { + width: 50%; } -.su-w-40 { - width: 4rem; +.w-9\/12 { + width: 75%; } -.su-flex-grow { +.flex-grow { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } -.su-list-none { +.list-none { list-style-type: none; } -.su-grid-cols-1 { +.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.su-grid-cols-2 { +.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.su-grid-cols-3 { +.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } -.su-flex-row { +.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } -.su-flex-col { +.flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } -.su-justify-center { +.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } -.su-justify-between { +.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } -.su-border-2 { +.border-2 { border-width: 2px; } -.su-border-solid { +.border-solid { border-style: solid; } -.su-border-black { - border-color: #2E2D29; +.border-black { + --tw-border-opacity: 1; + border-color: rgb(46 45 41 / var(--tw-border-opacity)); } -.su-border-digital-red { - border-color: #B1040E; +.border-digital-blue-light { + --tw-border-opacity: 1; + border-color: rgb(133 204 255 / var(--tw-border-opacity)); } -.su-border-digital-blue-light { - border-color: #85CCFF; +.border-digital-red { + --tw-border-opacity: 1; + border-color: rgb(177 4 14 / var(--tw-border-opacity)); } -.su-bg-digital-red { +.bg-cardinal-red { --tw-bg-opacity: 1; - background-color: rgb(177 4 14 / var(--tw-bg-opacity)); + background-color: rgb(140 21 21 / var(--tw-bg-opacity)); } -.su-bg-digital-blue { +.bg-digital-blue { --tw-bg-opacity: 1; background-color: rgb(0 108 184 / var(--tw-bg-opacity)); } -.su-bg-cardinal-red { +.bg-digital-red { --tw-bg-opacity: 1; - background-color: rgb(140 21 21 / var(--tw-bg-opacity)); + background-color: rgb(177 4 14 / var(--tw-bg-opacity)); } -.su-bg-foggy-light { +.bg-foggy-light { --tw-bg-opacity: 1; background-color: rgb(244 244 244 / var(--tw-bg-opacity)); } -.su-p-0 { +.p-0 { padding: 0; } -.su-px-26 { +.px-26 { padding-left: 2.6rem; padding-right: 2.6rem; } -.su-pt-11 { - padding-top: 1.1rem; +.pb-1 { + padding-bottom: 0.1rem; +} + +.pb-11 { + padding-bottom: 1.1rem; } -.su-pr-7 { +.pb-20 { + padding-bottom: 2rem; +} + +.pr-7 { padding-right: 0.7rem; } -.su-pt-10 { +.pt-10 { padding-top: 1rem; } -.su-pb-11 { - padding-bottom: 1.1rem; +.pt-11 { + padding-top: 1.1rem; } -.su-pt-5 { - padding-top: 0.5rem; +.pt-12 { + padding-top: 1.2rem; } -.su-pb-1 { - padding-bottom: 0.1rem; +.pt-5 { + padding-top: 0.5rem; } -.su-text-left { +.text-left { text-align: left; } -.su-text-center { +.text-center { text-align: center; } -.su-font-serif { - font-family: "Source Serif Pro", Georgia, Times, "Times New Roman", serif; +.font-serif { + font-family: "Source Serif 4", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } -.su-text-25 { - font-size: 2.5rem; +.text-13 { + font-size: 1.3rem; } -.su-text-16 { - font-size: 1.6rem; +.text-15 { + font-size: 1.5rem; } -.su-text-15 { - font-size: 1.5rem; +.text-16 { + font-size: 1.6rem; } -.su-text-13 { - font-size: 1.3rem; +.text-18 { + font-size: 1.8rem; } -.su-text-20 { +.text-20 { font-size: 2rem; } -.su-text-18 { - font-size: 1.8rem; +.text-25 { + font-size: 2.5rem; } -.su-font-regular { +.font-regular { font-weight: 400; } -.su-leading-half { - line-height: 0.5; +.leading-display { + line-height: 1.2; } -.su-leading-display { - line-height: 1.2; +.leading-half { + line-height: 0.5; } -.su-leading-none { +.leading-none { line-height: 1; } -.su-text-cardinal-red { +.text-black { --tw-text-opacity: 1; - color: rgb(140 21 21 / var(--tw-text-opacity)); + color: rgb(46 45 41 / var(--tw-text-opacity)); } -.su-text-black { +.text-cardinal-red { --tw-text-opacity: 1; - color: rgb(46 45 41 / var(--tw-text-opacity)); + color: rgb(140 21 21 / var(--tw-text-opacity)); } -.su-text-white { +.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.su-no-underline { - -webkit-text-decoration-line: none; - text-decoration-line: none; +.no-underline { + text-decoration-line: none; } -.su-transition-colors { - -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; - transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; +.transition-colors { + -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 250ms; transition-duration: 250ms; } -.su-link-regular a { +.link-regular a { font-weight: 400; } -.hover\:su-border-black:hover { - border-color: #2E2D29; +.hover\:border-black:hover { + --tw-border-opacity: 1; + border-color: rgb(46 45 41 / var(--tw-border-opacity)); +} + +.focus\:border-black:focus { + --tw-border-opacity: 1; + border-color: rgb(46 45 41 / var(--tw-border-opacity)); } -.focus\:su-border-black:focus { - border-color: #2E2D29; +.hocus\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hocus\:su-text-white:hover,.su-hocus\:su-text-white:focus { +.hocus\:underline:hover { + text-decoration-line: underline; +} + +.hocus\:text-white:focus { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hocus\:su-underline:hover,.su-hocus\:su-underline:focus { - -webkit-text-decoration-line: underline; - text-decoration-line: underline; +.hocus\:underline:focus { + text-decoration-line: underline; } @media (min-width: 576px) { - .sm\:su-mb-4 { - margin-bottom: 0.4rem; + .sm\:mb-0 { + margin-bottom: 0; } - .sm\:su-mr-0 { - margin-right: 0; + .sm\:mb-4 { + margin-bottom: 0.4rem; } - .sm\:su-mr-10 { - margin-right: 1rem; + .sm\:ml-0 { + margin-left: 0; } - .sm\:su-mb-0 { - margin-bottom: 0; + .sm\:mr-0 { + margin-right: 0; } - .sm\:su-ml-0 { - margin-left: 0; + .sm\:mr-10 { + margin-right: 1rem; } - .sm\:su-flex-row { + .sm\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } - .sm\:su-flex-col { + .sm\:flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } - .sm\:su-items-center { + .sm\:items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } - .sm\:su-text-center { + .sm\:text-center { text-align: center; } - .sm\:su-text-14 { + .sm\:text-14 { font-size: 1.4rem; } - .sm\:su-link-regular a { + .sm\:link-regular a { font-weight: 400; } } @media (min-width: 768px) { - .md\:su-mt-0 { - margin-top: 0; - } - - .md\:su-ml-0 { + .md\:ml-0 { margin-left: 0; } - .md\:su-mr-20 { + .md\:mr-20 { margin-right: 2rem; } - .md\:su-grid-cols-2 { + .md\:mt-0 { + margin-top: 0; + } + + .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .md\:su-flex-row { + .md\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } - .md\:su-border-r { + .md\:border-r { border-right-width: 1px; } - .md\:su-text-m2 { - font-size: 1.56em; + .md\:pb-24 { + padding-bottom: 2.4rem; } - .md\:su-text-20 { - font-size: 2rem; + .md\:pt-14 { + padding-top: 1.4rem; + } + + .md\:text-15 { + font-size: 1.5rem; } - .md\:su-text-17 { + .md\:text-17 { font-size: 1.7rem; } - .md\:su-text-15 { - font-size: 1.5rem; + .md\:text-20 { + font-size: 2rem; + } + + .md\:text-m2 { + font-size: 1.56em; } } @media (min-width: 992px) { - .lg\:su-mr-27 { + .lg\:mr-27 { margin-right: 2.7rem; } - .lg\:su-flex-row { + .lg\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } - .lg\:su-items-start { + .lg\:items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } - .lg\:su-pl-45 { + .lg\:pl-45 { padding-left: 4.5rem; } - .lg\:su-text-left { + .lg\:text-left { text-align: left; } } @media (min-width: 1200px) { - .xl\:su-grid-cols-4 { + .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } - .xl\:su-pl-50 { + .xl\:pl-50 { padding-left: 5rem; } - .xl\:su-text-16 { + .xl\:text-16 { font-size: 1.6rem; } } @media (min-width: 1500px) { - .\32xl\:su-text-18 { + .\32xl\:pb-24 { + padding-bottom: 2.4rem; + } + + .\32xl\:pt-16 { + padding-top: 1.6rem; + } + + .\32xl\:text-18 { font-size: 1.8rem; } } diff --git a/themes/stanford_profile_theme/package.json b/themes/stanford_profile_theme/package.json index e0295eb7d..bc3d7df5d 100644 --- a/themes/stanford_profile_theme/package.json +++ b/themes/stanford_profile_theme/package.json @@ -7,9 +7,10 @@ "build": "npx tailwindcss -i ./src/base.scss -o ./dist/base.css" }, "dependencies": { - "@tailwindcss/forms": "^0.4.0-alpha.2", - "decanter": "^7.0.0-beta.2", - "tailwindcss": "^3.0.24", + "@tailwindcss/forms": "^0.5.7", + "decanter": "^7.3.0", + "tailwindcss": "^3.4.4", "tailwindcss-debug-screens": "^2.2.1" - } + }, + "packageManager": "yarn@4.3.1" } diff --git a/themes/stanford_profile_theme/stanford_profile_theme.info.yml b/themes/stanford_profile_theme/stanford_profile_theme.info.yml index af939fa7e..f8d713a6f 100644 --- a/themes/stanford_profile_theme/stanford_profile_theme.info.yml +++ b/themes/stanford_profile_theme/stanford_profile_theme.info.yml @@ -3,7 +3,7 @@ type: theme description: 'Stanford Profile Theme.' package: Stanford version: 1.0.0 -core_version_requirement: ^9 +core_version_requirement: ^9 || ^10 || ^11 'base theme': stable9 regions: page_top: 'Page top' diff --git a/themes/stanford_profile_theme/templates/block/block--system-branding-block.html.twig b/themes/stanford_profile_theme/templates/block/block--system-branding-block.html.twig index d2f8803be..77efe0fc9 100644 --- a/themes/stanford_profile_theme/templates/block/block--system-branding-block.html.twig +++ b/themes/stanford_profile_theme/templates/block/block--system-branding-block.html.twig @@ -1,9 +1,9 @@ - -
-