daily pastebin goal
36%
SHARE
TWEET

✱⁞CHUNMI

goldfishmem Jan 10th, 2019 8 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [nobr]
  2.  
  3.     [div style="display: none;"][font=IBM Plex Mono]font call[/font][/div]
  4.  
  5.     [comment]major sections[/comment]
  6.     [class name="root"]
  7.         --mainbgcolor: #fbfbfb;
  8.         --color1: #ffaed6;
  9.         --color2: #cba1ff;
  10.         --textcolor: #818181;
  11.         --headertext: #ffffff;
  12.         --headershadow: #818181;
  13.         --subtext: #d4d4d4;
  14.         --subtextfont: 'IBM Plex Mono', monospace;
  15.         --profileimg: url(https://i.imgur.com/oWMGEOe.jpg);
  16.         font-smoothing: antialiased;
  17.         -webkit-font-smoothing: antialiased;
  18.         -moz-osx-font-smoothing: grayscale;
  19.         display: block;
  20.         position: relative;
  21.         overflow: hidden;
  22.         background: var(--mainbgcolor);
  23.         padding-bottom: 15px;
  24.         font-size: initial;
  25.         color: var(--textcolor);
  26.     [/class]
  27.     [class name="header"]
  28.         display: block;
  29.         width: 100%;
  30.         box-sizing: border-box;
  31.         background-color: var(--color1);
  32.         font-size: 3.5vh;
  33.         letter-spacing: -.05vh;
  34.         color: var(--headertext);
  35.         text-shadow: 1px 1px 1px var(--headershadow);
  36.         border-bottom: 2px solid var(--color2);
  37.         padding: 20px 5%;
  38.         letter-spacing: -1px;
  39.         margin-bottom: 15px;
  40.     [/class]
  41.     [class name="header" maxWidth=100vh]
  42.         padding: 10px 5%;
  43.     [/class]
  44.     [class name="flexbox"]
  45.         display: flex;
  46.         width: 100%
  47.         box-sizing: border-box;
  48.         padding: 0px 5%;
  49.         flex-flow: row wrap;
  50.         justify-content: flex-start;
  51.         align-items: center;
  52.         align-content: center;
  53.         overflow: hidden;
  54.     [/class]
  55.     [class name="flexbox" maxWidth=100vh]
  56.         justify-content: center;
  57.     [/class]
  58.  
  59.     [comment]info[/comment]
  60.     [class name="sidebar"]
  61.         flex: 1 0 200px;
  62.         text-align: center;
  63.         max-width: 250px;
  64.     [/class]
  65.     [class name="sidebar" maxWidth=100vh]
  66.         margin-bottom: 10px;
  67.     [/class]
  68.     [class name="username"]
  69.         display: block;
  70.         box-sizing: border-box;
  71.         width: 180px;
  72.         background: var(--color2);
  73.         padding: 10px;
  74.         border-radius: 5px;
  75.         margin: 0px calc(50% - 90px);
  76.         color: var(--headertext);
  77.         font-size: 2vh;
  78.         position: relative;
  79.         z-index: 2;
  80.     [/class]
  81.     [class name="arrow"]
  82.         display: block;
  83.         height: 16px;
  84.         width: 16px;
  85.         margin: -8px calc(50% - 8px) 15px calc(50% - 8px);
  86.         background: var(--color2);
  87.         transform: rotate(45deg);
  88.         position: relative;
  89.         z-index: 1;
  90.     [/class]
  91.     [class name="icon"]
  92.         display: block;
  93.         box-sizing: border-box;
  94.         width: 130px;
  95.         height: 130px;
  96.         margin: 5px calc(50% - 65px);
  97.         border-radius: 5px;
  98.         font-size: 0px;
  99.         overflow: hidden;
  100.         padding: 5px;
  101.         border: 1px solid var(--color2);
  102.         background: var(--headertext);
  103.     [/class]
  104.     [class name="iconimage"]
  105.         display: block;
  106.         height: 100%;
  107.         width: 100%;
  108.         border-radius: 5px;
  109.         overflow: hidden;
  110.         background: var(--profileimg) center center/cover;
  111.     [/class]
  112.     [class name="information"]
  113.         display: block;
  114.         width: 174px;
  115.         box-shadow: 4px 4px var(--color1);
  116.         margin: 15px calc(50% - 87px) 5px calc(50% - 87px);
  117.         background: var(--headertext);
  118.         box-sizing: border-box;
  119.         border: 1px solid var(--color2);
  120.         padding: 10px 15px;
  121.         font-size: .7em;
  122.         text-align: justify;
  123.     [/class]
  124.     [class name="credits"]
  125.         display: block;
  126.         width: 150px;
  127.         font-family: var(--subtextfont);
  128.         color: var(--subtext);
  129.         margin: 3vh calc(50% - 75px) 0px calc(50% - 75px);
  130.         font-size: 1vh;
  131.         text-align: left;
  132.         text-transform: uppercase;
  133.     [/class]
  134.  
  135.     [comment]main content[/comment]
  136.     [class name="timeline"]
  137.         flex: 2 0 180px;
  138.         height: 65vh;
  139.         overflow: hidden;
  140.         width: calc(100% - 20px);
  141.         padding: 0px 10px;
  142.         text-align: left;
  143.         max-width: 600px;
  144.     [/class]
  145.     [class name="scrollbox"]
  146.         display: block;
  147.         height: 100%;
  148.         width: 100%;
  149.         padding-right: 40%;
  150.         overflow-x: hidden;
  151.         overflow-y: auto;
  152.     [/class]
  153.     [class name="tweetscontainer"]
  154.         display: flex;
  155.         flex-flow: column-reverse nowrap;
  156.         justify-content: flex-end;
  157.         align-items: stretch;
  158.         align-content: flex-end;
  159.     [/class]
  160.  
  161.     [comment]tweet[/comment]
  162.     [class name="tweet"]
  163.         display: flex;
  164.         flex-flow: row nowrap;
  165.         justify-content: flex-start;
  166.         align-items: flex-start;
  167.         align-content: flex-start;
  168.         margin: 15px 0px;
  169.         width: 100%;
  170.         text-align: left;
  171.     [/class]
  172.     [class name="twimg"]
  173.         display: inline-block;
  174.         vertical-align: top;
  175.         height: 70px;
  176.         width: 70px;
  177.         margin-right: 15px;
  178.         border-radius: 5px;
  179.         overflow: hidden;
  180.         background: var(--profileimg) center center/cover;
  181.         font-size: 0px;
  182.     [/class]
  183.     [class name="twcontainer"]
  184.         flex: 1 0 0px;
  185.     [/class]
  186.     [class name="tweetbox"]
  187.         display: block;
  188.         width: calc(100% - 6px);
  189.         vertical-align: top;
  190.         box-sizing: border-box;
  191.         background: var(--headertext);
  192.         border: 1px solid var(--color2);
  193.         box-shadow: 4px 4px var(--color1);
  194.         padding: 10px 15px;
  195.         text-align: justify;
  196.         font-size: .73em;
  197.         white-space: normal !important;
  198.     [/class]
  199.     [class name="timestamp"]
  200.         margin-top: 6px;
  201.         display: block;
  202.         box-sizing: border-box;
  203.         width: 100%;
  204.         padding-right: 25px;
  205.         font-family: var(--subtextfont);
  206.         color: var(--color2);
  207.         font-size: 1vh;
  208.         text-align: right;
  209.         text-transform: uppercase;
  210.     [/class]
  211.     [class name="at"]
  212.         display: inline;
  213.         color: var(--color1);
  214.         text-transform: none;
  215.         cursor: pointer;
  216.     [/class]
  217.     [class name="tag"]
  218.         display: inline;
  219.         color: var(--color2);
  220.         cursor: pointer;
  221.     [/class]
  222.     [class name="url"]
  223.         display: inline;
  224.         color: var(--color1);
  225.         cursor: pointer;
  226.     [/class]
  227.     [class name="postimg"]
  228.         display: block;
  229.         border-left: 5px solid var(--color1);
  230.         padding-left: 2px;
  231.         overflow: hidden;
  232.         width: 100%;
  233.         margin-top: 2vh;
  234.         pointer-events: none;
  235.         font-size: 0px;
  236.     [/class]
  237.  
  238.     [comment]insert fake people here[/comment]
  239.     [class name="yunapuppy"]
  240.         --color1: #A3826F;
  241.         --color2: #F2C140;
  242.         --profileimg: url(https://i.imgur.com/CBgA1D4.jpg);
  243.     [/class]
  244.  
  245.     [div class="root"]
  246.         [div class="header"]
  247.             [b]夜もすがら君想ふ[/b]
  248.         [/div]
  249.         [div class="flexbox"]
  250.             [div class="sidebar"]
  251.                 [div class="username"]
  252.                     [plain]@konbini-p[/plain]
  253.                 [/div]
  254.                 [div class="arrow"][/div]
  255.                 [div class="icon"]
  256.                     [div class="iconimage"] [/div]
  257.                 [/div]
  258.                 [div class="information"]
  259.                     Group Mu: The group is on the unsteady deck of a wooden ship.
  260.                 [/div]
  261.                 [div class="credits"]
  262.                     C: GLUCOSE GUARDIAN[br][/br]
  263.                     A: 岩本ゼロゴ
  264.                 [/div]
  265.             [/div]
  266.             [div class="timeline"]
  267.                 [div class="scrollbox"]
  268.                     [div class="tweetscontainer"]
  269.                         [div class="tweet"]
  270.                             [div class="twimg"].[/div]
  271.                             [div class="twcontainer"]
  272.                                 [div class="tweetbox"]hello please send help[/div]
  273.                                 [div class="timestamp"]posted january 5[/div]
  274.                             [/div]
  275.                         [/div]
  276.                         [div class="tweet"]
  277.                             [div class="twimg"].[/div]
  278.                             [div class="twcontainer"]
  279.                                 [div class="tweetbox"]newest tweet with a [div class="url"][plain]http://fakeurl.com[/plain][/div][/div]
  280.                                 [div class="timestamp"]posted january 8[/div]
  281.                             [/div]
  282.                         [/div]
  283.                         [div class="tweet"]
  284.                             [div class="twimg"].[/div]
  285.                             [div class="twcontainer"]
  286.                                 [div class="tweetbox"]
  287.                                     testing [div class="tag"]#tags[/div] and [div class="at"][plain]@someone[/plain][/div][br][/br][br][/br]
  288.                                     Reminder that to create linebreaks you need the [plain][br][/br][/plain] tags.
  289.                                 [/div]
  290.                                 [div class="timestamp"]posted january 9[/div]
  291.                             [/div]
  292.                         [/div]
  293.                         [div class="tweet"]
  294.                             [div class="twimg"].[/div]
  295.                             [div class="twcontainer"]
  296.                                 [div class="tweetbox"]
  297.                                     testing img. As an fyi, this format works better with horizontal/landscape orientation images.
  298.                                     [div class="postimg"]
  299.                                         [img]https://i.imgur.com/gbwSW0z.jpg[/img]
  300.                                     [/div]
  301.                                 [/div]
  302.                                 [div class="timestamp"]posted january 10[/div]
  303.                             [/div]
  304.                         [/div]
  305.                         [div class="tweet" style="--color1: #B36EFB; --color2: #4DD7FF; --profileimg: url(https://i.imgur.com/iQxsYkQ.jpg);"]
  306.                             [div class="twimg"].[/div]
  307.                             [div class="twcontainer"]
  308.                                 [div class="tweetbox"]
  309.                                     you can fake retweets by using this format. if you plan on "retweeting" from a person a lot, make your own variable class and attach it to the tweet class here.
  310.                                 [/div]
  311.                                 [div class="timestamp"]posted by [div class="at"][plain]@anise[/plain][/div] january 9[/div]
  312.                             [/div]
  313.                         [/div]
  314.                         [div class="tweet yunapuppy"]
  315.                             [div class="twimg"].[/div]
  316.                             [div class="twcontainer"]
  317.                                 [div class="tweetbox"]
  318.                                     like so. This time I simply added the yunapuppy class name, which has its own variables that override the main's.
  319.                                     [div class="postimg"]
  320.                                         [img]https://i.imgur.com/oD8qU92.jpg[/img]
  321.                                     [/div]
  322.                                 [/div]
  323.                                 [div class="timestamp"]posted by [div class="at"][plain]@yunapuppy[/plain][/div] january 11[/div]
  324.                             [/div]
  325.                         [/div]
  326.                         [div class="tweet"]
  327.                             [div class="twimg"].[/div]
  328.                             [div class="twcontainer"]
  329.                                 [div class="tweetbox"]When writing in the code for the tweets, you write them in chronological order. The code automatically displays it in reverse. Retweets can be out of whack date-wise since we're assuming it's based on when they were retweeted and not the original posting date.[/div]
  330.                                 [div class="timestamp"]posted january 14[/div]
  331.                             [/div]
  332.                         [/div]
  333.                     [/div]
  334.                 [/div]
  335.             [/div]
  336.         [/div]
  337.     [/div]
  338.  
  339. [/nobr]
RAW Paste Data
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
 
Top