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 name="openproject_initializer"
          data-locale="en"
          data-default-locale="en" />
    <meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">
    <title>Living Style Guide for OpenProject</title>
    <script type="application/javascript" src="/assets/frontend/vendor.js"></script>
    <script type="application/javascript" src="/assets/frontend/polyfills.js"></script>
    <script type="application/javascript" src="/assets/frontend/runtime.js"></script>
    <script type="application/javascript" src="/assets/frontend/main.js"></script>
    <link rel="stylesheet" media="all" href="/assets/frontend/styles.css">

    <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 {
        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;
      }

      /* Tablet screen size */
      @media only screen and (max-width: 1210px) {
        body {
          max-width: unset;
          margin: 0 1rem;
          transition: all 0.4s;
        }
      }

      /* Mobile screen size */
      @media only screen and (max-width: 679px) {
        .styleguide-banner {
          padding: 25% 0 0;
        }
      }
    </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="#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>
      <li><a target="_self" href="#user-content">User Content</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">`
Fix styling of LSG [ci skip] 4 years ago			`<meta name="openproject_initializer"`
			`data-locale="en"`
			`data-default-locale="en" />`
Make livingstyleguide somewhat working again 4 years ago			`<meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">`
			`<title>Living Style Guide for OpenProject</title>`
Fix styling of LSG [ci skip] 4 years ago			`<script type="application/javascript" src="/assets/frontend/vendor.js"></script>`
			`<script type="application/javascript" src="/assets/frontend/polyfills.js"></script>`
			`<script type="application/javascript" src="/assets/frontend/runtime.js"></script>`
			`<script type="application/javascript" src="/assets/frontend/main.js"></script>`
			`<link rel="stylesheet" media="all" href="/assets/frontend/styles.css">`

Make livingstyleguide somewhat working again 4 years ago			`<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 {`
			`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;`
			`}`
Add mobile styles 4 years ago
			`/* Tablet screen size */`
			`@media only screen and (max-width: 1210px) {`
			`body {`
			`max-width: unset;`
			`margin: 0 1rem;`
			`transition: all 0.4s;`
			`}`
			`}`

			`/* Mobile screen size */`
			`@media only screen and (max-width: 679px) {`
			`.styleguide-banner {`
			`padding: 25% 0 0;`
			`}`
			`}`
Make livingstyleguide somewhat working again 4 years ago			`</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="#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>`
Fix/update wysiwyg styles (#8844) This is a refactoring of the CSS classes in the WYSIWYG editor. The classes now use proper BEM and are almost completely independent of other CSS. It also includes small style refactorings, like a reduction of heading size in attribute fields, and an increase in heading size in all other instances. * Initial class definitions * Added more classes * Added Table of Contents basics * CkEditor applying custom CSS classes to p, h1, h2, h3, h4, h5, h6, li and blockquote * CKEditorInspector removed * op css class for headings * op css class for paragraphs * op css class for code/code block * adapt specs to altered markdown/html generation * adapt grid/budget representers to altered signature * op css class for lists * op css class for toc * op css class for links * Start working on typography css * op css class for tables * Fixing more typography, trying out larger headers * Applying custom classes to li, a, blockquote, figure, table, tr, td, th, image, codeblock, figcaption and macros * adapt specs to altered link classes * op css class for images * apply user content container class throughout application * CSS alignment custom classes applied to table * op css class for task list checkbox * Added task checkbox class * amend list checkbox class in backend * op css class for table thead element * adapt specs on image html generation * Updated table and typography styles * Update typography and figure styles * Figure overflow handling * Table alignment styles + ckEditor styles removed * rename wiki-anchor to op-uc-link_permalink * wrap table in div as well as figure * Updated code-block * Update permalinks * Fixed a lot about tables * Removed Description header from work-packages page * Fix frontend styles * Add placeholder styling, fix toc * Fixed figure print * working with table aligns * Custom class add to task lists * Custom classes applied to theads * op-uc-container custom class added to container * Codeblocks inside pre elements * Fix: single <code> and <a> tags * explicitly require overwritten gem class Apparently, the gem is not loaded yet when it is registered as a filter when in eager loading mode * adapt spec expectation to altered toc rendering * CkInspector removed * Latest ckeditor changes * remove highlight css class from wiki content * allow html pipleline to handle macros with additional classes * Fixed a lot of print css for tables * Add general print css back in * Update Table of Contents styling * Custom classes on ul, ol, li and task-lists * Revert "Custom classes on ul, ol, li and task-lists" This reverts commit 0d27d281378b324330ea2f25632de898269e2122. * Custom classes on ul, ol, li and task-lists * Custom classes on column's th * remove placeholder class when rendering * WOrking on task lists * Changing task-list classes, changed tests * Updated list styles * Remove unused todo list styles * remove checked in binstubs * Fix table of contents * adapt todo list handing in backend pipeline * adapt specs to altered css classes * Add numbers to table of contents * Better comments in table of contents * Fix: wrap single <table> with a <figure> * Fixes to todo list design * Updated todo list scss to fix nested lists * adapt selectors in table spec * Update table styles * Improve table borders more * Custom classes specs * Fix: no need to remove regular list classes when its type changes * Add modifier for inline headings * Update table editing styles * Remove break-word tests * wrap images just like tables * Update figure content styles * Fix: All tests passing (ul.op-uc-list_task-list) * div.op-uc-figure--content wrapping tables * Specs for figures wrappers div.op-uc-figure--content * Fix: add custom classes to links and codes again * Table wrapper div reverted + specs * Fix inline palceholders * Custom macro type classes * Add basic macro placeholder changes * Move heading permalink after text * Fix word-break spec * Sending figure styles to the backend (width) * extend test to take ckeditor placeholder into account * avoid adding bem classes multiple times * attempt to fix flickering spec * Removing image spinner when uploading finishes * adapt spec expectations Co-authored-by: Aleix Suau <info@macrofonoestudio.es> Co-authored-by: ulferts <jens.ulferts@googlemail.com> 4 years ago			`<li><a target="_self" href="#user-content">User Content</a></li>`
Make livingstyleguide somewhat working again 4 years ago			`</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>`