close
tony / Styled Text

Styled Text

Styled Text adds sensible typography styles to vanilla html. It's best used for text heavy content - for example, blog posts. It works well for content created with Markdowns.

Setup

  1. Add Styled Text to your page. Copy-paste the Code section below or load it from the cdn.

    <link href="https://hypergist.io/gists/tony/styled-text/latest.css" rel="stylesheet" media="screen" />
    
  2. Add the .styled-text class to your outer div and place your content inside it.

    <div class="styled-text">
      <%= Utilities.markdown_to_html("readme.md") %>
    </div>
    
  3. If you want, tweak the variables to your liking. All variables are pre-fixed with --styled-text

    :root {
      --styled-text-color: rgba(0,0,0,0.6);
    }
    

Features

  • Styles headings (h1, h2, h3, h4), Lists (ul, ol).
  • Adds color to links
  • Styles <pre> and <code> tags
  • Use <hr/> for spacing

Code

.styled-text {
  line-height:  var(--styled-text-line-height, 30px);
  color:        var(--styled-text-color, rgba(0,0,0,0.6));
}
.styled-text > h1,
.styled-text > h2,
.styled-text > h3,
.styled-text > h4 {
  color:        var(--styled-text-heading-color, #191919);
  font-weight:  var(--styled-text-heading-font-weight, 800);
}
.styled-text > h1 {
  margin:         var(--styled-text-h1-margin, 0 0 20px 0);
  padding:        var(--styled-text-h1-padding, 0 0 10px 0);
  font-size:      var(--styled-text-h1-font-size, 32px);
  line-height:    var(--styled-text-h1-line-height, 1.2);
  border-bottom:  var(--styled-text-h1-bottom-border, 1px solid #d0d7deb3);
}
.styled-text > h2 {
  margin:         var(--styled-text-h2-margin, 12px 0);
  padding:        var(--styled-text-h2-padding, 0 0 10px 0);
  font-size:      var(--styled-text-h2-font-size, 24px);
  line-height:    var(--styled-text-h2-line-height, 1.2);
  border-bottom:  var(--styled-text-h2-bottom-border, 1px solid #d0d7deb3);
}
.styled-text > h3 {
  margin:         var(--styled-text-h3-margin, 12px 0);
  font-size:      var(--styled-text-h3-font-size, 20px);
  line-height:    var(--styled-text-h3-line-height, 1.2);
}
.styled-text > h4 {
  font-size: 1.25rem;
  font-weight: var(--bold-font-weight);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.styled-text > p a:not(.no-style) {
  color: var(--link-color);
  text-decoration: underline;
}

.styled-text > p, 
.styled-text > li {
  font-size: var(--styled-text-font-size, 16px);
}

.styled-text code {
  background-color: #efefef;
}
.styled-text pre code {
  background-color: var(--color-gamma);
  border-radius: var(--border-radius-1);
}
.styled-text > p code {
  white-space: nowrap;
}

.styled-text code {
  background-color: var(--color-gamma);
  color: white;
  font-size: .85em;
}

.styled-text > h3 code {
  font-size: 1.2rem;
}

.styled-text > p, 
.styled-text code {
  margin-bottom: 1rem;
}
.styled-text > ol li p,
.styled-text > ul li p {
  margin-bottom: 0px;
}
.styled-text > ol li, 
.styled-text > ul li {
  margin-bottom: 3px;
}
.styled-text > strong {
  font-weight: var(--bold-font-weight);
}
.styled-text > ul {
  margin-bottom: 1rem;
  list-style-type: disc;
  margin-left: 20px;
}
.styled-text > ol {
  margin-bottom: 1rem;
  list-style-type: decimal;
  margin-left: 20px;
}

.styled-text code, 
.styled-text pre code {
  border-radius: var(--border-radius-1);
  line-height: 25px !important;
}
.styled-text code {
  padding: 2px 4px;
}
.styled-text pre code {
  display: block;
  padding: 12px;
  overflow: scroll;
}
.styled-text > table {
  border-radius: var(--border-radius-1);
}
.styled-text > table, 
.styled-text > table tr {
  border-width: var(--border-width-default);
  border-color: var(--border-color-default);
}
.styled-text > table th {
  text-align: left;
  padding-right: 10px;
  font-weight: var(--bold-font-weight);
}

.styled-text > hr {
  margin: 20px 0;
}

Add this to the <head> of your page