Fix missing type in template.

tasfe · Jan 16, 2017 · aeda04d · aeda04d
1 parent c03a532
commit aeda04d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/template/css/style.css b/template/css/style.css
@@ -172,6 +172,10 @@ pre {
   margin: 10px 0 20px 0;
 }
 
+pre.prettyprint {
+  width: 100%;
+}
+
 code.language-text {
   word-wrap: break-word;
 }
@@ -181,38 +185,35 @@ pre.language-json {
 }
 
 pre.language-html {
-  margin: 40px 0 20px 0;
+  margin: 0 0 20px 0;
 }
 
-pre.language-html:before {
-  content: attr(data-type);
-  position: absolute;
-  top: -30px;
-  left: 0;
+.type {
   font-family: "Source Sans Pro", sans-serif;
   font-weight: 600;
   font-size: 15px;
   display: inline-block;
-  padding: 2px 5px;
+  margin: 0 0 5px 0;
+  padding: 4px 5px;
   border-radius: 6px;
   text-transform: uppercase;
   background-color: #3387CC;
   color: #ffffff;
 }
 
-pre.language-html[data-type="get"]:before {
+.type__get {
   background-color: green;
 }
 
-pre.language-html[data-type="put"]:before {
+.type__put {
   background-color: #e5c500;
 }
 
-pre.language-html[data-type="post"]:before {
+.type__post {
   background-color: #4070ec;
 }
 
-pre.language-html[data-type="delete"]:before {
+.type__delete {
   background-color: #ed0039;
 }
 

diff --git a/template/index.html b/template/index.html
@@ -131,6 +131,7 @@ <h1>{{article.groupTitle}}{{#if article.title}} - {{article.title}}{{/if}}</h1>
     {{#if article.description}}
       <p>{{{nl2br article.description}}}</p>
     {{/if}}
+    <span class="type type__{{toLowerCase article.type}}">{{toLowerCase article.type}}</span>
     <pre class="prettyprint language-html" data-type="{{toLowerCase article.type}}"><code>{{article.url}}</code></pre>
 
     {{#if article.permission}}