sbpage.html

---
layout: base
---
{%- assign _page_mode = page.mode | default: layout.mode | default: site.data.variables.default.page.mode -%}
{%- assign _page_type = page.type | default: layout.type | default: site.data.variables.default.page.type -%}
{%- assign _article_header_type = page.article_header.type | default: layout.article_header.type -%}

{%- include snippets/assign.html
  target=layout.header source0=page.header -%}
{%- assign _header = __return -%}

{%- include snippets/assign.html
  target=layout.footer source0=page.footer -%}
{%- assign _footer = __return -%}

{%- include snippets/assign.html
  target=layout.lightbox source0=page.lightbox -%}
{%- assign _lightbox = __return -%}

{%- include snippets/assign.html
  target = site.data.variables.default.page.full_width
  source0=layout.full_width source1=page.full_width -%}
{%- assign _full_width = __return -%}

{%- include snippets/assign.html
  target = site.data.variables.default.page.co
  source0=layout.comment source1=page.comment -%}
{%- assign _comment = __return -%}


{%- assign _article_header_excerpt_truncate = include.excerpt_truncate | default: 200 -%}

{%- if page.sidebar -%}
<div class="layout--page layout--page--sidebar clearfix js-page-root">
  <div class="page__mask d-print-none js-page-mask js-sidebar-hide"></div>
  <div class="page__viewport">
    <div class="page__actions d-print-none">
      <div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
        <i class="fas fa-bars icon--show"></i>
      </div>
    </div>

    <div class="grid page__grid">

      <div class="page__sidebar d-print-none">
        {%- include sidebar/toc.html -%}
      </div>

{%- else -%}
<div class="layout--page js-page-root">
{%- endif -%}

    {%- assign _page_main_class = 'page__main js-page-main' -%}
    {%- if _page_mode == 'immersive' -%}
      {%- assign _page_main_class = _page_main_class | append: ' page__main--immersive' -%}
    {%- endif -%}
    {%- unless page.sidebar -%}
      {%- assign _page_main_class = _page_main_class | append: ' page__viewport' -%}
    {%- endunless -%}
    {%- if _footer == false -%}
      {%- assign _page_main_class = _page_main_class | append: ' hide-footer' -%}
    {%- endif -%}
    {%- if page.aside -%}
      {%- assign _page_main_class = _page_main_class | append: ' has-aside' -%}
    {%- elsif _full_width -%}
      {%- assign _page_main_class = _page_main_class | append: ' full-width' -%}
    {%- endif -%}
    <div class="{{ _page_main_class }} cell cell--auto">

      <div class="page__main-inner">
      {%- if _header != false -%}
        <div class="page__header d-print-none">
        {%- assign _header_theme = page.header.theme | default: layout.header.theme -%}
        {%- if _header_theme == 'dark'-%}
          {%- include header.html theme='dark' background=page.header.background -%}
        {%- elsif _header_theme == 'light' -%}
          {%- include header.html theme='light' background=page.header.background -%}
        {%- else -%}
          {%- include header.html -%}
        {%- endif -%}
        </div>
      {%- endif -%}


        <div class="page__content">
        {%- if _article_header_type == 'overlay' or _article_header_type == 'cover' -%}

          {%- if _article_header_type == 'overlay' -%}

            {%- assign _article_header_height = page.article_header.height | default: layout.article_header.height -%}
            {%- assign _article_header_align = page.article_header.align | default: layout.article_header.align | default: site.data.variables.default.page.article_header.align -%}
            {%- assign _article_header_theme = page.article_header.theme | default: layout.article_header.theme | default: site.data.variables.default.page.article_header.theme -%}

            {%- if page.article_header.background_image.src -%}
              {%- assign _header_background_image_src = page.article_header.background_image.src -%}
            {%- elsif page.article_header.background_image != false and page.cover -%}
              {%- assign _header_background_image_src = page.cover -%}
            {%- endif -%}

            {%- if page.article_header.background_image.gradient -%}
              {%- assign _header_background_image = page.article_header.background_image.gradient -%}
              {%- if _header_background_image_src -%}
                {%- assign _header_background_image = _header_background_image | append: ',' -%}
              {%- endif -%}
            {%- endif -%}

            {%- if _header_background_image_src -%}
              {%- include snippets/get-nav-url.html path=_header_background_image_src -%}
              {%- assign _header_background_image_src = __return -%}
              {%- assign _header_background_image = _header_background_image
                | append: 'url(' | append: _header_background_image_src  | append: ')'-%}
            {%- endif -%}

            {%- assign _header_style = 'background-image:' | append: _header_background_image | append: ';' -%}

            {%- if page.article_header.background_color -%}
              {%- assign _header_style = _header_style | append: 'background-color:' | append: page.article_header.background_color | append: ';' -%}
            {%- endif -%}

            {%- if _article_header_height -%}
              {%- assign _header_style = _header_style | append: 'min-height:' | append: _article_header_height | append: ';' -%}
            {%- endif -%}

            <div class="article__header--overlay">

            {%- if _article_header_theme == 'light' -%}
              {%- if _article_header_align == 'center' -%}
                <div class="hero hero--center hero--light overlay" style="{{ _header_style }}">
              {%- else -%}
                <div class="hero hero--light overlay" style="{{ _header_style }}">
              {%- endif -%}
            {%- elsif _article_header_theme == 'dark' -%}
              {%- if _article_header_align == 'center' -%}
                <div class="hero hero--center hero--dark overlay" style="{{ _header_style }}">
              {%- else -%}
                <div class="hero hero--dark overlay" style="{{ _header_style }}">
              {%- endif -%}
            {%- else -%}
              {%- if _article_header_align == 'center' -%}
                <div class="hero hero--center overlay" style="{{ _header_style }}">
              {%- else -%}
                <div class="hero overlay" style="{{ _header_style }}">
              {%- endif -%}
            {%- endif -%}
                <div class="hero__content position-absolute w-100 m-0 z-3 herofix">
                  {%- if _full_width == false -%}
                    <div class ="main">
                  {%- endif -%}
                    {%- comment -%} {%- include article-info.html article=page semantic=false -%} {%- endcomment -%}
                    {%- include article-header.html article=page semantic=false -%}
                    {%- if page.excerpt -%}
                      <p class="overlay__excerpt">{{ page.excerpt | strip_newlines | strip | truncate: _article_header_excerpt_truncate }}</p>
                    {%- endif -%}

                    {%- if page.jumbotron -%}

                    {%- assign _registration_enabled = '' -%}
                    {%- unless page.jumbotron.registration_active -%}
                      {%- assign _registration_enabled = _registration_enabled | append: 'disabled' -%}
                    {%- endunless -%}

                    <div class="border rounded-3 p-5 mx-auto text-center articlepage">
                    
                      <div class="d-grid gap-2 d-sm-block mb-3 mx-auto regbuttondiv">
                        <a href="{{ page.jumbotron.registration_link }}" class="btn btn-primary btn-lg h-100 w-100 link-light link-underline link-underline-opacity-0 d-flex align-items-center justify-content-center regbutton {{ _registration_enabled }}" target="_blank" rel="noreferrer noopener">
                            <h3>
                              Register Now!
                            </h3>
                        </a>
                      </div>
                      <div class="d-grid gap-2 d-sm-block mx-auto">
                        <a href="#learnMore" class="btn btn-secondary btn-lg link-light link-underline link-underline-opacity-0 d-flex align-items-center justify-content-center mx-auto actionsdiv"><h6>Learn More <i class="fas fa-solid fa-angle-down fa-lg"></i></h6></a>
                      </div>
                      <hr class="my-4" />
                        <h6>{{ page.jumbotron.content }}</h6>

                      <div class="container text-center mt-3 actionsdiv">
                        <div class="row row-cols-2">
                          {%- for _action in page.jumbotron.actions -%}
                          <div class="col">
                            <button type="button" class="btn btn-secondary w-100" data-bs-toggle="modal" data-bs-target="#{{ _action.text }}"><h6>{{ _action.text }}</h6></button>
                          </div>
                          {%- endfor -%}
                        </div>
                      </div>

                    </div>
                    {%- endif -%}

                  {%- if _full_width == false -%}
                    </div>
                  {%- endif -%}
                </div>

                {%- if page.carousel -%}
                <button class="carousel-control-prev carouselbuttonfix" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next carouselbuttonfix" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
                <div id="carouselControls" class="carousel slide opacity-50 carouselfix" data-bs-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="{{ page.carousel.active }}" class="d-block w-100" alt="...">
                    </div>
                    {%- for image in page.carousel.images -%}
                    <div class="carousel-item">
                      <img src="{{ image.src }}" class="d-block w-100" alt="...">
                    </div>
                    {%- endfor -%}
                  </div>
                </div>
                {%- endif -%}

              </div>
            </div>
          {%- elsif _article_header_type == 'cover' -%}
            {%- if page.article_header.image.src -%}
              {%- include snippets/get-nav-url.html path=page.article_header.image.src -%}
              {%- assign _header_image_src = __return -%}
              <img class="article__header--cover" src="{{ _header_image_src }}" />
            {%- endif -%}
          {%- endif -%}

        {%- endif -%}


        {%- if _full_width == false -%}
          <div class ="main">
        {%- endif -%}
            <div class="grid grid--reverse">

              <div class="col-aside d-print-none js-col-aside">
                {%- if page.aside -%}
                  <aside class="page__aside js-page-aside">
                    {%- include aside/toc.html -%}
                  </aside>
                {%- endif -%}
              </div>

              <div class="col-main cell cell--auto">
                {%- include main/top/custom.html -%}
                {%- if _page_type == 'article' -%}
                  <article itemscope itemtype="http://schema.org/Article">
                {%- elsif _page_type == 'webpage' -%}
                  <article itemscope itemtype="http://schema.org/WebPage">
                {%- else -%}
                  <article>
                {%- endif -%}

                {%- if _article_header_type == 'overlay' or page.article_header == false -%}
                  {%- include article-header.html article=page html=false -%}
                  {%- include article-info.html article=page html=false -%}
                {%- else -%}
                  {%- include article-header.html article=page -%}
                  {%- include article-info.html article=page -%}
                {%- endif -%}

                    <div class="js-article-content">{{ content }}</div>
                    {%- if _comment != false -%}
                      <section class="page__comments d-print-none">{%- include comments.html -%}</section>
                    {%- endif -%}
                </article>
                {%- include main/bottom/custom.html -%}
              </div>
            </div>

        {%- if _full_width == false -%}
          </div>
        {%- endif -%}
        </div>

        {%- if _footer != false -%}
          <div class="page__footer d-print-none">{%- include footer.html -%}</div>
        {%- endif -%}
      </div>
    </div> {%- comment -%} end page__main {%- endcomment -%}
{%- if page.sidebar -%}
    </div> {%- comment -%} end grid {%- endcomment -%}
  </div> {%- comment -%} end page__viewport {%- endcomment -%}
{%- endif -%}

<script>{%- include scripts/lib/modal.js -%}</script>
{%- if _lightbox == true -%}
  <div class="modal d-print-none js-page-gallery-modal"><div class="gallery"></div></div>
{%- endif -%}
{%- if _header != false -%}
  <div class="modal modal--overflow page__search-modal d-print-none js-page-search-modal">{%- include search.html -%}</div>
{%- endif -%}
</div>


<script>
  {%- include scripts/lib/scroll-to.js -%}
  {%- include scripts/lib/affix.js -%}
  {%- include scripts/lib/toc.js -%}
  {%- if _lightbox == true -%}
    {%- include scripts/lib/gallery.js -%}
    {%- include scripts/components/lightbox.js -%}
  {%- endif -%}
  {%- include scripts/page.js -%}
</script>

{%- if page.sidebar -%}
<script>{%- include scripts/components/sidebar.js -%}</script>
{%- endif -%}

{%- if page.aside -%}
<script>
  /* toc must before affix, since affix need to konw toc' height. */
  {%- if page.aside.toc -%}{%- include scripts/aside/toc.js -%}{%- endif -%}
  {%- include scripts/aside/affix.js -%}
</script>
{%- endif -%}

{%- include markdown-enhancements.html -%}
{%- include pageview.html -%}