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