Tony's Collections
Tony's Bundles
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
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" />
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>
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