API tools faq
paste
clerihew

10. santa

clerihew
Dec 27th, 2018
745
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. © Clerihew Themes 2018
  5.  
  6. Do not use without reading terms of use.
  7.  
  8. Contact me at clerihew.tumblr.com if you have problems with any
  9. un-heavily edited code or if you have questions on how to use this theme.
  10. -->
  11. <!--
  12. Colors used in this theme:
  13. #7d0e0e
  14. #ccc
  15. #323232
  16. -->
  17.  
  18.  
  19. <title>Tag List</title>
  20.  
  21. <link rel="shortcut icon" href="{favicon}">
  22.  
  23. <link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas" rel="stylesheet">
  24.  
  25.  
  26. <style>
  27.  
  28. /* background color */
  29. body {
  30. background-color: #7d0e0e;
  31. }
  32.  
  33. /* sidebar background image, border */
  34. .sidebar {
  35. background-image: url(https://i.imgur.com/G3obyPj.jpg);
  36. background-size: 300px 700px;
  37. width: 200px;
  38. height: 100%;
  39. position: fixed;
  40. left: 0;
  41. top: 0;
  42. border-right: 8px solid white;
  43. }
  44.  
  45. /* icon border */
  46. .sidebar img {
  47. margin-left: 47px;
  48. margin-top: 30px;
  49. border: 3px solid #7d0e0e;
  50. border-radius: 100px;
  51. }
  52.  
  53. /* title font size */
  54. .sidebar h1 {
  55. color: #7d0e0e;
  56. font-family: "Mountains of Christmas", sans-serif;
  57. font-size: 160px;
  58. margin-top: 160px;
  59. margin-left: -35px;
  60. -webkit-transform: rotate(270deg);
  61. -moz-transform: rotate(270deg);
  62. -o-transform: rotate(270deg);
  63. transform: rotate(270deg);
  64. }
  65.  
  66. .main {
  67. margin-top: 100px;
  68. margin-bottom: 100px;
  69. margin-left: 400px;
  70. margin-right: 200px;
  71. }
  72.  
  73. /* title colors */
  74. .main h2 {
  75. color: white;
  76. text-shadow: 2px 2px 2px #323232;
  77. margin-bottom: 0px;
  78. }
  79.  
  80. /* tag color, background color */
  81. .main .group a {
  82. display: inline-block;
  83. font-size: 15px;
  84. padding: 5px;
  85. margin: 5px 5px 5px 0px;
  86. background-color: white;
  87. border-radius: 5px;
  88. color: #7d0e0e;
  89. text-decoration: none;
  90. -webkit-transition: background-color 0.5s;
  91. -moz-transition: background-color 0.5s;
  92. -o-transition: background-color 0.5s;
  93. transition: background-color 0.5s;
  94. }
  95.  
  96. /* tag background hover color */
  97. .main .group a:hover {
  98. background-color: #ccc;
  99. }
  100. /* DO NOT TOUCH THIS */
  101. .credit {
  102. width: 20px;
  103. height: 20px;
  104. font-size: 15px;
  105. position: fixed;
  106. right: 5px;
  107. bottom: 5px;
  108. background-color: white;
  109. border-radius: 3px;
  110. }
  111.  
  112. .credit a {
  113. display: inline-block;
  114. padding: 2px 3px 2px 5px;
  115. text-decoration: none;
  116. color: black;
  117. -webkit-transition: color 0.5s;
  118. -moz-transition: color 0.5s;
  119. -o-transition: color 0.5s;
  120. transition: color 0.5s;
  121. }
  122.  
  123. .credit a:hover {
  124. color: #ccc;
  125. }
  126.  
  127. /* tumblr controls credit to @cyantists on tumblr */
  128. iframe.tmblr-iframe {
  129. z-index:99999999999999!important;
  130. top:-2px!important;
  131. right:15px!important;
  132. opacity:0;
  133. padding-right:38px;
  134. /* delete invert(1) from here */
  135. filter:invert(1) contrast(150%);
  136. -webkit-filter:invert(1) contrast(150%);
  137. -o-filter:invert(1) contrast(150%);
  138. -moz-filter:invert(1) contrast(150%);
  139. -ms-filter:invert(1) contrast(150%);
  140. /* to here if your blog has a dark background */
  141. transform:scale(0.65);
  142. transform-origin:100% 0;
  143. -webkit-transform:scale(0.65);
  144. -webkit-transform-origin:100% 0;
  145. -o-transform:scale(0.65);
  146. -o-transform-origin:100% 0;
  147. -moz-transform:scale(0.65);
  148. -moz-transform-origin:100% 0;
  149. -ms-transform:scale(0.65);
  150. -ms-transform-origin:100% 0;
  151. }
  152.  
  153. iframe.tmblr-iframe:hover {
  154. opacity:0.6!important;
  155. }
  156.  
  157. .hcontrols {
  158. position:fixed;
  159. top:0;
  160. right:0;
  161. z-index:999999999;
  162. }
  163.  
  164. .hcontrols svg {
  165. width:15px;
  166. height:15px;
  167. padding:9px;
  168. }
  169.  
  170. /* gear color */
  171. .hcontrols svg path {
  172. fill: white;/* change this to change the color of the icon */
  173. }
  174.  
  175. </style>
  176.  
  177. </head>
  178. <body>
  179. <div class="sidebar">
  180. <a href="/"><img src="{PortraitURL-96}"/></a>
  181. <h1>{Title}</h1>
  182. </div>
  183.  
  184. <div class="main">
  185. <!-- this is the first group of tags. the <h2> is the title. the <a> are all the tags -->
  186. <div class="group">
  187. <h2>reindeer</h2>
  188. <!-- this is a tag. put the tag behind the "/" and it will take the user to that page. a hyphen must be used for all tags with spaces. for example, putting "/star-wars" will redirect a user to a page with all of your posts that are tagged star wars. copy and paste to add a new section -->
  189. <a href="/">dasher</a>
  190. <a href="/">dancer</a>
  191. <a href="/">prancer</a>
  192. <a href="/">vixen</a>
  193. <a href="/">comet</a>
  194. <a href="/">cupid</a>
  195. <a href="/">donner</a>
  196. <a href="/">blitzen</a>
  197. <a href="/">rudolph</a>
  198. </div>
  199.  
  200. <div class="group">
  201. <h2>gifts</h2>
  202. <a href="/">dolls</a>
  203. <a href="/">board games</a>
  204. <a href="/">balls</a>
  205. <a href="/">stuffed animals</a>
  206. <a href="/">action figures</a>
  207. <a href="/">building blocks</a>
  208. <a href="/">toy cars</a>
  209. <a href="/">scooters</a>
  210. <a href="/">bikes</a>
  211. <a href="/">tea set</a>
  212. <a href="/">roller skates</a>
  213. <a href="/">model cars</a>
  214. <a href="/">toy trains</a>
  215. <a href="/">hacky sack</a>
  216. <a href="/">marbles</a>
  217. <a href="/">jigsaw puzzle</a>
  218. <a href="/">water gun</a>
  219. </div>
  220.  
  221. <div class="group">
  222. <h2>places to visit</h2>
  223. <a href="/">los angeles</a>
  224. <a href="/">new york</a>
  225. <a href="/">toronto</a>
  226. <a href="/">mexico city</a>
  227. <a href="/">madrid</a>
  228. <a href="/">athens</a>
  229. <a href="/">phuket</a>
  230. <a href="/">sydney</a>
  231. <a href="/">london</a>
  232. <a href="/">paris</a>
  233. <a href="/">rome</a>
  234. <a href="/">tokyo</a>
  235. <a href="/">hong kong</a>
  236. <a href="/">shanghai</a>
  237. <a href="/">singapore</a>
  238. <a href="/">amsterdam</a>
  239. <a href="/">chicago</a>
  240. <a href="/">edinburgh</a>
  241. <a href="/">perth</a>
  242. <a href="/">honolulu</a>
  243. <a href="/">manila</a>
  244. <a href="/">moscow</a>
  245. </div>
  246.  
  247. <!-- DO NOT TOUCH THIS -->
  248. <div class="credit">
  249. <a href="https://clerihew.tumblr.com">C</a>
  250. </div>
  251. </div>
  252.  
  253. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  254.  
  255. </body>
  256. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!