API tools faq
paste
seiche

page four: hyacinth

seiche
Jun 1st, 2020 (edited)
15,214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title} / about</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!---
  11.  
  12. HYACINTH ABOUT PAGE BY SEYCHE.TUMBLR.COM
  13.  
  14. CREDITS:
  15. -feather icons by Cole Bemis
  16. -icons from fontawesome
  17. -tippy.js tooltips by atomiks
  18. (full list of credits @ seyche.tumblr.com/credits)
  19.  
  20. --->
  21.  
  22. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Barlow:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  23.  
  24. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  25.  
  26. <script src="https://unpkg.com/feather-icons"></script>
  27.  
  28. <script src="https://kit.fontawesome.com/6ac5c36b23.js"></script>
  29.  
  30. <style type="text/css">
  31.  
  32. /*----- START EDITING HERE -----*/
  33.  
  34. /*----- VARIABLES: EDIT THIS SECTION!!!! -----*/
  35.  
  36. :root {
  37.  
  38. /*----- colours -----*/
  39.  
  40. --background: #f0f0f0;
  41. --content-background: #fff;
  42. --text: #575757;
  43. --links: #8c8c8c;
  44. --title: #212121;
  45. --borders: #e0e0e0;
  46. --accent: #9fa8da;
  47. --gradient-1: #7986cb;
  48. --gradient-2: #e1bee7;
  49. --icon-background: #f5f6ff;
  50. --sidebar-link-background: #f5f5f5;
  51. --statistics-background: #f5f5f5;
  52.  
  53. --fave-colour-one: #a1cdf7;
  54. --fave-colour-two: #f5bad9;
  55. --fave-colour-three: #abb6ff;
  56. --fave-colour-four: #ffc9dd;
  57.  
  58. /*----- font styling -----*/
  59.  
  60. --body-font: 'Public Sans', sans-serif;
  61. --font-size: 14px;
  62.  
  63. /*----- body styling -----*/
  64.  
  65. --content-corners: 10px;
  66. --drop-shadows: 1px 1px 3px var(--borders),
  67. -1px 1px 3px var(--borders);;
  68.  
  69. /*----- section visiblity: change the values below to "none" instead of "block" to hide each section if you want to hide them -----*/
  70.  
  71. --quote-box: block;
  72. --social-media-box: block;
  73. --skills-box: block;
  74. --favourites-box: block;
  75. --aesthetics-box: block;
  76.  
  77. }
  78.  
  79. /*----- END VARIABLES: you don't need to edit the css after here -----*/
  80.  
  81. @keyframes lazyload {
  82. 0% {opacity: 0;}
  83. 100% {opacity: 1;}
  84. }
  85.  
  86. @-webkit-keyframes lazyload {
  87. 0% {opacity: 0;}
  88. 100% {opacity: 1;}
  89. }
  90.  
  91. @-moz-keyframes lazyload {
  92. 0% {opacity: 0;}
  93. 100% {opacity: 1;}
  94. }
  95.  
  96. @-o-keyframes lazyload {
  97. 0% {opacity: 0;}
  98. 100% {opacity: 1;}
  99. }
  100.  
  101. body {
  102. font-family: var(--body-font);
  103. font-size: var(--font-size);
  104. color: var(--text);
  105. background-color: var(--background);
  106. text-align: left;
  107. line-height: 160%;
  108. word-wrap: break-word;
  109. letter-spacing: 0.2px;
  110. margin: 0;
  111. padding: 0;
  112. overflow-x: hidden;
  113. -webkit-animation: lazyload 2s;
  114. -moz-animation: lazyload 2s;
  115. -o-animation: lazyload 2s;
  116. animation: lazyload 2s;
  117. }
  118.  
  119. a {
  120. color: var(--links);
  121. text-decoration: none;
  122. -webkit-transition: all 0.3s;
  123. -moz-transition: all 0.3s;
  124. -ms-transition: all 0.3s;
  125. -o-transition: all 0.3s;
  126. transition: all 0.3s;
  127. }
  128.  
  129. a:hover {
  130. color: var(--accent);
  131. -webkit-transition: all 0.3s;
  132. -moz-transition: all 0.3s;
  133. -ms-transition: all 0.3s;
  134. -o-transition: all 0.3s;
  135. transition: all 0.3s;
  136. }
  137.  
  138. p a {border-bottom: 2px solid var(--accent);}
  139.  
  140. blockquote {
  141. padding: 0 0 0 1.25em;
  142. border-left: 1px solid var(--borders);
  143. margin: 1.25em 0 1.25em 1.25em;
  144. }
  145.  
  146. h1, h2, h3, h4, h5, .title {
  147. color: var(--title);
  148. letter-spacing: 2px;
  149. line-height: 160%;
  150. font-weight: bold;
  151. text-transform: uppercase;
  152. }
  153.  
  154. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: var(--title);}
  155. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: var(--accent);}
  156. h1, .title {font-size: 1.3em;}
  157. h2 {font-size: 1.25em;}
  158. h3 {font-size: 1.15em;}
  159. h4 {font-size: 1.1em;}
  160. h5 {font-size: 1em;}
  161.  
  162. small {font-size: 0.9em;}
  163. big {font-size: 1.1em;}
  164. b, bold, strong {color: var(--title);}
  165. b a, bold a, strong a {color: var(--title);}
  166. b a:hover, bold a:hover, strong a:hover {color: var(--accent);}
  167.  
  168. ::-webkit-scrollbar {
  169. width: 17px;
  170. height: 17px;
  171. background-color: var(--background);
  172. }
  173.  
  174. ::-webkit-scrollbar-track {border: 8px solid var(--background); background-color: var(--borders);}
  175.  
  176. ::-webkit-scrollbar-thumb {
  177. border: 6px solid var(--background);
  178. background-color: var(--title);
  179. min-height: 24px;
  180. min-width: 24px;
  181. }
  182.  
  183. .tippy-tooltip.custom-theme {
  184. background-color: var(--title);
  185. color: var(--content-background);
  186. text-align: center;
  187. font-family: inherit;
  188. font-weight: normal;
  189. text-transform: uppercase;
  190. letter-spacing: 1px;
  191. border-radius: 3px;
  192. font-style: normal;
  193. padding: 0.25em;
  194. margin: 20px auto auto 10px;
  195. font-size: 0.8em;
  196. }
  197.  
  198. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  199. z-index: 999999999!important;
  200. opacity: 0.6;
  201. transform: scale(0.8);
  202. transform-origin: 100% 0;
  203. -webkit-transform: scale(0.8);
  204. -webkit-transform-origin: 100% 0;
  205. -o-transform: scale(0.8);
  206. -o-transform-origin: 100% 0;
  207. -moz-transform: scale(0.8);
  208. -moz-transform-origin: 100% 0;
  209. -ms-transform: scale(0.8);
  210. -ms-transform-origin: 100% 0;
  211. -webkit-transition: all 0.4s;
  212. -moz-transition: all 0.4s;
  213. -ms-transition: all 0.4s;
  214. -o-transition: all 0.4s;
  215. transition: all 0.4s;
  216. }
  217.  
  218. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  219. opacity: 1.0;
  220. -webkit-transition: all 0.4s;
  221. -moz-transition: all 0.4s;
  222. -ms-transition: all 0.4s;
  223. -o-transition: all 0.4s;
  224. transition: all 0.4s;
  225. }
  226.  
  227. #k {
  228. text-align: center;
  229. margin: 100px auto;
  230. }
  231.  
  232. /*----- SIDEBAR -----*/
  233.  
  234. #sidebar {
  235. width: 250px;
  236. text-align: center;
  237. height: 100%;
  238. position: fixed;
  239. top: 0;
  240. bottom: 0;
  241. left: 0;
  242. box-sizing: border-box;
  243. padding: 50px;
  244. box-shadow: var(--drop-shadows);
  245. background-color: var(--content-background);
  246. overflow: hidden;
  247. }
  248.  
  249. #sidebar .icon {
  250. width: 80px;
  251. height: 80px;
  252. padding: 5px;
  253. display: inline-block;
  254. }
  255.  
  256. #side-icon {
  257. background: linear-gradient(to bottom right, var(--gradient-1), var(--gradient-2));
  258. border-radius: 50%;
  259. padding: 5px;
  260. display: inline-block;
  261. margin-bottom: 1.25em;
  262. }
  263.  
  264. #status-icon {
  265. position: absolute;
  266. margin: -16px auto auto 30px;
  267. width: 20px;
  268. height: 20px;
  269. padding: 6px;
  270. line-height: 20px;
  271. }
  272.  
  273. #status-icon .feather {
  274. width: 20px;
  275. height: 20px;
  276. }
  277.  
  278. #sidebar .title {display: block;}
  279. #description {margin-top: 1.5em;}
  280.  
  281. #sidebar nav {
  282. margin-top: 2.25em;
  283. text-align: left;
  284. }
  285.  
  286. #sidebar nav li {list-style-type: none; margin-bottom: 0.75em;}
  287. .nav-txt {float: right;}
  288.  
  289. #sidebar nav a {
  290. width: 100%;
  291. display: block;
  292. border-radius: 1.75em;
  293. padding: 0.75em;
  294. box-sizing: border-box;
  295. background-color: var(--sidebar-link-background);
  296. }
  297.  
  298. #sidebar nav a .feather {
  299. display: inline-block;
  300. vertical-align: middle;
  301. margin-right: 1em;
  302. width: 1.5em;
  303. height: 1.5em;
  304. color: var(--accent);
  305. }
  306.  
  307. #sidebar nav a:hover {
  308. background-color: var(--accent);
  309. color: var(--content-background);
  310. box-shadow: var(--drop-shadows);
  311. }
  312.  
  313. #sidebar nav a:hover .feather {
  314. color: var(--content-background);
  315. }
  316.  
  317. /*----- COMMON -----*/
  318.  
  319. .icon, #social-media img, #about-header img {
  320. border-radius: 50%;
  321. display: inline-block;
  322. vertical-align: middle;
  323. background-color: var(--icon-background);
  324. }
  325.  
  326. .icon-gradient {
  327. background: linear-gradient(to bottom right, var(--gradient-1), var(--gradient-2));
  328. border-radius: 50%;
  329. padding: 3px;
  330. display: inline-block;
  331. }
  332.  
  333. .ui-icon {
  334. position: absolute;
  335. background-color: var(--accent);
  336. border-radius: 50%;
  337. text-align: center;
  338. }
  339.  
  340. .ui-icon .feather {color: var(--content-background);}
  341.  
  342. a .feather {
  343. -webkit-transition: all 0.3s;
  344. -moz-transition: all 0.3s;
  345. -ms-transition: all 0.3s;
  346. -o-transition: all 0.3s;
  347. transition: all 0.3s;
  348. }
  349.  
  350. a:hover .feather {
  351. -webkit-transition: all 0.3s;
  352. -moz-transition: all 0.3s;
  353. -ms-transition: all 0.3s;
  354. -o-transition: all 0.3s;
  355. transition: all 0.3s;
  356. }
  357.  
  358. .upper {
  359. text-transform: uppercase;
  360. letter-spacing: 1px;
  361. font-size: 0.9em;
  362. }
  363.  
  364. .subtitle {
  365. text-transform: uppercase;
  366. letter-spacing: 1px;
  367. font-weight: bold;
  368. color: #212121;
  369. margin-bottom: 1em;
  370. font-size: 1.15em;
  371. }
  372.  
  373. article .feather {
  374. width: 1.25em;
  375. height: 1.25em;
  376. color: var(--accent);
  377. display: inline-block;
  378. vertical-align: middle;
  379. }
  380.  
  381. /*----- CONTENT -----*/
  382.  
  383. #container {
  384. position: relative;
  385. width: calc(99vw - 250px);
  386. margin-left: 250px;
  387. }
  388.  
  389. #content-wrap {
  390. width: 700px;
  391. margin: 50px auto;
  392. position: relative;
  393. }
  394.  
  395. article {
  396. background-color: var(--content-background);
  397. position: relative;
  398. padding: 50px;
  399. box-sizing: border-box;
  400. border-radius: var(--content-corners);
  401. box-shadow: var(--drop-shadows);
  402. }
  403.  
  404. /*----- MAIN CONTENT -----*/
  405.  
  406. #social-media img, #about-header img {
  407. width: 40px;
  408. height: 40px;
  409. padding: 3px;
  410. display: inline-block;
  411. vertical-align: middle;
  412. }
  413.  
  414. article .title {
  415. display: inline-block;
  416. font-size: 1.25em;
  417. margin-left: 1em;
  418. }
  419.  
  420. .main-flex {
  421. margin-top: 10px;
  422. display: flex;
  423. justify-content: flex-start;
  424. flex-direction: row;
  425. }
  426.  
  427. .stats {width: 240px;}
  428. .stats li {list-style-type: none; margin-bottom: 0.5em;}
  429. .stats li:last-of-type {margin-bottom: 0;}
  430.  
  431. .stats span {
  432. text-transform: uppercase;
  433. letter-spacing: 1px;
  434. color: var(--accent);
  435. font-size: 0.9em;
  436. margin-right: 0.5em;
  437. background-color: var(--statistics-background);
  438. padding: 0.25em 0.5em;
  439. border-radius: 1em;
  440. }
  441.  
  442. .summary {width: 450px; margin-left: 9px;}
  443. .summary p:first-of-type {margin-top: 0;}
  444. .summary p:last-of-type {margin-bottom: 0;}
  445.  
  446. /*----- QUOTE -----*/
  447.  
  448. #quote {
  449. margin-top: 10px;
  450. text-align: center;
  451. display: var(--quote-box);
  452. }
  453.  
  454. #quote b {font-size: 1.25em;}
  455. #quote .upper {color: var(--links); margin-top: 1.5em;}
  456.  
  457. #quote b::before, #quote b::after {
  458. content: '❝';
  459. color: var(--accent);
  460. font-size: 1.5em;
  461. display: inline-block;
  462. position: absolute;
  463. }
  464.  
  465. #quote b::before {margin-left: -0.75em;}
  466.  
  467. #quote b::after {
  468. -webkit-transform: rotate(180deg);
  469. -moz-transform: rotate(180deg);
  470. -ms-transition: rotate(180deg);
  471. -o-transition: rotate(180deg);
  472. transform: rotate(180deg);
  473. margin: -0.35em auto auto 0.25em;
  474. }
  475.  
  476. /*----- BOTTOM BOXES -----*/
  477.  
  478. .flexing {
  479. display: flex;
  480. justify-content: flex-start;
  481. flex-direction: row;
  482. }
  483.  
  484. .flex-left, .flex-right {width: 345px;}
  485. .flex-right {margin-left: 10px;}
  486. .flexing article {margin: 10px 0;}
  487.  
  488. /*----- SOCIAL MEDIA -----*/
  489.  
  490. #social-media {display: var(--social-media-box);}
  491.  
  492. #social-wrap a {
  493. font-size: 1.75em;
  494. color: var(--accent);
  495. list-style-type: none;
  496. display: inline-block;
  497. margin: auto 0.75em 0.75em auto;
  498. }
  499.  
  500. #social-wrap a:hover {color: var(--title);}
  501.  
  502. .sideblog {
  503. margin-top: 1.25em;
  504. display: flex;
  505. justify-content: flex-start;
  506. align-items: flex-start;
  507. flex-direction: row;
  508. }
  509.  
  510. .sideblog img {width: 2em; height: 2em;}
  511.  
  512. .sideblog-desc {
  513. display: inline-block;
  514. vertical-align: middle;
  515. margin-left: 1em;
  516. }
  517.  
  518. .sideblog b, .sideblog i {display: block;}
  519. .sideblog i {color: var(--links);}
  520.  
  521. /*----- SKILLS -----*/
  522.  
  523. #skills {display: var(--skills-box);}
  524.  
  525. .skill-bar {
  526. width: 100%;
  527. height: 15px;
  528. background-color: var(--sidebar-link-background);
  529. margin-top: 0.5em;
  530. border-radius: 15px;
  531. border: 1px solid var(--borders);
  532. overflow: hidden;
  533. padding: 3px;
  534. box-sizing: border-box;
  535. }
  536.  
  537. #skills li {list-style-type: none; margin-top: 1.5em;}
  538. #skills li:first-of-type {margin-top: 0;}
  539.  
  540. .skill-bar div {
  541. background: linear-gradient(to right, var(--gradient-1), var(--gradient-2));
  542. height: 7px;
  543. border-radius: 10px;
  544. }
  545.  
  546. #progress-one {width: var(--skill-one-progress);}
  547. #progress-two {width: var(--skill-two-progress);}
  548. #progress-three {width: var(--skill-three-progress);}
  549.  
  550. /*----- FAVOURITES -----*/
  551.  
  552. #favourites {display: var(--favourites-box);}
  553.  
  554. #favourites li {
  555. list-style-type: none;
  556. display: inline-block;
  557. margin-left: 0.5em;
  558. }
  559.  
  560. #favourites .upper {margin-top: 1em;}
  561. #favourites li::after {content: ',';}
  562. #favourites li:last-of-type::after {content: '.';}
  563.  
  564. /*----- AESTHETICS -----*/
  565.  
  566. #aesthetics {display: var(--aesthetics-box);}
  567.  
  568. .moodboard {
  569. display: flex;
  570. flex-direction: row;
  571. flex-wrap: wrap;
  572. justify-content: space-between;
  573. border-radius: 5px;
  574. overflow: hidden;
  575. }
  576.  
  577. .moodboard img {
  578. width: 120px;
  579. height: 120px;
  580. object-fit: cover;
  581. overflow: hidden;
  582. margin-top: 5px;
  583. }
  584.  
  585. .moodboard img:nth-child(1), .moodboard img:nth-child(2) {
  586. margin-top: 0;
  587. }
  588.  
  589. .colours {
  590. display: flex;
  591. flex-direction: row;
  592. flex-wrap: wrap;
  593. justify-content: space-between;
  594. margin-top: 1em;
  595. }
  596.  
  597. .colours div {
  598. width: 50px;
  599. height: 50px;
  600. border-radius: 3px;
  601. }
  602.  
  603. #col-1 {background-color: var(--fave-colour-one);}
  604. #col-2 {background-color: var(--fave-colour-two);}
  605. #col-3 {background-color: var(--fave-colour-three);}
  606. #col-4 {background-color: var(--fave-colour-four);}
  607.  
  608. /*---- MOBILE HEADER -----*/
  609.  
  610. #mobile-header {
  611. position: fixed;
  612. z-index: 100;
  613. padding: 1.75em 2em;
  614. top: 0;
  615. left: 0;
  616. right: 0;
  617. box-sizing: border-box;
  618. box-shadow: var(--drop-shadows);
  619. background-color: var(--content-background);
  620. display: none;
  621. }
  622.  
  623. .menu-button {
  624. display: inline-block;
  625. cursor: help;
  626. vertical-align: middle;
  627. -webkit-transition: all 0.3s;
  628. -moz-transition: all 0.3s;
  629. -ms-transition: all 0.3s;
  630. -o-transition: all 0.3s;
  631. transition: all 0.3s;
  632. }
  633.  
  634. .menu-button .feather, .close a .feather {
  635. color: var(--content-background);
  636. width: 1.5em;
  637. height: 1.5em;
  638. background-color: var(--accent);
  639. border-radius: 50%;
  640. padding: 0.75em;
  641. -webkit-transition: all 0.3s;
  642. -moz-transition: all 0.3s;
  643. -ms-transition: all 0.3s;
  644. -o-transition: all 0.3s;
  645. transition: all 0.3s;
  646. }
  647.  
  648. .menu-button:hover .feather, .close a:hover .feather {
  649. background-color: var(--title);
  650. -webkit-transition: all 0.3s;
  651. -moz-transition: all 0.3s;
  652. -ms-transition: all 0.3s;
  653. -o-transition: all 0.3s;
  654. transition: all 0.3s;
  655. }
  656.  
  657. #mobile-header .subtitle {
  658. display: inline-block;
  659. font-size: 1.15em;
  660. margin-left: 1em;
  661. }
  662.  
  663. #mobile-flex {
  664. display: flex;
  665. justify-content: space-between;
  666. align-items: center;
  667. }
  668.  
  669. .mobile-controls a .feather {
  670. width: 1.75em;
  671. height: 1.75em;
  672. -webkit-transition: all 0s;
  673. -moz-transition: all 0s;
  674. -ms-transition: all 0s;
  675. -o-transition: all 0s;
  676. transition: all 0s;
  677. }
  678.  
  679. .mobile-controls a {margin-left: 1em;}
  680.  
  681. .close {
  682. display: none;
  683. text-align: right;
  684. margin-bottom: 1em;
  685. }
  686.  
  687. .close a {cursor: help;}
  688.  
  689. /*---- RESPONSIVENESS -----*/
  690.  
  691. @media only screen and (max-width: 1100px) {
  692. #mobile-header, .close {display: block;}
  693.  
  694. #sidebar {
  695. left: -250px;
  696. z-index: 9999;
  697. -webkit-transition: ease-in-out 0.7s;
  698. -moz-transition: ease-in-out 0.7s;
  699. -ms-transition: ease-in-out 0.7s;
  700. -o-transition: ease-in-out 0.7s;
  701. transition: ease-in-out 0.7s;
  702. }
  703.  
  704. #sidebar.show {left: 0;}
  705.  
  706. #container {
  707. width: 100%;
  708. margin: 150px auto 50px auto;
  709. }
  710. }
  711.  
  712. @media only screen and (max-width: 800px) {
  713. #content-wrap {width: 90vw;}
  714.  
  715. article, .stats, .summary {width: 100%;}
  716.  
  717. .main-flex {flex-direction: column;}
  718.  
  719. .summary {margin: 10px auto auto auto;}
  720. }
  721.  
  722. @media only screen and (max-width: 780px) {
  723. .flexing {flex-direction: column;}
  724. .flexing article {margin: 10px auto auto auto;}
  725.  
  726. .flex-left, .flex-right {width: 100%;}
  727. .flex-right {margin: auto;}
  728.  
  729. .moodboard img {border-radius: 5px; width: 24%; height: 24%;}
  730. .moodboard img:nth-child(3), .moodboard img:nth-child(4) {
  731. margin-top: 0;
  732. }
  733. }
  734.  
  735. @media only screen and (max-width: 500px) {
  736.  
  737. #content-wrap {width: 100vw;}
  738.  
  739. article {
  740. width: 100%;
  741. padding: 30px;
  742. border-radius: 0;
  743. }
  744.  
  745. #sidebar {width: 80vw; left: -80vw;}
  746. }
  747.  
  748. </style>
  749. </head>
  750.  
  751. <body>
  752.  
  753. <!----- HEADER FOR MOBILE LAYOUT: do not edit this section ----->
  754.  
  755. <header id="mobile-header">
  756. <div id="mobile-flex">
  757. <div id="mobile-left">
  758. <div class="menu-button" title="open menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div>
  759. <div class="subtitle">about</div>
  760. </div>
  761. <div class="mobile-controls">
  762. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
  763. <a href="https://www.tumblr.com/message/{Name}" title="message">
  764. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a>
  765. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  766. </div>
  767. </div>
  768. </header>
  769.  
  770. <!----- ================================
  771.  
  772. SIDEBAR
  773.  
  774. ====================================== ----->
  775.  
  776. <aside id="sidebar">
  777.  
  778. <!--- mobile close button: don't touch --->
  779.  
  780. <div class="close"><a title="close menu"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></a></div>
  781.  
  782. <!----- START EDITING HERE ----->
  783.  
  784. <div id="side-icon">
  785.  
  786. <!--- by default, your blog icon shows up in the sidebar. to change it, replce {PortraitURL-128} below with the url of whatever image you want. --->
  787.  
  788. <img src="{PortraitURL-128}" class="icon"/>
  789. <div class="ui-icon" id="status-icon"><i data-feather="user" aria-hidden="true"></i></div>
  790.  
  791. </div>
  792.  
  793. <!--- sidebar title --->
  794.  
  795. <div class="title">about</div>
  796.  
  797. <!--- sidebar links: to change the icons, go to feathericons.com and change the name of the icon below to whatever icon you want --->
  798.  
  799. <nav class="upper">
  800.  
  801. <li><a href="/">
  802. <i data-feather="home"></i>
  803. <span class="nav-txt">home</span>
  804. </a></li>
  805. <li><a href="/ask">
  806. <i data-feather="mail"></i>
  807. <span class="nav-txt">message</span>
  808. </a></li>
  809. <li><a href="/archive">
  810. <i data-feather="grid"></i>
  811. <span class="nav-txt">archive</span>
  812. </a></li>
  813. <li><a href="/">
  814. <i data-feather="star"></i>
  815. <span class="nav-txt">one</span>
  816. </a></li>
  817.  
  818. </nav>
  819.  
  820. <!---
  821.  
  822. adding more sidebar links:
  823.  
  824. copy and paste this template:
  825.  
  826. <li><a href="/">
  827. <i data-feather="link"></i>
  828. <span class="nav-txt">link/span>
  829. </a></li>
  830.  
  831. and put it above "</nav>" in the space above. you can copy and paste as many times as you want,
  832.  
  833. --->
  834.  
  835. </aside>
  836.  
  837. <!----- ================================
  838.  
  839. END OF SIDEBAR
  840.  
  841. ====================================== ----->
  842.  
  843. <!----- MAIN CONTENT ----->
  844.  
  845. <section id="container">
  846.  
  847. <!----- ================================
  848.  
  849. START EDITING ABOUT CONTENT HERE
  850.  
  851. ====================================== ----->
  852.  
  853. <div id="content-wrap">
  854.  
  855. <!----- ABOUT HEADER ----->
  856.  
  857. <article id="about-header">
  858.  
  859. <!--- by default, your blog icon shows up in the sidebar. to change it, replce {PortraitURL-128} below with the url of whatever image you want. --->
  860.  
  861. <div class="icon-gradient">
  862. <img src="{PortraitURL-128}"/>
  863. </div>
  864.  
  865. <div class="title">name</div>
  866.  
  867. </article>
  868.  
  869. <!----- END OF ABOUT HEADER ----->
  870.  
  871. <div class="main-flex">
  872.  
  873. <!----- STATISTICS BOX ----->
  874.  
  875. <article class="stats">
  876.  
  877. <div class="subtitle">details</div>
  878.  
  879. <!--- to add more, copy and paste everything between and including <li></li> as many times as you need. --->
  880.  
  881. <li>
  882. <span>statistic</span>
  883. text
  884. </li>
  885.  
  886. <li>
  887. <span>statistic</span>
  888. text
  889. </li>
  890.  
  891. <li>
  892. <span>statistic</span>
  893. text
  894. </li>
  895.  
  896. <li>
  897. <span>statistic</span>
  898. text
  899. </li>
  900.  
  901. </article>
  902.  
  903. <!----- END OF STATISTICS BOX ----->
  904.  
  905. <!----- ABOUT SUMMARY ----->
  906.  
  907. <article class="summary">
  908.  
  909. <div class="subtitle">about me</div>
  910.  
  911. <p>
  912. Write your description here. Don't forget to use < p> < /p> (without the spaces) to separate paragraphs. Here's what <b>bold</b>, <i>italicized</i>, and <u>underlined</u> text looks like.
  913. </p>
  914.  
  915. <p>
  916. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  917. </p>
  918.  
  919. </article>
  920.  
  921. <!----- END OF ABOUT SUMMARY ----->
  922.  
  923. </div>
  924.  
  925. <!----- ================================
  926.  
  927. END OF MAIN ABOUT
  928.  
  929. ====================================== ----->
  930.  
  931. <!----- QUOTE BOX ----->
  932.  
  933. <article id="quote">
  934.  
  935. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b>
  936.  
  937. <div class="upper">source</div>
  938.  
  939. </article>
  940.  
  941. <!----- END OF QUOTE BOX ----->
  942.  
  943. <!----- ================================
  944.  
  945. BEGINNING OF BOTTOM CONTENT
  946.  
  947. ====================================== ----->
  948.  
  949. <div class="flexing">
  950.  
  951. <div class="flex-left">
  952.  
  953. <!----- SOCIAL MEDIA ----->
  954.  
  955. <article id="social-media">
  956.  
  957. <div class="subtitle">elsewhere</div>
  958.  
  959. <div id="social-wrap">
  960.  
  961. <!-----
  962.  
  963. ADDING MORE SOCIAL MEDIA LINKS: the icons are from fontawesome. to change them or add more, go to https://fontawesome.com/icons, find the name of the new icon, and enter it below.
  964.  
  965. the template for a social media lin looks like this:
  966.  
  967. <a href="/" title="@username">
  968. <i class="fab fa-icon-name"></i>
  969. </a>
  970.  
  971. copy and paste it as many times as you want. make sure to add your url, username, and fontawesome icon - those are the only places you need to edit.
  972.  
  973. ----->
  974.  
  975. <a href="/" title="@twitter">
  976. <i class="fab fa-twitter"></i>
  977. </a>
  978.  
  979. <a href="/" title="@instagram">
  980. <i class="fab fa-instagram"></i>
  981. </a>
  982.  
  983. <a href="/" title="@discord">
  984. <i class="fab fa-discord"></i>
  985. </a>
  986.  
  987. <a href="/" title="@snapchat">
  988. <i class="fab fa-snapchat-ghost"></i>
  989. </a>
  990.  
  991. <a href="/" title="@spotify">
  992. <i class="fab fa-spotify"></i>
  993. </a>
  994.  
  995. <a href="/" title="@pinterest">
  996. <i class="fab fa-pinterest-p"></i>
  997. </a>
  998.  
  999. <a href="/" title="@goodreads">
  1000. <i class="fab fa-goodreads-g"></i>
  1001. </a>
  1002.  
  1003. <a href="/" title="@ko-fi">
  1004. <i class="fas fa-mug-hot"></i>
  1005. </a>
  1006.  
  1007. <a href="/" title="@letterboxd">
  1008. <i class="fas fa-ellipsis-h"></i>
  1009. </a>
  1010.  
  1011. </div>
  1012.  
  1013. <!--- end of social media links --->
  1014.  
  1015. <!-----
  1016.  
  1017. SIDEBLOGS: if you don't want these, delete this section from here to the end. the template for adding more sideblogs looks like:
  1018.  
  1019. <div class="sideblog">
  1020.  
  1021. <div class="icon-gradient"><img src="https://via.placeholder.com/30x30.png"/></div>
  1022.  
  1023. <div class="sideblog-desc">
  1024. <b><a href="/">@username</a></b>
  1025. <i>description</i>
  1026. </div>
  1027.  
  1028. </div>
  1029.  
  1030. add as many as you want.
  1031.  
  1032. ----->
  1033.  
  1034. <!--- sideblog one --->
  1035.  
  1036. <div class="sideblog">
  1037.  
  1038. <div class="icon-gradient"><img src="https://via.placeholder.com/30x30.png"/></div>
  1039.  
  1040. <div class="sideblog-desc">
  1041. <b><a href="/">@username</a></b>
  1042. <i>description</i>
  1043. </div>
  1044.  
  1045. </div>
  1046.  
  1047. <!--- sideblog two --->
  1048.  
  1049. <div class="sideblog">
  1050.  
  1051. <div class="icon-gradient"><img src="https://via.placeholder.com/30x30.png"/></div>
  1052.  
  1053. <div class="sideblog-desc">
  1054. <b><a href="/">@username</a></b>
  1055. <i>description</i>
  1056. </div>
  1057.  
  1058. </div>
  1059.  
  1060. <!-----
  1061.  
  1062. END OF SIDEBLOG SECTION. if you want to add more sideblogs, add them above this line. if you want to delete them, make sure you delete everything above this line.
  1063.  
  1064. ----->
  1065.  
  1066. </article>
  1067.  
  1068. <!-----
  1069.  
  1070. SKILLS: the template for a new skill looks like:
  1071.  
  1072. <li>
  1073. <div class="upper">add your skill title here</div>
  1074. <div class="skill-bar">
  1075. <div style="width: 30%;"></div>
  1076. </div>
  1077. </li>
  1078.  
  1079. the only things you need to edit here are the skill titles and the width of the progress bar (the part contained in style="width: 30%;". make sure you give it a percentage value.
  1080.  
  1081. ----->
  1082.  
  1083. <article id="skills">
  1084.  
  1085. <div class="subtitle">skills</div>
  1086.  
  1087. <li>
  1088. <div class="upper">skill one</div>
  1089. <div class="skill-bar">
  1090. <div style="width: 30%;"></div>
  1091. </div>
  1092. </li>
  1093.  
  1094. <li>
  1095. <div class="upper">skill two</div>
  1096. <div class="skill-bar">
  1097. <div style="width: 85%;"></div>
  1098. </div>
  1099. </li>
  1100.  
  1101. <li>
  1102. <div class="upper">skill three</div>
  1103. <div class="skill-bar">
  1104. <div style="width: 10%;"></div>
  1105. </div>
  1106. </li>
  1107.  
  1108. </article>
  1109.  
  1110. <!----- END OF SKILLS ----->
  1111.  
  1112. </div>
  1113.  
  1114. <div class="flex-right">
  1115.  
  1116. <!----- LIKES AND DISLIKES ----->
  1117.  
  1118. <article id="favourites">
  1119.  
  1120. <div class="subtitle">favourites</div>
  1121.  
  1122. <div class="upper">
  1123. <i data-feather="heart"></i>
  1124. <li>like</li>
  1125. <li>like</li>
  1126. <li>like</li>
  1127. <li>like</li>
  1128. </div>
  1129.  
  1130. <div class="upper">
  1131. <i data-feather="thumbs-up"></i>
  1132. <li>activity</li>
  1133. <li>activity</li>
  1134. <li>activity</li>
  1135. <li>activity</li>
  1136. </div>
  1137.  
  1138. <div class="upper">
  1139. <i data-feather="thumbs-down"></i>
  1140. <li>dislike</li>
  1141. <li>dislike</li>
  1142. <li>dislike</li>
  1143. <li>dislike</li>
  1144. </div>
  1145.  
  1146. </article>
  1147.  
  1148. <!----- END OF LIKES AND DISLIKES ----->
  1149.  
  1150. <!----- AESTHETICS ----->
  1151.  
  1152. <article id="aesthetics">
  1153.  
  1154. <div class="subtitle">aesthetics</div>
  1155.  
  1156. <!-----
  1157.  
  1158. add the urls of four pictures below. if you add pictures larger than 120px x 120px or pictures that don't have a square ratio, the images will resize without being distorted or stretched. the colours of your favourite colours can be added in the css variables at the top of the theme.
  1159.  
  1160. ----->
  1161.  
  1162. <div class="moodboard">
  1163. <img src="https://via.placeholder.com/120x120.png"/>
  1164. <img src="https://via.placeholder.com/120x120.png"/>
  1165. <img src="https://via.placeholder.com/120x120.png"/>
  1166. <img src="https://via.placeholder.com/120x120.png"/>
  1167. </div>
  1168.  
  1169. <!----- STOP EDITING AFTER HERE ----->
  1170.  
  1171. <div class="colours">
  1172. <div id="col-1"></div>
  1173. <div id="col-2"></div>
  1174. <div id="col-3"></div>
  1175. <div id="col-4"></div>
  1176. </div>
  1177.  
  1178. </article>
  1179.  
  1180. <!----- END OF AESTHETICS ----->
  1181.  
  1182. </div>
  1183.  
  1184. <!----- DO NOT TOUCH ANYTHING AFTER HERE ----->
  1185.  
  1186. </div>
  1187.  
  1188. </div>
  1189.  
  1190. <div id="k" class="upper"><a href="https://seyche.tumblr.com/" title="hyacinth">page by seyche</a></div>
  1191.  
  1192. </section>
  1193.  
  1194. <!----- TOOLTIPS ----->
  1195.  
  1196. <script src="https://unpkg.com/popper.js@1"></script>
  1197. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1198.  
  1199. <script>
  1200.  
  1201. $(document).ready(function() {
  1202.  
  1203. /// SLIDE-IN MOBILE SIDEBAR
  1204.  
  1205. $('.menu-button').click(function(){
  1206. $('#sidebar').addClass('show', 700);
  1207. });
  1208.  
  1209. $('.close').click(function(){
  1210. $('#sidebar').removeClass('show', 700);
  1211. });
  1212.  
  1213. /// TOOLTIPS
  1214.  
  1215. tippy('[title]', {
  1216. theme: 'custom',
  1217. arrow: false,
  1218. followCursor: true,
  1219. delay: 100,
  1220. placement: 'bottom-start',
  1221. zIndex: 9999999999,
  1222. maxWidth: 400,
  1223.  
  1224. content(reference) {
  1225. const title = reference.getAttribute('title');
  1226. reference.removeAttribute('title');
  1227. return title;
  1228. },
  1229. });
  1230. });
  1231.  
  1232. feather.replace()
  1233.  
  1234. </script>
  1235.  
  1236. </body>
  1237. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!