sugarvine

✱⁞ ALYANNA.BBCODE+

Feb 6th, 2018
193
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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]
RAW Paste Data