openproject/app/views/layouts/styleguide/styleguide.layout.html.erb

<!doctype html>
<html>
  <head>
    <base href="/" />
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">
    <title>Living Style Guide for OpenProject</title>
    <script src="http://localhost:4200/assets/frontend/vendor.js"></script>
    <script src="http://localhost:4200/assets/frontend/polyfills.js"></script>
    <script src="http://localhost:4200/assets/frontend/runtime.js"></script>
    <script src="http://localhost:4200/assets/frontend/main.js"></script>
    <script src="http://localhost:4200/assets/frontend/styles.js"></script>
    <style>
      body {
        max-width: 65vw;
        margin: 0 auto;
        font-family: Lato;
        font-size: 16px;
        background-color: white;
      }

      .styleguide-nav--menu-items {
        margin: 0;
        background: var(--primary-color);
        flex-wrap: wrap;
      }

      .styleguide-nav li {
        padding: 0.5rem 1rem;
        flex: 1;
        text-align: center;
      }

      .styleguide-nav li:hover {
        background: var(--header-item-bg-hover-color);
      }

      .styleguide-nav a {
        color: var(--header-item-font-color);
      }

      .styleguide-nav a:hover {
        color: var(--header-item-font-hover-color);
        text-decoration: none;
      }

      .lsg-headline {
        margin-top: 3rem
      }

      .lsg-headline:first-child {
        margin: 0;
      }

      .lsg-sub-headline {
        margin-top: 2rem;
      }

      .lsg-code-block {
        margin: 1rem 0;
        border: 1px solid var(--toolbar-item--border-color);
      }

      .lsg-code {
        display: inline-block;
        min-width: 100%;
        padding: 1rem;
        border: none;
      }

      .styleguide-banner {
        padding: 200px 0 0;
        background: url('/assets/styleguide/logo_openproject.png');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        max-width: 700px;
        margin: 1rem auto 3rem auto;
      }

      .styleguide-banner--text {
        text-align: center;
      }

      .styleguide-nav--menu-items {
        display: flex;
        justify-content: space-between;
        list-style: none;
      }

      .livingstyleguide--code-block {
        max-height: 300px;
      }

      .livingstyleguide--example {
        overflow: visible;
      }

      .lsg-search-box {
        width: 40%;
        margin: 0 auto;
      }

      .icon-list {
        display: flex;
        flex-flow: row wrap;
        width: 640px;
        margin: 0 auto;
      }

      .icon-list li {
        flex: 1;
        flex-basis: 15%;
        display: block;
        text-align: center;
        margin: 10px;
        font-size: 12px;
      }

      .icon-list span.icon {
        display: block;
        font-size: 30px;
      }
    </style>
  </head>
<body class="lsg">
  <header class="livingstyleguide--header grid-content">
    <div class="styleguide-banner">
      <h1 class="styleguide-banner--text">Living Style Guide</h1>
    </div>
  </header>

  <nav class="styleguide-nav">
    <ul class="styleguide-nav--menu-items">
      <li><a target="_self" href="#color-variables">Colors</a></li>
      <li><a target="_self" href="#fonts">Fonts</a></li>
      <li><a target="_self" href="#forms">Forms</a></li>
      <li><a target="_self" href="#notifications">Notifications</a></li>
      <li><a target="_self" href="#buttons">Buttons</a></li>
      <li><a target="_self" href="#pagination">Pagination</a></li>
    </ul>
  </nav>

  <section class="livingstyleguide--intro grid-content">
    <p>&nbsp;</p>
  </section>
  <article class="lsg-container">
    <%= html %>
  </article>
  <footer class="livingstyleguide--footer grid-content">
    Copyright © 2020 OpenProject - All rights reserved.
  </footer>
  </body>
</html>
Make livingstyleguide somewhat working again 4 years ago			`<!doctype html>`
			`<html>`
			`<head>`
Move styleguide layout to somewhere it's not breaking stuff Under `app/assets` causes the asset compilation to break 4 years ago			`<base href="/" />`
Make livingstyleguide somewhat working again 4 years ago			`<meta charset="utf-8">`
			`<meta content="ie=edge" http-equiv="x-ua-compatible">`
			`<meta content="width=device-width,initial-scale=1" name="viewport">`
			`<meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">`
			`<title>Living Style Guide for OpenProject</title>`
			`<script src="http://localhost:4200/assets/frontend/vendor.js"></script>`
			`<script src="http://localhost:4200/assets/frontend/polyfills.js"></script>`
			`<script src="http://localhost:4200/assets/frontend/runtime.js"></script>`
			`<script src="http://localhost:4200/assets/frontend/main.js"></script>`
			`<script src="http://localhost:4200/assets/frontend/styles.js"></script>`
			`<style>`
			`body {`
			`max-width: 65vw;`
			`margin: 0 auto;`
			`font-family: Lato;`
			`font-size: 16px;`
			`background-color: white;`
			`}`
Move styleguide layout to somewhere it's not breaking stuff Under `app/assets` causes the asset compilation to break 4 years ago
Style header and navigation 4 years ago			`.styleguide-nav--menu-items {`
			`margin: 0;`
			`background: var(--primary-color);`
			`flex-wrap: wrap;`
			`}`

			`.styleguide-nav li {`
			`padding: 0.5rem 1rem;`
			`flex: 1;`
			`text-align: center;`
			`}`

			`.styleguide-nav li:hover {`
			`background: var(--header-item-bg-hover-color);`
			`}`

			`.styleguide-nav a {`
			`color: var(--header-item-font-color);`
			`}`

			`.styleguide-nav a:hover {`
			`color: var(--header-item-font-hover-color);`
			`text-decoration: none;`
			`}`

Add spacings to headings and style code boxes 4 years ago			`.lsg-headline {`
			`margin-top: 3rem`
			`}`

Style header and navigation 4 years ago			`.lsg-headline:first-child {`
			`margin: 0;`
			`}`

			`.lsg-sub-headline {`
			`margin-top: 2rem;`
			`}`

Add spacings to headings and style code boxes 4 years ago			`.lsg-code-block {`
Style header and navigation 4 years ago			`margin: 1rem 0;`
			`border: 1px solid var(--toolbar-item--border-color);`
Add spacings to headings and style code boxes 4 years ago			`}`

Move styleguide layout to somewhere it's not breaking stuff Under `app/assets` causes the asset compilation to break 4 years ago			`.lsg-code {`
Add spacings to headings and style code boxes 4 years ago			`display: inline-block;`
			`min-width: 100%;`
			`padding: 1rem;`
			`border: none;`
Move styleguide layout to somewhere it's not breaking stuff Under `app/assets` causes the asset compilation to break 4 years ago			`}`
Make livingstyleguide somewhat working again 4 years ago
			`.styleguide-banner {`
			`padding: 200px 0 0;`
			`background: url('/assets/styleguide/logo_openproject.png');`
			`background-position: top center;`
			`background-repeat: no-repeat;`
Style header and navigation 4 years ago			`background-size: contain;`
			`max-width: 700px;`
			`margin: 1rem auto 3rem auto;`
Make livingstyleguide somewhat working again 4 years ago			`}`

			`.styleguide-banner--text {`
			`text-align: center;`
			`}`

			`.styleguide-nav--menu-items {`
			`display: flex;`
			`justify-content: space-between;`
			`list-style: none;`
			`}`

			`.livingstyleguide--code-block {`
			`max-height: 300px;`
			`}`

			`.livingstyleguide--example {`
			`overflow: visible;`
			`}`

			`.lsg-search-box {`
			`width: 40%;`
			`margin: 0 auto;`
			`}`

			`.icon-list {`
			`display: flex;`
			`flex-flow: row wrap;`
			`width: 640px;`
			`margin: 0 auto;`
			`}`

			`.icon-list li {`
			`flex: 1;`
			`flex-basis: 15%;`
			`display: block;`
			`text-align: center;`
			`margin: 10px;`
			`font-size: 12px;`
			`}`

			`.icon-list span.icon {`
			`display: block;`
			`font-size: 30px;`
			`}`
			`</style>`
			`</head>`
			`<body class="lsg">`
			`<header class="livingstyleguide--header grid-content">`
			`<div class="styleguide-banner">`
			`<h1 class="styleguide-banner--text">Living Style Guide</h1>`
			`</div>`
			`</header>`

			`<nav class="styleguide-nav">`
			`<ul class="styleguide-nav--menu-items">`
			`<li><a target="_self" href="#color-variables">Colors</a></li>`
			`<li><a target="_self" href="#fonts">Fonts</a></li>`
			`<li><a target="_self" href="#forms">Forms</a></li>`
			`<li><a target="_self" href="#notifications">Notifications</a></li>`
			`<li><a target="_self" href="#buttons">Buttons</a></li>`
			`<li><a target="_self" href="#pagination">Pagination</a></li>`
			`</ul>`
			`</nav>`

			`<section class="livingstyleguide--intro grid-content">`
			`<p> </p>`
			`</section>`
			`<article class="lsg-container">`
			`<%= html %>`
			`</article>`
			`<footer class="livingstyleguide--footer grid-content">`
			`Copyright © 2020 OpenProject - All rights reserved.`
			`</footer>`
			`</body>`
			`</html>`