College of Business Style Guide

Magazine 

<header class="header" role="banner">
    <nav class="lehigh-nav desktop flex" aria-label="secondary navigation">
        <a class="lehigh-nav--universityhome" href="https://www.lehigh.edu/" title="Lehigh University Home">Lehigh Home</a>
        <ul class="lehigh-nav--links">
            <li><a href="https://securelb.imodules.com/s/1127/interior-hybrid.aspx?sid=1127&gid=1&pgid=5310&cid=9528">Give</a></li>
            <li><a href="http://www1.lehigh.edu/admissions/undergrad/visit">Visit</a></li>
            <li><a href="https://applyweb.collegenet.com/account/new/create?origin=https%3A//www.applyweb.com/shibboleth/gatekeeper%3Fdest%3Dhttps%253A%252F%252Fwww.applyweb.com%252Flehighg%252F">Apply</a></li>
        </ul>
    </nav>
    <div class="business-nav" id="main-nav">

        <picture class="image lehigh-logo">
            <a href="https://www.lehigh.edu" class="logo__link">
                <img class="web" src="/images/lehigh-logo.svg" alt="Lehigh University logo" />
                <img class="print" src="" alt="Lehigh University logo" />
                <span class="sr-only">Go to homepage</span>
            </a>
        </picture>
        <div class="college-name">
            <a href="/">College of Business</a>
        </div>

        <input id="mobile-menu-toggle" class="menu-toggle u-a11y-text mobile-menu-toggle" type="checkbox" aria-controls="mobile-menu-menu-container">
        <label class="menu-toggle-button menu-toggle-button--mobile-menu hamburger mobile" for="mobile-menu-toggle" data-controls="mobile-menu-menu-container" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">
            <span class="menu-toggle-button__icon menu-toggle-button__icon--burger">
                <span class="menu-toggle-button__icon--burger__inner"><span class="sr-only">Open the main menu</span></span>
            </span>
        </label>
        <nav class="menu flex menu--mobile-menu menu-toggle__toggleable menu-toggle__toggleable--full-height" aria-label="main navigation" id="mobile-menu-menu-container">
            <div class="menu-toggle__toggleable-content-wrapper">
                <div class="main-nav">
                    <ul class="main-menu">

                        <li class="main-menu__item one">

                            <input id="main-menu-item-toggle-one" class="menu-toggle u-a11y-text main-menu-item-toggle" type="checkbox" aria-controls="main-menu-item-menu-container-one">
                            <label class="main-menu__link main-menu__link--toggle main-menu__link--with-sub menu-toggle-button menu-toggle-button--the-menu" for="main-menu-item-toggle-one" data-controls="main-menu-item-menu-container-one" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">Menu</label>
                            <div class="main-menu--sub-nav menu-toggle__toggleable menu-toggle__toggleable--with-close" aria-label="Menu" id="main-menu-item-menu-container-one">
                                <div class="menu-toggle__toggleable-content-wrapper">

                                    <ul class="main-menu--sub">

                                        <li class="main-menu__item--sub title">

                                            Lehigh Business

                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Undergraduate</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Graduate</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Executive Education</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Alumni</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">About</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Centers</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Faculty & Research</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Events Calendar</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">News & Insights</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Directory</a>

                                        </li>

                        </li>

                    </ul>

                    <ul class="main-menu--sub">

                        <li class="main-menu__item--sub title">

                            Departments

                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Accounting</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Decision & Technology Analytics</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Economics</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Finance</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Managment</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Marketing</a>

                        </li>

                        </li>

                    </ul>
                    <div class="decoration"></div>
                </div>
            </div>
            </li>

            <li class="main-menu__item two">

                <input id="main-menu-item-toggle-two" class="menu-toggle u-a11y-text main-menu-item-toggle" type="checkbox" aria-controls="main-menu-item-menu-container-two">
                <label class="main-menu__link main-menu__link--toggle main-menu__link--with-sub menu-toggle-button menu-toggle-button--the-menu" for="main-menu-item-toggle-two" data-controls="main-menu-item-menu-container-two" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">Academics</label>
                <div class="main-menu--sub-nav menu-toggle__toggleable menu-toggle__toggleable--with-close" aria-label="Academics" id="main-menu-item-menu-container-two">
                    <div class="menu-toggle__toggleable-content-wrapper">

                        <ul class="main-menu--sub">

                            <li class="main-menu__item--sub title">

                                Undergraduate

                            <li class="main-menu__item--sub sub-title">

                                Degree Programs

                            <li class="main-menu__item--sub ">

                                <a href="#" class="main-menu__link main-menu__link--sub">BS Business & Economics</a>

                            </li>
                            <li class="main-menu__item--sub ">

                                <a href="#" class="main-menu__link main-menu__link--sub">BS Integrated Business & Engineering (IBE)</a>

                            </li>
                            <li class="main-menu__item--sub ">

                                <a href="#" class="main-menu__link main-menu__link--sub">BS Computer Science & Business (CSB)</a>

                            </li>

            </li>
            <li class="main-menu__item--sub sub-title">

                Majors

            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Accounting</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Business Information Systems</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Economics</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Finance</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Management</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Marketing</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Supply Chain Managment</a>

            </li>

            </li>
            <li class="main-menu__item--sub sub-title">

                Minors

            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Business Information Systems</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Entrepreneurship</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Fintech</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Management</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Real Estate</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Supply Chain Management</a>

            </li>

            </li>

            </li>

            </ul>

            <div class="main-menu--stacked">
                <ul class="main-menu--sub">

                    <li class="main-menu__item--sub title">

                        Graduate

                    <li class="main-menu__item--sub sub-title">

                        Master's Program

                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">1-MBA</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">Flex MBA</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Accounting & Information Analysis</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Applied Economics</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Financial Engineering</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Mangament</a>

                    </li>

                    </li>
                    <li class="main-menu__item--sub sub-title">

                        PH.D. Program

                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">PH.D. Business & Economics</a>

                    </li>

                    </li>

                    </li>

                </ul>

                <ul class="main-menu--sub">

                    <li class="main-menu__item--sub title">

                        Executive Education

                    <li class="main-menu__item--sub sub-title">

                        <a href="#" class="main-menu__link main-menu__link--sub">Programs for Individuals</a>

                    </li>
                    <li class="main-menu__item--sub sub-title">

                        <a href="#" class="main-menu__link main-menu__link--sub">Programs for Organizations</a>

                    </li>
                    <li class="main-menu__item--sub sub-title">

                        <a href="#" class="main-menu__link main-menu__link--sub">Certificate Programs</a>

                    </li>

                    </li>

                </ul>
                <div class="decoration"></div>
            </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </nav>
    <div class="main-search">

        <input id="site-search-toggle" class="menu-toggle u-a11y-text site-search-toggle" type="checkbox" aria-controls="site-search-menu-container">
        <label class="menu-toggle-button menu-toggle-button--site-search" for="site-search-toggle" data-controls="site-search-menu-container" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">
            <span class="menu-toggle-button__icon menu-toggle-button__icon--magnifying-glass"><span class="sr-only">open search</span></span>
            <span class="menu-toggle-button__icon menu-toggle-button__icon--close"><span class="sr-only">close the search</span></span>
        </label>
        <div class="main-search__block-wrapper menu-toggle__toggleable" aria-label="site search" id="site-search-menu-container">
            <div class="menu-toggle__toggleable-content-wrapper">
                This is where the search block should go
            </div>
        </div>
    </div>
    </div><!-- end business-nav -->
    <div class="name-tag" id="name-tag">Lehigh Business</div>
</header>
<div id="content"></div>
<div class="shell-wrapper">
    <h1>Magazine</h1>
    <main>
        <section class="magazines">
            <div class="magazine_section">
                <div class="hover_box_image">
                    <div class="hover-box zoom no_text">
                        <div class="hover-box-image">
                            <img src="/images/Faculty.png" alt="" />
                        </div>
                        <div class="hover-box-color_overlay blue"></div>
                    </div><!-- end hover-box -->
                </div><!-- end hover_box_image -->
                <div class="magazine_text">
                    <h3><a href="https://lehigh.edu">Story Headline</a></h3>
                    <p>Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor.</p>
                </div><!-- end magazine_text -->
            </div><!-- end magazine_section -->
            <div class="magazine_section">
                <div class="hover_box_image">
                    <div class="hover-box zoom no_text">
                        <div class="hover-box-image">
                            <img src="/images/Faculty.png" alt="" />
                        </div>
                        <div class="hover-box-color_overlay gold"></div>
                    </div><!-- end hover-box -->
                </div><!-- end hover_box_image -->
                <div class="magazine_text">
                    <h3><a href="https://lehighsports.com">Story Headline</a></h3>
                    <p>Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor.</p>
                </div><!-- end magazine_text -->
            </div><!-- end magazine_section -->
        </section>
        <nav class="magazine_right">
            <h2 class="magazine_taxonomy"><a href="https://lehigh.edu">Heading 1</a></h2>
            <ul class="magazine_stories_heading">
                <li><a href="#">Article Title</a></li>
                <li><a href="#">Article Title</a></li>
                <li><a href="#">Article Title</a></li>
            </ul>
            <h2 class="magazine_taxonomy"><a href="https://lehigh.edu">Heading 1</a></h2>
            <ul class="magazine_stories_heading">
                <li><a href="#">Article Title</a></li>
                <li><a href="#">Article Title</a></li>
                <li><a href="#">Article Title</a></li>
            </ul>
            <h2 class="magazine_taxonomy"><a href="https://lehigh.edu">Heading 1</a></h2>
            <ul class="magazine_stories_heading">
                <li><a href="#">Article Title</a></li>
                <li><a href="#">Article Title</a></li>
                <li><a href="#">Article Title</a></li>
            </ul>
        </nav>
    </main>
</div>
<footer class="footer" role="contentinfo">
    <div class="footer-top">
        <div class="university-info">
            <div class='college-logo'>

                <picture class="image lehigh-logo">
                    <a href="https://www.lehigh.edu" class="logo__link">
                        <img class="web" src="/images/lehigh-logo.svg" alt="Lehigh University logo" />
                        <img class="print" src="" alt="Lehigh University logo" />
                        <span class="sr-only">Go to homepage</span>
                    </a>
                </picture>
                <div class="college-name">
                    <a href="/">College of<br />Business</a>
                </div>
            </div>
            <address class="address">Business Innovation Building | 201 E. Packer Avenue | Bethlehem, PA 18015 USA</address>
            <address class="address">Rauch Business Center | 621 Taylor Street | Bethlehem, PA 18015 USA</address>
        </div>
        <!-- end university-info -->
        <div class="social-media">
            <ul class="sm-icons">

                <li>
                    <a href="https://www.instagram.com/lehighubusiness/" title="Like us on Instagram">
                        <i class="fab fa-instagram"></i>
                        <span class="sr-only">Instagram</span>
                    </a>
                </li>
                <li>
                    <a href="https://www.facebook.com/lehighubusiness/" title="Like us on Facebook">
                        <i class="fab fa-facebook-f"></i>
                        <span class="sr-only">Facebook</span>
                    </a>
                </li>
                <li>
                    <a href="https://www.linkedin.com/school/lehigh-college-of-business/" title="Like us on LinkedIn">
                        <i class="fab fa-linkedin"></i>
                        <span class="sr-only">LinkedIn</span>
                    </a>
                </li>
                <li>
                    <a href="https://www.youtube.com/channel/UCaGpjEtAnNgwbL11_QNGNFw" title="Like us on YouTube">
                        <i class="fab fa-youtube"></i>
                        <span class="sr-only">YouTube</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- end social-media -->
    </div>
    <!-- footer-top -->
    <div class="footer-bottom">
        <!-- LEHIGH FOOTER INCLUDED VIA SCRIPT DO NOT REMOVE -->
        <script type="text/javascript" src="//www.lehigh.edu/~inltswms/include/footer/lu-footer-min.js"></script>
    </div>
    <!-- end footer-bottom -->
    <button id="back_top">
        <a title="Back to top" href="#">&#10148;</a>
    </button>
</footer>
 
{% render "@header" %}
<div class="shell-wrapper">
  <h1>{{ page_header }}</h1>
  <main>
    {% include "@magazine_section" %}
    {% include "@magazine_right" %}
  </main>
</div>
{% render "@footer" %}
 
{
  "page_header": "Magazine",
  "storys": {
    "1": {
      "color": "blue",
      "img_src": "/images/Faculty.png",
      "url": "https://lehigh.edu",
      "headline": "Story Headline",
      "descripton": "Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor."
    },
    "2": {
      "color": "gold",
      "img_src": "/images/Faculty.png",
      "url": "https://lehighsports.com",
      "headline": "Story Headline",
      "descripton": "Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor."
    }
  },
  "magazine_groups": {
    "1": {
      "magazine_taxonomy": "Heading 1",
      "taxonomy_url": "https://lehigh.edu",
      "magazine_storys": {
        "1": {
          "story_headline": "Article Title",
          "story_url": "#"
        },
        "2": {
          "story_headline": "Article Title",
          "story_url": "#"
        },
        "3": {
          "story_headline": "Article Title",
          "story_url": "#"
        }
      }
    },
    "2": {
      "magazine_taxonomy": "Heading 1",
      "taxonomy_url": "https://lehigh.edu",
      "magazine_storys": {
        "1": {
          "story_headline": "Article Title",
          "story_url": "#"
        },
        "2": {
          "story_headline": "Article Title",
          "story_url": "#"
        },
        "3": {
          "story_headline": "Article Title",
          "story_url": "#"
        }
      }
    },
    "3": {
      "magazine_taxonomy": "Heading 1",
      "taxonomy_url": "https://lehigh.edu",
      "magazine_storys": {
        "1": {
          "story_headline": "Article Title",
          "story_url": "#"
        },
        "2": {
          "story_headline": "Article Title",
          "story_url": "#"
        },
        "3": {
          "story_headline": "Article Title",
          "story_url": "#"
        }
      }
    }
  }
}
  • Content: 
    blockquote {
    background: $lehigh-brown_10;
    border-left: 10px solid $gold;
    margin: 1.5em 10px;
    padding: 0.5em 10px;

    p,
    h2 {
        display: inline;
        font-size: 1.9rem;
    }
}

.view-eva.view-magazine-article-article-listing {

}

.view-id-magazine_listing {
    margin-top: 4em;
}

/** Article layout */
.page-node-type-magazine-article .main-content {

}

/** Magazine Layout */
.page-node-type-magazine .main-content {

}


.mag-main-about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 50em;
    
    @media screen and (min-width: $break-tablet) {
        flex-direction: row;
    }

    img {
        margin-right: 1em;
        align-self: center;

        @media screen and (min-width: $break-tablet) {
            max-width: 140px;
            align-self: unset;
        }
    }

}
.mag-main-layout {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: $large) {
        flex-direction: row;
        justify-content: space-between;
    }

    .magazine_section {
        @media screen and (min-width: $large) {
            padding-right: 2em;
        }
    }
    
    .magazine-article-listing {
        margin-top: 2em;

        @media screen and (min-width: $large) {
            margin-top: 0;
        }
    }
}
.mag-article-main-layout {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: $xl) {
        flex-direction: row;
    }

    .mag-article-main-about {
        @media screen and (min-width: $xl) {
            padding-right: 2em;
        }
    }

    .mag-article-listing {
        min-width: 300px;
        // @media screen and (min-width: $large) {
        //     width: 300px;
        // }

        .magazine-article-listing {
            margin-top: 2em;
    
            @media screen and (min-width: $large) {
                margin-top: 0;
            }
        }
    }
}
  • URL: /components/raw/magazine/magazine.scss
  • Filesystem Path: components/04-layouts/12-magazine/magazine.scss
  • Size: 1.9 KB

No notes defined.