API tools faq
paste
Advertisement
sugarvine

✱⁞ ALYANNA.BBCODE+

sugarvine
Feb 6th, 2018
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.16 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class name=body]
  3. display: block;
  4. width: 100%;
  5. padding: 10vh 10px;
  6. box-sizing: border-box;
  7. overflow: hidden;
  8. background: linear-gradient(#ffb9c9,#8decff);
  9. font-smoothing: antialiased;
  10. -webkit-font-smoothing: antialiased;
  11. -moz-osx-font-smoothing: grayscale;
  12. [/class]
  13.  
  14. [class name=container]
  15. display: flex;
  16. width: 100%;
  17. margin: auto;
  18. max-width: 850px;
  19. flex-flow: row wrap;
  20. justify-content: center;
  21. align-items: stretch;
  22. align-content: center;
  23. overflow: hidden;
  24. border-radius: 10px;
  25. [/class]
  26.  
  27. [class name=leftcolumn]
  28. flex: 4 0 280px;
  29. background: #FFF;
  30. box-sizing: border-box;
  31. padding: 20px;
  32. overflow: hidden;
  33. display: flex;
  34. flex-flow: column wrap;
  35. justify-content: center;
  36. align-content: center;
  37. text-align: center;
  38. [/class]
  39.  
  40. [class name=imagecontainer]
  41. flex: 0 0 225px;
  42. width: 226px;
  43. height: 225px;
  44. background: #FFF url(https://i.imgur.com/2niDXCJ.jpg) no-repeat center center;
  45. font-size: 0px;
  46. line-height: 0px;
  47. display: inline-block;
  48. margin: auto;
  49. margin-top: 10px;
  50. margin-bottom: 10px;
  51. [/class]
  52.  
  53. [class name=mainimage]
  54. display: block;
  55. height: 100%;
  56. width: 100%;
  57. pointer-events: none;
  58. mix-blend-mode: screen;
  59. [/class]
  60.  
  61. [class name=title]
  62. display: block;
  63. font-family: 'Abril Fatface', serif;
  64. font-size: 2em;
  65. color: #ffb9c9;
  66. text-transform: uppercase;
  67. [/class]
  68.  
  69. [class name=subtitle]
  70. width: 100%;
  71. max-width: 215px;
  72. text-align: center;
  73. font-family: 'Quicksand', sanserif;
  74. font-size: .6em;
  75. text-transform: uppercase;
  76. margin: auto;
  77. margin-top: -5px;
  78. margin-bottom: 20px;
  79. font-weight: bold;
  80. color: #8decff;
  81. [/class]
  82.  
  83. [class name=maincontentcolumn]
  84. flex: 5 0 280px;
  85. background: rgba(255, 255, 255, 0.6);
  86. max-height: 550px;
  87. box-sizing: border-box;
  88. padding: 20px;
  89. overflow: hidden;
  90. [/class]
  91.  
  92. [class name=scrollbox]
  93. display: block;
  94. height: 100%;
  95. width: 100%;
  96. padding-right: 150px;
  97. overflow-x: visible;
  98. overflow-y: scroll;
  99. [/class]
  100.  
  101. [class name=tabcontents]
  102. display: block;
  103. width: 100%;
  104. display: none;
  105. [/class]
  106.  
  107. [class name=post]
  108. display: block;
  109. width: 100%;
  110. background: white;
  111. font-size: .8em;
  112. font-family: 'Quicksand', sanserif;
  113. color: #a1a1a1;
  114. text-align: justify;
  115. box-sizing: border-box;
  116. padding: 10px;
  117. margin-bottom: 25px;
  118. [/class]
  119.  
  120. [class name=emptyspace]
  121. display: none;
  122. [/class]
  123.  
  124. [class name=image]
  125. // add pointer events: none if you'd rather not deal with the larger view thing
  126. font-size: 0px;
  127. -webkit-filter: contrast(80%) brightness(120%) grayscale(30%);
  128. filter: contrast(80%) brightness(120%) grayscale(30%);
  129. -o-transition: all .5s ease-in-out;
  130. -ms-transition: all .5s ease-in-out;
  131. -moz-transition: all .5s ease-in-out;
  132. -webkit-transition: all .5s ease-in-out;
  133. transition: all .5s ease-in-out;
  134. [/class]
  135.  
  136. [class name=image state=hover]
  137. // delete this class if planning on disabling the larger view thing
  138. -webkit-filter: none;
  139. filter: none;
  140. [/class]
  141.  
  142. [class name=navcolumn]
  143. flex: 1 0 100px;
  144. background: #FFF;
  145. box-sizing: border-box;
  146. padding: 15px 0px;
  147. overflow: hidden;
  148. display: flex;
  149. flex-flow: row wrap;
  150. justify-content: center;
  151. align-items: center;
  152. align-content: center;
  153. [/class]
  154.  
  155. [class name=navbutton]
  156. flex: 1 0 100px;
  157. box-sizing: border-box;
  158. text-align: center;
  159. font-family: 'Abril Fatface', serif;
  160. font-size: 4em;
  161. color: #ffb9c9;
  162. padding: 10px;
  163. -o-transition: all .5s ease-in-out;
  164. -ms-transition: all .5s ease-in-out;
  165. -moz-transition: all .5s ease-in-out;
  166. -webkit-transition: all .5s ease-in-out;
  167. transition: all .5s ease-in-out;
  168. cursor: pointer;
  169. [/class]
  170.  
  171. [class name=selectednavbutton]
  172. flex: 1 0 100px;
  173. box-sizing: border-box;
  174. text-align: center;
  175. font-family: 'Abril Fatface', serif;
  176. font-size: 4em;
  177. color: #8decff;
  178. padding: 10px;
  179. -o-transition: all .5s ease-in-out;
  180. -ms-transition: all .5s ease-in-out;
  181. -moz-transition: all .5s ease-in-out;
  182. -webkit-transition: all .5s ease-in-out;
  183. transition: all .5s ease-in-out;
  184. cursor: pointer;
  185. [/class]
  186.  
  187. [class name=navbutton state=hover]
  188. color: #8decff;
  189. [/class]
  190.  
  191.  
  192. [script class=navbutton on=click]
  193. // resets everything to their default appearance
  194. hide tabcontents
  195. removeClass selectednavbutton navbutton
  196.  
  197. // cheaty way of doing this lol
  198. set currentTab (getText)
  199.  
  200. // sets which navbutton gets the color change
  201. if (eq ${currentTab} 1) (addClass selectednavbutton navbuttonone)
  202. if (eq ${currentTab} 2) (addClass selectednavbutton navbuttontwo)
  203. if (eq ${currentTab} 3) (addClass selectednavbutton navbuttonthree)
  204. if (eq ${currentTab} 4) (addClass selectednavbutton navbuttonfour)
  205. if (eq ${currentTab} 5) (addClass selectednavbutton navbuttonfive)
  206.  
  207. // sets which tabcontents gets shown
  208. if (eq ${currentTab} 1) (show tabcontentsone)
  209. if (eq ${currentTab} 2) (show tabcontentstwo)
  210. if (eq ${currentTab} 3) (show tabcontentsthree)
  211. if (eq ${currentTab} 4) (show tabcontentsfour)
  212. if (eq ${currentTab} 5) (show tabcontentsfive)
  213. [/script]
  214.  
  215.  
  216. [div style="display: none;"]
  217. [font=Abril Fatface]font call[/font]
  218. [font=Quicksand]font call[/font]
  219. [/div]
  220. [div class=body]
  221. [div class=container]
  222. [div class=leftcolumn]
  223. [div class=imagecontainer]
  224. [div class=mainimage]
  225. [img]https://i.imgur.com/G4ELxKB.jpg[/img]
  226. [/div]
  227. [/div]
  228. [div class=title]
  229. ALYANNA
  230. [/div]
  231. [div class=subtitle]
  232. THE BEST THINGS IN LIFE COME IN PASTEL
  233. [/div]
  234. [/div]
  235. [div class=maincontentcolumn]
  236. [div class=scrollbox]
  237. [div class="tabcontents tabcontentsone" style="display: block;"]
  238. [div class=post]
  239. hello you can put text here. if you'd like a linebreak, add [font=Courier][plain][br][/br][/plain][/font]. this is an empty tag, so don't put anything between them.
  240. [/div]
  241. [div class=post]
  242. [div class=title]title here[/div]
  243. you can use the title class to add a heading to each post. due to how it's coded, it will be automatically smaller than the name to the left to indicate hierarchy.
  244. [/div]
  245. [div class=emptyspace]put new posts for tab1 above this div![/div]
  246. [/div]
  247. [div class="tabcontents tabcontentstwo"]
  248. [div class=post]
  249. [div class=image][img]https://i.imgur.com/aq5DGoe.jpg[/img][/div]
  250. [/div]
  251. [div class=post]
  252. if you'd like to add an image, make sure to wrap it like [font=Courier][plain][div class=image][img]this[/img][/div][/plain][/font], as that runs it through filters to match the design. it also removes the gutter underneath.
  253. [/div]
  254. [div class=emptyspace]put new posts for tab2 above this div![/div]
  255. [/div]
  256. [div class="tabcontents tabcontentsthree"]
  257. [div class=post]
  258. [div class=title]auto-filter[/div]
  259. all images as slightly desaturated and brightened automatically; when hovering over a post, one can see the true colors. the trade off is that clicking on the image triggers the view large image. if you'd rather have it disabled, add a pointer-events: none to the image class. unfortunately, this will also disable the hover effect.
  260. [/div]
  261. [div class=post]
  262. [div class=title]auto-filter[/div]
  263. all images as slightly desaturated and brightened automatically; when hovering over a post, one can see the true colors. unlike most of my codes, clicking on the image will enable click to view larger version. if you'd rather have it disabled, add [font=Courier][plain]pointer-events: none;[/plain][/font] to [font=Courier][plain][class name="image"][/plain][/font]. unfortunately, this will also disable the hover effect.
  264. [/div]
  265. [div class=post]
  266. [div class=title]auto-filter[/div]
  267. all images as slightly desaturated and brightened automatically; when hovering over a post, one can see the true colors. unlike most of my codes, clicking on the image will enable click to view larger version. if you'd rather have it disabled, add [font=Courier][plain]pointer-events: none;[/plain][/font] to [font=Courier][plain][class name="image"][/plain][/font]. unfortunately, this will also disable the hover effect.
  268. [/div]
  269. [div class=emptyspace]put new posts for tab3 above this div![/div]
  270. [/div]
  271. [div class="tabcontents tabcontentsfour"]
  272. [div class=post]
  273. [div class=title]title here[/div]
  274. [div class=image][img]https://i.imgur.com/xY9q6SA.jpg[/img][/div]
  275. [/div]
  276. [div class=emptyspace]put new posts for tab4 above this div![/div]
  277. [/div]
  278. [div class="tabcontents tabcontentsfive"]
  279. [div class=post]
  280. [div class=title]artist[/div]
  281. [div class=img]i used hakusai's images for this sample[/div]
  282. [/div]
  283. [div class=emptyspace]put new posts for tab4 above this div![/div]
  284. [/div]
  285. [/div]
  286. [/div]
  287. [div class=navcolumn][div class="navbutton navbuttonone"]1[/div][div class="navbutton navbuttontwo"]2[/div][div class="navbutton navbuttonthree"]3[/div][div class="navbutton navbuttonfour"]4[/div][div class="navbutton navbuttonfive"]5[/div][/div]
  288. [/div]
  289. [/div]
  290.  
  291. [/nobr]
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!