API tools faq
paste
Advertisement
cornetespoir

No JS theme | Cafe

cornetespoir
Nov 25th, 2016
5,638
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // [nojschallenge]
  4.  
  5. Cafe
  6.  
  7. by egg.design //
  8.  
  9. by using viewing or using this code, you are agreeing to these terms:
  10.  
  11. + do not remove credit, claim as your own, or redistribute
  12.  
  13. + edit as much as you want without touching the credit
  14.  
  15. ** Please read **
  16.  
  17. This theme was made during the no js challenge, except for fun I added to the challenge by using only inline css. This means that customziation options are very limited, so please keep that in mind while using the theme.
  18.  
  19. ** Thank you! **
  20. -->
  21. <!DOCTYPE html>
  22. <html>
  23. <head>
  24.  
  25. <meta name="viewport" content="width=device-width; initial-scale=1.0">
  26. <title>{Title}</title>
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29. <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
  30. <meta name="image:background" content="" />
  31.  
  32. <meta name="color:background" content="#fff" />
  33. <meta name="color:header" content="#fff" />
  34. <meta name="color:header links" content="#222" />
  35. <meta name="color:links" content="#222" />
  36. <meta name="color:username underline" content="#fad" />
  37. <meta name="color:tag underline" content="#fad" />
  38. <meta name="color:border" content="#eee" />
  39. <meta name="color:footer" content="#f2f2f2" />
  40. <meta name="color:current page" content="#fad" />
  41. <meta name="color:jump page" content="#222" />
  42. <meta name="color:pagination" content="#fad" />
  43.  
  44. <meta name="text:url one" content="http://" />
  45. <meta name="text:link one" content="un" />
  46. <meta name="text:url two" content="http://" />
  47. <meta name="text:link two" content="deux" />
  48. <meta name="text:url three" content="http://" />
  49. <meta name="text:link three" content="trois" />
  50. <meta name="text:url four" content="http://" />
  51. <meta name="text:link four" content="quatre" />
  52. <meta name="text:tag symbol" content="#" />
  53. <meta name="text:asked" content="asked" />
  54.  
  55. <meta name="if:full background" content="" />
  56. <meta name="if:one column" content="" />
  57. </head>
  58.  
  59.  
  60. <!--
  61.  
  62. Editing directory
  63.  
  64. Since this theme does not have style tags, editing may be more difficult than typical themes. Please be careful editing, especially if you do not have any experience with HTML or CSS.
  65.  
  66. - If your theme becomes "broken" after attempting to editing and you are still on the customizing page, try ctrl/command and z to undo the changes until it goes back to the original.
  67. - If you have already saved and exited, look for the theme recovery page so you can revert to a previous version.
  68. - If none of these work, re-install the theme
  69.  
  70. If you wish to add custom CSS, you will need to add style tags somewhere in the theme.
  71.  
  72. Here is the order of theme elements in the HTML:
  73.  
  74. 01. Container - post and header container
  75. 02. Header - header links and icon
  76. 03. Description - blog description
  77. 04. Posts - Post types and styling
  78. 05. Pagination - pagination for posts
  79. 06. Footer - pagination and footer
  80.  
  81. -->
  82.  
  83. <body style="
  84. font: normal 1em/160% Muli;
  85. margin:0px; background: {color:background} url({image:background}) {block:iffullbackground} no-repeat center center fixed{/block:iffullbackground}; background-attachment:fixed;
  86. {block:iffullbackground}background-size:cover;{/block:iffullbackground};
  87. line-height:160%;
  88. "><div style="width:100%;padding:10px; position:fixed; top:0px; z-index:1; background:{color:header}"></div>
  89.  
  90. <!-- container -->
  91. <main style="width:90%; max-width:1000px; margin:100px auto; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; align-items: flex-start; {block:ifonecolumn} display:block;{/block:ifonecolumn}
  92. ">
  93.  
  94. <!-- header -->
  95. <header style="margin:14vh auto 10vh auto; width:100%; position: -webkit-sticky; position: sticky; top:0px; min-width:300px; padding:6px 0px; padding-bottom:14px; background:{color:header}; z-index:9999999!important;">
  96. <div style=" left:0px; position:absolute; justify-content:flex-end; height:100%; display:flex; flex-wrap:wrap; align-items:center; width:calc(50% - 60px)"> <a href="/" style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};">home</a> <a href="/ask" style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};">ask</a> <a style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};" href="/submit">submit</a> <a href="/archive" style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};">archive</a></div>
  97. <div style=" position:absolute; justify-content:flex-start; right:0px; height:100%; display:flex; flex-wrap:wrap; align-items:center; width:calc(50% - 80px);"> <a href="{text:url one}" style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};">{text:link one}</a> <a href="{text:url two}" style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};">{text:link two}</a> <a style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};" href="{text:url three}">{text:link three}</a> <a href="{text:url four}" style="margin:0 20px 0 0; text-decoration:none; color:{color:header links};">{text:link four}</a></div>
  98. <center>
  99. <img src="{PortraitURL-128}" style="padding:10px; width:70px; border-radius:100%;">
  100. </center>
  101. </header>
  102.  
  103. <!-- description -->
  104. <article style="width:60%; margin:-50px auto; padding:40px; border-top:1px solid {color:border};">
  105. <center>{description}</center>
  106. </article>
  107.  
  108. <!-- posts -->
  109. {block:Posts}<div class="posts" style="width:40%; max-width:600px; min-width:300px; height:60vh; overflow:hidden!important; margin:50vh 5% 0 5%; border-radius:4px; {block:permalinkpage} height:auto!important; overflow:visible!important;{/block:permalinkpage} {block:Post1} margin-top:25vh; {/block:Post1} {block:Post2} margin-top:25vh; {/block:Post2} {block:ifonecolumn}width:70%;height:auto; margin:25vh auto;{/block:ifonecolumn}{block:permalinkpage}height:auto{/block:permalinkpage} {block:tagpage} height:auto{/block:tagpage} {block:searchpage}height:auto{/block:searchpage} {block:daypage}height:auto{/block:daypage}">
  110.  
  111. {block:searchpage}<div style="margin:50px auto;">
  112. {lang:SearchResultCount results for SearchQuery}</div>
  113. {/block:searchpage}
  114.  
  115. {block:NoSearchResults} <div style="margin:50px auto;">
  116. {lang:No posts containing SearchQuery}</div>
  117. {/block:NoSearchResults}
  118.  
  119. {block:TagPage}<div style="margin:50px auto;">
  120. {lang:Showing TagResultCount posts tagged Tag}</div>
  121. {/block:TagPage}
  122.  
  123. <!-- date and notes -->
  124. {block:Date}
  125. <div style="padding:10px 0; display:flex; align-items:center;"> {block:rebloggedfrom} <img src="{ReblogRootPortraitURL-64}" style="margin:0px 10px 0 0; border-radius:100%; width:30px; height:30px; "> {/block:rebloggedfrom} {block:notreblog} <img src="{PortraitURL-64}" style="margin:0px 10px 0 0; border-radius:100%; width:30px; height:30px; "> {/block:notreblog} <b><a style="text-decoration:none; color:{color:links}; "href="/day/{year}/{monthnumberwithzero}/{dayofmonthwithzero}">{TimeAgo}</a></b> {block:notecount}<span style="opacity:.72;"> &nbsp; ― <a href="{Permalink}" style="text-decoration:none; color:{color:links};"> {NotecountWithLabel}</a>{/block:NoteCount} </span> </div>{/block:Date}
  126.  
  127. <!-- {block:NoRebloggedFrom}
  128. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  129. {/block:NoRebloggedFrom} -->
  130. {block:ContentSource}
  131. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  132. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  133. {/block:SourceLogo}
  134. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  135. {/block:ContentSource}
  136.  
  137. <!-- text posts -->
  138. {block:Text}
  139.  
  140. {block:Title}
  141. <h2><a style="text-decoration:none; color:{color:links}; border-bottom:2px solid {color:username underline}"href="{Permalink}">{Title}</a></h2>
  142. {/block:Title}
  143. <div style="padding:20px; background:white; border-radius:4px"> {block:NotReblog}
  144. <figcaption>
  145. {Body}
  146. </figcaption>
  147. {/block:NotReblog}
  148.  
  149. {block:RebloggedFrom}
  150. <div class="reblog-list">
  151. {block:Reblogs}
  152. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  153. <div class="reblog-header">
  154.  
  155. {block:IsActive}
  156. <a style="text-decoration:none; color:{color:links}; border-bottom:2px solid #beefed;"class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  157. <img src="{PortraitURL-64}" style="width:24px; float:left">
  158. </a>
  159. {/block:IsActive}
  160.  
  161. {block:IsDeactivated}
  162. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  163. <img src="{PortraitURL-64}" style="width:24px; float:left">
  164. </span>
  165. {/block:IsDeactivated}
  166.  
  167. {block:IsActive}
  168. <a style="text-decoration:none; color:{color:links}; border-bottom:2px solid #beefed;"target="_blank" href="{Permalink}" class="user">{Username}</a>
  169. {/block:IsActive}
  170.  
  171. {block:IsDeactivated}
  172. <span class="inactive deactivated">{Username}</span>
  173. {/block:IsDeactivated}
  174.  
  175. </div>
  176. <div class="reblog-content">
  177. {Body}
  178. </div>
  179. </div>
  180. {/block:Reblogs}
  181. </div>
  182. {/block:RebloggedFrom}</div>
  183. {/block:Text}
  184.  
  185. <!-- photo posts -->
  186. {block:Photo}
  187. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" style="max-width:100%; border-radius:4px;"/>
  188. {/block:Photo}
  189.  
  190. {block:Panorama}
  191. {LinkOpenTag}
  192. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  193. {LinkCloseTag}
  194. {/block:Panorama}
  195.  
  196. <!-- photoset posts -->
  197. {block:Photoset}
  198. {Photoset}
  199. {/block:Photoset}
  200.  
  201. <!-- quote posts -->
  202. {block:Quote}
  203. <div style="padding:20px; background:white; border-radius:4px">
  204. <big> {Quote} </big>
  205. <br>
  206. {block:Source}
  207. -{Source}
  208. {/block:Source}<br>
  209. </div>
  210. {/block:Quote}
  211.  
  212. <!-- link posts -->
  213. {block:Link}
  214. <div style="padding:20px; background:white; border-radius:4px;"> <center>
  215. <a style="text-decoration:none; color:{color:links}; border-bottom:2px solid #beefed;"href="{URL}" class="linkp" target="_blank"> {Name}</a>
  216. </center> </div>
  217. {/block:Link}
  218.  
  219. <!-- chat posts -->
  220. {block:Chat}
  221. <div style="padding:20px; background:white; border-radius:4px">
  222. {block:Title}<a style="text-decoration:none; color:{color:links}; border-bottom:2px solid #beefed;"href="{Permalink}" style="background:transparent; padding:0;"><h1>{title}</h1></a>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}
  223. </div>
  224. {/block:Chat}
  225.  
  226. <!-- video posts -->
  227. {block:Video}
  228. <center> {Video-250}</center>
  229. {/block:Video}
  230.  
  231. <!-- audio posts -->
  232. {block:Audio}
  233. <div style="padding:20px; background:white; border-radius:4px">
  234. {block:AlbumArt}
  235. <div style="width:30%; margin:30px auto; border-radius:100%; overflow:hidden;position:relative; box-shadow:4px 4px 20px #f2f2f2;"><img src="{AlbumArtURL}" style="max-width:100%; display:block; border-radius:100%"></div>{/block:AlbumArt}
  236. <center>
  237. {block:TrackName}
  238. <b style="color:{color:username underline}">{TrackName}</b>
  239. {/block:TrackName}
  240. <br>
  241. {block:Artist}{Artist}
  242. {/block:Artist}
  243. <br>
  244. {block:Album}
  245. {Album}
  246. {/block:Album}
  247. </center>
  248. <div style="margin:30px auto; width:50%; overflow:hidden; border-radius:30px;
  249. height:50px; display:flex; align-items:center; justify-content:center; padding-left:20px; background:#f2f2f2; box-shadow:2px 2px 20px #f2f2f2;">{AudioPlayerWhite}</div>
  250. </div>
  251. {/block:Audio}
  252.  
  253. <!-- answer posts -->
  254. {block:Answer}
  255. <br><div style="padding:20px; background:white; border-radius:4px">
  256. <div style="border:1px solid {color:border}; padding:20px;">{Asker} {text:asked}: {Question}</div><br>
  257. {block:Answerer}
  258. <div class="speechbubble2" style="text-align:left;">{Answerer}: {Answer} </div>
  259. <br>
  260. {/block:Answerer}
  261. {block:NotReblog}
  262. <div class="speechbubble2" style="text-align:left">{replies}</div>
  263. {/block:NotReblog}
  264. </div>
  265. {/block:Answer}
  266.  
  267. <!-- captions -->
  268. {block:Caption}
  269. <div class="caption" style="margin-top:10px; padding:30px; border-radius:4px; background:#fefefe; {block:indexpage} display:none{/block:indexpage}"> {block:NotReblog}
  270. <figcaption>
  271. {Caption}
  272. </figcaption>
  273. {/block:NotReblog}
  274.  
  275. {block:RebloggedFrom}
  276. <div class="reblog-list">
  277. {block:Reblogs}
  278. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  279. <div class="reblog-header">
  280.  
  281. {block:IsActive}
  282. <a style="text-decoration:none; color:{color:links};"class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  283. <img src="{PortraitURL-64}" style="width:24px; float:left">
  284. </a>
  285. {/block:IsActive}
  286.  
  287. {block:IsDeactivated}
  288. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  289. <img src="{PortraitURL-64}" style="width:24px; float:left">
  290. </span>
  291. {/block:IsDeactivated}
  292.  
  293. {block:IsActive}
  294. <a style="text-decoration:none; color:{color:links}; border-bottom:2px solid {color:username underline}; margin-left:10px;"target="_blank" href="{Permalink}" class="user">{Username}</a>
  295. {/block:IsActive}
  296.  
  297. {block:IsDeactivated}
  298. <span class="inactive deactivated">{Username}</span>
  299. {/block:IsDeactivated}
  300.  
  301. </div>
  302. <div class="reblog-content">
  303. {Body}
  304. </div>
  305. </div>
  306. {/block:Reblogs}
  307. </div>
  308. {/block:RebloggedFrom}</div>
  309. {/block:Caption}
  310.  
  311. <!-- tags and post notes -->
  312. {block:permalinkpage}<a href="{postnotesurl}" style="color:{color:links}; text-decoration:none;border-bottom:2px solid {color:tag underline}"> {lang:View notes for this post}</a>{/block:permalinkpage}
  313.  
  314. {block:HasTags}<div style="margin-top:10px {block:indexpage} display:none{/block:indexpage}"> <div class="tag">{block:tags} <a style="text-decoration:none; color:{color:links}; border-bottom:2px solid {color:tag underline};"href="{TagURL}">{text:tag symbol}{Tag}</a>{/block:tags}</div></div> {/block:HasTags}
  315.  
  316. <!-- pagination -->
  317. <div style="text-align:center; margin:50px auto;">
  318. {block:PermalinkPagination}
  319. {block:PreviousPost}
  320. <a href="{PreviousPost}" style="margin:10px;text-decoration:none; color:{color:pagination}">previous post</a>
  321. {/block:PreviousPost}
  322.  
  323. {block:NextPost}
  324. <a href="{NextPost}" style="margin:10px; text-decoration:none;color: {color:pagination}">next post</a>
  325. {/block:NextPost}
  326. {/block:PermalinkPagination}
  327. </div>
  328. </div>
  329.  
  330. <!--posts end-->{/block:Posts}
  331.  
  332. </main>
  333.  
  334. <!-- footer -->
  335. <div style="margin:150px auto; text-align:center">
  336. {block:Pagination}
  337.  
  338. {block:previousPage}<a href="{PreviousPage}" style="text-decoration:none; color:{color:pagination}; margin:10px;"> previous page </a>{/block:PreviousPage}
  339.  
  340. {block:JumpPagination length="3"}
  341. {block:CurrentPage}
  342. <span class="current_page"><span style="margin:10px; color:{color:current page}">{CurrentPage}</span></span>
  343. {/block:CurrentPage}
  344.  
  345. {block:JumpPage}
  346. <a class="jump_page" href="{URL}" style="margin:10px; color:{color:jump page}; text-decoration:none;">{PageNumber}</a>
  347. {/block:JumpPage}
  348. {/block:JumpPagination}
  349.  
  350. {block:NextPage}
  351. <a href="{NextPage}" style="margin:10px; text-decoration:none; color:{color:pagination}">Next page</a>
  352. {/block:NextPage}
  353. </div>
  354. {/block:Pagination}
  355. <center>{block:DayPagination}{block:PreviousDayPage}
  356. <a href="{PreviousDayPage}" class="jump_page" style="text-decoration:none;margin:10px; color:{color:pagination};">
  357. &#171; {ShortMonth} {DayOfMonth}
  358. </a>
  359. {/block:PreviousDayPage}{block:NextDayPage}
  360. <a href="{NextDayPage}" class="jump_page" style="text-decoration:none; margin:10px;color:{color:pagination}">
  361. {ShortMonth} {DayOfMonth} &#187;
  362. </a>
  363. {/block:NextDayPage}{/block:DayPagination}
  364. </div>
  365. <footer style="padding:50px;margin:50px 0 0 0; text-align:center; border-top:1px solid {color:border}; background:{color:footer}"><b>{name}</b> {CopyRightYears} <br>
  366. Cafe theme by <a href="egg.design" style="color:{color:links}; border-bottom:2px solid {color:username underline}; text-decoration:none">egg designs</a>
  367. </footer>
  368. </body>
  369. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!