ooksie

eclipse

Dec 11th, 2021 (edited)
159
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]coded by uxie!
  2.  
  3. [font=Libre Baskerville]name/role[/font]
  4. [font=Karla]body[/font]
  5.  
  6. 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 ( ‾́ ◡ ‾́ )
  7.  
  8. [/comment][border=transparent;
  9.  
  10. /*container background colour*/
  11. --bg-color:#fefefe;
  12. /*container border*/
  13. --border:#e1e1ea;
  14. /*accent colour 1*/
  15. --color-1: #c8a9d3;
  16. /*accent colour 2 (slightly darker/more saturated)*/
  17. --color-2: #af8fbc;
  18.  
  19. /*role/name & detail text colour*/
  20. --h1: #292e44;
  21. /*text colour*/
  22. --t-color: #343942;
  23. /*dialogue colour*/
  24. --dialogue: #af8fbc;
  25.  
  26. /*fonts used*/
  27. --header: 'Libre Baskerville', serif;
  28. --body: 'Karla', sans-serif;
  29.  
  30. /*character image*/
  31. --img-1: url('xx');
  32.  
  33. height:auto; width:100%; max-width:340px; padding:0; position:relative; display:flex; flex-flow:column nowrap; margin:15px auto 20px auto; line-height:0; overflow:hidden; position:relative;]
  34.  
  35. [comment]----header----[/comment]
  36. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
  37. [comment]----image----[/comment]
  38. [border=transparent; height:100px; flex:1; min-width:80px; padding:0; background: var(--img-1); background-size:cover; border:1px solid var(--border); box-sizing:border-box;
  39.  
  40. /*edit the following to adjust the cropping of the image*/ background-position:100% 25%;][/border]
  41.  
  42. [comment]----header contents----[/comment]
  43. [border=transparent; height:100px; width:155px; padding:0; flex-shrink:0; border:1px solid var(--border); border-bottom:0; border-left:0; box-sizing:border-box; margin-left:-35px; position:relative;][border=transparent; height:100%; width:calc(100% - 35px); padding:0; position:absolute; top:-0.3px; right:0; background: var(--bg-color);][/border][border=transparent; height:100%; width:100%; padding:5px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent;; height:100%; width:200%; padding:0; overflow-y:scroll;]
  44. [comment]----name----[/comment]
  45. [border=transparent; height:100%; width:50%; padding:0 2px 0 10px; box-sizing:border-box; display:flex; align-items:center; margin-bottom:10px; position:relative;][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:0; right:0; color: var(--color-1); opacity:0.4; text-transform:uppercase; font-family: var(--body); letter-spacing:1px; font-size:9px; line-height:100%; font-weight:bold;]scroll[/border][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:100%; padding:0; background: var(--bg-color); border:1px solid var(--color-1); position:relative; z-index:2;][border=transparent; height:100%; max-height:63px; overflow:hidden; width:100%; padding:8px 13px 8px 11px; box-sizing:border-box;][border=transparent; height:100%; max-height:46px; overflow:hidden; width:100%; padding:0 2px; color: var(--h1); font-family: var(--header); font-size:18px; text-transform:uppercase; letter-spacing:-1px; word-spacing:3px; line-height:130%; text-align:left;][comment]
  46.  
  47. ----* * * name/role here----
  48.  
  49. [/comment]first last[/border][/border][/border]
  50. [/border]
  51. [comment]----name end----[/comment]
  52.  
  53. [comment]----copy this whole thing to add another detail----[/comment]
  54. [border=transparent; height:auto; width:50%; padding:0 2px 0 20px; box-sizing:border-box; display:flex; align-items:center; margin:2px 0 10px 0;][border=transparent; height:29px; width:29px; padding:3.5px 3px 3px 3.5px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:6px 5px 5px 5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:11px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  55.  
  56. ----* * * detail icon here----
  57.  
  58. [/comment][fa]fas fa-map-marker-alt[/fa][/border][/border][border=transparent; height:auto; flex:1; padding:0; margin-left:15px; color: var(--h1); font-family: var(--body); font-size:12px; line-height:14px;][comment]
  59.  
  60. ----* * * detail info here----
  61.  
  62. [/comment]location[/border]
  63. [/border]
  64. [comment]----copy me too!----[/comment]
  65.  
  66. [comment]----copy this whole thing to add another detail----[/comment]
  67. [border=transparent; height:auto; width:50%; padding:0 2px 0 19px; box-sizing:border-box; display:flex; align-items:center; margin:2px 0 10px 0;][border=transparent; height:29px; width:29px; padding:3.5px 3px 3px 3.5px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:6px 5px 5px 5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:11px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  68.  
  69. ----* * * detail icon here----
  70.  
  71. [/comment][fa]fas fa-users[/fa][/border][/border][border=transparent; height:auto; flex:1; padding:0; margin-left:15px; color: var(--h1); font-family: var(--body); font-size:12px; line-height:14px;][comment]
  72.  
  73. ----* * * detail info here----
  74.  
  75. [/comment]interactions[/border]
  76. [/border]
  77. [comment]----copy me too!----[/comment]
  78.  
  79. [comment]----copy this whole thing to add another detail----[/comment]
  80. [border=transparent; height:auto; width:50%; padding:0 2px 0 19px; box-sizing:border-box; display:flex; align-items:center; margin:2px 0 10px 0;][border=transparent; height:29px; width:29px; padding:3.5px 3px 3px 3.5px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:6px 5px 5px 5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:11px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  81.  
  82. ----* * * detail icon here----
  83.  
  84. [/comment][fa]fas fa-comment[/fa][/border][/border][border=transparent; height:auto; flex:1; padding:0; margin-left:15px; color: var(--h1); font-family: var(--body); font-size:12px; line-height:14px;][comment]
  85.  
  86. ----* * * detail info here----
  87.  
  88. [/comment]tags[/border]
  89. [/border]
  90. [comment]----copy me too!----[/comment]
  91.  
  92. [/border][/border][/border]
  93. [comment]----header contents end----[/comment]
  94. [/border]
  95. [comment]----header end----[/comment]
  96.  
  97. [comment]----text contents----[/comment]
  98. [border=transparent; height:320px; width:100%; padding:0; border:1px solid var(--border); border-top:0; box-sizing:border-box; position:relative; top:-1px; background: var(--bg-color);][border=transparent; height:100%; width:100%; padding:16px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 8px 0 16px; box-sizing:border-box; color: var(--t-color); line-height:16px; font-size:11px; text-align:justify; font-family: var(--body);][comment]
  99.  
  100. ----* * * text starts here----
  101.  
  102. [/comment][border=0; padding:0; color: var(--dialogue); font-weight:bold; letter-spacing:0.5px; display:inline;]"dialogue dialogue"[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et metus rutrum, porttitor libero sit amet, dapibus tortor. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultrices molestie pharetra. Sed quis placerat libero. Phasellus felis nulla, dapibus a pretium ut, placerat vitae ante. Maecenas auctor est nec bibendum ullamcorper. Maecenas hendrerit tortor vel leo maximus hendrerit. Curabitur eu eros ut ex tincidunt eleifend faucibus id nisl. Cras at diam libero. Mauris ornare mollis bibendum.
  103.  
  104. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis tempor leo est, interdum molestie diam consectetur non. Fusce ac lorem dolor. Donec ultrices rhoncus lorem eu malesuada. Sed eu porta massa. Cras varius dapibus cursus. Vestibulum non volutpat purus. Sed sapien nulla, tincidunt nec porta vel, finibus vel ex. Nunc rhoncus ultricies dui, id feugiat augue. Duis sit amet nisl varius, mollis sapien nec, tincidunt risus. Donec luctus enim lacinia facilisis cursus. Proin ornare sit amet ante tempor ullamcorper. Fusce diam diam, sodales sed porttitor at, sagittis ut felis. Donec sodales lectus justo, in lobortis lectus placerat vel. Integer auctor mi quis sapien convallis, et blandit eros bibendum.
  105. [/border][/border][/border][/border]
  106. [comment]----text contents end----[/comment]
  107.  
  108. [comment]
  109. ----signature! do not remove
  110. [/comment][bg=transparent; height:auto; width:auto; padding:1px 3px; box-sizing:border-box; position:absolute;z-index:6;opacity:0.6;text-align:center; top:10px; left:11px; z-index:10; background: var(--bg-color);][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:9.5px; line-height:100%; opacity:0.9;][font=Open Sans]♡coded by uxie♡[/font][/border][/bg][/border]
RAW Paste Data Copied