API tools faq
paste
Advertisement
ooksie

wanderer

ooksie
Dec 9th, 2022 (edited)
304
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.68 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=East Sea Dokdo]titles[/font]
  5. [font=Inconsolata]header[/font]
  6. [font=Inconsolata]body text[/font]
  7.  
  8. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][div=
  11.  
  12. /*background colour*/
  13. --bg-color: #231F26;
  14.  
  15. /*main accent colour*/
  16. --color-1: #DEA47D;
  17. /*secondary accent colour -- slightly darker than main accent colour*/
  18. --color-2: #A37B63;
  19.  
  20. /*text colour*/
  21. --t-color: var(--color-2);
  22.  
  23. /*fonts used*/
  24. --title: 'East Sea Dokdo', serif;
  25. --header: 'Inconsolata', monospace;
  26. --body: 'Inconsolata', monospace;
  27.  
  28. /*i bolded my body text due to its font. to remove it, replace bold with normal*/
  29. --tb: bold;
  30.  
  31. /*top image*/
  32. --img-1: url('https://i.imgur.com/dAJuiYD.png');
  33.  
  34. /*section images*/
  35. --simg-1: URL('https://i.pinimg.com/originals/5a/d4/1e/5ad41eaaedc1417cbca41057930bde77.gif');
  36. --simg-2: URL('https://i.pinimg.com/originals/5a/d4/1e/5ad41eaaedc1417cbca41057930bde77.gif');
  37. --simg-3: URL('https://i.pinimg.com/originals/5a/d4/1e/5ad41eaaedc1417cbca41057930bde77.gif');
  38.  
  39.  
  40. height:auto; width:100%; overflow-x:auto; margin:20px 0 30px 0; line-height:0;][div=height:auto; min-height:480px; width:clamp(320px, 80vw, 650px); box-sizing:border-box; padding:clamp(15px, -20px + 6vw, 25px); box-sizing:border-box; background: var(--bg-color); margin:0 auto; position:relative; display:flex; flex-flow:column nowrap; overflow:hidden; --lf:39.5%; --rf:60.5%;]
  41.  
  42. [comment]----top image----[/comment]
  43. [div=height:120px; width:100%; border:1px solid var(--color-1); flex-shrink:0; background: var(--img-1); box-sizing:border-box; flex-shrink:0; background-size:cover; position:relative; z-index:5;
  44.  
  45. /*edit the following to adjust the cropping of the image*/ background-position:50% 55%;][div=height:calc(100% - 0.5px); width:calc(100% - 0.5px);
  46.  
  47. /*edit following values to 0 to remove greyscale*/ backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1);][/div]
  48.  
  49. [comment]----links----[/comment]
  50. [div=height:auto; width:auto; padding:5px 6px 4px 8px; box-sizing:border-box; position:absolute; bottom:0; right:0; display:flex; align-items:center; justify-content:center; opacity:0.8; background: var(--bg-color);]
  51.  
  52. [comment]----copy this whole thing to add another link----[/comment]
  53. [div=height:auto; width:auto; font-family: var(--header); font-size:10px; text-transform:uppercase; margin:0 6px; position:relative; z-index:3;][comment]
  54.  
  55. ----* * * replace xx with your link----
  56.  
  57. [/comment][url='xx'][div=color: var(--color-1); display:inline; line-height:100%; font-weight:bold; letter-spacing:1.5px;][comment]
  58.  
  59. ----* * * link name here----
  60.  
  61. [/comment]ooc[/div][/url]
  62. [/div]
  63. [comment]----copy me too!----[/comment]
  64.  
  65. [comment]----copy this whole thing to add another link----[/comment]
  66. [div=height:auto; width:auto; font-family: var(--header); font-size:10px; text-transform:uppercase; margin:0 6px; position:relative; z-index:3;][comment]
  67.  
  68. ----* * * replace xx with your link----
  69.  
  70. [/comment][url='xx'][div=color: var(--color-1); display:inline; line-height:100%; font-weight:bold; letter-spacing:1.5px;][comment]
  71.  
  72. ----* * * link name here----
  73.  
  74. [/comment]cs[/div][/url]
  75. [/div]
  76. [comment]----copy me too!----[/comment]
  77.  
  78. [comment]----copy this whole thing to add another link----[/comment]
  79. [div=height:auto; width:auto; font-family: var(--header); font-size:10px; text-transform:uppercase; margin:0 6px; position:relative; z-index:3;][comment]
  80.  
  81. ----* * * replace xx with your link----
  82.  
  83. [/comment][url='xx'][div=color: var(--color-1); display:inline; line-height:100%; font-weight:bold; letter-spacing:1.5px;][comment]
  84.  
  85. ----* * * link name here----
  86.  
  87. [/comment]lore[/div][/url]
  88. [/div]
  89. [comment]----copy me too!----[/comment]
  90.  
  91. [/div]
  92. [comment]----links end----[/comment]
  93. [/div]
  94. [comment]----top image end----[/comment]
  95.  
  96. [comment]----main contents----[/comment]
  97. [div=height:auto; max-height:clamp(290px, 1000px - 93vw, 510px); width:100%; margin-top:clamp(20px, 300px - 31vw, 40px); overflow:hidden; display:flex; flex-direction:column;][div=height:100%; width:200%; overflow-y:scroll; scroll-behavior: smooth; --h: clamp(35px, -50px + 15vw, 72px); --sp: clamp(30px, -120px + 21vw, 64px);]
  98.  
  99. [comment]----lobby page (do not delete)----[/comment]
  100. [div=height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap; scroll-snap-stop: always; background: var(--bg-color);]
  101. [comment]----left----[/comment]
  102. [div=position:relative; z-index:7; height:auto; min-height:220px; min-width:200px; max-width:calc(100% - 20px); flex: var(--lf); padding:10px 15px 15px 15px; box-sizing:border-box; flex-shrink:0; background: var(--bg-color); display:flex; align-items:center; justify-content:center;][div=height:auto; --fs: clamp(60px, -50px + 15vw, 68px); max-height: calc(var(--fs) * 3.05); width:84%; text-align:left; text-transform:uppercase; line-height:61%; font-size:var(--fs); font-family: var(--title); color: var(--color-1); overflow:hidden;][comment]
  103.  
  104. ----* * * big title here (hides overflow after five lines!)----
  105.  
  106. [/comment]here's my cool fancy title.[/div]
  107. [/div]
  108. [comment]----left end----[/comment]
  109.  
  110. [comment]----right----[/comment]
  111. [div=height:290px; flex: var(--rf); min-width:240px; padding:0 0 20px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center; position:relative;][div=height: var(--h); width:100%;][/div][div=height:auto; width:auto; position:absolute; top:1px; left:30px; z-index:10; display:flex; flex-flow:row nowrap; align-items:center; color: var(--color-2); font-family: var(--header); text-transform:uppercase; font-weight:bold; opacity:0.8;][div=height:auto; width:auto; font-size:9.5px;][fa]fas fa-angle-down[/fa][/div][div=height:auto; width:auto; line-height:100%; margin:-0.8px 0 0 5px; font-size:9px; letter-spacing:0.5px;]scroll[/div][/div]
  112.  
  113. [comment]----small title----[/comment]
  114. [div=height:auto; max-height:70px; overflow:hidden; width:100%; text-align:right; text-transform:uppercase; line-height:68%; font-size:52px; font-family: var(--title); color: var(--color-1); flex-shrink:0;][comment]
  115.  
  116. ----* * * small title here----
  117.  
  118. [/comment]another title[/div]
  119.  
  120. [comment]----subtitle----[/comment]
  121. [div=height:auto; max-height:120px; overflow:hidden; width:clamp(250px, 75%, 270px); text-align:right; line-height:125%; font-size:11px; font-family: var(--body); color: var(--color-2); font-weight: var(--tb); margin-top:10px; flex-shrink:0;][comment]
  122.  
  123. ----* * * subtitle here (a small paragraph looks nicer!)----
  124.  
  125. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget est dolor. Nulla eu congue purus. Quisque commodo ante metus, volutpat rutrum tellus convallis ut. Nulla vel leo a purus pharetra cursus ac semper sem. In in est cursus odio molestie bibendum a at enim. In felis ipsum, consequat ut arcu a, pellentesque lobortis mi.
  126. [/div]
  127.  
  128. [comment]----music player----[/comment]
  129. [div=height:15px; width:auto; max-width:180px; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top:30px;]
  130. [comment]----song title----[/comment]
  131. [div=height:15px; width:auto; color: var(--color-1); font-family: var(--header); text-transform:uppercase; font-size:11.5px; font-weight:bold; line-height:100%; letter-spacing:0.5px;][comment]
  132.  
  133. ----* * * song title here----
  134.  
  135. [/comment]song name[/div]
  136.  
  137. [comment]----play button----[/comment]
  138. [div=height:15px; width:15px; position:relative; overflow:hidden; margin-right:15px;]
  139. [div=height:100%; width:100%; padding:0 0 2px 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-1); background: var(--bg-color); font-size:11px; position:relative; z-index:2; pointer-events:none;][fa]far fa-music[/fa][/div]
  140.  
  141. [comment]----actual media player----[/comment]
  142. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  143.  
  144. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  145. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  146. [media=soundcloud]soundcloud link here[/media]
  147. [/border]
  148.  
  149. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  150. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  151. [media=googledrive]google file code[/MEDIA]
  152. [/border]
  153.  
  154. [/border][/border]
  155. [comment]----actual media player end----[/comment]
  156. [/div]
  157. [comment]----play button end----[/comment]
  158. [/div]
  159. [comment]----music player end----[/comment]
  160. [/div]
  161. [comment]----right end----[/comment]
  162. [/div]
  163. [comment]----lobby page end----[/comment]
  164.  
  165.  
  166. [comment]----copy this whole thing to add another section----[/comment]
  167. [div=height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap; scroll-snap-stop: always; background: var(--bg-color);]
  168. [comment]----left----[/comment]
  169. [div=height:auto; min-height:220px; max-height:290px; min-width:200px; max-width:calc(100% - 20px); flex: var(--lf); padding:18px 15px 17px 18px; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap; position:sticky; top:-0.5px; z-index:9;]
  170.  
  171. [comment]----image----[/comment]
  172. [div=height:60%; width:100%; border:1px solid var(--color-1);
  173.  
  174. /*edit the value in --simg-X to match variables*/ background: var(--simg-1);
  175.  
  176. background-size:cover; margin-bottom:10px;
  177.  
  178. /*edit the following to adjust the cropping of the image*/ background-position:50% 55%;][div=height:calc(100% - 0.5px); width:calc(100% - 0.5px);
  179.  
  180. /*edit following values to 0 to remove greyscale*/ backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1);][/div][/div]
  181.  
  182. [comment]----section title----[/comment]
  183. [div=
  184.  
  185. /*edit this value to adjust font size based on its current value! do not remove the space between the sign (+ or -) and the number*/ --fsc: + 0px;
  186.  
  187. --fs:clamp(48px, -50px + 15vw, 53px); height:auto; max-height:calc((var(--fs) var(--fsc)) * 1.24); overflow:hidden; width:100%; text-align:left; text-transform:uppercase; line-height:62%; font-size:calc(var(--fs) var(--fsc)); font-family: var(--title); color: var(--color-1); margin:auto 0;][comment]
  188.  
  189. ----* * * section title here----
  190.  
  191. [/comment]plot overview[/div]
  192.  
  193. [comment]----section number----[/comment]
  194. [div=width:45px; flex-shrink:0; position:absolute; right:-29px; top:30px; z-index:6;][div=padding-top:107%; background: var(--bg-color); position:relative;][div=height:100%; width:100%; position:absolute; top:0; left:-2px; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-family: var(--header); font-weight:bold; line-height:100%; font-size:37px; letter-spacing:0.5px; white-space:nowrap;][comment]
  195.  
  196. ----* * * section number here----
  197.  
  198. [/comment]01[/div]
  199. [/div][/div]
  200. [/div]
  201. [comment]----left end----[/comment]
  202.  
  203. [comment]----right----[/comment]
  204. [div=height:auto; min-height:290px; flex: var(--rf); min-width:240px; display:flex; flex-flow:column nowrap; align-items:flex-end; scroll-snap-stop: always;][div=height:auto; --w: clamp(10px, -100px + 17vw, 50px); width:calc(100% - var(--w)); padding:var(--sp) 0 10px 0; box-sizing:border-box; text-align:right; line-height:125%; font-size:12px; font-family: var(--body); color: var(--t-color); margin-top:10px; font-weight: var(--tb);][comment]
  205.  
  206. ----* * * text starts here----
  207.  
  208. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue sollicitudin iaculis. Curabitur quis ligula sit amet nisl mattis accumsan non nec mauris. Nulla et lectus lorem. Aenean molestie tortor turpis, nec maximus nisl placerat sit amet. Aliquam magna ligula, porttitor ut tellus porta, auctor malesuada enim. Pellentesque ultricies erat non lorem sodales, dictum interdum erat bibendum. Aliquam vehicula sapien feugiat, varius libero eu, luctus dui. Vestibulum et sapien neque. Mauris tristique massa purus. Donec at ante hendrerit, semper ligula in, porttitor elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id pretium augue. Donec aliquet, justo ut tincidunt varius, purus felis tincidunt orci, eu suscipit est velit at quam. Duis egestas justo quis mauris ultricies posuere.
  209.  
  210. Fusce nec mollis mi. Nam fringilla nunc sit amet pulvinar semper. Nam non scelerisque velit. Aenean rhoncus viverra ligula eu tristique. Morbi vitae congue lorem, eget luctus lorem. Ut ornare interdum felis malesuada efficitur. Duis non lacus suscipit, volutpat justo ac, feugiat turpis. Proin consequat vestibulum orci, eget egestas turpis rhoncus non. Sed sed lacinia ligula. Morbi turpis eros, malesuada in velit sed, malesuada scelerisque ex. Duis feugiat, eros sed pellentesque laoreet, mauris est cursus nisl, vitae imperdiet arcu eros sed ante.
  211.  
  212. Nunc mattis sapien lacus, ultricies eleifend lorem ultrices vel. Nullam tempor orci et aliquam sollicitudin. Nulla at consectetur sem. Sed quis eleifend lectus, sit amet tempus felis. Mauris ut purus libero. Nulla porta augue urna, eu consectetur eros aliquam ut. Nulla porttitor libero non est volutpat, eget vestibulum tellus feugiat.
  213. [/div][/div]
  214. [comment]----right end----[/comment]
  215. [/div]
  216. [comment]----copy me too!----[/comment]
  217.  
  218.  
  219. [comment]----copy this whole thing to add another section----[/comment]
  220. [div=height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap; scroll-snap-stop: always; scroll-snap-align:start; background: var(--bg-color);]
  221. [comment]----left----[/comment]
  222. [div=height:auto; min-height:220px; max-height:290px; min-width:200px; max-width:calc(100% - 20px); flex: var(--lf); padding:18px 15px 17px 18px; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap; position:sticky; top:-0.5px; z-index:9;]
  223.  
  224. [comment]----image----[/comment]
  225. [div=height:60%; width:100%; border:1px solid var(--color-1);
  226.  
  227. /*edit the value in --simg-X to match variables*/ background: var(--simg-2);
  228.  
  229. background-size:cover; margin-bottom:10px;
  230.  
  231. /*edit the following to adjust the cropping of the image*/ background-position:50% 55%;][div=height:calc(100% - 0.5px); width:calc(100% - 0.5px);
  232.  
  233. /*edit following values to 0 to remove greyscale*/ backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1);][/div][/div]
  234.  
  235. [comment]----section title----[/comment]
  236. [div=
  237.  
  238. /*edit this value to adjust font size based on its current value! do not remove the space between the sign (+ or -) and the number*/ --fsc: + 5px;
  239.  
  240. --fs:clamp(48px, -50px + 15vw, 53px); height:auto; max-height:calc((var(--fs) var(--fsc)) * 1.24); width:100%; text-align:left; text-transform:uppercase; line-height:62%; font-size:calc(var(--fs) var(--fsc)); font-family: var(--title); color: var(--color-1); margin:auto 0;][comment]
  241.  
  242. ----* * * section title here----
  243.  
  244. [/comment]roles[/div]
  245.  
  246. [comment]----section number----[/comment]
  247. [div=width:45px; flex-shrink:0; position:absolute; right:-29px; top:30px; z-index:6;][div=padding-top:107%; background: var(--bg-color); position:relative;][div=height:100%; width:100%; position:absolute; top:0; left:-2px; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-family: var(--header); font-weight:bold; line-height:100%; font-size:37px; letter-spacing:0.5px; white-space:nowrap;][comment]
  248.  
  249. ----* * * section number here----
  250.  
  251. [/comment]02[/div]
  252. [/div][/div]
  253. [/div]
  254. [comment]----left end----[/comment]
  255.  
  256. [comment]----right----[/comment]
  257. [div=height:auto; min-height:290px; flex: var(--rf); min-width:240px; display:flex; flex-flow:column nowrap; align-items:flex-end; scroll-snap-stop: always;][div=height:auto; --w: clamp(10px, -100px + 17vw, 50px); width:calc(100% - var(--w)); padding:var(--sp) 0 10px 0; box-sizing:border-box; text-align:right; line-height:125%; font-size:12px; font-family: var(--body); color: var(--t-color); margin-top:10px; font-weight: var(--tb);][comment]
  258.  
  259. ----* * * text starts here----
  260.  
  261. [/comment]
  262. [comment]----copy me for a bolded subheader----
  263. [/comment][div=color:var(--color-1); font-weight:bold; font-size:20px; letter-spacing:0.5px; display:inline-block; text-transform:uppercase; line-height:100%; margin-bottom:5px;][comment]
  264.  
  265. ----* * * subheader here----
  266.  
  267. [/comment]subheader...[/div][comment]
  268. ----copy me too!----[/comment]
  269. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue sollicitudin iaculis. Curabitur quis ligula sit amet nisl mattis accumsan non nec mauris. Nulla et lectus lorem. Aenean molestie tortor turpis, nec maximus nisl placerat sit amet. Aliquam magna ligula, porttitor ut tellus porta, auctor malesuada enim. Pellentesque ultricies erat non lorem sodales, dictum interdum erat bibendum. Aliquam vehicula sapien feugiat, varius libero eu, luctus dui.
  270.  
  271. [comment]----copy me for a divider----
  272. [/comment][div=height:auto; width:80%; margin:2px 0 -6px 0; display:flex; flex-flow:column nowrap; align-items:flex-end; margin-left:auto;][div=height:0; width:100%; border-top:1px solid var(--color-1);][/div][div=height:0; width:70%; border-top:1px solid var(--color-2); margin-top:5px;][/div][/div][comment]
  273. ----copy me too!----[/comment]
  274.  
  275. [comment]----copy me for a bolded subheader----
  276. [/comment][div=color:var(--color-1); font-weight:bold; font-size:20px; letter-spacing:0.5px; display:inline-block; text-transform:uppercase; line-height:100%; margin-bottom:5px;][comment]
  277.  
  278. ----* * * subheader here----
  279.  
  280. [/comment]subheader...[/div][comment]
  281. ----copy me too!----[/comment]
  282. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue sollicitudin iaculis. Curabitur quis ligula sit amet nisl mattis accumsan non nec mauris. Nulla et lectus lorem. Aenean molestie tortor turpis, nec maximus nisl placerat sit amet. Aliquam magna ligula, porttitor ut tellus porta, auctor malesuada enim. Pellentesque ultricies erat non lorem sodales, dictum interdum erat bibendum. Aliquam vehicula sapien feugiat, varius libero eu, luctus dui.
  283.  
  284. [comment]----copy me for a divider----
  285. [/comment][div=height:auto; width:80%; margin:2px 0 -6px 0; display:flex; flex-flow:column nowrap; align-items:flex-end; margin-left:auto;][div=height:0; width:100%; border-top:1px solid var(--color-1);][/div][div=height:0; width:70%; border-top:1px solid var(--color-2); margin-top:5px;][/div][/div][comment]
  286. ----copy me too!----[/comment]
  287.  
  288. [comment]----copy me for a bolded subheader----
  289. [/comment][div=color:var(--color-1); font-weight:bold; font-size:20px; letter-spacing:0.5px; display:inline-block; text-transform:uppercase; line-height:100%; margin-bottom:5px;][comment]
  290.  
  291. ----* * * subheader here----
  292.  
  293. [/comment]subheader...[/div][comment]
  294. ----copy me too!----[/comment]
  295. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue sollicitudin iaculis. Curabitur quis ligula sit amet nisl mattis accumsan non nec mauris. Nulla et lectus lorem. Aenean molestie tortor turpis, nec maximus nisl placerat sit amet. Aliquam magna ligula, porttitor ut tellus porta, auctor malesuada enim. Pellentesque ultricies erat non lorem sodales, dictum interdum erat bibendum. Aliquam vehicula sapien feugiat, varius libero eu, luctus dui.
  296. [/div][/div]
  297. [comment]----right end----[/comment]
  298. [/div]
  299. [comment]----copy me too!----[/comment]
  300.  
  301.  
  302. [comment]----copy this whole thing to add another section (rules/list)----[/comment]
  303. [div=height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap; scroll-snap-stop: always; background: var(--bg-color);]
  304. [comment]----left----[/comment]
  305. [div=height:auto; min-height:220px; max-height:290px; min-width:200px; max-width:calc(100% - 20px); flex: var(--lf); padding:18px 15px 17px 18px; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap; position:sticky; top:-0.5px; z-index:9;]
  306.  
  307. [comment]----image----[/comment]
  308. [div=height:60%; width:100%; border:1px solid var(--color-1);
  309.  
  310. /*edit the value in --simg-X to match variables*/ background: var(--simg-3);
  311.  
  312. background-size:cover; margin-bottom:10px;
  313.  
  314. /*edit the following to adjust the cropping of the image*/ background-position:50% 55%;][div=height:calc(100% - 0.5px); width:calc(100% - 0.5px);
  315.  
  316. /*edit following values to 0 to remove greyscale*/ backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1);][/div][/div]
  317.  
  318. [comment]----section title----[/comment]
  319. [div=
  320.  
  321. /*edit this value to adjust font size based on its current value! do not remove the space between the sign (+ or -) and the number*/ --fsc: + 5px;
  322.  
  323. --fs:clamp(48px, -50px + 15vw, 53px); height:auto; max-height:calc((var(--fs) var(--fsc)) * 1.24); overflow:hidden; width:100%; text-align:left; text-transform:uppercase; line-height:62%; font-size:calc(var(--fs) var(--fsc)); font-family: var(--title); color: var(--color-1); margin:auto 0;][comment]
  324.  
  325. ----* * * section title here----
  326.  
  327. [/comment]rules[/div]
  328.  
  329. [comment]----section number----[/comment]
  330. [div=width:45px; flex-shrink:0; position:absolute; right:-29px; top:30px; z-index:6;][div=padding-top:107%; background: var(--bg-color); position:relative;][div=height:100%; width:100%; position:absolute; top:0; left:-2px; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-family: var(--header); font-weight:bold; line-height:100%; font-size:37px; letter-spacing:0.5px; white-space:nowrap;][comment]
  331.  
  332. ----* * * section number here----
  333.  
  334. [/comment]03[/div]
  335. [/div][/div]
  336. [/div]
  337. [comment]----left end----[/comment]
  338.  
  339. [comment]----right----[/comment]
  340. [div=height:auto; min-height:290px; flex: var(--rf); min-width:240px; display:flex; flex-flow:column nowrap; align-items:flex-end; scroll-snap-stop: always;][div=height:auto; --w: clamp(10px, -100px + 17vw, 50px); width:calc(100% - var(--w)); padding:var(--sp) 0 10px 0; box-sizing:border-box; --ml:15px;][div=height:0; width:100%; margin-bottom:calc(var(--ml) * -1);][/div]
  341.  
  342. [comment]----copy this whole thing to add another rule/list item----[/comment]
  343. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; margin-top: var(--ml);]
  344. [comment]----number----[/comment]
  345. [div=height:40px; width:55px; flex-shrink:0; padding:6px 0 0 0; box-sizing:border-box; color: var(--color-1); font-family: var(--title); font-size:38px; float:right; display:flex; align-items:center; justify-content:center;][comment]
  346.  
  347. ----* * * number here----
  348.  
  349. [/comment]1.[/div]
  350. [comment]----list contents----[/comment]
  351. [div=height:auto; flex:1; text-align:right; line-height:125%; font-size:12px; font-family: var(--body); color: var(--t-color); font-weight: var(--tb);][comment]
  352.  
  353. ----* * * text starts here----
  354.  
  355. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus, sem non ultricies iaculis, ipsum dui volutpat lorem, eget laoreet nisl nisl in justo. Mauris et elementum mi, at pretium mauris. Fusce consequat ex id nunc viverra tristique.
  356. [/div]
  357. [/div]
  358. [comment]----copy me too!----[/comment]
  359.  
  360. [comment]----copy this whole thing to add another rule/list item----[/comment]
  361. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; margin-top: var(--ml);]
  362. [comment]----number----[/comment]
  363. [div=height:40px; width:55px; flex-shrink:0; padding:6px 0 0 0; box-sizing:border-box; color: var(--color-1); font-family: var(--title); font-size:38px; float:right; display:flex; align-items:center; justify-content:center;][comment]
  364.  
  365. ----* * * number here----
  366.  
  367. [/comment]2.[/div]
  368. [comment]----list contents----[/comment]
  369. [div=height:auto; flex:1; text-align:right; line-height:125%; font-size:12px; font-family: var(--body); color: var(--t-color); font-weight: var(--tb);][comment]
  370.  
  371. ----* * * text starts here----
  372.  
  373. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus, sem non ultricies iaculis, ipsum dui volutpat lorem, eget laoreet nisl nisl in justo. Mauris et elementum mi, at pretium mauris.
  374. [/div]
  375. [/div]
  376. [comment]----copy me too!----[/comment]
  377.  
  378. [comment]----copy this whole thing to add another rule/list item----[/comment]
  379. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; margin-top: var(--ml);]
  380. [comment]----number----[/comment]
  381. [div=height:40px; width:55px; flex-shrink:0; padding:6px 0 0 0; box-sizing:border-box; color: var(--color-1); font-family: var(--title); font-size:38px; float:right; display:flex; align-items:center; justify-content:center;][comment]
  382.  
  383. ----* * * number here----
  384.  
  385. [/comment]3.[/div]
  386. [comment]----list contents----[/comment]
  387. [div=height:auto; flex:1; text-align:right; line-height:125%; font-size:12px; font-family: var(--body); color: var(--t-color); font-weight: var(--tb);][comment]
  388.  
  389. ----* * * text starts here----
  390.  
  391. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus, sem non ultricies iaculis, ipsum dui volutpat lorem.
  392. [/div]
  393. [/div]
  394. [comment]----copy me too!----[/comment]
  395.  
  396. [/div][/div]
  397. [comment]----right end----[/comment]
  398. [/div]
  399. [comment]----copy me too!----[/comment]
  400.  
  401.  
  402. [/div][/div]
  403. [comment]----main contents end----[/comment]
  404.  
  405.  
  406. [comment]----designs (ignore)----[/comment]
  407. [comment]----box----[/comment]
  408. [div=pointer-events:none; height:auto; width:100%; padding: clamp(15px, -20px + 6vw, 25px); box-sizing:border-box; display:flex; flex-flow:row wrap; position:absolute; bottom:0; left:0; z-index:8;][div=height:auto; min-height:220px; min-width:200px; max-width:calc(100% - 20px); flex: var(--lf); border:1px solid var(--color-1); padding:0 15px; box-sizing:border-box; flex-shrink:0;][/div][div=height:290px; flex: var(--rf); min-width:240px;][/div][/div]
  409. [div=pointer-events:none; height:auto; width:100%; padding: clamp(15px, -20px + 6vw, 25px); box-sizing:border-box; display:flex; flex-flow:row wrap; position:absolute; bottom:0; left:0; z-index:10;][div=height:auto; min-height:220px; min-width:200px; max-width:calc(100% - 20px); flex: var(--lf); border:1px solid var(--color-1); border-left:0; border-right:0; padding:0 15px; box-sizing:border-box; flex-shrink:0;][/div][div=height:290px; flex: var(--rf); min-width:240px;][/div][/div]
  410. [div=pointer-events:none; height:auto; width:100%; padding: clamp(15px, -20px + 6vw, 25px); box-sizing:border-box; display:flex; flex-flow:row wrap; position:absolute; bottom:0; left:0; z-index:6;][div=height:auto; min-height:220px; min-width:200px; flex: var(--lf); background: var(--bg-color); padding:0 15px; box-sizing:border-box; flex-shrink:0;][/div][div=height:290px; flex: var(--rf); min-width:240px;][/div][/div]
  411.  
  412.  
  413. [comment]----planets----[/comment]
  414. [div=pointer-events:none; height:157px; width:415px; border:1px solid var(--color-1); border-radius:50%; position:absolute; z-index:4; top:clamp(-10px, -200px + 23vw, 10px); right:clamp(-120px, -500px + 60vw, -88px); transform:rotate(17deg);][div=height:9px; width:9px; background: var(--color-2); border:7px solid var(--bg-color); box-sizing:content-box; border-radius:50%; position:absolute; bottom:-12px; right:190px;][/div][div=height:16.5px; width:16px; background: var(--color-2); border:9px solid var(--bg-color); box-sizing:content-box; border-radius:50%; position:absolute; bottom:-5px; right:80px;][/div][/div]
  415. [div=pointer-events:none; height:205px; width:395px; padding:0; background: var(--bg-color); position:absolute; top:0; right:0; z-index:3;][/div]
  416. [comment]----stripes----[/comment]
  417. [div=pointer-events:none; height:clamp(400px, -100px + 85vw, 550px); width:auto; transform:rotate(-13deg); display:flex; flex-flow:row nowrap; position:absolute; z-index:5; top:-25px; left:clamp(70px, -200px + 50vw, 105px); --w:clamp(8px, -30px + 4.5vw, 10px);][div=height:100%; width: var(--w); background: var(--color-1);][/div][div=height:100%; width: var(--w); background: var(--color-1); margin-left:clamp(8px, -30px + 4.5vw, 14px);][/div][/div]
  418.  
  419.  
  420. [comment]----signature! do not remove----[/comment]
  421. [bg=transparent; height:auto;width:fit-content; padding:0px 5px 3px 5px; box-sizing:border-box; position:absolute ;z-index:6;opacity:0.9;color: var(--color-2); font-size:9px;text-align:center; bottom:2px; left:0px; background:var(--bg-color); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  422. [/div][/div]
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!