API tools faq
paste
glenthemes

About Page [15]: Sunlit Memories

glenthemes
Nov 30th, 2019 (edited)
6,788
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.26 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [13]: Sunlit Memories
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/11/30
  6. Last updated: 2023/10/13
  7.  
  8. What's new:
  9. ✱ fixed status tab not showing
  10. ✱ music player bug fix
  11. ✱ fixed some loading issues
  12. ✱ NEW GUIDE!
  13.  
  14. TERMS OF USE:
  15. 1) Do not remove the page credit.
  16. 2) Do not repost/redistribute my themes.
  17. 3) Do not take parts of the code and use it as your own.
  18. 4) Do not use my themes as a base code.
  19. 5) Do not mix my themes together.
  20.  
  21. Customization Pointers - legend:
  22. 🌱🌱🌱🌱🌱🌱🌱 = start of a section
  23. 🔽🔽🔽🔽🔽🔽🔽 = content goes in the following line(s)
  24. 🛑🛑🛑🛑🛑🛑🛑 = end of a section
  25.  
  26. Guide:
  27. docs.google.com/presentation/d/13KZWoLUBasAWh-R1S49xIj4Wc1qLdV81wp1aws12LBE/edit?usp=sharing
  28.  
  29. [ DISCLAIMER ]-----------------------------------------
  30. The design of this page belongs entirely to ConcernedApe in their making of Stardew Valley. I replicated their design in CSS & HTML for leisure. This page is released for non-commercial purposes.
  31.  
  32. [ CREDITS ]--------------------------------------------
  33. Navlinks icon SVGs by freekpik @ flaticon:
  34. - flaticon.com/free-icon/home_465328
  35. - flaticon.com/free-icon/happy_408197
  36. - flaticon.com/free-icon/calendar_465375
  37.  
  38.  
  39. Images:
  40.  
  41. - title box small image by Moonlight-pendent13 @ DA
  42. deviantart.com/moonlight-pendent13/art/Tiny-plants-FTU-659975030
  43.  
  44. - bio box bullet icon by GentleLark @ DA
  45. deviantart.com/gentlelark/art/Feather-478425861
  46.  
  47. - bio box fall leaf divider by GentleLark @ DA
  48. deviantart.com/gentlelark/art/Fall-Leaf-Divider-F2U-572312728
  49.  
  50. - sidebar image by King-Lulu-Deer @ DA
  51. deviantart.com/king-lulu-deer/art/Pumpkin-Spice-And-Everything-Nice-743916387
  52.  
  53. - custom links images from Stardew Valley by ConcernedApe
  54.  
  55.  
  56. Music:
  57.  
  58. - "Fall (The Smell of Mushroom)" by ConcernedApe
  59.  
  60.  
  61. Fonts:
  62.  
  63. - Stardew Valley font by ConcernedApe
  64. - Aseprite interface font by David Capello
  65. community.aseprite.org/t/aseprite-interface-font/971/9
  66.  
  67.  
  68. Cursors:
  69.  
  70. - default cursor, help, hand
  71. - deviantart.com/endertale-asriel/art/Stardew-Valley-Cursors-for-Windows-766897740
  72.  
  73.  
  74. Background pattern:
  75.  
  76. - crazykira, ixora, (gyapo)
  77. gyapo.tumblr.com/post/17773292758/
  78. ------------------------------------------------------------------------>
  79.  
  80. <!DOCTYPE html>
  81. <html lang="en">
  82.  
  83. <head>
  84.  
  85. <title>{Title}</title>
  86.  
  87. <link rel="shortcut icon" href="{Favicon}">
  88.  
  89. <!--------------------JAVASCRIPTS-------------------->
  90. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  91. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  92. <script>
  93. (function($){
  94. $(document).ready(function(){
  95. $("a[title]").style_my_tooltips({
  96. tip_follows_cursor:true,
  97. tip_delay_time:0,
  98. tip_fade_speed:50,
  99. attribute:"title"
  100. });
  101. });
  102. })(jQuery);
  103. </script>
  104.  
  105. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  106.  
  107. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  108.  
  109. <link href="//glen-themes.gitlab.io/abt-pages/15/navlinks.css" rel="stylesheet">
  110.  
  111. <script src="//glen-themes.gitlab.io/abt-pages/15/navSVGs.js"></script>
  112.  
  113. <link href="//glen-themes.gitlab.io/abt-pages/15/boxes.css" rel="stylesheet">
  114.  
  115. <script src="//glen-themes.gitlab.io/abt-pages/15/status-tab.js"></script>
  116. <link href="//glen-themes.gitlab.io/abt-pages/15/status-tab.css" rel="stylesheet">
  117.  
  118. <link href="//glen-themes.gitlab.io/abt-pages/15/energybar.css" rel="stylesheet">
  119.  
  120. <script src="//static.tumblr.com/gtjt4bo/jxSs2cboc/glenplayer0.js"></script>
  121.  
  122. <script>
  123. $(document).ready(function(){
  124. $("img").each(function(){
  125. if ($(this).attr("src") == "//glen-themes.gitlab.io/abt-pages/15/imgs/Moonlight-pendent13_TinyPlants.png"){
  126. $(this).wrap("<a title='art by Moonlight-pendent13 - DeviantArt'></a>");
  127. }
  128.  
  129. if ($(this).attr("src") == "//glen-themes.gitlab.io/abt-pages/15/imgs/GentleLark_FallLeafDivider.png"){
  130. $(this).wrap("<a title='art by GentleLark - DeviantArt'></a>");
  131. }
  132.  
  133. if ($(this).attr("src") == "//glen-themes.gitlab.io/abt-pages/15/imgs/King-Lulu-Deer_PumpkinSpiceAndEverythingNice.gif"){
  134. $(this).wrap("<a title='art by King-Lulu-Deer - DeviantArt'></a>");
  135. }
  136. });
  137. });//end ready
  138.  
  139. $(window).load(function(){
  140. $(".bio-box .box-text").css("height","auto");
  141. $(".bio-box .box-text").css("visibility","visible");
  142. });
  143. </script>
  144.  
  145. <!-------------------------------------------------------------------->
  146.  
  147. <style type="text/css">
  148.  
  149. @font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
  150.  
  151. @font-face { font-family: "sdv"; src: url('//glen-assets.github.io/fonts/stardew-valley.ttf'); }
  152.  
  153. @font-face { font-family: "aseprite"; src: url('//glen-assets.github.io/fonts/AsepriteFont.ttf'); }
  154.  
  155. /*--------------------TOOLTIPS--------------------*/
  156. #s-m-t-tooltip {
  157. margin:22px;
  158. padding:1px 10px 3px 10px;
  159. background-image:linear-gradient(to bottom, var(--TextBox-Background-Gradient-1), var(--TextBox-Background-Gradient-2));
  160. border-style:ridge;
  161. border-width:var(--TextBox-Border-Size);
  162. border-top-color:var(--TextBox-Border-Main-1);
  163. border-right-color:var(--TextBox-Border-Medium-2);
  164. border-bottom-color:var(--TextBox-Border-Medium-1);
  165. border-left-color:var(--TextBox-Border-Main-2);
  166. font-family:aseprite;
  167. font-size:19px;
  168. letter-spacing:0.3px;
  169. color:var(--TextBox-Text-Color);
  170. text-shadow:-1px 1px 1px var(--TextBox-Text-Shadow);
  171. line-height:1.3em;
  172. z-index:99;
  173. max-width:36vw;
  174. }
  175.  
  176. /*--------------------TUMBLR CONTROLS--------------------*/
  177. iframe#tumblr_controls, .iframe-controls--desktop {
  178. top:5px!important;
  179. right:5px!important;
  180. position:fixed!important;
  181.  
  182. transform:scale(0.7,0.7);
  183. -webkit-transform:scale(0.7,0.7);
  184. -moz-transform:scale(0.7,0.7);
  185. -o-transform:scale(0.7,0.7);
  186. -ms-transform:scale(0.7,0.7);
  187.  
  188. transform-origin:100% 0;
  189. -webkit-transform-origin:100% 0;
  190. -moz-transform-origin:100% 0;
  191. -o-transform-origin:100% 0;
  192. -ms-transform-origin:100% 0;
  193. z-index:999999!important;
  194. }
  195.  
  196. /*--------------------TEXT HIGHLIGHT--------------------*/
  197. ::selection {
  198. background:#BBD3FD;
  199. }
  200.  
  201. ::-moz-selection {
  202. background:#BBD3FD;
  203. }
  204.  
  205. /*--------------------BASICS--------------------*/
  206. body {
  207. background:#F5E8D8 url('//66.media.tumblr.com/tumblr_lzju29VxIR1r9g6hvo1_250.png');
  208. background-attachment:fixed;
  209. background-repeat:repeat;
  210. color:#000;
  211. cursor:normal;
  212. font-family:consolas-alt;
  213. line-height:1.6em;
  214. font-size:12px;
  215. text-align:left;
  216. }
  217.  
  218. body {
  219. cursor: url("//glen-themes.gitlab.io/abt-pages/15/imgs/Stardew-Valley-Cursor.png"), auto;
  220. }
  221.  
  222. a, a [music-btn]{
  223. cursor: url("//glen-themes.gitlab.io/abt-pages/15/imgs/Stardew-Valley-Hand.png"), auto!important;
  224. }
  225.  
  226. a[title]:not([href]){
  227. cursor: url("//glen-themes.gitlab.io/abt-pages/15/imgs/Stardew-Valley-Cursor-Help.png"), auto;
  228. }
  229.  
  230. a[title] > img,
  231. a[title] > .nutbar:first-child,
  232. a[title] > .nutbar:first-child ~ *,
  233. a[title] > [music-btn] > * {
  234. pointer-events:none;
  235. }
  236.  
  237. blockquote {
  238. padding-left:10px;
  239. margin-left:5px;
  240. border-left:1px solid;
  241. border-color:var(--TextBox-Text-Color);
  242. margin:10px;
  243. }
  244.  
  245. a {
  246. color:var(--TextBox-Link-Color);
  247. text-decoration:none;
  248. -webkit-transition: all 0.1s ease-in-out;
  249. -moz-transition: all 0.1s ease-in-out;
  250. -o-transition: all 0.1s ease-in-out;
  251. }
  252.  
  253. b, strong {
  254. font-weight:bold;
  255. }
  256.  
  257. i, em {color:;}
  258.  
  259. pre, code {
  260. white-space:pre-wrap;
  261. display:block;
  262. }
  263.  
  264. hr {
  265. width:70%;
  266. border-width:0px;
  267. height:1px;
  268. background-color:var(--TextBox-Text-Color);
  269. }
  270.  
  271. img, span {vertical-align:middle;}
  272.  
  273. /*---------- COLORS & POSITIONING ---------- */
  274. :root {
  275. /* ----- NAV LINKS ----- */
  276. --Nav-Links-Top-Position:30px;
  277. --Nav-Links-Left-Position:30px;
  278. --Nav-Links-Background:#dc7b05;
  279. --Nav-Links-Border-Dark:#5b2b2a;
  280. --Nav-Links-Border-Medium-1:#853605;
  281. --Nav-Links-Border-Medium-2:#b14e05;
  282. --Nav-Links-Border-Light:#f7ba00;
  283. --Nav-Links-Border-Size:2px;
  284. --Nav-Links-Icon-Size:25px;
  285. --Nav-Links-Icon-Color:#5b2b2a;
  286. --Nav-Links-Icon-Padding:3px;
  287. --Nav-Links-Gap:9px;
  288.  
  289. /* ----- MAIN GRID ----- */
  290. --Main-Grid-Gaps-Vertical:14px;
  291. --Main-Grid-Gaps-Sides:20px;
  292.  
  293. /* ----- BOXES ----- */
  294. --Left-TextBoxes-Width:388px;
  295. --TextBox-Border-Main-1:#fb9e00;
  296. --TextBox-Border-Main-2:#e08700;
  297. --TextBox-Border-Dark:#5b2b2a;
  298. --TextBox-Border-Medium-1:#903e01;
  299. --TextBox-Border-Medium-2:#ba5901;
  300. --TextBox-Border-Light:#f7ba00;
  301. --TextBox-Border-Shadow:#cb8652;
  302. --TextBox-Border-Size:3px;
  303. --TextBox-Background:#ffcd82;
  304. --TextBox-Background-Gradient-1:#ffcd82;
  305. --TextBox-Background-Gradient-2:#eeb272;
  306. --TextBox-Text-Vertical-Padding:12px;
  307. --TextBox-Text-Side-Padding:15px;
  308. --TextBox-Text-Color:#000;
  309. --TextBox-Text-Shadow:#d7864f;
  310. --TextBox-Link-Color:#a5682a;
  311.  
  312. /* ----- TITLE BOX ----- */
  313. --TitleBox-Text-Font-Size:18px;
  314. --TitleBox-Text-Line-Height:1em;
  315.  
  316. /* ----- BIO BOX ----- */
  317. --Bio-Box-Font-Size:21px;
  318. --Bio-Box-Line-Height:1.1em;
  319. --Bio-Box-Maximum-Height:auto;
  320. --Scrollbar-Thumb:transparent;
  321.  
  322. /* ----- SIDEBAR BOXES ----- */
  323. --Sidebar-Width:120px;
  324. --Music-Controls-Size:12px;
  325. --Music-Controls-Gap-Right:7px;
  326. --Music-Title-Font-Size:15px;
  327. --Sidebar-Image-Width:85px;
  328. --Desc-Box-Font-Size:17px;
  329. --Desc-Box-Line-Height:1.25em;
  330.  
  331. /* ----- CUSTOM LINKS ----- */
  332. --Custom-Links-Box-Width:552px;
  333. --Custom-Links-Icons-Size:40px;
  334. --Custom-Links-Icons-Padding:6px;
  335.  
  336. /* ----- STATUS TAB ----- */
  337. --StatusTab-Bottom-Position:25px;
  338. --StatusTab-Left-Position:25px;
  339.  
  340. --StatusTab-Borders-Size:3px; /* looks best with 3px-5px */
  341. --StatusTab-Border-Dark:#5b2c26;
  342. --StatusTab-Border-Medium:#b24d05;
  343. --StatusTab-Border-Light:#db7c0e;
  344. --StatusTab-Border-Shadow:#d7864f;
  345.  
  346. --StatusTab-Icon-Background:#ffd285;
  347. --StatusTab-Icon-Border:#fff0ba;
  348. --StatusTab-Image-Padding:5px;
  349. --StatusTab-Image-Size:39px;
  350. --StatusTab-Image-URL: //stardewvalleywiki.com/mediawiki/images/9/9d/Cranberry_Candy.png;
  351.  
  352. --StatusTab-Text-Background:#ffd285;
  353. --StatusTab-Font-Size:16px;
  354. --StatusTab-Text-Color:#000;
  355. --StatusTab-Text-Shadow:#d7864f;
  356. --StatusTab-Text:Cranberry Candy;
  357.  
  358. /* ----- ENERGY BAR ----- */
  359. --EnergyBar-Bottom-Position:25px;
  360. --EnergyBar-Right-Position:25px;
  361. --EnergyBar-Border-Main:#dc7b05;
  362. --EnergyBar-Border-Dark:#5b2b2a;
  363. --EnergyBar-Border-Medium-1:#853605;
  364. --EnergyBar-Border-Medium-2:#b14e05;
  365. --EnergyBar-Border-Light:#f7ba00;
  366. --EnergyBar-Border-Shadow:#D7864F;
  367. --EnergyBar-Border-Size:2.5px;
  368. --EnergyBar-Icon-Size:20px;
  369. --EnergyBar-Icon-Padding:0px;
  370. --EnergyBar-Maximum-Height:155px;
  371. --EnergyBar-Width:15px;
  372. --EnergyBar-Bar-Empty:#ffd782;
  373. --EnergyBar-Bar-Line:#B4730C;
  374. --EnergyBar-Bar-Fill:#FCA907;
  375. --EnergyBar-Fill-Meter:36%;
  376. }
  377.  
  378. /*---------- NAVLINKS ---------- */
  379. #navlinks {
  380. position:fixed;
  381. top:0;margin-top:var(--Nav-Links-Top-Position);
  382. left:0;margin-left:var(--Nav-Links-Left-Position);
  383. z-index:2;
  384. }
  385.  
  386. .navlink {
  387. margin-bottom:var(--Nav-Links-Gap);
  388. }
  389.  
  390. .navlink a {
  391. display:inline-block;
  392. width:100%;
  393. height:100%;
  394. }
  395.  
  396. .imgwarp {
  397. width:calc(var(--Nav-Links-Icon-Size) + (var(--Nav-Links-Border-Size) * 4));
  398. height:var(--Nav-Links-Icon-Size);
  399. background:var(--Nav-Links-Background);
  400. border-left:var(--Nav-Links-Border-Size) solid var(--Nav-Links-Border-Dark);
  401. border-right:var(--Nav-Links-Border-Size) solid var(--Nav-Links-Border-Dark);
  402. text-align:center;
  403. }
  404.  
  405. .navicon.svg {
  406. display:inline-block;
  407. width:var(--Nav-Links-Icon-Size);
  408. height:var(--Nav-Links-Icon-Size);
  409. padding:var(--Nav-Links-Icon-Padding);
  410. box-sizing:border-box;
  411. -webkit-box-sizing:border-box;
  412. -moz-box-sizing:border-box;
  413. -ms-box-sizing:border-box;
  414. -o-box-sizing:border-box;
  415. text-align:center;
  416. }
  417.  
  418. .navicon svg {
  419. fill:var(--Nav-Links-Icon-Color);
  420. width:100%;
  421. height:100%;
  422. }
  423.  
  424. .navicon-theme svg {
  425. filter:brightness(65%);
  426. -webkit-filter:brightness(65%);
  427. }
  428.  
  429. .navicon.img img {
  430. width:var(--Nav-Links-Icon-Size);
  431. height:var(--Nav-Links-Icon-Size);
  432. padding:var(--Nav-Links-Icon-Padding);
  433. box-sizing:border-box;
  434. -webkit-box-sizing:border-box;
  435. -moz-box-sizing:border-box;
  436. -ms-box-sizing:border-box;
  437. -o-box-sizing:border-box;
  438. }
  439.  
  440. /*---------- STATUS TAB ---------- */
  441. #status-tab {
  442. position:fixed;
  443. bottom:0;margin-bottom:var(--StatusTab-Bottom-Position);
  444. left:0;margin-left:var(--StatusTab-Left-Position);
  445. display:flex;
  446. align-items:center;
  447. }
  448.  
  449. .icon-image {
  450. width:var(--StatusTab-Image-Size);
  451. height:var(--StatusTab-Image-Size);
  452. padding:var(--StatusTab-Image-Padding);
  453. box-sizing:border-box;
  454. -webkit-box-sizing:border-box;
  455. -moz-box-sizing:border-box;
  456. -ms-box-sizing:border-box;
  457. -o-box-sizing:border-box;
  458. }
  459.  
  460. .the-text {
  461. margin-top:-2px; /* text top gap offset */
  462. line-height:1.2em;
  463. font-family:sdv;
  464. font-size:var(--StatusTab-Font-Size);
  465. letter-spacing:0.7px;
  466. text-shadow:-1px 1px 1px var(--StatusTab-Text-Shadow);
  467. color:var(--StatusTab-Text-Color);
  468. }
  469.  
  470. /*---------- ENERGY BAR ---------- */
  471. #energybar {
  472. position:fixed;
  473. bottom:0;margin-bottom:var(--EnergyBar-Bottom-Position);
  474. right:0;margin-right:var(--EnergyBar-Right-Position);
  475. z-index:2;
  476. }
  477.  
  478. .energyicon {
  479. margin-top:calc(var(--EnergyBar-Border-Size) * -0.75);
  480. }
  481.  
  482. .energyicon.img img {
  483. width:var(--EnergyBar-Icon-Size);
  484. height:var(--EnergyBar-Icon-Size);
  485. padding:var(--EnergyBar-Icon-Padding);
  486. box-sizing:border-box;
  487. -webkit-box-sizing:border-box;
  488. -moz-box-sizing:border-box;
  489. -ms-box-sizing:border-box;
  490. -o-box-sizing:border-box;
  491. }
  492.  
  493. .energyicon.svg {
  494. display:inline-block;
  495. width:var(--EnergyBar-Icon-Size);
  496. height:var(--EnergyBar-Icon-Size);
  497. padding:var(--EnergyBar-Icon-Padding);
  498. box-sizing:border-box;
  499. -webkit-box-sizing:border-box;
  500. -moz-box-sizing:border-box;
  501. -ms-box-sizing:border-box;
  502. -o-box-sizing:border-box;
  503. text-align:center;
  504. }
  505.  
  506. .energyicon svg {
  507. }
  508.  
  509. .energybar-fill {
  510. position:absolute;
  511. bottom:0;
  512. width:100%;
  513. height:var(--EnergyBar-Fill-Meter);
  514. background:var(--EnergyBar-Bar-Fill);
  515. border-top:var(--EnergyBar-Border-Size) solid var(--EnergyBar-Bar-Line);
  516. }
  517.  
  518. /*---------- BOXES ---------- */
  519. .hholder {
  520. background-image:linear-gradient(to bottom, var(--TextBox-Background-Gradient-1), var(--TextBox-Background-Gradient-2));
  521. border-right:calc(var(--TextBox-Border-Size) * 2) solid var(--TextBox-Border-Shadow);
  522. }
  523.  
  524. .box-text {
  525. margin-top:-3px; /* text top gap offset */
  526. width:100%;
  527. padding:var(--TextBox-Text-Vertical-Padding) var(--TextBox-Text-Side-Padding);
  528. color:var(--TextBox-Text-Color);
  529. text-shadow:-1px 1px 1px var(--TextBox-Text-Shadow);
  530. box-sizing:border-box;
  531. -webkit-box-sizing:border-box;
  532. -moz-box-sizing:border-box;
  533. -ms-box-sizing:border-box;
  534. -o-box-sizing:border-box;
  535. }
  536.  
  537. .title-box .intro-img {
  538. margin-top:-2.5px;
  539. margin-right:calc(var(--TextBox-Text-Side-Padding) * 0.75);
  540. max-height:23px;
  541. }
  542.  
  543. .title-box .box-text {
  544. font-family:sdv;
  545. letter-spacing:0.7px;
  546. font-size:var(--TitleBox-Text-Font-Size);
  547. line-height:var(--TitleBox-Line-Height);
  548. }
  549.  
  550. .box-text a {
  551. color:var(--TextBox-Link-Color);
  552. }
  553.  
  554. /*---- BULLET LIST ICON IMAGE ----*/
  555. .box-text li {
  556. list-style-image:url("//glen-themes.gitlab.io/abt-pages/15/imgs/GentleLark_Feather.png");
  557. }
  558.  
  559. .box-text li > span {
  560. display:inline-block;
  561. margin-left:3px;
  562. vertical-align:top;
  563. margin-top:-4px;
  564. }
  565.  
  566. /*---------- BIO BOX ---------- */
  567. .bio-box .box-text {
  568. margin-top:0px;
  569. font-family:aseprite;
  570. font-size:var(--Bio-Box-Font-Size);
  571. letter-spacing:0.3px;
  572. line-height:var(--Bio-Box-Line-Height);
  573. max-height:var(--Bio-Box-Maximum-Height);
  574. overflow-y:auto;
  575. height:0;
  576. visibility:hidden;
  577. }
  578.  
  579. .bio-box .box-text::-webkit-scrollbar {
  580. width:var(--TextBox-Border-Size);
  581. height:var(--TextBox-Border-Size);
  582. background-color:var(--Scrollbar-Background);
  583. }
  584.  
  585. .bio-box .box-text::-webkit-scrollbar-thumb {
  586. background-color:var(--Scrollbar-Thumb);
  587. }
  588.  
  589. .divider {
  590. display:table;
  591. margin:10px auto;
  592. }
  593.  
  594. .divider img {
  595. margin-top:3px;
  596. }
  597.  
  598. /*---------- SIDEBAR BOXES ----------*/
  599. /*---------- MUSIC BOX ----------*/
  600. [music-player] svg {
  601. display:block;
  602. width:var(--Music-Controls-Size);
  603. height:var(--Music-Controls-Size);
  604. color:var(--TextBox-Text-Color);
  605. flex-shrink:0;
  606. border-right:3px solid transparent;
  607. }
  608.  
  609. .music-title {
  610. font-size:var(--Music-Title-Font-Size);
  611. color:var(--TextBox-Text-Color);
  612. }
  613.  
  614. /*---------- SIDEBAR IMAGE ---------- */
  615. .sidebar-image-box {
  616. margin:var(--Main-Grid-Gaps-Vertical) auto;
  617. }
  618.  
  619. .imgcont {
  620. display:flex;
  621. align-items:center;
  622. justify-content:center;
  623. height:calc(var(--Sidebar-Width) - (var(--TextBox-Border-Size) * 2));
  624. }
  625.  
  626. .sidebar-image {
  627. width:var(--Sidebar-Image-Width);
  628. }
  629.  
  630. /*---------- DESC BOX ---------- */
  631. .desc-box .box-text {
  632. font-family:sdv;
  633. letter-spacing:0.7px;
  634. font-size:var(--Desc-Box-Font-Size);
  635. line-height:var(--Desc-Box-Line-Height);
  636. text-align:center;
  637. }
  638.  
  639. /*---------- CUSTOM LINKS ---------- */
  640. .links-box {
  641. margin-top:var(--Main-Grid-Gaps-Vertical);
  642. }
  643.  
  644. .links-box .confusion::after {
  645. content:"";
  646. position:absolute;
  647. margin-top:var(--TextBox-Border-Size);
  648. right:0;margin-right:calc(var(--TextBox-Border-Size) * 2);
  649. width:var(--TextBox-Border-Size);
  650. height:var(--TextBox-Border-Size);
  651. background:var(--TextBox-Border-Shadow);
  652. z-index:3;
  653. }
  654.  
  655. .wine {
  656. margin-top:calc(var(--TextBox-Border-Size) * -1);
  657. flex-wrap:wrap;
  658. width:calc(100% + (var(--TextBox-Border-Size) * 2));
  659. }
  660.  
  661. .tofu {
  662. position:relative;
  663. width:var(--Custom-Links-Icons-Size);
  664. height:var(--Custom-Links-Icons-Size);
  665. border-style:ridge;
  666. border-width:var(--TextBox-Border-Size);
  667. border-top-color:transparent;
  668. border-right-color:var(--TextBox-Border-Shadow);
  669. border-bottom-color:var(--TextBox-Border-Main-1);
  670. border-left-color:transparent;
  671. }
  672.  
  673. .tofu a {
  674. display:inline-block;
  675. width:100%;
  676. height:100%;
  677. }
  678.  
  679. .tofu-img {
  680. display:flex;
  681. align-items:center;
  682. justify-content:center;
  683. margin-left:calc(var(--TextBox-Border-Size) * -1);
  684. }
  685.  
  686. .customlink-image {
  687. width:100%;
  688. padding:var(--Custom-Links-Icons-Padding);
  689. box-sizing:border-box;
  690. }
  691.  
  692. </style>
  693.  
  694. </head>
  695.  
  696. <body>
  697.  
  698.  
  699. <!------- NAV LINKS ------->
  700. <!----- 🌱🌱🌱🌱🌱🌱🌱 ----->
  701. <div id="navlinks">
  702.  
  703. <!-- HOME link -->
  704. <div class="navlink" home-link>
  705. <a href="/" title="return home"></a>
  706. </div>
  707.  
  708. <!-- ASK link -->
  709. <div class="navlink" ask-link>
  710. <a href="/ask" title="send mail"></a>
  711. </div>
  712.  
  713. <!-- ARCHIVE link -->
  714. <div class="navlink" archive-link>
  715. <a href="/archive" title="visit archive"></a>
  716. </div>
  717.  
  718. <!-- CREDIT -->
  719. <!-- please do not remove -->
  720. <div class="navlink" theme-link>
  721. <a href="//glenthemes.tumblr.com" title="coded by glenthemes"></a>
  722. </div>
  723. </div><!--navlinks--><!--do not delete this line-->
  724.  
  725.  
  726.  
  727.  
  728.  
  729.  
  730.  
  731.  
  732.  
  733. <!------- MAIN GRID ------->
  734. <div id="quois-a">
  735. <div id="quois-b">
  736. <div id="quois-c">
  737. <div id="quois-d">
  738. <div id="quois-grid">
  739. <div id="quois-left">
  740.  
  741.  
  742. <!---- START TITLE BOX ---->
  743. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  744. <div class="title-box">
  745. <div class="soup"></div>
  746.  
  747. <div class="fruitrack">
  748. <div class="maple"></div>
  749. <div class="syrup"></div>
  750. </div><!--fruitrack-->
  751.  
  752. <div class="fruitrack">
  753. <div class="kami"></div>
  754. <div class="nari"></div>
  755. <div class="denki"></div>
  756. </div><!--fruitrack-->
  757.  
  758. <div class="fruitrack">
  759. <div class="skele">
  760. <div class="cola"></div>
  761. <div class="cotton"></div>
  762. <div class="cola"></div>
  763. </div>
  764.  
  765. <div class="freme">
  766. <div class="confusion"></div>
  767. <div class="mycabbages"></div>
  768. <div class="hholder">
  769. <div class="box-text">
  770.  
  771. <!-- small left image -->
  772. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  773. <img class="intro-img" src="//glen-themes.gitlab.io/abt-pages/15/imgs/Moonlight-pendent13_TinyPlants.png">
  774.  
  775. <!-- title box title -->
  776. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  777. <span>—; sunlit memories</span>
  778.  
  779. </div><!--do not delete this line-->
  780. </div>
  781. </div><!--freme-->
  782.  
  783. <div class="skele">
  784. <div class="booze"></div>
  785. <div class="soda"></div>
  786. <div class="ale"></div>
  787. </div>
  788. </div><!--fruitrack-->
  789.  
  790. <div class="fruitrack">
  791. <div class="bread"></div>
  792. <div class="heavens"></div>
  793. <div class="qoo"></div>
  794. </div><!--fruitrack-->
  795.  
  796. <div class="mojito"></div>
  797. <div class="soup"></div>
  798. </div><!--title-box-->
  799. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  800. <!---- END TITLE BOX ---->
  801.  
  802.  
  803.  
  804.  
  805.  
  806.  
  807.  
  808. <!---- START BIO BOX ---->
  809. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  810. <div class="bio-box">
  811. <div class="soup"></div>
  812.  
  813. <div class="fruitrack">
  814. <div class="maple"></div>
  815. <div class="syrup"></div>
  816. </div><!--fruitrack-->
  817.  
  818. <div class="fruitrack">
  819. <div class="kami"></div>
  820. <div class="nari"></div>
  821. <div class="denki"></div>
  822. </div><!--fruitrack-->
  823.  
  824. <div class="fruitrack">
  825. <div class="skele">
  826. <div class="cola"></div>
  827. <div class="cotton"></div>
  828. <div class="cola"></div>
  829. </div>
  830.  
  831. <div class="freme">
  832. <div class="confusion"></div>
  833. <div class="mycabbages"></div>
  834. <div class="hholder">
  835. <div class="box-text">
  836.  
  837. <!-- bio box text -->
  838. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  839. <li><span>some bullet here</span>
  840.  
  841. <li><span>some bullet here</span>
  842.  
  843. <li><span>some bullet here</span>
  844.  
  845. <div class="divider">
  846. <img src="//glen-themes.gitlab.io/abt-pages/15/imgs/GentleLark_FallLeafDivider.png">
  847. </div><!--end divider-->
  848.  
  849. <center>
  850. Example of how you can proc hover text: <a title="hover text here">hello</a>.
  851. </center>
  852. </div><!--end box text--><!--do not delete this line-->
  853. </div><!--do not delete this line-->
  854. </div><!--freme-->
  855.  
  856. <div class="skele">
  857. <div class="booze"></div>
  858. <div class="soda"></div>
  859. <div class="ale"></div>
  860. </div>
  861. </div><!--fruitrack-->
  862.  
  863. <div class="fruitrack">
  864. <div class="bread"></div>
  865. <div class="heavens"></div>
  866. <div class="qoo"></div>
  867. </div><!--fruitrack-->
  868.  
  869. <div class="mojito"></div>
  870. <div class="soup"></div>
  871. </div><!--end bio box-->
  872. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  873. <!---- END BIO BOX ---->
  874. </div><!--quois-left--><!--end main grid: left -->
  875.  
  876.  
  877.  
  878.  
  879.  
  880.  
  881.  
  882.  
  883.  
  884. <!------- SIDEBAR ------->
  885. <div id="quois-right">
  886.  
  887. <!---- START MINI TITLE BOX ---->
  888. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  889. <div class="desc-box">
  890. <div class="soup"></div>
  891.  
  892. <div class="fruitrack">
  893. <div class="maple"></div>
  894. <div class="syrup"></div>
  895. </div><!--fruitrack-->
  896.  
  897. <div class="fruitrack">
  898. <div class="kami"></div>
  899. <div class="nari"></div>
  900. <div class="denki"></div>
  901. </div><!--fruitrack-->
  902.  
  903. <div class="fruitrack">
  904. <div class="skele">
  905. <div class="cola"></div>
  906. <div class="cotton"></div>
  907. <div class="cola"></div>
  908. </div>
  909.  
  910. <div class="freme">
  911. <div class="confusion"></div>
  912. <div class="mycabbages"></div>
  913. <div class="hholder">
  914. <div class="box-text">
  915.  
  916. <!-- mini title text -->
  917. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  918. About Me
  919.  
  920. </div><!--do not delete this line-->
  921. </div><!--do not delete this line-->
  922. </div><!--freme-->
  923.  
  924. <div class="skele">
  925. <div class="booze"></div>
  926. <div class="soda"></div>
  927. <div class="ale"></div>
  928. </div>
  929. </div><!--fruitrack-->
  930.  
  931. <div class="fruitrack">
  932. <div class="bread"></div>
  933. <div class="heavens"></div>
  934. <div class="qoo"></div>
  935. </div><!--fruitrack-->
  936.  
  937. <div class="mojito"></div>
  938. <div class="soup"></div>
  939. </div><!--desc-box-->
  940. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  941. <!---- END MINI TITLE BOX ---->
  942.  
  943.  
  944.  
  945.  
  946.  
  947.  
  948.  
  949. <!---- START SIDEBAR IMAGE BOX ---->
  950. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  951. <div class="sidebar-image-box">
  952. <div class="soup"></div>
  953.  
  954. <div class="fruitrack">
  955. <div class="maple"></div>
  956. <div class="syrup"></div>
  957. </div><!--fruitrack-->
  958.  
  959. <div class="fruitrack">
  960. <div class="kami"></div>
  961. <div class="nari"></div>
  962. <div class="denki"></div>
  963. </div><!--fruitrack-->
  964.  
  965. <div class="fruitrack">
  966. <div class="skele">
  967. <div class="cola"></div>
  968. <div class="cotton"></div>
  969. <div class="cola"></div>
  970. </div>
  971.  
  972. <div class="freme">
  973. <div class="confusion"></div>
  974. <div class="mycabbages"></div>
  975. <div class="hholder">
  976. <div class="imgcont">
  977.  
  978. <!-- sidebar image url -->
  979. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  980. <img class="sidebar-image" src="//glen-themes.gitlab.io/abt-pages/15/imgs/King-Lulu-Deer_PumpkinSpiceAndEverythingNice.gif">
  981.  
  982. </div>
  983. </div>
  984. </div><!--freme-->
  985.  
  986. <div class="skele">
  987. <div class="booze"></div>
  988. <div class="soda"></div>
  989. <div class="ale"></div>
  990. </div>
  991. </div><!--fruitrack-->
  992.  
  993. <div class="fruitrack">
  994. <div class="bread"></div>
  995. <div class="heavens"></div>
  996. <div class="qoo"></div>
  997. </div><!--fruitrack-->
  998.  
  999. <div class="mojito"></div>
  1000. <div class="soup"></div>
  1001. </div><!--sidebar-image-box-->
  1002. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1003. <!---- END SIDEBAR IMAGE BOX ---->
  1004.  
  1005.  
  1006.  
  1007.  
  1008.  
  1009.  
  1010.  
  1011.  
  1012.  
  1013.  
  1014. <!---- START MUSIC BOX ---->
  1015. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1016. <div class="desc-box">
  1017. <div class="soup"></div>
  1018.  
  1019. <div class="fruitrack">
  1020. <div class="maple"></div>
  1021. <div class="syrup"></div>
  1022. </div><!--fruitrack-->
  1023.  
  1024. <div class="fruitrack">
  1025. <div class="kami"></div>
  1026. <div class="nari"></div>
  1027. <div class="denki"></div>
  1028. </div><!--fruitrack-->
  1029.  
  1030. <div class="fruitrack">
  1031. <div class="skele">
  1032. <div class="cola"></div>
  1033. <div class="cotton"></div>
  1034. <div class="cola"></div>
  1035. </div>
  1036.  
  1037. <div class="freme">
  1038. <div class="confusion"></div>
  1039. <div class="mycabbages"></div>
  1040. <div class="hholder">
  1041. <div class="box-text musicrack">
  1042.  
  1043. <div music-player btn-color="var(--TextBox-Text-Color)" btn-size="var(--Music-Controls-Size)" gap="var(--Music-Controls-Gap-Right)" btn-style="outlined">
  1044.  
  1045. <!-- music tooltip text (pref. long music name) -->
  1046. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1047. <a title="ConcernedApe — Fall (The Smell of Mushroom)">
  1048. <div music-btn>
  1049. <div btn-play></div>
  1050. <div btn-pause hidden></div>
  1051. </div>
  1052. </a>
  1053.  
  1054. <!-- music url -->
  1055. <!-- INSTRUCTIONS HERE: -->
  1056. <!-- linktr.ee/direct_file_links -->
  1057. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1058. <audio src="//rhizo.gitlab.io/m/Fall__The_Smell_of_Mushroom_.mp3" volume="100%"></audio>
  1059.  
  1060. <i data-feather="music"></i>
  1061.  
  1062. <!-- music title (pref. short) -->
  1063. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1064. <div class="music-title">
  1065. Autumn
  1066. </div>
  1067.  
  1068. </div>
  1069.  
  1070. </div><!--box-text-->
  1071. </div><!--hholder-->
  1072. </div><!--freme-->
  1073.  
  1074. <div class="skele">
  1075. <div class="booze"></div>
  1076. <div class="soda"></div>
  1077. <div class="ale"></div>
  1078. </div>
  1079. </div><!--fruitrack-->
  1080.  
  1081. <div class="fruitrack">
  1082. <div class="bread"></div>
  1083. <div class="heavens"></div>
  1084. <div class="qoo"></div>
  1085. </div><!--fruitrack-->
  1086.  
  1087. <div class="mojito"></div>
  1088. <div class="soup"></div>
  1089. </div><!--desc-box-->
  1090. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1091. <!---- END MUSIC BOX ---->
  1092. </div><!--quois-right--><!--end main grid: right-->
  1093. </div><!--quois-grid--><!--end main grid-->
  1094.  
  1095.  
  1096.  
  1097.  
  1098.  
  1099.  
  1100.  
  1101.  
  1102.  
  1103.  
  1104.  
  1105. <!------- CUSTOM LINKS ------->
  1106. <div class="links-box">
  1107. <div class="soup"></div>
  1108.  
  1109. <div class="fruitrack">
  1110. <div class="maple"></div>
  1111. <div class="syrup"></div>
  1112. </div><!--fruitrack-->
  1113.  
  1114. <div class="fruitrack">
  1115. <div class="kami"></div>
  1116. <div class="nari"></div>
  1117. <div class="denki"></div>
  1118. </div><!--fruitrack-->
  1119.  
  1120. <div class="fruitrack">
  1121. <div class="skele">
  1122. <div class="cola"></div>
  1123. <div class="cotton"></div>
  1124. <div class="cola"></div>
  1125. </div>
  1126.  
  1127. <div class="freme">
  1128. <div class="confusion"></div>
  1129. <div class="hholder">
  1130. <div class="fruitrack wine">
  1131.  
  1132.  
  1133. <!---- START ONE CUSTOM LINK ---->
  1134. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1135. <div class="tofu">
  1136.  
  1137. <!-- link URL and tooltip text -->
  1138. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1139. <a href="/" title="a custom link">
  1140.  
  1141. <div class="tofu-img">
  1142. <!-- custom link image url -->
  1143. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1144. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/a/a5/Cheese.png">
  1145.  
  1146. </div>
  1147. </a></div>
  1148. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1149. <!---- END ONE CUSTOM LINK ---->
  1150.  
  1151.  
  1152.  
  1153.  
  1154.  
  1155.  
  1156.  
  1157. <!---- START ONE CUSTOM LINK ---->
  1158. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1159. <div class="tofu">
  1160.  
  1161. <!-- link URL and tooltip text -->
  1162. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1163. <a href="/" title="a custom link">
  1164.  
  1165. <div class="tofu-img">
  1166. <!-- custom link image url -->
  1167. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1168. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/1/18/Dorado.png">
  1169.  
  1170. </div>
  1171. </a></div>
  1172. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1173. <!---- END ONE CUSTOM LINK ---->
  1174.  
  1175.  
  1176.  
  1177.  
  1178.  
  1179.  
  1180.  
  1181. <!---- START ONE CUSTOM LINK ---->
  1182. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1183. <div class="tofu">
  1184.  
  1185. <!-- link URL and tooltip text -->
  1186. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1187. <a href="/" title="a custom link">
  1188.  
  1189. <div class="tofu-img">
  1190. <!-- custom link image url -->
  1191. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1192. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/a/a8/Carp.png">
  1193.  
  1194. </div>
  1195. </a></div>
  1196. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1197. <!---- END ONE CUSTOM LINK ---->
  1198.  
  1199.  
  1200.  
  1201.  
  1202.  
  1203.  
  1204.  
  1205. <!---- START ONE CUSTOM LINK ---->
  1206. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1207. <div class="tofu">
  1208.  
  1209. <!-- link URL and tooltip text -->
  1210. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1211. <a href="/" title="a custom link">
  1212.  
  1213. <div class="tofu-img">
  1214. <!-- custom link image url -->
  1215. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1216. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/6/6e/Cheese_Cauliflower.png">
  1217.  
  1218. </div>
  1219. </a></div>
  1220. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1221. <!---- END ONE CUSTOM LINK ---->
  1222.  
  1223.  
  1224.  
  1225.  
  1226.  
  1227.  
  1228.  
  1229. <!---- START ONE CUSTOM LINK ---->
  1230. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1231. <div class="tofu">
  1232.  
  1233. <!-- link URL and tooltip text -->
  1234. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1235. <a href="/" title="a custom link">
  1236.  
  1237. <div class="tofu-img">
  1238. <!-- custom link image url -->
  1239. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1240. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/7/78/Pale_Ale.png">
  1241.  
  1242. </div>
  1243. </a></div>
  1244. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1245. <!---- END ONE CUSTOM LINK ---->
  1246.  
  1247.  
  1248.  
  1249.  
  1250.  
  1251.  
  1252.  
  1253. <!---- START ONE CUSTOM LINK ---->
  1254. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1255. <div class="tofu">
  1256.  
  1257. <!-- link URL and tooltip text -->
  1258. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1259. <a href="/" title="a custom link">
  1260.  
  1261. <div class="tofu-img">
  1262. <!-- custom link image url -->
  1263. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1264. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/b/b3/Beer.png">
  1265.  
  1266. </div>
  1267. </a></div>
  1268. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1269. <!---- END ONE CUSTOM LINK ---->
  1270.  
  1271.  
  1272.  
  1273.  
  1274.  
  1275.  
  1276.  
  1277. <!---- START ONE CUSTOM LINK ---->
  1278. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1279. <div class="tofu">
  1280.  
  1281. <!-- link URL and tooltip text -->
  1282. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1283. <a href="/" title="a custom link">
  1284.  
  1285. <div class="tofu-img">
  1286. <!-- custom link image url -->
  1287. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1288. <img class="customlink-image" src="//glen-themes.gitlab.io/abt-pages/15/imgs/Maple_Syrup.png">
  1289.  
  1290. </div>
  1291. </a></div>
  1292. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1293. <!---- END ONE CUSTOM LINK ---->
  1294.  
  1295.  
  1296.  
  1297.  
  1298.  
  1299.  
  1300.  
  1301. <!---- START ONE CUSTOM LINK ---->
  1302. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1303. <div class="tofu">
  1304.  
  1305. <!-- link URL and tooltip text -->
  1306. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1307. <a href="/" title="a custom link">
  1308.  
  1309. <div class="tofu-img">
  1310. <!-- custom link image url -->
  1311. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1312. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/c/c6/Honey.png">
  1313.  
  1314. </div>
  1315. </a></div>
  1316. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1317. <!---- END ONE CUSTOM LINK ---->
  1318.  
  1319.  
  1320.  
  1321.  
  1322.  
  1323.  
  1324.  
  1325. <!---- START ONE CUSTOM LINK ---->
  1326. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1327. <div class="tofu">
  1328.  
  1329. <!-- link URL and tooltip text -->
  1330. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1331. <a href="/" title="a custom link">
  1332.  
  1333. <div class="tofu-img">
  1334. <!-- custom link image url -->
  1335. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1336. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/7/70/Cookie.png">
  1337.  
  1338. </div>
  1339. </a></div>
  1340. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1341. <!---- END ONE CUSTOM LINK ---->
  1342.  
  1343.  
  1344.  
  1345.  
  1346.  
  1347.  
  1348.  
  1349. <!---- START ONE CUSTOM LINK ---->
  1350. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1351. <div class="tofu">
  1352.  
  1353. <!-- link URL and tooltip text -->
  1354. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1355. <a href="/" title="a custom link">
  1356.  
  1357. <div class="tofu-img">
  1358. <!-- custom link image url -->
  1359. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1360. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/e/e2/Peach.png">
  1361.  
  1362. </div>
  1363. </a></div>
  1364. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1365. <!---- END ONE CUSTOM LINK ---->
  1366.  
  1367.  
  1368.  
  1369.  
  1370.  
  1371.  
  1372.  
  1373. <!---- START ONE CUSTOM LINK ---->
  1374. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1375. <div class="tofu">
  1376.  
  1377. <!-- link URL and tooltip text -->
  1378. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1379. <a href="/" title="a custom link">
  1380.  
  1381. <div class="tofu-img">
  1382. <!-- custom link image url -->
  1383. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1384. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/5/59/Salmonberry.png">
  1385.  
  1386. </div>
  1387. </a></div>
  1388. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1389. <!---- END ONE CUSTOM LINK ---->
  1390.  
  1391.  
  1392.  
  1393.  
  1394.  
  1395.  
  1396.  
  1397. <!---- START ONE CUSTOM LINK ---->
  1398. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1399. <div class="tofu">
  1400.  
  1401. <!-- link URL and tooltip text -->
  1402. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1403. <a href="/" title="a custom link">
  1404.  
  1405. <div class="tofu-img">
  1406. <!-- custom link image url -->
  1407. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1408. <img class="customlink-image" src="//stardewvalleywiki.com/mediawiki/images/3/31/Hazelnut.png">
  1409.  
  1410. </div>
  1411. </a></div>
  1412. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1413. <!---- END ONE CUSTOM LINK ---->
  1414.  
  1415.  
  1416.  
  1417.  
  1418. <!--do not delete below this line-->
  1419. </div><!--fruitrack-->
  1420. </div><!--hholder-->
  1421. </div><!--freme-->
  1422.  
  1423. <div class="skele">
  1424. <div class="booze"></div>
  1425. <div class="soda"></div>
  1426. <div class="ale"></div>
  1427. </div>
  1428. </div><!--fruitrack-->
  1429.  
  1430. <div class="fruitrack">
  1431. <div class="bread"></div>
  1432. <div class="heavens"></div>
  1433. <div class="qoo"></div>
  1434. </div><!--fruitrack-->
  1435.  
  1436. <div class="mojito"></div>
  1437. <div class="soup"></div>
  1438. </div><!--end links box-->
  1439. </div><!--quois-d-->
  1440. </div><!--quois-c-->
  1441. </div><!--quois-b-->
  1442. </div><!--quois-a-->
  1443. <!--end main grid-->
  1444.  
  1445.  
  1446.  
  1447.  
  1448.  
  1449. <!------- STATUS TAB ------->
  1450. <!-- image and text are edited in :root, not here -->
  1451. <div id="status-tab"></div>
  1452.  
  1453.  
  1454.  
  1455.  
  1456.  
  1457.  
  1458. <!------- ENERGY BAR ------->
  1459. <!---- start one energy bar ---->
  1460. <!-- 🌱🌱🌱🌱🌱🌱🌱 -->
  1461. <div id="energybar">
  1462. <div class="lacie"></div>
  1463. <div class="deboui"></div>
  1464.  
  1465. <div class="fruitrack">
  1466. <div class="delia"></div>
  1467. <div class="delilah"></div>
  1468. <div class="delib"></div>
  1469. </div>
  1470.  
  1471. <div class="pourquoi">
  1472. <div class="energyicon img">
  1473.  
  1474.  
  1475. <!-- energy bar top icon image url -->
  1476. <!-- 🔽🔽🔽🔽🔽🔽🔽 -->
  1477. <img src="//stardewvalleywiki.com/mediawiki/images/archive/d/df/20191209011954%21Max_Energy.png">
  1478.  
  1479.  
  1480. </div>
  1481. </div>
  1482.  
  1483. <div class="fruitrack">
  1484. <div class="bepis"></div>
  1485. <div class="bepsi"></div>
  1486. <div class="bepis"></div>
  1487. </div>
  1488.  
  1489. <div class="fruitrack">
  1490. <div class="boob"></div>
  1491. <div class="hazel"></div>
  1492. <div class="boob"></div>
  1493. </div>
  1494.  
  1495. <div class="fruitrack">
  1496. <div class="anut"></div>
  1497. <div class="latte"></div>
  1498. <div class="bnut"></div>
  1499. </div>
  1500.  
  1501. <div class="fruitrack">
  1502. <div class="pyg"></div>
  1503. <div class="geneva"></div>
  1504. <div class="sty"></div>
  1505. </div>
  1506.  
  1507. <div class="fruitrack">
  1508. <div class="orz"></div>
  1509. <div class="maiswhat"></div>
  1510. <div class="urk"></div>
  1511. </div>
  1512.  
  1513. <div class="fruitrack">
  1514. <div class="kara"></div>
  1515. <div class="mais"></div>
  1516. <div class="made"></div>
  1517. </div>
  1518.  
  1519. <div class="fruitrack">
  1520. <div class="cara"></div>
  1521. <div class="mais"></div>
  1522. <div class="nade"></div>
  1523. </div>
  1524.  
  1525. <div class="fruitrack">
  1526. <div class="xenon"></div>
  1527. <div class="fennel"></div>
  1528. <div class="akroma"></div>
  1529. </div>
  1530.  
  1531. <div class="muffin"></div>
  1532. <div class="behold">
  1533. <div class="energybar-fill"></div>
  1534. </div>
  1535. </div><!--energybar-->
  1536. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  1537. <!---- end one energy bar ---->
  1538.  
  1539.  
  1540. <script>feather.replace()</script>
  1541. </body>
  1542. </html>
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!