Add theme hooks to source path element

README.md

@@ -209,6 +209,9 @@ Stylemark includes a number of CSS class hooks you can use to style specific ele
 - `theme-content-element`: An element, including its title and documentation
 - `theme-content-element-description`: An element's documentation, not including its title
 - `theme-content-element-title`: An element's title
+- `theme-content-element-source`: An element's source filepath container
+- `theme-content-element-source-label`: The text label of an element's source filepath
+- `theme-content-element-source-path`: The filepath string of an element's source filepath
 - `theme-mobile-nav`: The navigation view visible on smaller viewports
 - `theme-mobile-nav-select`: The `<select>` tag for the navigation dropdown visible on smaller viewports
 - `theme-page`: The entire page, including the content and sidebar

src/assets/css/theme.css

@@ -2,3 +2,16 @@
 	font-size: 14px;
 	opacity: 0.3;
 }
+
+.theme-content-element-source {
+	display: block;
+	font-size: 14px;
+	color: #888;
+}
+.theme-content-element-source-label {
+	font-weight: 700;
+	text-transform: uppercase;
+}
+.theme-content-element-source-path {
+	font-family: "Source Code Pro", "Courier New", Courier, monospace;
+}

src/templates/doc.handlebars

@@ -1,5 +1,8 @@
 <div id="{{doc.slug}}" class="i-library theme-content-element">
 	<h1 class="display-4 theme-content-element-title">{{doc.name}}</h1>
-	<span class="i-example__heading"><i class="fa fa-info-circle"></i> From file: {{doc.filepath}}</span>
+	<span class="theme-content-element-source">
+		<span class="theme-content-element-source-label">Source:</span>
+		<span class="theme-content-element-source-path">{{doc.filepath}}</span>
+	</span>
 	<div class="theme-content-element-description">{{markdown doc.description}}</div>
 </div>