@tacc/core-styles 2.42.1 → 2.43.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/branding_logos.css +1 -1
- package/dist/components/README.css +1 -1
- package/dist/components/admonition/demo.css +1 -1
- package/dist/components/admonition.css +1 -1
- package/dist/components/align/demo.css +1 -1
- package/dist/components/align.css +1 -1
- package/dist/components/bootstrap/bootstrap--col.demo.css +1 -1
- package/dist/components/bootstrap/bootstrap--form.demo.css +1 -1
- package/dist/components/bootstrap/bootstrap--modal.demo.css +1 -1
- package/dist/components/bootstrap/bootstrap--pagination.demo.css +1 -1
- package/dist/components/bootstrap/demo.css +1 -1
- package/dist/components/bootstrap.col.css +1 -1
- package/dist/components/bootstrap.container.css +1 -1
- package/dist/components/bootstrap.css +1 -1
- package/dist/components/bootstrap.figure.css +1 -1
- package/dist/components/bootstrap.form.css +1 -1
- package/dist/components/bootstrap.modal--cms.css +1 -1
- package/dist/components/bootstrap.modal--portal.css +1 -1
- package/dist/components/bootstrap.modal.css +1 -1
- package/dist/components/bootstrap.nav-tabs.css +1 -1
- package/dist/components/bootstrap.pagination.css +1 -1
- package/dist/components/bootstrap.row.css +1 -1
- package/dist/components/bootstrap3.breadcrumb.css +1 -1
- package/dist/components/bootstrap3.css +1 -1
- package/dist/components/bootstrap5.border-spinner.css +1 -1
- package/dist/components/c-app-card/demo.css +1 -1
- package/dist/components/c-app-card.css +1 -1
- package/dist/components/c-button/demo.css +1 -1
- package/dist/components/c-button--cms.css +1 -1
- package/dist/components/c-button.css +1 -1
- package/dist/components/c-button.selectors.css +1 -1
- package/dist/components/c-callout.css +1 -1
- package/dist/components/c-card/c-card--frontera.demo.css +1 -1
- package/dist/components/c-card/c-card.demo.css +1 -1
- package/dist/components/c-card/c-card.demo.images.css +1 -1
- package/dist/components/c-card--docs.css +1 -1
- package/dist/components/c-card--from-tup-cms.css +1 -1
- package/dist/components/c-card--frontera-about-page.css +1 -1
- package/dist/components/c-card-list.css +1 -1
- package/dist/components/c-card.css +1 -1
- package/dist/components/c-card.selectors.css +1 -1
- package/dist/components/c-content-block.css +1 -1
- package/dist/components/c-data-list.css +1 -1
- package/dist/components/c-form--cms.css +1 -1
- package/dist/components/c-form--login.css +1 -1
- package/dist/components/c-form--portal.css +1 -1
- package/dist/components/c-form.css +1 -1
- package/dist/components/c-form.selectors.css +1 -1
- package/dist/components/c-hero-banner/c-hero-banner.demo.css +1 -0
- package/dist/components/c-hero-banner.css +1 -0
- package/dist/components/c-image-map.css +1 -1
- package/dist/components/c-image-map.skin.css +1 -1
- package/dist/components/c-image-map.structure.css +1 -1
- package/dist/components/c-island/demo.css +1 -1
- package/dist/components/c-island.css +1 -1
- package/dist/components/c-message/demo.css +1 -1
- package/dist/components/c-message--compact.css +1 -1
- package/dist/components/c-message--expanded.css +1 -1
- package/dist/components/c-message.css +1 -1
- package/dist/components/c-message.selectors.css +1 -1
- package/dist/components/c-nav/demo.css +1 -1
- package/dist/components/c-nav.css +1 -1
- package/dist/components/c-page/demo.css +1 -1
- package/dist/components/c-page.css +1 -1
- package/dist/components/c-pill/demo.css +1 -1
- package/dist/components/c-pill.css +1 -1
- package/dist/components/c-pill.selectors.css +1 -1
- package/dist/components/c-recognition.css +1 -1
- package/dist/components/c-see-all-link.css +1 -1
- package/dist/components/c-show-more.css +1 -1
- package/dist/components/c-tag/demo.css +1 -1
- package/dist/components/c-tag.css +1 -1
- package/dist/components/c-tag.selectors.css +1 -1
- package/dist/components/c-update.css +1 -1
- package/dist/components/cortal-icon/demo.css +1 -1
- package/dist/components/cortal-icon-font.css +1 -1
- package/dist/components/cortal-icon.css +1 -1
- package/dist/components/cortal.icon.css +1 -1
- package/dist/components/cortal.icon.font.css +1 -1
- package/dist/components/demo.css +1 -1
- package/dist/components/django-cms-forms.css +1 -1
- package/dist/components/django-cms-forms.hacks.css +1 -1
- package/dist/components/django-cms-forms.selectors.css +1 -1
- package/dist/components/mui.tabs.css +1 -1
- package/dist/components/pymdownx--tabbed.css +1 -1
- package/dist/components/pymdownx.css +1 -1
- package/dist/components/tacc-docs.css +1 -1
- package/dist/core-styles.base.css +1 -1
- package/dist/core-styles.cms.css +2 -2
- package/dist/core-styles.demo.css +1 -1
- package/dist/core-styles.docs.css +1 -1
- package/dist/core-styles.header.css +1 -1
- package/dist/core-styles.portal.css +1 -1
- package/dist/core-styles.settings.css +1 -1
- package/dist/core-styles.theme.default.css +1 -1
- package/dist/core-styles.theme.has-dark-logo.css +1 -1
- package/dist/core-styles.wysiwyg.css +1 -1
- package/dist/djangocms-blog/cms-pagination.css +1 -1
- package/dist/elements/README.css +1 -1
- package/dist/elements/bootstrap.css +1 -1
- package/dist/elements/demo.css +1 -1
- package/dist/elements/form.css +1 -1
- package/dist/elements/headings/demo.css +1 -1
- package/dist/elements/headings--cms.css +1 -1
- package/dist/elements/headings--docs.css +1 -1
- package/dist/elements/html-elements/demo.css +1 -1
- package/dist/elements/html-elements.cms.css +1 -1
- package/dist/elements/html-elements.css +1 -1
- package/dist/elements/html-elements.docs.css +1 -1
- package/dist/elements/irregular-link.css +1 -1
- package/dist/elements/links.css +1 -1
- package/dist/elements/mailto-link.css +1 -1
- package/dist/elements/monospace.css +1 -1
- package/dist/elements/root--cms.css +1 -1
- package/dist/elements/root--demo.css +1 -1
- package/dist/elements/root--docs.css +1 -1
- package/dist/elements/root--portal.css +1 -1
- package/dist/elements/root.css +1 -1
- package/dist/elements/sticky-footer/demo.css +1 -1
- package/dist/elements/sticky-footer.css +1 -1
- package/dist/elements/table--basic.css +1 -1
- package/dist/elements/table--nested.css +1 -1
- package/dist/elements/table.cms.css +1 -1
- package/dist/elements/table.css +1 -1
- package/dist/elements/table.docs.css +1 -1
- package/dist/elements/table.portal.css +1 -1
- package/dist/elements/table.selectors.css +1 -1
- package/dist/elements/tacc-search-bar.css +1 -1
- package/dist/fractal.server.refresh.css +1 -1
- package/dist/generics/README.css +1 -1
- package/dist/generics/attributes/demo.css +1 -1
- package/dist/generics/attributes.css +1 -1
- package/dist/generics/fonts.css +1 -1
- package/dist/generics/pseudo-elements.css +1 -1
- package/dist/objects/README.css +1 -1
- package/dist/objects/o-fixed-header-table/demo.css +1 -1
- package/dist/objects/o-fixed-header-table.css +1 -1
- package/dist/objects/o-flex-item-table-wrap/demo.css +1 -1
- package/dist/objects/o-flex-item-table-wrap.css +1 -1
- package/dist/objects/o-float-content.css +1 -1
- package/dist/objects/o-grid.css +1 -1
- package/dist/objects/o-heading-steps.css +1 -1
- package/dist/objects/o-offset-content.css +1 -1
- package/dist/objects/o-section/demo.css +1 -1
- package/dist/objects/o-section--docs.css +1 -1
- package/dist/objects/o-section.css +1 -1
- package/dist/objects/o-section.selectors.css +1 -1
- package/dist/objects/o-site.css +1 -1
- package/dist/objects/o-table-wrap/demo.basic.css +1 -1
- package/dist/objects/o-table-wrap/demo.extra.css +1 -1
- package/dist/objects/o-table-wrap/example.flexible-horz.css +1 -1
- package/dist/objects/o-table-wrap/example.overflow-hidden.css +1 -1
- package/dist/objects/o-table-wrap/example.overflow-scroll.css +1 -1
- package/dist/objects/o-table-wrap/o-table-wrap--flexible-horz.css +1 -1
- package/dist/objects/o-table-wrap/o-table-wrap--flexible-vert.css +1 -1
- package/dist/objects/o-table-wrap/o-table-wrap--overflow-hidden.css +1 -1
- package/dist/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.css +1 -1
- package/dist/objects/o-table-wrap/o-table-wrap--overflow-scroll.css +1 -1
- package/dist/objects/o-table-wrap.css +1 -1
- package/dist/settings/README.css +1 -1
- package/dist/settings/border.css +1 -1
- package/dist/settings/color/demo.css +1 -1
- package/dist/settings/color--cms.css +1 -1
- package/dist/settings/color--demo.css +1 -1
- package/dist/settings/color--docs.css +1 -1
- package/dist/settings/color--portal.css +1 -1
- package/dist/settings/color--portal.v1.css +1 -1
- package/dist/settings/color--portal.v2.css +1 -1
- package/dist/settings/color.accent.css +1 -1
- package/dist/settings/color.accent.v3.css +1 -1
- package/dist/settings/color.css +1 -1
- package/dist/settings/color.v3.css +1 -1
- package/dist/settings/demo.css +1 -1
- package/dist/settings/font/demo-family.css +1 -1
- package/dist/settings/font/demo-size.css +1 -1
- package/dist/settings/font/demo-style.css +1 -1
- package/dist/settings/font/demo-weight.css +1 -1
- package/dist/settings/font--cms.css +1 -1
- package/dist/settings/font--docs.css +1 -1
- package/dist/settings/font--portal.css +1 -1
- package/dist/settings/font.css +1 -1
- package/dist/settings/max-width.css +1 -1
- package/dist/settings/space.css +1 -1
- package/dist/tools/README.css +1 -1
- package/dist/tools/media-queries.css +1 -1
- package/dist/tools/selectors.common.css +1 -1
- package/dist/tools/selectors.css +1 -1
- package/dist/tools/selectors.form.css +1 -1
- package/dist/tools/selectors.monospace.css +1 -1
- package/dist/tools/x-article-link.css +1 -1
- package/dist/tools/x-blockquote.css +1 -1
- package/dist/tools/x-breadcrumbs.css +1 -1
- package/dist/tools/x-center.css +1 -1
- package/dist/tools/x-drop-cap.css +1 -1
- package/dist/tools/x-drop-cap.demo.css +1 -1
- package/dist/tools/x-fake-border.css +1 -1
- package/dist/tools/x-figure.css +1 -1
- package/dist/tools/x-grid.css +1 -1
- package/dist/tools/x-hero-banner/s-hero-banner.demo.css +1 -0
- package/dist/tools/x-hero-banner/x-hero-banner.demo.css +1 -0
- package/dist/tools/x-hero-banner.css +1 -0
- package/dist/tools/x-layout.css +1 -1
- package/dist/tools/x-link/demo.css +1 -1
- package/dist/tools/x-link.css +1 -1
- package/dist/tools/x-mailto-text-replace.css +1 -1
- package/dist/tools/x-message/demo.css +1 -1
- package/dist/tools/x-message.css +1 -1
- package/dist/tools/x-message.demo.css +1 -1
- package/dist/tools/x-message.v1.css +1 -1
- package/dist/tools/x-overlay.css +1 -1
- package/dist/tools/x-pagination/demo.css +1 -1
- package/dist/tools/x-pagination.css +1 -1
- package/dist/tools/x-tabs/demo.css +1 -1
- package/dist/tools/x-tabs.css +1 -1
- package/dist/tools/x-tabs.skin.css +1 -1
- package/dist/tools/x-tabs.structure.css +1 -1
- package/dist/tools/x-truncate.css +1 -1
- package/dist/trumps/README.css +1 -1
- package/dist/trumps/demo.css +1 -1
- package/dist/trumps/s-affixed-input-wrapper/demo.css +1 -1
- package/dist/trumps/s-affixed-input-wrapper.css +1 -1
- package/dist/trumps/s-article-list.css +1 -1
- package/dist/trumps/s-article-preview.css +1 -1
- package/dist/trumps/s-blockquote.css +1 -1
- package/dist/trumps/s-breadcrumbs.css +1 -1
- package/dist/trumps/s-cms-nav.css +1 -1
- package/dist/trumps/s-document.css +1 -1
- package/dist/trumps/s-drop-cap.css +1 -1
- package/dist/trumps/s-footer--thick.css +1 -1
- package/dist/trumps/s-footer--thin.css +1 -1
- package/dist/trumps/s-footer.css +1 -1
- package/dist/trumps/s-footer.properties.css +1 -1
- package/dist/trumps/s-form--cms.css +1 -1
- package/dist/trumps/s-form--login.css +1 -1
- package/dist/trumps/s-form--portal.css +1 -1
- package/dist/trumps/s-form-page/demo.css +1 -1
- package/dist/trumps/s-form-page/example.css +1 -1
- package/dist/trumps/s-form-page.css +1 -1
- package/dist/trumps/s-form.css +1 -1
- package/dist/trumps/s-form.selectors.css +1 -1
- package/dist/trumps/s-guide-doc.css +1 -1
- package/dist/trumps/s-header/s-header.demo.css +1 -1
- package/dist/trumps/s-header.bootstrap.css +1 -1
- package/dist/trumps/s-header.css +1 -1
- package/dist/trumps/s-hero-banner/readme.css +1 -0
- package/dist/trumps/s-hero-banner/s-hero-banner.demo.css +1 -1
- package/dist/trumps/s-hero-banner.css +1 -1
- package/dist/trumps/s-image-grid.css +1 -1
- package/dist/trumps/s-inline-dl.css +1 -1
- package/dist/trumps/s-irregular-links.css +1 -1
- package/dist/trumps/s-paragraph-table.css +1 -1
- package/dist/trumps/s-portal-nav.css +1 -1
- package/dist/trumps/s-style-guide.css +1 -1
- package/dist/trumps/s-system-specs.css +1 -1
- package/dist/trumps/s-truncated-table.css +1 -1
- package/dist/trumps/tacc-search-bar.css +1 -1
- package/dist/trumps/u-empty.css +1 -1
- package/dist/trumps/u-hide.css +1 -1
- package/dist/trumps/u-highlight/u-highlight.demo.css +1 -1
- package/dist/trumps/u-highlight.css +1 -1
- package/dist/trumps/u-mailto-text-replace.css +1 -1
- package/dist/trumps/u-nested-text-content.css +1 -1
- package/dist/vendors/bootstrap5/demo.css +1 -1
- package/dist/vendors/bootstrap5--border-spinner.css +1 -1
- package/package.json +1 -1
- package/src/lib/_imports/components/c-hero-banner/c-hero-banner.demo.css +4 -0
- package/src/lib/_imports/components/c-hero-banner/c-hero-banner.hbs +16 -0
- package/src/lib/_imports/components/c-hero-banner/config.yml +16 -0
- package/src/lib/_imports/components/c-hero-banner/readme.md +10 -0
- package/src/lib/_imports/components/c-hero-banner.css +37 -0
- package/src/lib/_imports/core-styles.cms.css +1 -0
- package/src/lib/_imports/tools/x-hero-banner/config.yml +14 -0
- package/src/lib/_imports/tools/x-hero-banner/readme.md +1 -0
- package/src/lib/_imports/tools/x-hero-banner/x-hero-banner.hbs +15 -0
- package/src/lib/_imports/tools/x-hero-banner.css +92 -0
- package/src/lib/_imports/trumps/s-hero-banner/config.yml +15 -1
- package/src/lib/_imports/trumps/s-hero-banner/readme.md +5 -0
- package/src/lib/_imports/trumps/s-hero-banner/s-hero-banner.demo.css +0 -1
- package/src/lib/_imports/trumps/s-hero-banner/s-hero-banner.hbs +11 -3
- package/src/lib/_imports/trumps/s-hero-banner.css +24 -49
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:hsla(0,0%,84%,.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}
|
package/dist/trumps/s-header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:hsla(0,0%,84%,.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{--height:50px;--header-major-border-width:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:var(--header-major-border-width) solid var(--header-major-border-color);font-family:var(--global-font-family--sans--portal);font-size:14px;font-weight:var(--bold);letter-spacing:.025px;line-height:1.4}.s-header .navbar-brand{height:calc(var(--height) - var(--nav-padding-vert)*2 - var(--header-major-border-width))}.s-header .navbar-brand{flex-basis:175px;flex-shrink:0;margin-right:15px;padding:unset}.s-header,.s-header .navbar-collapse{align-items:stretch}.s-header{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--border-width:4px;border-color:transparent;border-style:solid;border-width:0 0 var(--border-width);white-space:nowrap}.s-header .navbar-nav .nav-link{padding-inline:14px}@media (min-width:576px){.navbar-expand-sm.s-header .nav-item{display:flex}.navbar-expand-sm.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:768px){.navbar-expand-md.s-header .nav-item{display:flex}.navbar-expand-md.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:992px){.navbar-expand-lg.s-header .nav-item{display:flex}.navbar-expand-lg.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:1200px){.navbar-expand-xl.s-header .nav-item{display:flex}.navbar-expand-xl.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (max-width:575.98px){.navbar-expand-sm.s-header .nav-link{padding-block:8px}}@media (max-width:767.98px){.navbar-expand-md.s-header .nav-link{padding-block:8px}}@media (max-width:991.98px){.navbar-expand-lg.s-header .nav-link{padding-block:8px}}@media (max-width:1199.98px){.navbar-expand-xl.s-header .nav-link{padding-block:8px}}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--global-color-secondary--light)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.s-header .dropdown-menu{font-size:16px}.s-header .dropdown-menu{padding-block:5px}.s-header .dropdown-item{padding-block:2.5px;padding-inline:15px}.s-header [class*=fa-]{text-align:center;width:27px}.s-header .navbar-toggler{border-radius:0;padding:5px 8px}.s-header button.navbar-toggler{line-height:18px}.s-header .navbar-toggler-icon{filter:var(--menu-toggle-icon);height:18px;width:18px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! @tacc/core-styles 2.42.1+ | MIT | github.com/TACC/Core-Styles */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */main{padding-block:unset;width:unset}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */:has(>.x-hero-banner){container-type:inline-size}.x-hero-banner{position:relative}.x-hero-banner--wide-context{display:block;height:55.5rem;width:100%}.x-hero-banner--slim-context{display:grid;height:auto}.x-hero-banner__article{--inset-left:48px;background-color:hsla(0,0%,100%,.9);color:var(--global-color-primary--xx-dark);font-weight:700;padding:24px 84px 36px var(--inset-left);z-index:2}.x-hero-banner--wide-context .x-hero-banner__article{--offset-left:116px;--container-gap:0;bottom:50px;box-sizing:border-box;left:var(--offset-left);margin-left:calc((var(--inset-left) + var(--offset-left))*-1 + var(--container-gap));max-width:calc(100cqw - var(--offset-left));position:absolute;width:610px}.x-hero-banner__title{border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);font-size:2.4rem;margin-bottom:18px;margin-top:0;padding-bottom:14px}.x-hero-banner__media{height:100%;left:50%;-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;transform:translate(-50%,-50%);width:100cqw;z-index:1}:has(>.s-hero-banner){container-type:inline-size}.s-hero-banner{position:relative}@media (min-width:992px){.s-hero-banner{display:block;height:55.5rem;width:100%}.s-hero-banner article{--offset-left:116px;--container-gap:0;bottom:50px;box-sizing:border-box;left:var(--offset-left);margin-left:calc((var(--inset-left) + var(--offset-left))*-1 + var(--container-gap));max-width:calc(100cqw - var(--offset-left));position:absolute;width:610px}}@media (max-width:991.98px){.s-hero-banner{display:grid;height:auto}}.s-hero-banner article{--inset-left:48px;background-color:hsla(0,0%,100%,.9);color:var(--global-color-primary--xx-dark);font-weight:700;padding:24px 84px 36px var(--inset-left);z-index:2}.s-hero-banner.container article{--container-gap:calc(var(--global-space--bootstrap-gap)/2)}.s-hero-banner h1{border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);font-size:2.4rem;margin-bottom:18px;margin-top:0;padding-bottom:14px}.s-hero-banner img{height:100%;left:50%;-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;transform:translate(-50%,-50%);width:100cqw;z-index:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.x-grid--layout-cols-equal-set-count{grid-template-columns:repeat(var(--count),auto)}.x-grid--layout-cols-equal-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.s-image-grid,.x-grid--layout-cols-equal-min-width-max-count{--gap:var(--global-space--grid-gap);--max-cols:7;--min-width:250px;--row-height:auto;--gap-count:calc(var(--max-cols) - 1);--total-gap-width:calc(var(--gap-count)*var(--gap));--max-width:calc((100% - var(--total-gap-width))/var(--max-cols));display:grid;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(auto-fill,minmax(max(var(--min-width),var(--max-width)),1fr))}.x-grid--layout-rows-equal-max-height{grid-auto-rows:1fr}.x-grid--layout-rows-equal-set-height{grid-auto-rows:var(--height)}.x-grid--content-align-center{align-items:center;justify-items:center}.s-image-grid *{max-height:100%;max-width:100%}ul.s-image-grid{margin-bottom:unset;padding-inline-start:unset}ul.s-image-grid>li{list-style:none}.s-image-grid>a,.s-image-grid>li,.s-image-grid>li>a{align-items:center;display:flex;justify-content:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */dl.s-inline-dl dt{display:block;float:left;font-weight:var(--bold);margin-bottom:0}dl.s-inline-dl dd{clear:right;margin-bottom:0}dl.s-inline-dl dt:after{content:":";margin-inline-end:.25em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.x-link{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.5;pointer-events:none}.x-link--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.5;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed;text-decoration-thickness:var(--global-border-width--normal)}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}.s-irregular-links :is([class*=button--as-link]),.s-irregular-links a{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.s-irregular-links :is([class*=button--as-link]):hover,.s-irregular-links a:hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed;text-decoration-thickness:var(--global-border-width--normal)}.s-irregular-links :is([class*=button--as-link]):active,.s-irregular-links a:active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991.98px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991.98px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.s-truncated-table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--header-text-color);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}
|
package/dist/trumps/u-empty.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */
|
package/dist/trumps/u-hide.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.u-highlight-container{max-width:800px}.u-highlight{background-color:var(--global-color-primary--xxx-dark);color:var(--global-color-primary--xx-light);line-height:1;padding-inline:10px;text-transform:uppercase}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.u-highlight{-webkit-box-decoration-break:clone;box-decoration-break:clone}:is(h1,h2,h3,h4).u-highlight{display:inline}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;text-underline-offset:.3rem;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:initial;visibility:visible}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.button-wrapper,.c-form__buttons,:where(.s-form>footer){margin-top:unset}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @tacc/core-styles 2.
|
|
1
|
+
/*! @tacc/core-styles 2.43.1+ | MIT | github.com/TACC/Core-Styles */.spinner-border{animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);border-radius:50%;display:inline-block;height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);width:var(--bs-spinner-width)}@keyframes spinner-border{to{transform:rotate(1turn)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border-right-color:currentcolor;border:var(--bs-spinner-border-width) solid;border-right:var(--bs-spinner-border-width) solid transparent}@media (prefers-reduced-motion:reduce){.spinner-border{--bs-spinner-animation-speed:1.5s}}
|
package/package.json
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<div class="c-hero-banner {{#if hasContainer}}container{{/if}}">
|
|
2
|
+
<article class="c-hero-banner__article">
|
|
3
|
+
<h1 class="c-hero-banner__title">Core Experience Portal</h1>
|
|
4
|
+
<p>The Texas Advanced Computing Center (TACC) provides powerful and intuitive web interfaces that remove technological hurdles.</p>
|
|
5
|
+
</article>
|
|
6
|
+
<img class="c-hero-banner__media" src="https://utrc.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/72/18/72183c36-229e-4b56-a341-4591b7f5e68f/utrc-hero-1920-555-ratio.jpg__1680x1680_q85_subsampling-2.jpg" alt="hero banner">
|
|
7
|
+
</div>
|
|
8
|
+
{{#if hasContainer}}
|
|
9
|
+
<div class="container">
|
|
10
|
+
<div class="row">
|
|
11
|
+
<div class="col">
|
|
12
|
+
<p>The text in the hero banner should be left-aligned with this text.</p>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
{{/if}}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
status: wip
|
|
2
|
+
context:
|
|
3
|
+
shouldLoadCMS: true
|
|
4
|
+
variants:
|
|
5
|
+
- name: default
|
|
6
|
+
hidden: true
|
|
7
|
+
- name: has-container
|
|
8
|
+
label: Has Container
|
|
9
|
+
context:
|
|
10
|
+
shouldLoadBootstrap: true
|
|
11
|
+
hasContainer: true
|
|
12
|
+
- name: no-container
|
|
13
|
+
label: No Container
|
|
14
|
+
context:
|
|
15
|
+
shouldLoadBootstrap: false
|
|
16
|
+
hasContainer: false
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
A [hero banner](https://www.google.com/search?q=hero+banner) using many classes.
|
|
2
|
+
|
|
3
|
+
Usage:
|
|
4
|
+
1. Add one class to your container element.
|
|
5
|
+
2. Add HTML inside the container like the example.
|
|
6
|
+
3. Add classes to the elements like the example.
|
|
7
|
+
|
|
8
|
+
> **⚠️ Warning**
|
|
9
|
+
>
|
|
10
|
+
> Not tested with different elements than those used in the example.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@import url("../tools/media-queries.css");
|
|
2
|
+
@import url("../tools/x-hero-banner.css");
|
|
3
|
+
|
|
4
|
+
:has(> .c-hero-banner) {
|
|
5
|
+
@mixin hero-banner-container;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.c-hero-banner {
|
|
9
|
+
@mixin hero-banner;
|
|
10
|
+
}
|
|
11
|
+
@media (--medium-and-above) {
|
|
12
|
+
.c-hero-banner {
|
|
13
|
+
@mixin hero-banner--wide-context;
|
|
14
|
+
}
|
|
15
|
+
.c-hero-banner__article {
|
|
16
|
+
@mixin hero-banner-article--wide-context;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@media (--medium-and-below) {
|
|
20
|
+
.c-hero-banner {
|
|
21
|
+
@mixin hero-banner--slim-context;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.c-hero-banner__article {
|
|
26
|
+
@mixin hero-banner-article;
|
|
27
|
+
}
|
|
28
|
+
.c-hero-banner.container .c-hero-banner__article {
|
|
29
|
+
@mixin hero-banner-article--in-container;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.c-hero-banner__title {
|
|
33
|
+
@mixin hero-banner-title;
|
|
34
|
+
}
|
|
35
|
+
.c-hero-banner__media {
|
|
36
|
+
@mixin hero-banner-media;
|
|
37
|
+
}
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
@import url("./components/c-recognition.css");
|
|
46
46
|
@import url("./components/c-show-more.css");
|
|
47
47
|
@import url("./components/c-update.css");
|
|
48
|
+
@import url("./components/c-hero-banner.css");
|
|
48
49
|
|
|
49
50
|
/* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms
|
|
50
51
|
or — alternatively — TACC/Core-CMS */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Mixins with which to build a [hero banner](https://www.google.com/search?q=hero+banner).
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div class="
|
|
2
|
+
x-hero-banner
|
|
3
|
+
{{#if (eq context 'wide')}}
|
|
4
|
+
x-hero-banner--wide-context
|
|
5
|
+
{{/if}}
|
|
6
|
+
{{#if (eq context 'slim')}}
|
|
7
|
+
x-hero-banner--slim-context
|
|
8
|
+
{{/if}}
|
|
9
|
+
">
|
|
10
|
+
<article class="x-hero-banner__article">
|
|
11
|
+
<h1 class="x-hero-banner__title">Core Experience Portal</h1>
|
|
12
|
+
<p>The Texas Advanced Computing Center (TACC) provides powerful and intuitive web interfaces that remove technological hurdles.</p>
|
|
13
|
+
</article>
|
|
14
|
+
<img class="x-hero-banner__media" src="https://utrc.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/72/18/72183c36-229e-4b56-a341-4591b7f5e68f/utrc-hero-1920-555-ratio.jpg__1680x1680_q85_subsampling-2.jpg" alt="hero banner">
|
|
15
|
+
</div>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
|
|
2
|
+
|
|
3
|
+
@define-mixin hero-banner-container {
|
|
4
|
+
container-type: inline-size;
|
|
5
|
+
}
|
|
6
|
+
:has(> .x-hero-banner) {
|
|
7
|
+
@mixin hero-banner-container;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@define-mixin hero-banner {
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
.x-hero-banner {
|
|
14
|
+
@mixin hero-banner;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@define-mixin hero-banner--wide-context {
|
|
18
|
+
height: 55.5rem;
|
|
19
|
+
width: 100%;
|
|
20
|
+
display: block;
|
|
21
|
+
}
|
|
22
|
+
.x-hero-banner--wide-context {
|
|
23
|
+
@mixin hero-banner--wide-context;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@define-mixin hero-banner--slim-context {
|
|
27
|
+
height: auto;
|
|
28
|
+
display: grid;
|
|
29
|
+
}
|
|
30
|
+
.x-hero-banner--slim-context {
|
|
31
|
+
@mixin hero-banner--slim-context;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@define-mixin hero-banner-article {
|
|
35
|
+
--inset-left: 48px;
|
|
36
|
+
|
|
37
|
+
color: var(--global-color-primary--xx-dark);
|
|
38
|
+
background-color: rgb( from design-token('color.gray.light-2x') r g b / 0.9 );
|
|
39
|
+
z-index: 2;
|
|
40
|
+
padding: 24px 84px 36px var(--inset-left);
|
|
41
|
+
font-weight: bold;
|
|
42
|
+
}
|
|
43
|
+
.x-hero-banner__article {
|
|
44
|
+
@mixin hero-banner-article;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@define-mixin hero-banner-article--wide-context {
|
|
48
|
+
--offset-left: 116px;
|
|
49
|
+
--container-gap: 0;
|
|
50
|
+
|
|
51
|
+
position: absolute;
|
|
52
|
+
left: var(--offset-left);
|
|
53
|
+
bottom: 50px;
|
|
54
|
+
|
|
55
|
+
width: 610px;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
max-width: calc( 100cqw - var(--offset-left));
|
|
58
|
+
|
|
59
|
+
margin-left: calc(-1 * (var(--inset-left) + var(--offset-left)) + var(--container-gap));
|
|
60
|
+
}
|
|
61
|
+
@define-mixin hero-banner-article--in-container {
|
|
62
|
+
--container-gap: calc( var(--global-space--bootstrap-gap) / 2 );
|
|
63
|
+
}
|
|
64
|
+
.x-hero-banner--wide-context .x-hero-banner__article {
|
|
65
|
+
@mixin hero-banner-article--wide-context;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@define-mixin hero-banner-title {
|
|
69
|
+
margin-top: 0;
|
|
70
|
+
padding-bottom: 14px;
|
|
71
|
+
margin-bottom: 18px;
|
|
72
|
+
|
|
73
|
+
font-size: 2.4rem;
|
|
74
|
+
border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
|
|
75
|
+
}
|
|
76
|
+
.x-hero-banner__title {
|
|
77
|
+
@mixin hero-banner-title;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@define-mixin hero-banner-media {
|
|
81
|
+
width: 100cqw;
|
|
82
|
+
height: 100%;
|
|
83
|
+
object-fit: cover;
|
|
84
|
+
position: absolute;
|
|
85
|
+
z-index: 1;
|
|
86
|
+
left: 50%;
|
|
87
|
+
top: 50%;
|
|
88
|
+
transform: translate(-50%, -50%);
|
|
89
|
+
}
|
|
90
|
+
.x-hero-banner__media {
|
|
91
|
+
@mixin hero-banner-media;
|
|
92
|
+
}
|
|
@@ -1,2 +1,16 @@
|
|
|
1
|
+
status: ready
|
|
1
2
|
context:
|
|
2
|
-
shouldLoadCMS: true
|
|
3
|
+
shouldLoadCMS: true
|
|
4
|
+
variants:
|
|
5
|
+
- name: default
|
|
6
|
+
hidden: true
|
|
7
|
+
- name: has-container
|
|
8
|
+
label: Has Container
|
|
9
|
+
context:
|
|
10
|
+
shouldLoadBootstrap: true
|
|
11
|
+
hasContainer: true
|
|
12
|
+
- name: no-container
|
|
13
|
+
label: No Container
|
|
14
|
+
context:
|
|
15
|
+
shouldLoadBootstrap: false
|
|
16
|
+
hasContainer: false
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
<div class="s-home-banner">
|
|
1
|
+
<div class="s-hero-banner {{#if hasContainer}}container{{/if}}">
|
|
3
2
|
<article>
|
|
4
3
|
<h1>Core Experience Portal</h1>
|
|
5
4
|
<p>The Texas Advanced Computing Center (TACC) provides powerful and intuitive web interfaces that remove technological hurdles.</p>
|
|
6
5
|
</article>
|
|
7
|
-
<img
|
|
6
|
+
<img src="https://utrc.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/72/18/72183c36-229e-4b56-a341-4591b7f5e68f/utrc-hero-1920-555-ratio.jpg__1680x1680_q85_subsampling-2.jpg" alt="hero banner">
|
|
8
7
|
</div>
|
|
8
|
+
{{#if hasContainer}}
|
|
9
|
+
<div class="container">
|
|
10
|
+
<div class="row">
|
|
11
|
+
<div class="col">
|
|
12
|
+
<p>The text in the hero banner should be left-aligned with this text.</p>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
{{/if}}
|
|
@@ -1,62 +1,37 @@
|
|
|
1
1
|
@import url("../tools/media-queries.css");
|
|
2
|
-
@
|
|
2
|
+
@import url("../tools/x-hero-banner.css");
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
:has(> .s-hero-banner) {
|
|
5
|
+
@mixin hero-banner-container;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.s-hero-banner {
|
|
9
|
+
@mixin hero-banner;
|
|
10
|
+
}
|
|
6
11
|
@media (--medium-and-above) {
|
|
7
|
-
.s-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
.s-hero-banner {
|
|
13
|
+
@mixin hero-banner--wide-context;
|
|
14
|
+
}
|
|
15
|
+
.s-hero-banner article {
|
|
16
|
+
@mixin hero-banner-article--wide-context;
|
|
12
17
|
}
|
|
13
18
|
}
|
|
14
|
-
|
|
15
19
|
@media (--medium-and-below) {
|
|
16
|
-
.s-
|
|
17
|
-
|
|
18
|
-
display: grid;
|
|
20
|
+
.s-hero-banner {
|
|
21
|
+
@mixin hero-banner--slim-context;
|
|
19
22
|
}
|
|
20
23
|
}
|
|
21
24
|
|
|
22
|
-
.s-
|
|
23
|
-
|
|
25
|
+
.s-hero-banner article {
|
|
26
|
+
@mixin hero-banner-article;
|
|
24
27
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
/* Banner: Overlay */
|
|
28
|
-
@media (--medium-and-above) {
|
|
29
|
-
.s-home-banner article {
|
|
30
|
-
position: absolute;
|
|
31
|
-
height: auto;
|
|
32
|
-
width: 475px;
|
|
33
|
-
left: 116px;
|
|
34
|
-
bottom: 50px;
|
|
35
|
-
|
|
36
|
-
}
|
|
28
|
+
.s-hero-banner.container article {
|
|
29
|
+
@mixin hero-banner-article--in-container;
|
|
37
30
|
}
|
|
38
31
|
|
|
39
|
-
.s-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
font-weight: bold;
|
|
45
|
-
|
|
46
|
-
& h1 {
|
|
47
|
-
margin-top: 0;
|
|
48
|
-
padding-bottom: 14px;
|
|
49
|
-
margin-bottom: 18px;
|
|
50
|
-
font-size: 2.4rem; /* design deviates from standard to fit text on 2 lines */
|
|
51
|
-
border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
|
|
52
|
-
}
|
|
32
|
+
.s-hero-banner h1 {
|
|
33
|
+
@mixin hero-banner-title;
|
|
34
|
+
}
|
|
35
|
+
.s-hero-banner img {
|
|
36
|
+
@mixin hero-banner-media;
|
|
53
37
|
}
|
|
54
|
-
|
|
55
|
-
/* Banner: Image */
|
|
56
|
-
.s-home-banner__media {
|
|
57
|
-
width: 100%;
|
|
58
|
-
height: 100%;
|
|
59
|
-
object-fit: cover;
|
|
60
|
-
position: absolute;
|
|
61
|
-
z-index: 1;
|
|
62
|
-
}
|