API tools faq
paste
Advertisement
kosmique

page: cometa

kosmique
Apr 29th, 2023
2,067
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.93 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. cometa by kosmique.tumblr.com
  4.  
  5. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  6.  
  7. * music player: https://blogs.perficient.com/2017/12/19/how-to-customize-your-own-html5-audio-player/
  8.  
  9. full credits list at kosmique.tumblr.com/credits
  10.  
  11. ------------------------------------------------------------------------
  12.  
  13. 1. all editable parts are marked with 🌸 emoji
  14.  
  15. ------------------------------------------------------------------------
  16.  
  17. 2. list of fonts you can use both as main font or title font:
  18.  
  19. * sans serif
  20. > nunito
  21. > nunito sans
  22. > open sans
  23. > pt sans
  24. > roboto
  25.  
  26. * serif
  27. > libre baskerville
  28. > lora
  29. > pt serif
  30.  
  31. * monospace
  32. > inconsolata
  33. > roboto mono
  34.  
  35. ------------------------------------------------------------------------
  36.  
  37. 3. colors use rgb system. please, do not use hex colors.
  38.  
  39. > numbers only
  40. > if you don't know how to get rgb colors, check this website: https://htmlcolors.com/google-color-picker
  41.  
  42. ------------------------------------------------------------------------
  43.  
  44. 4. if you don't know how to get the audio url, check this tutorial: https://glenthemes.tumblr.com/post/164215965424/hosting-files-on-dropbox
  45.  
  46. -->
  47.  
  48. <!DOCTYPE html>
  49. <html>
  50. <head>
  51.  
  52. <title>{Title}</title>
  53.  
  54. <link rel="shortcut icon" href="{favicon}">
  55. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  56.  
  57. <meta charset="utf-8"/>
  58. <meta name="viewport" content="width=device-width, initial-scale=1">
  59.  
  60. <!--============================== links ==============================-->
  61. <link rel="preconnect" href="https://fonts.googleapis.com">
  62. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  63. <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Lora:wght@400;700&family=Nunito+Sans:wght@400;700&family=Nunito:wght@400;700&family=Open+Sans:wght@400;700&family=PT+Sans:wght@400;700&family=PT+Serif:wght@400;700&family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  64. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css">
  65.  
  66. <!--============================== scripts ==============================-->
  67. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  68. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  69. <script src="https://static.tumblr.com/dj2anrv/ZVmq8svlk/jquery.style-my-tooltips.js"></script>
  70.  
  71.  
  72. <!--============================== css ==============================-->
  73.  
  74. <style type="text/css">
  75.  
  76. *{box-sizing:border-box}
  77.  
  78. *:not(a),
  79. ::before,
  80. ::after{transition:background .3s, border .3s, box-shadow .3s}
  81.  
  82. :root{
  83. /* if you don't know here to get the rgb color check the third item*/
  84.  
  85. --Background:255,255,255; /*background color*/
  86. --Background-lines:245,245,245; /*background grids color*/
  87. --Text:105,105,105; /*text color*/
  88. --Link:105,105,105; /*links color*/
  89. --Title:0,0,0; /*titles color*/
  90. --Borders:224,224,224; /*borders color*/
  91. --Scrollbar:var(--Accent);
  92. --Shadows:237, 243, 247; /*shadows color*/
  93. --Accent:28, 74, 110; /*accent color */
  94. --Main-boxes:250,250,250; /*main boxes color*/
  95. --Inner-boxes:255,255,255; /*inner boxes color*/
  96.  
  97. --Font-size:17px; /*font size*/
  98. --Main-font:'nunito'; /*font name | check the list of fonts in the second item*/
  99.  
  100. --Border-radius:8px; /*boxes corners*/
  101. --Icon-corners:100%; /*sidebar icon corners | you can use % or px*/
  102.  
  103. --Grid-width:30px; /*background grids size*/
  104. --Grid:var(--Grid-width) var(--Grid-width); /*do not touch this*/
  105.  
  106. /*sidebar icon*/
  107. --Sidebar-icon:"https://64.media.tumblr.com/7eda2f717870641297509c3ccdc66e4e/b87c46d5861e820e-0b/s1280x1920/ae41d6a49091d858d59e46205dab35e8b2fafe1f.jpg";
  108.  
  109. /*song cover*/
  110. --Track-cover:"https://64.media.tumblr.com/4e649dedd74a31de6703e49871ea5502/ddb205ef64c9b8db-01/s512x512u_c1/8754c9e7428fad61c78c2b9e688f11bf7df1fe44.jpg";
  111.  
  112. /*song link | check how to get the link in the fourth item*/
  113. --Track-url:"https://a.tumblr.com/tumblr_qbofikKN4C1se3qz2o1.mp3";
  114. }
  115.  
  116. /*----- dark mode -----*/
  117. body.dark-mode{
  118. --Background-lines:39, 36, 41;
  119. --Background:27, 25, 28;
  120. --Boxes:24,24,24;
  121. --Link:175,175,175;
  122. --Text:175,175,175;
  123. --Borders:49, 46, 51;
  124. --Shadows:15, 14, 15;
  125. --Title:255,255,255;
  126. --Inner-boxes:22, 20, 23;
  127. --Main-boxes:32, 30, 33;
  128. }
  129.  
  130. body{
  131. margin:0;
  132. padding:0;
  133. height:100%;
  134. overflow-x:hidden;
  135. word-break:break-word;
  136. color:rgb(var(--Text));
  137. background-size:var(--Grid);
  138. background-attachment:fixed;
  139. background-color:rgb(var(--Background));
  140. font:400 var(--Font-size)/1.6 var(--Main-font), sans-serif;
  141. background-image:linear-gradient(to right, rgb(var(--Background-lines)) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--Background-lines)) 1px, transparent 1px);
  142. }
  143.  
  144. a,
  145. a:hover{
  146. cursor:pointer;
  147. transition:ease .3s;
  148. text-decoration:none;
  149. -moz-transition:ease .3s;
  150. -webkit-transition:ease .3s;
  151. }
  152.  
  153. a{color:rgb(var(--Link))}
  154.  
  155. #about a{
  156. box-shadow:0 2px 0 rgb(var(--Accent),.5);
  157. border-bottom:1px solid rgb(var(--Accent));
  158. }
  159.  
  160. b,
  161. strong{font-weight:700;}
  162.  
  163. b,
  164. i,
  165. s,
  166. strike,
  167. u{color:rgb(var(--Accent))}
  168.  
  169. small,
  170. sub,
  171. sup{font-size:.7em;}
  172.  
  173. big{font-size:1.1em;}
  174.  
  175. p {margin:.7em 0;}
  176. p:first-of-type {margin-top:0;}
  177. p:last-of-type {margin-bottom:0;}
  178.  
  179. h1,
  180. h2,
  181. h3,
  182. h4 {
  183. margin:1em 0;
  184. font-weight:700;
  185. font-size:1.05em;
  186. }
  187.  
  188. blockquote{
  189. margin:.5em 0;
  190. padding:5px 15px;
  191. border-left:2px solid rgb(var(--Borders));
  192. }
  193.  
  194. h1:first-of-type,
  195. h2:first-of-type,
  196. h3:first-of-type,
  197. h4:first-of-type {margin-top:0;}
  198.  
  199. ul,ol{
  200. padding:0;
  201. margin:0;
  202. list-style:none;
  203. }
  204.  
  205. svg{
  206. width:1em;
  207. height:1em;
  208. }
  209.  
  210. img{
  211. height:auto;
  212. display:block;
  213. max-width:100%;
  214. image-rendering:-webkit-optimize-contrast;
  215. }
  216.  
  217. article img{
  218. margin-block:.5em;
  219. border-radius:var(--Border-radius);
  220. }
  221.  
  222. article img:last-child{margin-bottom: 0;}
  223.  
  224. iframe{display:block;}
  225.  
  226. /*scrollbar*/
  227.  
  228. ::-webkit-scrollbar{
  229. width:15px;
  230. height:15px;
  231. padding:5px;
  232. background-size:var(--Grid);
  233. background-color:rgb(var(--Background));
  234. background-image:linear-gradient(to right, rgb(var(--Background-lines)) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--Background-lines)) 1px, transparent 1px);
  235. }
  236.  
  237. ::-webkit-scrollbar-thumb {
  238. border-radius:10px;
  239. background-clip:padding-box;
  240. border:5px solid transparent;
  241. background-color:rgb(var(--Accent));
  242. }
  243.  
  244. /*tooltip*/
  245.  
  246. #s-m-t-tooltip{
  247. font-size:11px;
  248. z-index:9999999;
  249. max-width:300px;
  250. font-weight:700;
  251. position:relative;
  252. border-radius:5px;
  253. letter-spacing:1px;
  254. padding:.5em 1.25em;
  255. margin:0 14px 7px 30px;
  256. -moz-border-radius:5px;
  257. color:rgb(255,255,255);
  258. text-transform:uppercase;
  259. -webkit-border-radius:5px;
  260. background:rgba(0,0,0,.85);
  261. }
  262.  
  263. /*tumblr controls*/
  264.  
  265. .tmblr-iframe{
  266. filter:invert(1);
  267. top:25px!important;
  268. transition:ease .3s;
  269. right:25px!important;
  270. z-index:12!important;
  271. -moz-transition:ease .3s;
  272. transform-origin:right top;
  273. -webkit-transition:ease .3s;
  274. transform:scale(0.7)!important;
  275. -moz-transform:scale(0.7)!important;
  276. -webkit-transform:scale(0.7)!important;
  277. }
  278.  
  279. .tmblr-iframe--follow-teaser,
  280. .tmblr-iframe--app-cta-button{display:none !important;}
  281.  
  282. /*-============================== menu ==============================-*/
  283.  
  284. #menu{
  285. gap:20px;
  286. bottom:0;
  287. width:100%;
  288. z-index:999;
  289. display:flex;
  290. position:fixed;
  291. flex-wrap:wrap;
  292. padding:15px 20px;
  293. align-items:center;
  294. justify-content:space-between;
  295. background:rgb(var(--Main-boxes));
  296. border-top:1px solid rgb(var(--Borders));
  297. }
  298.  
  299. #menu > div{
  300. gap:15px;
  301. display:flex;
  302. align-items:center;
  303. }
  304.  
  305. body[position="top"] #menu{
  306. top:0;
  307. border-bottom:1px solid rgb(var(--Borders));
  308. }
  309.  
  310. body[position="bottom"] #menu{
  311. bottom:0;
  312. border-top:1px solid rgb(var(--Borders));
  313. }
  314.  
  315. /*----- left part -----*/
  316.  
  317. /*menu icon*/
  318. .small-icon{
  319. width:40px;
  320. height:40px;
  321. padding:5px;
  322. border-radius:100%;
  323. border:1px solid rgb(var(--Borders));
  324. }
  325.  
  326. /*search bar*/
  327. .search form{
  328. gap:5px;
  329. display:flex;
  330. padding:5px 10px;
  331. align-items:center;
  332. border-radius:30px;
  333. background:rgb(var(--Inner-boxes));
  334. border:1px solid rgb(var(--Borders));
  335. }
  336.  
  337. .search form input{
  338. border:0;
  339. padding:0;
  340. font:inherit;
  341. background:none;
  342. }
  343.  
  344. /*section button*/
  345. a.open-section {
  346. padding:5px 15px;
  347. text-align:center;
  348. border-radius:30px;
  349. background:rgb(var(--Inner-boxes));
  350. border:1px solid rgb(var(--Borders));
  351. }
  352.  
  353. /*----- right part -----*/
  354. #menu > div:last-of-type a{
  355. width:35px;
  356. height:35px;
  357. display:grid;
  358. place-items:center;
  359. border-radius:100%;
  360. background:rgb(var(--Inner-boxes));
  361. border:1px solid rgb(var(--Borders));
  362. }
  363.  
  364. a.credits svg{
  365. transition:ease .3s;
  366. -moz-transition:ease .3s;
  367. -webkit-transition:ease .3s;
  368. }
  369.  
  370. a.credits:hover svg{
  371. fill:rgb(255, 249, 64);
  372. color:rgb(255, 249, 64);
  373. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  374. }
  375.  
  376. a.night{cursor:help;}
  377.  
  378. a.credits svg{
  379. transition:ease .3s;
  380. -moz-transition:ease .3s;
  381. -webkit-transition:ease .3s;
  382. }
  383.  
  384. a.credits:hover svg{
  385. fill:rgb(255, 249, 64);
  386. color:rgb(255, 249, 64);
  387. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  388. }
  389.  
  390. a.night .sun,
  391. body.dark-mode a.night .moon{display:none;}
  392.  
  393. body.dark-mode a.night .sun{display:initial;}
  394.  
  395. a.night .sun{
  396. fill:rgb(255, 249, 64);
  397. color:rgb(255, 249, 64);
  398. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  399. }
  400.  
  401.  
  402. /*-============================== content ==============================-*/
  403.  
  404. main{
  405. gap:100px;
  406. display:grid;
  407. align-items:start;
  408. margin:70px auto 140px;
  409. width:calc(285px + 100px + 540px);
  410. grid-template-columns:285px 540px;
  411. }
  412.  
  413. /*----- sidebar -----*/
  414.  
  415. main aside{
  416. gap:70px;
  417. display:grid;
  418. }
  419.  
  420. main aside > *,
  421. main article{box-shadow:3px 3px 1px rgb(var(--Shadows));}
  422.  
  423. /*blog info*/
  424.  
  425. main aside .blog{
  426. gap:20px;
  427. display:flex;
  428. position:relative;
  429. align-items:start;
  430. border-radius:var(--Border-radius);
  431. }
  432.  
  433. main aside .blog ul {
  434. flex:1;
  435. overflow:hidden;
  436. border-radius:var(--Border-radius);
  437. border:1px solid rgb(var(--Borders));
  438. }
  439.  
  440. main aside .blog li{padding:15px;}
  441.  
  442. main aside .sidebar-icon{
  443. width:80px;
  444. left:-100px;
  445. height:80px;
  446. padding:5px;
  447. object-fit:cover;
  448. position:absolute;
  449. border-radius:var(--Icon-corners);
  450. border:1px solid rgb(var(--Borders));
  451. }
  452.  
  453. .blog-user{background:rgb(var(--Main-boxes));}
  454.  
  455. .blog-title{
  456. font-weight:700;
  457. font-size:1.15em;
  458. color:rgb(var(--Title));
  459. background:rgb(var(--Inner-boxes));
  460. border-bottom:1px solid rgb(var(--Borders));
  461. }
  462.  
  463. /*update*/
  464.  
  465. section#update{
  466. padding:20px;
  467. background:rgb(var(--Main-boxes));
  468. border-radius:var(--Border-radius);
  469. border:1px solid rgb(var(--Borders));
  470. }
  471.  
  472. section#update .title{
  473. gap:10px;
  474. font-size:1.15em;
  475. align-items:center;
  476. margin-bottom:20px;
  477. display:inline-flex;
  478. }
  479.  
  480. /*music player*/
  481.  
  482. section#music{
  483. padding:20px;
  484. background:rgb(var(--Background));
  485. border-radius:var(--Border-radius);
  486. border:1px solid rgb(var(--Borders));
  487. }
  488.  
  489. .music-player {
  490. display:grid;
  491. justify-content:center;
  492. }
  493.  
  494. /*player details*/
  495. .player-details{
  496. display:flex;
  497. align-items:center;
  498. }
  499.  
  500. .player-details.up{justify-content:space-between;}
  501.  
  502. .player-details .icon-tabler-chevron-left{
  503. width:22px;
  504. height:22px;
  505. color:rgb(var(--Title));
  506. }
  507.  
  508. .player-details span{
  509. font-size:14px;
  510. font-weight:700;
  511. color:rgb(var(--Title));
  512. }
  513.  
  514. .player-details .icon-tabler-heart{
  515. fill:rgb(240, 113, 142);
  516. color:rgb(240, 113, 142);
  517. filter:drop-shadow(0 0 3px rgb(240, 113, 142, .5));
  518. }
  519.  
  520. /*song info*/
  521.  
  522. .track-cover{
  523. z-index:1;
  524. display:grid;
  525. position:relative;
  526. margin-block:50px;
  527. place-items:center;
  528. border-radius:10px;
  529. }
  530.  
  531. .track-cover img{
  532. width:200px;
  533. height:200px;
  534. object-fit:cover;
  535. border-radius:10px;
  536. }
  537.  
  538. .track-cover .cover{
  539. z-index:1;
  540. position:relative;
  541. }
  542.  
  543. .track-cover .shadow{
  544. z-index:-1;
  545. position:absolute;
  546. filter:blur(10px);
  547. }
  548.  
  549. .music-info{
  550. width:200px;
  551. line-height:1.3;
  552. text-align:center;
  553. margin-bottom:25px;
  554. }
  555.  
  556. .music-info .name{
  557. font-weight:700;
  558. color:rgb(var(--Title));
  559. }
  560.  
  561. .music-info .singer{font-size:.85em;}
  562.  
  563. /*music controls*/
  564.  
  565. .music-progress{
  566. width:200px;
  567. display:flex;
  568. position:relative;
  569. }
  570.  
  571. .music-progress > span{
  572. font-size:12px;
  573. margin-top:10px;
  574. font-weight:700;
  575. position:absolute;
  576. color:rgb(var(--Title));
  577. }
  578.  
  579. .music-progress .music-current{left:0;}
  580. .music-progress .music-duration{right:0;}
  581.  
  582. .progress{
  583. width:100%;
  584. height:3px;
  585. border-radius:10px;
  586. background:rgb(var(--Borders));
  587. }
  588.  
  589. .progress span{
  590. width:0;
  591. height:100%;
  592. display:block;
  593. position:relative;
  594. border-radius:10px;
  595. transition:width .5s;
  596. background:rgb(var(--Accent));
  597. box-shadow:0 1px 3px rgb(var(--Accent),.35);
  598. }
  599.  
  600. .progress span::after{
  601. top:-3px;
  602. width:6px;
  603. right:-6px;
  604. height:6px;
  605. content:'';
  606. position:absolute;
  607. border-radius:100%;
  608. box-sizing:content-box;
  609. background:rgb(var(--Accent));
  610. outline:1px solid rgb(var(--Borders));
  611. border:3px solid rgb(var(--Background));
  612. }
  613.  
  614. .music-buttons{
  615. gap:15px;
  616. display:flex;
  617. margin-top:50px;
  618. font-weight:700;
  619. align-items:center;
  620. justify-content:center;
  621. }
  622.  
  623. .music-buttons .icon-shuffle,
  624. .music-buttons .icon-repeat{
  625. opacity:.75;
  626. font-size:.9em;
  627. }
  628.  
  629. .music-buttons .icon-shuffle{margin-right:auto;}
  630. .music-buttons .icon-repeat{margin-left:auto;}
  631.  
  632. .music-control{
  633. width:35px;
  634. height:35px;
  635. display:grid;
  636. line-height:0;
  637. transition:all .5s;
  638. place-items:center;
  639. border-radius:100%;
  640. border:1px solid rgb(var(--Borders));
  641. }
  642.  
  643. .music-control.active{
  644. color:rgb(var(--Accent));
  645. border-color:rgb(var(--Accent));
  646. }
  647.  
  648. /*----- content -----*/
  649.  
  650. main article{
  651. overflow:hidden;
  652. border-radius:var(--Border-radius);
  653. background:rgb(var(--Inner-boxes));
  654. border:1px solid rgb(var(--Borders));
  655. }
  656.  
  657. main article > .title{
  658. gap:10px;
  659. display:flex;
  660. padding:20px;
  661. font-size:1.15em;
  662. align-items:center;
  663. border-bottom:1px solid rgb(var(--Borders));
  664. }
  665.  
  666. main article > section{padding:20px;}
  667.  
  668. main article > section:not(:last-of-type){border-bottom:1px solid rgb(var(--Borders));}
  669.  
  670. main article > section:nth-of-type(even){background:rgb(var(--Main-boxes));}
  671.  
  672. /*main info*/
  673.  
  674. section#main-info{
  675. gap:1px;
  676. display:grid;
  677. position:relative;
  678. padding:0!important;
  679. grid-template-columns:50fr 50fr;
  680. background:rgb(var(--Background));
  681. }
  682.  
  683. section#main-info::before{
  684. top:0;
  685. left:50%;
  686. width:1px;
  687. content:'';
  688. height:100%;
  689. position:absolute;
  690. background:rgb(var(--Borders));
  691. }
  692.  
  693. section#main-info ul{
  694. gap:10px;
  695. display:grid;
  696. padding:20px;
  697. overflow:auto;
  698. max-height:150px;
  699. align-items:start;
  700. grid-auto-rows:max-content;
  701. }
  702.  
  703. section#main-info ul::-webkit-scrollbar{
  704. width:10px!important;
  705. height:10px!important;
  706. padding:3px!important;
  707. background-image:none;
  708. background-color:rgb(var(--Inner-boxes));
  709. border-left:1px solid rgb(var(--Borders));
  710. }
  711.  
  712. section#main-info ul::-webkit-scrollbar-thumb {border:3px solid transparent!important;}
  713.  
  714. section#main-info li{
  715. gap:10px;
  716. display:flex;
  717. align-items:start;
  718. }
  719.  
  720. section#main-info ul span{
  721. flex-shrink:0;
  722. border-radius:4px;
  723. padding-inline:8px;
  724. display:inline-block;
  725. border:1px solid rgb(var(--Borders));
  726. }
  727.  
  728. /*skills*/
  729.  
  730. section#skills{
  731. gap:20px;
  732. display:grid;
  733. }
  734.  
  735. section#skills ul{
  736. gap:5px;
  737. display:grid;
  738. }
  739.  
  740. .skill-title{
  741. font-size:.85em;
  742. text-transform:uppercase;
  743. }
  744.  
  745. .skill-bar{
  746. width:100%;
  747. padding:5px;
  748. border-radius:30px;
  749. border:1px solid rgb(var(--Borders));
  750. }
  751.  
  752. .skill-bar span{
  753. height:15px;
  754. display:block;
  755. border-radius:30px;
  756. transition:width .5s;
  757. background:rgb(var(--Accent));
  758. }
  759.  
  760. /*links*/
  761. #links,
  762. #tags{
  763. gap:20px;
  764. display:flex;
  765. flex-wrap:wrap;
  766. }
  767.  
  768. #links a{
  769. overflow:hidden;
  770. max-width:498px;
  771. border-radius:4px;
  772. white-space:nowrap;
  773. padding-inline:8px;
  774. text-overflow:ellipsis;
  775. border:1px solid rgb(var(--Borders));
  776. }
  777.  
  778. #tags a{
  779. position:relative;
  780. border-radius:4px;
  781. padding-inline:8px;
  782. border:1px solid rgb(var(--Borders));
  783. }
  784.  
  785. #tags a:after,
  786. #tags a:before {
  787. width:0;
  788. height:0;
  789. right:100%;
  790. content:'';
  791. display:block;
  792. position:absolute;
  793. border-style:solid;
  794. }
  795.  
  796. #tags a:after {
  797. border-width:10px;
  798. top:calc(50% + 1px);
  799. transform:translateY(-50%);
  800. border-color:transparent rgb(var(--Main-boxes)) transparent transparent;
  801. }
  802.  
  803. #tags a:before {
  804. top:50%;
  805. bottom:50%;
  806. border-width:11px;
  807. transform:translateY(calc(-50% + 1px));
  808. border-color:transparent rgb(var(--Borders)) transparent transparent;
  809. }
  810.  
  811. /*-============================== queries ==============================-*/
  812.  
  813. @media (max-width:1079px){
  814. main{
  815. width:70vw;
  816. display:block;
  817. }
  818.  
  819. aside{margin-bottom:70px;}
  820.  
  821. #music{display:none;}
  822.  
  823. main aside .sidebar-icon{
  824. left:0;
  825. position:relative;
  826. width:60px!important;
  827. height:60px!important;
  828. }
  829.  
  830. a.blog{box-shadow:none;}
  831.  
  832. a.blog ul{box-shadow: 3px 3px 1px rgb(var(--Shadows));}
  833. }
  834.  
  835. @media (min-width:1080px) and (max-width:1145px){
  836. main{
  837. gap:50px;
  838. width:calc(25vw + 50px + 45vw);
  839. }
  840.  
  841. aside{width:25vw;}
  842.  
  843. #about,
  844. #nav{width:45vw;}
  845. }
  846.  
  847.  
  848.  
  849. </style>
  850.  
  851. </head>
  852.  
  853. <body>
  854.  
  855. <!--============================== content ==============================-->
  856. <main>
  857.  
  858. <!--------------------------------- sidebar --------------------------------->
  859. <aside>
  860. <a href="{blogurl}" class="blog">
  861. <img class="sidebar-icon">
  862.  
  863. <ul>
  864. <li class="blog-title">{title}</li>
  865. <li class="blog-user">@{name}</li>
  866. </ul>
  867. </a>
  868.  
  869. <!------------ update ------------>
  870. <section id="update">
  871. <div class="title">
  872. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  873. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  874. <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
  875. <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
  876. </svg>
  877.  
  878. updates
  879. </div>
  880.  
  881. <!-- update content | 🌸 | do not delete <div></div> tags | replace the lorem ipsum text with your update -->
  882. <div>
  883. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed elit tincidunt, convallis nibh nec, pellentesque diam.
  884. </div>
  885. </section>
  886.  
  887. <!------------ song ------------>
  888. <section id="music">
  889. <!----- details ----->
  890. <div class="player-details up">
  891. <span>
  892. My song
  893. </span>
  894.  
  895. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  896. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  897. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
  898. </svg>
  899. </div>
  900.  
  901. <!----- song url ----->
  902. <audio id="song"></audio>
  903.  
  904. <div class="music-player">
  905. <!----- track cover ----->
  906. <div class="track-cover">
  907. <img class="cover"/>
  908. </div>
  909.  
  910. <!----- track info ----->
  911. <div class="music-info">
  912. <!-- track name | 🌸 -->
  913. <div class="name">Pantomime</div>
  914.  
  915. <!-- track artist | 🌸 -->
  916. <div class="singer">WJSN</div>
  917. </div>
  918.  
  919. <!----- player controls ----->
  920.  
  921. <div class="music-progress">
  922. <span class="music-current"></span>
  923. <div class="progress">
  924. <span></span>
  925. </div>
  926. <span class="music-duration"></span>
  927. </div>
  928.  
  929. <div class="music-buttons">
  930. <i class="feather icon-shuffle"></i>
  931. <i class="feather icon-skip-back"></i>
  932. <i class="feather music-control icon-play"></i>
  933. <i class="feather icon-skip-forward"></i>
  934. <i class="feather icon-repeat"></i>
  935. </div>
  936. </div>
  937. </section>
  938. </aside>
  939.  
  940. <!--------------------------------- about --------------------------------->
  941. <section id="about">
  942. <article>
  943.  
  944. <!------------ section title ------------>
  945. <div class="title">
  946. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  947. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  948. <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
  949. <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
  950. </svg>
  951.  
  952. about me
  953. </div>
  954.  
  955. <!------------ main info ------------>
  956. <section id="main-info">
  957. <ul>
  958. <li>
  959. <!-- your name | 🌸 | replace "info" with your info -->
  960. <span>name</span> info
  961. </li>
  962.  
  963. <li>
  964. <!-- your pronouns | 🌸 | replace "info" with your info -->
  965. <span>pronouns</span> info
  966. </li>
  967.  
  968. <li>
  969. <!-- your age | 🌸 | replace "info" with your info -->
  970. <span>age</span> info
  971. </li>
  972. </ul>
  973.  
  974. <ul>
  975. <li>
  976. <!-- your star sign | 🌸 | replace "info" with your info -->
  977. <span>zodiac</span> info
  978. </li>
  979.  
  980. <li>
  981. <!-- your location | 🌸 | replace "info" with your info -->
  982. <span>location</span> info
  983. </li>
  984.  
  985. <li>
  986. <!-- your favorite song | 🌸 | replace "info" with your info -->
  987. <span>reading</span> info
  988. </li>
  989. </ul>
  990. </section>
  991.  
  992. <!------------ text | 🌸 | delete the text between <section id="text"></section> and put yours in its place ------------>
  993. <section id="text">
  994. <b>Lorem ipsum</b> <s>dolor sit amet</s>, <i>consectetur</i> adipiscing elit. Nunc sed elit tincidunt, <u>convallis</u> nibh nec, <a href="">pellentesque diam</a>.
  995.  
  996. <blockquote>
  997. this is a blockquote
  998. </blockquote>
  999. </section>
  1000.  
  1001. <!------------ skills / if you want to add more skills, just copy from <ul class="skill"> to <ul> and paste it before </section> ------------>
  1002.  
  1003. <section id="skills">
  1004. <!----- skill one ----->
  1005. <ul class="skill">
  1006. <!-- skill title | 🌸 -->
  1007. <li class="skill-title">
  1008. skill one
  1009. </li>
  1010.  
  1011. <!-- skill bar | 🌸 | use use values from 0% to 100% -->
  1012. <li class="skill-bar">
  1013. <span width="70%"></span>
  1014. </li>
  1015. </ul>
  1016.  
  1017. <!----- skill two ----->
  1018. <ul class="skill">
  1019. <!-- skill title | 🌸 -->
  1020. <li class="skill-title">
  1021. skill two
  1022. </li>
  1023.  
  1024. <!-- skill bar | 🌸 | use use values from 0% to 100% -->
  1025. <li class="skill-bar">
  1026. <span width="100%"></span>
  1027. </li>
  1028. </ul>
  1029.  
  1030. <!----- skill three ----->
  1031. <ul class="skill">
  1032. <!-- skill title | 🌸 -->
  1033. <li class="skill-title">
  1034. skill three
  1035. </li>
  1036.  
  1037. <!-- skill bar | 🌸 | use use values from 0% to 100% -->
  1038. <li class="skill-bar">
  1039. <span width="30%"></span>
  1040. </li>
  1041. </ul>
  1042.  
  1043. <!----- skill four ----->
  1044. <ul class="skill">
  1045. <!-- skill title | 🌸 -->
  1046. <li class="skill-title">
  1047. skill four
  1048. </li>
  1049.  
  1050. <!-- skill bar | 🌸 | use use values from 0% to 100% -->
  1051. <li class="skill-bar">
  1052. <span width="13%"></span>
  1053. </li>
  1054. </ul>
  1055. </section><!-- paste before this one -->
  1056. </article>
  1057. </section>
  1058.  
  1059. <!--------------------------------- navigation --------------------------------->
  1060. <section id="nav" style="display:none;">
  1061. <article>
  1062. <!------------ section title ------------>
  1063. <div class="title">
  1064. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-directions" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1065. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1066. <path d="M12 21v-4"></path>
  1067. <path d="M12 13v-4"></path>
  1068. <path d="M12 5v-2"></path>
  1069. <path d="M10 21h4"></path>
  1070. <path d="M8 5v4h11l2 -2l-2 -2z"></path>
  1071. <path d="M14 13v4h-8l-2 -2l2 -2z"></path>
  1072. </svg>
  1073.  
  1074. navigation
  1075. </div>
  1076.  
  1077. <!------------ links ------------>
  1078. <section id="links">
  1079. <!-- first link | 🌸 -->
  1080. <a href="/yoururl">link title</a>
  1081.  
  1082. <!-- second link | 🌸 -->
  1083. <a href="/yoururl">link title</a>
  1084.  
  1085. <!-- third link | 🌸 -->
  1086. <a href="/yoururl">link title</a>
  1087.  
  1088. <!-- fourth link | 🌸 -->
  1089. <a href="/yoururl">link title</a>
  1090.  
  1091. <!-- fifth link | 🌸 -->
  1092. <a href="/yoururl">link title</a>
  1093.  
  1094. <!-- sixth link | 🌸 -->
  1095. <a href="/yoururl">link title</a>
  1096. </section>
  1097.  
  1098. <!------------ tags ------------>
  1099. <section id="tags">
  1100. <!-- first tag | 🌸 -->
  1101. <a href="/tagged/yoururl">tag title</a>
  1102.  
  1103. <!-- second tag | 🌸 -->
  1104. <a href="/tagged/yoururl">tag title</a>
  1105.  
  1106. <!-- third tag | 🌸 -->
  1107. <a href="/tagged/yoururl">tag title</a>
  1108.  
  1109. <!-- fourth tag | 🌸 -->
  1110. <a href="/tagged/yoururl">tag title</a>
  1111.  
  1112. <!-- fifth tag | 🌸 -->
  1113. <a href="/tagged/yoururl">tag title</a>
  1114.  
  1115. <!-- sixth tag | 🌸 -->
  1116. <a href="/tagged/yoururl">tag title</a>
  1117. </section>
  1118. </article>
  1119. </section>
  1120.  
  1121. </main>
  1122.  
  1123. <!--============================== menu ==============================-->
  1124.  
  1125. <nav id="menu">
  1126. <div>
  1127. <!-- menu icon -->
  1128. <img src="{portraiturl-48}" class="small-icon"/>
  1129.  
  1130. <!-- search bar -->
  1131. <div class="search">
  1132. <form action="/search" method="get">
  1133. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1134. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1135. <circle cx="10" cy="10" r="7"></circle>
  1136. <line x1="21" y1="21" x2="15" y2="15"></line>
  1137. </svg>
  1138.  
  1139. <input type="text" name="q" id="search" value="{SearchQuery}" placeholder="type here"/>
  1140. </form>
  1141. </div>
  1142.  
  1143. <!-- about button -->
  1144. <a href="#" class="open-section">
  1145. my links
  1146. </a>
  1147. </div>
  1148.  
  1149. <div>
  1150. <!-- dark mode button -->
  1151. <a class="night" title="dark mode">
  1152. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1153. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1154. <circle cx="12" cy="12" r="4"></circle>
  1155. <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
  1156. </svg>
  1157.  
  1158. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-stars moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1159. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1160. <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  1161. <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
  1162. <path d="M19 11h2m-1 -1v2"></path>
  1163. </svg>
  1164. </a>
  1165.  
  1166. <!-- credits -->
  1167. <a href="//kosmique.tumblr.com" title="by kosmique" class="credits">
  1168. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1169. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1170. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
  1171. </svg>
  1172. </a>
  1173. </div>
  1174. </nav>
  1175.  
  1176. <!--============================== scripts ==============================-->
  1177. <script>
  1178. $(document).ready(function(){
  1179.  
  1180. // skill bar
  1181. $('.skill span').each(function(){
  1182. var width = $(this).attr('width');
  1183. $(this).width(width);
  1184. });
  1185. // tooltips
  1186. $("[title]").style_my_tooltips({
  1187. tip_follows_cursor:true,
  1188. tip_delay_time:100,
  1189. tip_fade_speed:100
  1190. });
  1191.  
  1192. // adding url - https://stackoverflow.com/a/36088890
  1193. var bodyStyles = window.getComputedStyle(document.body);
  1194. var sideicon = (bodyStyles.getPropertyValue('--Sidebar-icon')).replace(/\"/g, "");
  1195. var cover = (bodyStyles.getPropertyValue('--Track-cover')).replace(/\"/g, "");
  1196. var trackurl = (bodyStyles.getPropertyValue('--Track-url')).replace(/\"/g, "");
  1197.  
  1198. $(".sidebar-icon").attr("src", sideicon);
  1199. $(".cover").attr("src", cover);
  1200. $("audio#song").attr("src", trackurl);
  1201.  
  1202. // section button
  1203. $('.open-section').click(function(){
  1204. $(this).toggleClass('active');
  1205. $("html, body").animate({scrollTop: 0},250);
  1206. if($(this).hasClass("active")){
  1207. $('#about').fadeOut(500);
  1208. $('#nav').delay(500).fadeIn(500);
  1209. $(this).html('about me');
  1210. } else{
  1211. $('#nav').fadeOut();
  1212. $('#about').delay(500).fadeIn(500);
  1213. $(this).html("my links");
  1214. }
  1215. return false
  1216. });
  1217.  
  1218. //music player
  1219.  
  1220. $(function(){
  1221. var aud = $('#song')[0];
  1222.  
  1223. // credits to https://stackoverflow.com/a/53488286
  1224. var convertTime = function(time){
  1225. var mins = Math.floor(time / 60);
  1226. if (mins < 10) {mins = '0' + String(mins);}
  1227. var secs = Math.floor(time % 60);
  1228. if (secs < 10) {secs = '0' + String(secs);}
  1229. return mins + ':' + secs;
  1230. }
  1231.  
  1232. // credits to https://stackoverflow.com/a/13114094
  1233. aud.addEventListener("loadedmetadata", function() {
  1234. $('.music-current').html('00:00');
  1235. $('.music-duration').html(convertTime(aud.duration));
  1236.  
  1237. });
  1238.  
  1239. $('.music-control').on('click', function(){
  1240. if (aud.paused) {
  1241. aud.play();
  1242. $('.music-control').removeClass('icon-play');
  1243. $('.music-control').addClass('icon-pause active');
  1244. }
  1245. else {
  1246. aud.pause();
  1247. $('.music-control').removeClass('icon-pause active');
  1248. $('.music-control').addClass('icon-play');
  1249. }
  1250. })
  1251. aud.ontimeupdate = function(){
  1252. $('.progress span').css('width', aud.currentTime / aud.duration * 100 + '%');
  1253. $('.music-current').html(convertTime(aud.currentTime));
  1254. }
  1255.  
  1256. aud.onended = function(){
  1257. $('.progress span').css('width','0');
  1258. $('.music-control').removeClass('icon-pause active');
  1259. $('.music-control').addClass('icon-play');
  1260. $('.music-current').html('00:00');
  1261. };
  1262. });
  1263.  
  1264. var $image = $('.track-cover .cover').clone().removeClass('cover').addClass('shadow');
  1265. $('.track-cover').append($image);
  1266.  
  1267. // dark mode
  1268. var darkmode = localStorage.getItem('darkMode');
  1269. if (darkmode === 'true') {$('body').addClass('dark-mode');}
  1270. $('.night').click(function() {
  1271. $('body').toggleClass('dark-mode');
  1272. var darkmode = $('body').hasClass('dark-mode');
  1273. localStorage.setItem('darkMode', darkmode);
  1274. });
  1275. });
  1276. </script>
  1277. </body>
  1278. </html>
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!