trang about đã đúng layout, bắt đầu đổ data vô

This commit is contained in:
NAS\NASPC
2026-06-02 08:53:40 +07:00
parent 66aaefebe9
commit bd1dd1b309
13 changed files with 246 additions and 126 deletions
+42
View File
@@ -0,0 +1,42 @@
# Project Knowledge Base
## Overview
This project is a web application built using **Java**, **Spring Boot**, and **Thymeleaf**. It serves as the frontend layer for `sisvietnamvn`, currently rendering static-like pages with dynamic templating provided by Thymeleaf. The static assets seem to be heavily inspired by or imported from UMass Amherst website templates, integrated into a Spring Boot architecture.
## System Architecture
* **Language:** Java 21
* **Framework:** Spring Boot (Version 4.0.6 as per `build.gradle`)
* **Build Tool:** Gradle
* **Application Type:** Spring Web MVC application
* **Routing:** Basic MVC routing handled by `@Controller` classes. Currently, `HomeController.java` maps endpoints to Thymeleaf templates:
* `/` -> `index.html`
* `/about` -> `about.html`
* `/flex-finish` -> `flex-finish.html`
## Directory Structure
The structure strictly adheres to standard Maven/Gradle Spring Boot conventions:
* `build.gradle` / `settings.gradle`: Gradle configuration files defining dependencies and build settings.
* `src/main/java/com/sisvietnamvn/web/`: Contains Java source code.
* `SisvietnamvnApplication.java`: Main Spring Boot entry point.
* `controller/HomeController.java`: Web controller managing page routing.
* `src/main/resources/`: Contains configuration and web assets.
* `application.properties`: Spring Boot configuration properties.
* `static/`: Stores all static assets (CSS, JS, Images). Assets are organized into subdirectories like `css/`, `images/`, `js/`, and specific page folders like `flex-finish/` and `UMass Amherst _ UMass Amherst_files/`.
* `templates/`: Contains Thymeleaf `.html` view templates.
* `fragments/`: Contains reusable Thymeleaf layout components (`layout.html`, `header.html`, `footer.html`).
## Libraries and Dependencies
* **Spring Boot Starter Web** (`spring-boot-starter-webmvc`): For building web, including RESTful, applications using Spring MVC.
* **Spring Boot Starter Thymeleaf** (`spring-boot-starter-thymeleaf`): For HTML templating.
* **Thymeleaf Layout Dialect** (`nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect`): Provides decorator pattern for Thymeleaf, allowing the use of a common layout (`layout.html`) that other pages inject content into.
* **Spring Boot DevTools** (`spring-boot-devtools`): For fast application restarts and live reload during development.
* **Frontend Libraries:**
* jQuery (`jquery.min.js`)
* Lazysizes (`lazysizes.min.js`) for lazy loading images.
* Various Lottie scripts and custom scripts copied into static folders.
## Coding Conventions & Best Practices
1. **Templating & Layouts:** The project relies on the Thymeleaf Layout Dialect. Pages should define their content within a `layout:fragment="content"` block and reference the master layout (`layout.html`). Reusable parts (like headers/footers) are stored in the `fragments` folder and included via `th:replace`.
2. **Asset Management:** Static assets (CSS, images, JS) are referenced via absolute paths starting from the root `/` (e.g., `<script src="/Undergraduate Study _ UMass Amherst_files/base.js.download"></script>`). This relies on Spring Boot's default static resource mapping.
3. **Controllers:** Keep controllers lightweight. Endpoints should generally just return the template name as a String.
4. **Language Level:** The project uses Java 21, allowing for modern Java features (records, pattern matching, etc.) if backend logic is expanded in the future.
@@ -1,4 +1,4 @@
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.progress{position:relative;}.progress__track{min-width:100px;max-width:100%;height:16px;margin-top:5px;border:1px solid;background-color:#fff;}.progress__bar{width:3%;min-width:3%;max-width:100%;height:1.5em;background-color:#000;}.progress__description,.progress__percentage{overflow:hidden;margin-top:0.2em;color:#555;font-size:0.875em;}.progress__description{float:left;}[dir="rtl"] .progress__description{float:right;}.progress__percentage{float:right;}[dir="rtl"] .progress__percentage{float:left;}.progress--small .progress__track{height:7px;}.progress--small .progress__bar{height:7px;background-size:20px 20px;}
.ajax-progress{display:inline-block;padding:1px 5px 2px 5px;}[dir="rtl"] .ajax-progress{float:right;}.ajax-progress-throbber .throbber{display:inline;padding:1px 5px 2px;background:transparent url(/themes/contrib/stable/images/core/throbber-active.gif) no-repeat 0 center;}.ajax-progress-throbber .message{display:inline;padding:1px 5px 2px;}tr .ajax-progress-throbber .throbber{margin:0 2px;}.ajax-progress-bar{width:16em;}.ajax-progress-fullscreen{position:fixed;z-index:1000;top:48.5%;left:49%;width:24px;height:24px;padding:4px;opacity:0.9;border-radius:7px;background-color:#232323;background-image:url(/themes/contrib/stable/images/core/loading-small.gif);background-repeat:no-repeat;background-position:center center;}[dir="rtl"] .ajax-progress-fullscreen{right:49%;left:auto;}
.text-align-left{text-align:left;}.text-align-right{text-align:right;}.text-align-center{text-align:center;}.text-align-justify{text-align:justify;}.align-left{float:left;}.align-right{float:right;}.align-center{display:block;margin-right:auto;margin-left:auto;}
@@ -10,3 +10,4 @@
.cc_banner-wrapper{z-index:9001;position:relative}.cc_container .cc_btn{cursor:pointer;text-align:center;font-size:0.6em;transition:font-size 200ms;line-height:1em}.cc_container .cc_message{font-size:0.6em;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}.cc_container .cc_logo{display:none;text-indent:-1000px;overflow:hidden;width:100px;height:22px;background-size:cover;background-image:url(//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/logo.png);opacity:0.9;transition:opacity 200ms}.cc_container .cc_logo:hover,.cc_container .cc_logo:active{opacity:1}@media screen and (min-width:500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{font-size:0.8em}}@media screen and (min-width:768px){.cc_container .cc_btn{font-size:1em}.cc_container .cc_message{font-size:1em;line-height:1em}}@media screen and (min-width:992px){.cc_container .cc_message{font-size:1em}}@media print{.cc_banner-wrapper,.cc_container{display:none}}.cc_container{position:fixed;left:0;right:0;bottom:0;overflow:hidden;padding:10px}.cc_container .cc_btn{padding:8px 10px;background-color:#f1d600;cursor:pointer;transition:font-size 200ms;text-align:center;font-size:0.6em;display:block;width:33%;margin-left:10px;float:right;max-width:120px}.cc_container .cc_message{transition:font-size 200ms;font-size:0.6em;display:block}@media screen and (min-width:500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{margin-top:0.5em;font-size:0.8em}}@media screen and (min-width:768px){.cc_container{padding:15px 30px 15px}.cc_container .cc_btn{font-size:1em;padding:8px 15px}.cc_container .cc_message{font-size:1em}}@media screen and (min-width:992px){.cc_container .cc_message{font-size:1em}}.cc_container{background:#222;color:#fff;font-size:17px;font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Calibri,Helvetica,Arial;box-sizing:border-box}.cc_container ::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}.cc_container .cc_btn,.cc_container .cc_btn:visited{color:#000;background-color:#f1d600;transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px}.cc_container .cc_btn:hover,.cc_container .cc_btn:active{background-color:#fff;color:#000}.cc_container a,.cc_container a:visited{text-decoration:none;color:#31a8f0;transition:200ms color}.cc_container a:hover,.cc_container a:active{color:#b2f7ff}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(66px);transform:translateY(66px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideUp{0%{-webkit-transform:translateY(66px);-ms-transform:translateY(66px);transform:translateY(66px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.cc_container,.cc_message,.cc_btn{animation-duration:0.8s;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;-webkit-animation-name:slideUp;animation-name:slideUp}
span.ext{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) 2px center no-repeat;}span.mailto{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) -20px center no-repeat;}span.tel{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) -42px center no-repeat;}svg.ext{width:14px;height:14px;fill:#727272;font-weight:900;}svg.mailto,svg.tel{width:14px;height:14px;fill:#727272;}[data-extlink-placement='prepend'],[data-extlink-placement='before']{padding-right:0.2rem;}[data-extlink-placement='append'],[data-extlink-placement='after']{padding-left:0.2rem;}svg.ext path,svg.mailto path,svg.tel path{stroke:#727272;stroke-width:3;}@media print{svg.ext,svg.mailto,svg.tel,span.ext,span.mailto,span.tel{display:none;padding:0;}}.extlink i{padding-left:0.2em;}.extlink-nobreak{white-space:nowrap;}
.paragraph--unpublished{background-color:#fff4f4;}
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.progress{position:relative;}.progress__track{min-width:100px;max-width:100%;height:16px;margin-top:5px;border:1px solid;background-color:#fff;}.progress__bar{width:3%;min-width:3%;max-width:100%;height:1.5em;background-color:#000;}.progress__description,.progress__percentage{overflow:hidden;margin-top:0.2em;color:#555;font-size:0.875em;}.progress__description{float:left;}[dir="rtl"] .progress__description{float:right;}.progress__percentage{float:right;}[dir="rtl"] .progress__percentage{float:left;}.progress--small .progress__track{height:7px;}.progress--small .progress__bar{height:7px;background-size:20px 20px;}
.ajax-progress{display:inline-block;padding:1px 5px 2px 5px;}[dir="rtl"] .ajax-progress{float:right;}.ajax-progress-throbber .throbber{display:inline;padding:1px 5px 2px;background:transparent url(/themes/contrib/stable/images/core/throbber-active.gif) no-repeat 0 center;}.ajax-progress-throbber .message{display:inline;padding:1px 5px 2px;}tr .ajax-progress-throbber .throbber{margin:0 2px;}.ajax-progress-bar{width:16em;}.ajax-progress-fullscreen{position:fixed;z-index:1000;top:48.5%;left:49%;width:24px;height:24px;padding:4px;opacity:0.9;border-radius:7px;background-color:#232323;background-image:url(/themes/contrib/stable/images/core/loading-small.gif);background-repeat:no-repeat;background-position:center center;}[dir="rtl"] .ajax-progress-fullscreen{right:49%;left:auto;}
.text-align-left{text-align:left;}.text-align-right{text-align:right;}.text-align-center{text-align:center;}.text-align-justify{text-align:justify;}.align-left{float:left;}.align-right{float:right;}.align-center{display:block;margin-right:auto;margin-left:auto;}
@@ -10,3 +10,4 @@
.cc_banner-wrapper{z-index:9001;position:relative}.cc_container .cc_btn{cursor:pointer;text-align:center;font-size:0.6em;transition:font-size 200ms;line-height:1em}.cc_container .cc_message{font-size:0.6em;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}.cc_container .cc_logo{display:none;text-indent:-1000px;overflow:hidden;width:100px;height:22px;background-size:cover;background-image:url(//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/logo.png);opacity:0.9;transition:opacity 200ms}.cc_container .cc_logo:hover,.cc_container .cc_logo:active{opacity:1}@media screen and (min-width:500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{font-size:0.8em}}@media screen and (min-width:768px){.cc_container .cc_btn{font-size:1em}.cc_container .cc_message{font-size:1em;line-height:1em}}@media screen and (min-width:992px){.cc_container .cc_message{font-size:1em}}@media print{.cc_banner-wrapper,.cc_container{display:none}}.cc_container{position:fixed;left:0;right:0;bottom:0;overflow:hidden;padding:10px}.cc_container .cc_btn{padding:8px 10px;background-color:#f1d600;cursor:pointer;transition:font-size 200ms;text-align:center;font-size:0.6em;display:block;width:33%;margin-left:10px;float:right;max-width:120px}.cc_container .cc_message{transition:font-size 200ms;font-size:0.6em;display:block}@media screen and (min-width:500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{margin-top:0.5em;font-size:0.8em}}@media screen and (min-width:768px){.cc_container{padding:15px 30px 15px}.cc_container .cc_btn{font-size:1em;padding:8px 15px}.cc_container .cc_message{font-size:1em}}@media screen and (min-width:992px){.cc_container .cc_message{font-size:1em}}.cc_container{background:#222;color:#fff;font-size:17px;font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Calibri,Helvetica,Arial;box-sizing:border-box}.cc_container ::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}.cc_container .cc_btn,.cc_container .cc_btn:visited{color:#000;background-color:#f1d600;transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px}.cc_container .cc_btn:hover,.cc_container .cc_btn:active{background-color:#fff;color:#000}.cc_container a,.cc_container a:visited{text-decoration:none;color:#31a8f0;transition:200ms color}.cc_container a:hover,.cc_container a:active{color:#b2f7ff}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(66px);transform:translateY(66px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideUp{0%{-webkit-transform:translateY(66px);-ms-transform:translateY(66px);transform:translateY(66px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.cc_container,.cc_message,.cc_btn{animation-duration:0.8s;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;-webkit-animation-name:slideUp;animation-name:slideUp}
span.ext{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) 2px center no-repeat;}span.mailto{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) -20px center no-repeat;}span.tel{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) -42px center no-repeat;}svg.ext{width:14px;height:14px;fill:#727272;font-weight:900;}svg.mailto,svg.tel{width:14px;height:14px;fill:#727272;}[data-extlink-placement='prepend'],[data-extlink-placement='before']{padding-right:0.2rem;}[data-extlink-placement='append'],[data-extlink-placement='after']{padding-left:0.2rem;}svg.ext path,svg.mailto path,svg.tel path{stroke:#727272;stroke-width:3;}@media print{svg.ext,svg.mailto,svg.tel,span.ext,span.mailto,span.tel{display:none;padding:0;}}.extlink i{padding-left:0.2em;}.extlink-nobreak{white-space:nowrap;}
.paragraph--unpublished{background-color:#fff4f4;}
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
[data-component-id="umass_base:block-multiple-ctas"] {
container-type: inline-size;
@@ -4125,7 +4125,7 @@ html[data-whatintent=mouse] .cc--abundance-grid .abundance-container-large .c--a
.cc--abundance-grid .abundance-container-large .c--abundance-grid-item .f--video-lightbox a {
background-color: #881c1c;
background-image: url(/themes/custom/umass_base/images/icons/icon-play.svg);
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-play.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: .5625rem;
@@ -4275,7 +4275,7 @@ html[data-whatintent=mouse] .cc--abundance-grid .abundance-container-small .cc--
.cc--abundance-grid .abundance-container-small .shuffle-wrapper .abundance-grid-shuffle {
background-color: #881c1c;
background-image: url(/themes/custom/umass_base/images/icons/icon-refresh.svg);
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-refresh.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: 1.375rem;
@@ -4498,7 +4498,7 @@ html[data-whatintent=mouse] .cc--accordions .c--accordions .accordion h3 .accord
align-self: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: url(/themes/custom/umass_base/images/icons/icon-arrowdown-red.svg) no-repeat 50%/100%;
background: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowdown-red.svg) no-repeat 50%/100%;
content: "";
height: 1.25rem;
-webkit-transform: translateZ(0);
@@ -4718,7 +4718,7 @@ html[data-whatintent=mouse] .cc--breadcrumb ul li .link:hover {
@media screen and (min-width: 1024px) {
.cc--breadcrumb ul li .link:before {
background: url(/themes/custom/umass_base/images/icons/icon-arrowleft-red.svg) no-repeat 0/1.25rem;
background: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowleft-red.svg) no-repeat 0/1.25rem;
content: "";
display: inline-block;
height: .625rem;
@@ -6828,11 +6828,11 @@ html[data-whatintent=mouse] .cc--gallery .swiper-container .swiper-nav-wrapper .
}
.cc--gallery .swiper-container .swiper-nav-wrapper .swiper-nav-button.swiper-button-prev {
background-image: url(/themes/custom/umass_base/images/icons/icon-arrowleft-white.svg)
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowleft-white.svg)
}
.cc--gallery .swiper-container .swiper-nav-wrapper .swiper-nav-button.swiper-button-next {
background-image: url(/themes/custom/umass_base/images/icons/icon-arrowright-white.svg)
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowright-white.svg)
}
.tc--microsite-article .cc--gallery {
@@ -7342,7 +7342,7 @@ body.search-open .cc--header-search .cc--header-branding svg .name {
.cc--hero-article-video .video-container .play-btn:after {
background-color: #881c1c;
background-image: url(/themes/custom/umass_base/images/icons/icon-play.svg);
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-play.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: .5625rem;
@@ -9370,7 +9370,7 @@ html[data-whatintent=mouse] .cc--latest-news .c--latest-news>.text-container .f-
}
.cc--links-list .link {
background: url(/themes/custom/umass_base/images/icons/icon-arrowright-red.svg) no-repeat top 5px right/1.25rem;
background: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowright-red.svg) no-repeat top 5px right/1.25rem;
border-bottom: .0625rem solid #ccc;
color: #151515;
display: block;
@@ -9501,7 +9501,7 @@ html[data-whatintent=mouse] .cc--links-list .link:hover {
@media screen and (min-width: 1024px) {
.cc--menu-left-nav .f--section-title h2 a:before {
background: url(/themes/custom/umass_base/images/icons/icon-arrowleft-red.svg) no-repeat 0/1.25rem;
background: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowleft-red.svg) no-repeat 0/1.25rem;
content: "";
display: inline-block;
height: .625rem;
@@ -9516,7 +9516,7 @@ html[data-whatintent=mouse] .cc--links-list .link:hover {
}
html[data-whatintent=mouse] .cc--menu-left-nav .f--section-title h2 a:hover:before {
background-image: url(/themes/custom/umass_base/images/icons/icon-arrowleft-dark.svg)
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-arrowleft-dark.svg)
}
}
@@ -13300,7 +13300,7 @@ html[data-whatintent=mouse] .video-controls .video-button:hover svg path {
.cc--video-full-width .video-container .play-btn:after {
background-color: #881c1c;
background-image: url(/themes/custom/umass_base/images/icons/icon-play.svg);
background-image: url(https://www.umass.edu/themes/custom/umass_base/images/icons/icon-play.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: .5625rem;
@@ -13860,4 +13860,4 @@ html[data-whatinput=mouse] .lity .lity-wrap .lity-container .lity-close:focus {
.claro-autocomplete__message {
color: var(--gin-color-primary);
}
}
@@ -1,4 +1,4 @@
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.progress{position:relative;}.progress__track{min-width:100px;max-width:100%;height:16px;margin-top:5px;border:1px solid;background-color:#fff;}.progress__bar{width:3%;min-width:3%;max-width:100%;height:1.5em;background-color:#000;}.progress__description,.progress__percentage{overflow:hidden;margin-top:0.2em;color:#555;font-size:0.875em;}.progress__description{float:left;}[dir="rtl"] .progress__description{float:right;}.progress__percentage{float:right;}[dir="rtl"] .progress__percentage{float:left;}.progress--small .progress__track{height:7px;}.progress--small .progress__bar{height:7px;background-size:20px 20px;}
.ajax-progress{display:inline-block;padding:1px 5px 2px 5px;}[dir="rtl"] .ajax-progress{float:right;}.ajax-progress-throbber .throbber{display:inline;padding:1px 5px 2px;background:transparent url(/themes/contrib/stable/images/core/throbber-active.gif) no-repeat 0 center;}.ajax-progress-throbber .message{display:inline;padding:1px 5px 2px;}tr .ajax-progress-throbber .throbber{margin:0 2px;}.ajax-progress-bar{width:16em;}.ajax-progress-fullscreen{position:fixed;z-index:1000;top:48.5%;left:49%;width:24px;height:24px;padding:4px;opacity:0.9;border-radius:7px;background-color:#232323;background-image:url(/themes/contrib/stable/images/core/loading-small.gif);background-repeat:no-repeat;background-position:center center;}[dir="rtl"] .ajax-progress-fullscreen{right:49%;left:auto;}
.text-align-left{text-align:left;}.text-align-right{text-align:right;}.text-align-center{text-align:center;}.text-align-justify{text-align:justify;}.align-left{float:left;}.align-right{float:right;}.align-center{display:block;margin-right:auto;margin-left:auto;}
@@ -9,3 +9,4 @@
.cc_banner-wrapper{z-index:9001;position:relative}.cc_container .cc_btn{cursor:pointer;text-align:center;font-size:0.6em;transition:font-size 200ms;line-height:1em}.cc_container .cc_message{font-size:0.6em;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}.cc_container .cc_logo{display:none;text-indent:-1000px;overflow:hidden;width:100px;height:22px;background-size:cover;background-image:url(//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/logo.png);opacity:0.9;transition:opacity 200ms}.cc_container .cc_logo:hover,.cc_container .cc_logo:active{opacity:1}@media screen and (min-width:500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{font-size:0.8em}}@media screen and (min-width:768px){.cc_container .cc_btn{font-size:1em}.cc_container .cc_message{font-size:1em;line-height:1em}}@media screen and (min-width:992px){.cc_container .cc_message{font-size:1em}}@media print{.cc_banner-wrapper,.cc_container{display:none}}.cc_container{position:fixed;left:0;right:0;bottom:0;overflow:hidden;padding:10px}.cc_container .cc_btn{padding:8px 10px;background-color:#f1d600;cursor:pointer;transition:font-size 200ms;text-align:center;font-size:0.6em;display:block;width:33%;margin-left:10px;float:right;max-width:120px}.cc_container .cc_message{transition:font-size 200ms;font-size:0.6em;display:block}@media screen and (min-width:500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{margin-top:0.5em;font-size:0.8em}}@media screen and (min-width:768px){.cc_container{padding:15px 30px 15px}.cc_container .cc_btn{font-size:1em;padding:8px 15px}.cc_container .cc_message{font-size:1em}}@media screen and (min-width:992px){.cc_container .cc_message{font-size:1em}}.cc_container{background:#222;color:#fff;font-size:17px;font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Calibri,Helvetica,Arial;box-sizing:border-box}.cc_container ::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}.cc_container .cc_btn,.cc_container .cc_btn:visited{color:#000;background-color:#f1d600;transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px}.cc_container .cc_btn:hover,.cc_container .cc_btn:active{background-color:#fff;color:#000}.cc_container a,.cc_container a:visited{text-decoration:none;color:#31a8f0;transition:200ms color}.cc_container a:hover,.cc_container a:active{color:#b2f7ff}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(66px);transform:translateY(66px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideUp{0%{-webkit-transform:translateY(66px);-ms-transform:translateY(66px);transform:translateY(66px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.cc_container,.cc_message,.cc_btn{animation-duration:0.8s;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;-webkit-animation-name:slideUp;animation-name:slideUp}
span.ext{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) 2px center no-repeat;}span.mailto{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) -20px center no-repeat;}span.tel{width:10px;height:10px;padding-right:12px;text-decoration:none;background:url(/modules/contrib/extlink/images/extlink_s.png) -42px center no-repeat;}svg.ext{width:14px;height:14px;fill:#727272;font-weight:900;}svg.mailto,svg.tel{width:14px;height:14px;fill:#727272;}[data-extlink-placement='prepend'],[data-extlink-placement='before']{padding-right:0.2rem;}[data-extlink-placement='append'],[data-extlink-placement='after']{padding-left:0.2rem;}svg.ext path,svg.mailto path,svg.tel path{stroke:#727272;stroke-width:3;}@media print{svg.ext,svg.mailto,svg.tel,span.ext,span.mailto,span.tel{display:none;padding:0;}}.extlink i{padding-left:0.2em;}.extlink-nobreak{white-space:nowrap;}
.paragraph--unpublished{background-color:#fff4f4;}
@@ -126,4 +126,16 @@ $(document).ready(function() {
});
}
});
// 8. Desktop Mega Menu Dropdown
$('.mc--menu-main .menu-item--expanded, .mc--menu-footer .menu-item--expanded').hover(
function() {
$(this).addClass('is-expanded');
$(this).find('> .submenu-wrapper').stop(true, true).fadeIn(200);
},
function() {
$(this).removeClass('is-expanded');
$(this).find('> .submenu-wrapper').stop(true, true).fadeOut(200);
}
);
});
File diff suppressed because one or more lines are too long
@@ -13,7 +13,6 @@
[data-component-id="umass_base:site-header"] {
justify-content: flex-end !important;
position: relative;
/* ensure absolute logo is relative to header if needed, though usually fixed to top */
}
[data-component-id="umass_base:header-branding"] img {
@@ -26,11 +25,30 @@
filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.9));
}
/* Force white color for mobile hamburger icon when transparent header is active */
.transparent-header #mobile-hamburger .hamburger-inner,
.transparent-header #mobile-hamburger .hamburger-inner::before,
.transparent-header #mobile-hamburger .hamburger-inner::after {
background-color: var(--color-white) !important;
/* Hamburger icon - white on transparent header (mobile only shows it on dark bg) */
#mobile-hamburger .hamburger-inner,
#mobile-hamburger .hamburger-inner::before,
#mobile-hamburger .hamburger-inner::after {
background-color: #fff !important;
}
/* Desktop only: main nav links are white (header is transparent over hero image) */
@media (min-width: 1200px) {
#l--main-header .m--main-menu > li > .link-arrow-wrapper > a,
#l--main-header .m--main-menu > li > .link-arrow-wrapper > button,
#l--main-header .m--main-menu > li > a {
color: #fff !important;
}
#l--main-header .m--main-menu > li > .link-arrow-wrapper > a:hover,
#l--main-header .m--main-menu > li > .link-arrow-wrapper > a:focus {
color: #e5e5e5 !important;
}
/* Arrow SVG fill - white on desktop */
#l--main-header .m--main-menu > li .has-submenu path {
fill: #fff !important;
}
}
</style>
@@ -1317,6 +1335,44 @@
</div>
</div>
</div>
</div> <script defer src="/Undergraduate Study _ UMass Amherst_files/jquery.min.js.download"></script>
<script defer src="/Undergraduate Study _ UMass Amherst_files/lazysizes.min.js.download"></script>
<script defer src="/js/custom-umass.js"></script>
<style>
.transparent-header [data-component-id="umass_base:site-header"] #mobile-hamburger .hamburger-inner,
.transparent-header [data-component-id="umass_base:site-header"] #mobile-hamburger .hamburger-inner::before,
.transparent-header [data-component-id="umass_base:site-header"] #mobile-hamburger .hamburger-inner::after {
background-color: #fff;
}
.transparent-header [data-component-id="umass_base:site-header"] .primary-navigation .m--main-menu > li a {
color: #fff;
}
.transparent-header [data-component-id="umass_base:site-header"] .primary-navigation .m--main-menu > li a:hover,
.transparent-header [data-component-id="umass_base:site-header"] .primary-navigation .m--main-menu > li a:focus {
color: #e5e5e5;
}
.transparent-header [data-component-id="umass_base:site-header"] .primary-navigation .m--main-menu > li span {
color: #fff;
}
.transparent-header [data-component-id="umass_base:site-header"] .primary-navigation .m--main-menu > li li span {
color: #ffb300;
}
#l--main-header {
margin: 0 auto;
position: relative;
z-index: 102;
}
</style>
</header>
</header>
@@ -4,6 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMass Amherst</title>
<!-- Google Fonts: Lora and Open Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<!-- Add base CSS here if available -->
<th:block layout:fragment="head"></th:block>
</head>