glenthemes

About Page [19]: Heartworm

Jan 9th, 2026 (edited)
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.71 KB | None | 0 0
  1. <!-------------------------------------------------------------------
  2.  
  3. About Page [19]: Heartworm
  4. Made by glenthemes
  5.  
  6. Release date: 2026/01/09
  7. Last updated: 2026/05/10
  8.  
  9. 「 PAGE INFO. 」
  10. ❃ Post: glenthemes.tumblr.com/post/805296654593015808
  11. ❃ Preview: glenthpvs.tumblr.com/heartworm
  12. ❃ Code: glen-themes.gitlab.io/abt-pages/19/heartworm
  13.  
  14. 「 HOW TO USE. 」
  15. dub.sh/heartworm-guide
  16.  
  17. 「 TERMS OF USE. 」
  18. 1) Do not remove the credit.
  19. 2) Do not remove parts of the code without my permission.
  20. 3) Do not claim my codes as your own.
  21. 4) Do not use my works as base codes.
  22. 5) You may add widgets to my themes and pages.
  23.  
  24. 「 CREDITS. 」
  25. (o˘◡˘o)~ glencredits.tumblr.com/heartworm
  26.  
  27. -------------------------------------------------------------------->
  28.  
  29. <!DOCTYPE html>
  30. <html lang="en">
  31.  
  32. <head>
  33. <meta charset="UTF-8">
  34. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  35. <meta property="og:type" content="website">
  36. <meta http-equiv="content-language" content="en">
  37. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  38. <meta name="author" content="{Name}">
  39. <meta name="theme-color" content="{AccentColor}">
  40.  
  41. <!--++++++++++++++++++++++++++++++-->
  42.  
  43. <!-- browser/tab title -->
  44. <title>heartworm &mdash;&#xFF1B;</title>
  45. <meta property="og:title" content="{Name}">
  46.  
  47. <meta name="description" content="{block:Description}{MetaDescription}{/block:Description}">
  48. <meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}">
  49.  
  50. <!-- browser/tab favicon -->
  51. <link rel="icon" href="{Favicon}">
  52. <link rel="apple-touch-icon" sizes="128x128" href="{Favicon}">
  53.  
  54. <meta property="og:image" content="{Favicon}">
  55. <meta property="og:image:width" content="128">
  56. <meta property="og:image:height" content="128">
  57.  
  58. <!--++++++++++++++++++++++++++++++-->
  59.  
  60. <!-- google fonts -->
  61. <link href="https://fonts.bunny.net/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Golos+Text:ital,wght@0,400..900;1,400..900&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" crossorigin>
  62.  
  63. <!-- icon fonts -->
  64. <link href="https://cdn.jsdelivr.net/gh/Richard9394/MingCute@main/fonts/MingCute.min.css" rel="stylesheet">
  65. <link href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css" rel="stylesheet">
  66.  
  67. <!-- heartworm essentials -->
  68. <link rel="preload" href="https://glen-themes.gitlab.io/abt-pages/19/core.min.css" as="style">
  69. <link href="https://glen-themes.gitlab.io/abt-pages/19/core.min.css" rel="stylesheet">
  70.  
  71. <!--++++++++++++++++++++++++++++++-->
  72.  
  73. <style>
  74. /*--=================================================
  75.  
  76.     PLEASE READ THE GUIDE ON HOW TO USE AND EDIT:
  77.     https://dub.sh/heartworm-guide
  78.    
  79.     ANY QUESTIONS, PLEASE ASK:
  80.     https://discord.gg/RcMKnwz
  81.    
  82. =================================================--*/
  83.  
  84. /*======== CUSTOMIZATION OPTIONS ========*/
  85. :root {
  86.     /* background */
  87.     --Background-Color:#242429;
  88.     --Background-Image:url("https://64.media.tumblr.com/3d5b7e328717a20e6a90890857583ee7/tumblr_inline_t8igmaantm1qf8af3_500.png"); /* place image url between quotes */
  89.     --Background-Repeat:repeat; /* repeat [OR] no-repeat */
  90.     --Background-Size:auto; /* auto [OR] cover */
  91.  
  92.     /* layout options */
  93.     --Screen-Gaps:3rem;
  94.     --Container-Width:650px;
  95.     --Boxes-Spacing:35px;
  96.  
  97.     /* main font */
  98.     --Main-Text-Font-Family:"Funnel Sans";
  99.     --Main-Text-Font-Weight:normal;
  100.     --Main-Text-Font-Size:0.925rem;
  101.     --Main-Text-Line-Height:1.8; /* number only */
  102.     --Main-Text-Color:#b6bdc7;
  103.  
  104.     /* bold */
  105.     --Bold-Font-Weight:600; /* number only */
  106.     --Bold-Text-Color:#bfc181;
  107.  
  108.     /* italic */
  109.     --Italic-Text-Color:#eabc8f;
  110.  
  111.     /* headings */
  112.     --Heading-Font-Family:"Golos Text";
  113.     --Heading-Font-Weight:500;
  114.     --Heading-Font-Size:calc(var(--Main-Text-Font-Size) * 1.420);
  115.     --Heading-Letter-Spacing:0.035em;
  116.  
  117.     /* small caps */
  118.     --Caps-Font-Family:"Figtree";
  119.     --Caps-Font-Weight:500;
  120.     --Caps-Font-Size:calc(var(--Main-Text-Font-Size) * 0.85);
  121.     --Caps-Letter-Spacing:0.035rem;
  122.     --Caps-Line-Height:var(--Main-Text-Line-Height);
  123.  
  124.     /* links */
  125.     --Links-Color:#ff8e8e;
  126.     --Links-Underline-Gap:0.05em;
  127.     --Links-Underline-Size:1px;
  128.     --Links-Underline-Color:#935959;
  129.  
  130.     --Links-HOVER-Speed:0.35s;
  131.     --Links-HOVER-Color:#bfc181;
  132.     --Links-HOVER-Underline-Color:#59673a;
  133.  
  134.     /* faded text */
  135.     --Faded-Text-Transparency:30%; /* percentage only */
  136.  
  137.     /* highlighted text */
  138.     --Highlighted-Text-BG:#4c5046;
  139.     --Highlighted-Text-Color:currentColor;
  140.  
  141.     /* blockquotes */
  142.     --Blockquote-Border-Size:3px;
  143.     --Blockquote-Border-Color:#4c546a;
  144.     --Blockquote-Border-Left-Gap-1:0.35em;
  145.     --Blockquote-Border-Left-Gap-2:1.15em;
  146.  
  147.     /* scrollbar (Chrome/Edge/Brave/Opera only) */
  148.     --Chrome-Scrollbar-Padding:9px;
  149.     --Chrome-Scrollbar-Thumb-Size:1px;
  150.     --Chrome-Scrollbar-Thumb:#626c85;
  151.     --Chrome-Scrollbar-Track:#3c3e47;
  152.     --Chrome-Scrollbar-BG:var(--Background-Color);
  153.  
  154.     /* header profile picture */
  155.     --Header-Profile-Pic-Size:100px;
  156.     --Header-Profile-Pic-Rounded-Corners:100%;
  157.     --Header-Profile-Pic-Border-Thickness:10px;
  158.  
  159.     --Header-Profile-Pic-Size-ON-SMALL-SCREENS:17vw;
  160.     --Header-Profile-Pic-Border-Thickness-ON-SMALL-SCREENS:1.85vw;
  161.  
  162.     /* header status */
  163.     --Header-Status-Left-Gap:13px;
  164.     --Header-Status-Border-Size:1px;
  165.     --Header-Status-Border-Color:#4c546a;
  166.     --Header-Status-Padding-X:0.8rem;
  167.     --Header-Status-Padding-Y:0.6rem;
  168.     --Header-Status-BG:#3d404a;
  169.     --Header-Status-Font-Size:var(--Main-Text-Font-Size);
  170.     --Header-Status-Text-Color:#b6bdc7;
  171.     --Header-Status-Shadow-X-Offset:0.35rem;
  172.     --Header-Status-Shadow-Y-Offset:0.35rem;
  173.     --Header-Status-Shadow-Size:0.45rem;
  174.     --Header-Status-Shadow-Color:#24262b;
  175.     --Header-Status-Shadow-Strength:85%; /* percentage only */
  176.  
  177.     /* header status - bubbles */
  178.     --Header-Status-Bubble-Size-1:8px;
  179.     --Header-Status-Bubble-Size-2:12px;
  180.  
  181.     /* header username */
  182.     --Header-Username-Top-Gap:0.55rem;
  183.     --Header-Username-Font-Weight:650;
  184.     --Header-Username-Font-Size:calc(var(--Main-Text-Font-Size) - 1px);
  185.     --Header-Username-Color:#b6bdc7;
  186.  
  187.     /* header links */
  188.     --Header-Links-Icons-Border-Size:1px;
  189.     --Header-Links-Icons-Border-Color:#4c546a;
  190.     --Header-Links-Icons-Rounded-Corners:5px;
  191.     --Header-Links-Icons-Padding:0.5rem;
  192.     --Header-Links-Icons-BG:#3d404a;
  193.     --Header-Links-Icons-Size:1.05rem;
  194.     --Header-Links-Icons-Color:#b6bdc7;
  195.     --Header-Links-Icons-Shadow-X-Offset:0.35rem;
  196.     --Header-Links-Icons-Shadow-Y-Offset:0.35rem;
  197.     --Header-Links-Icons-Shadow-Size:0.45rem;
  198.     --Header-Links-Icons-Shadow-Color:#24262b;
  199.     --Header-Links-Icons-Shadow-Strength:85%; /* percentage only */
  200.     --Header-Links-Icons-Hover-Speed:0.25s;
  201.     --Header-Links-Icons-Hover-Zoom-Percentage:15%; /* percentage only */
  202.     --Header-Links-Icons-Spacing:0.55rem;
  203.  
  204.     --Header-Links-Icons-HOVER-Border-Color:#4c546a;
  205.     --Header-Links-Icons-HOVER-BG:#3d404a;
  206.     --Header-Links-Icons-HOVER-Color:#c7b89f;
  207.  
  208.     --Header-Links-Hover-Text-Margin:0.69rem;
  209.     --Header-Links-Hover-Text-Border-Size:1px;
  210.     --Header-Links-Hover-Text-Border-Color:#4c546a;
  211.     --Header-Links-Hover-Text-Rounded-Corners:5px;
  212.     --Header-Links-Hover-Text-Padding-X:0.5rem;
  213.     --Header-Links-Hover-Text-Padding-Y:0.5rem;
  214.     --Header-Links-Hover-Text-BG:#3e404a;
  215.     --Header-Links-Hover-Text-Font-Size:calc(var(--Caps-Font-Size) - 1px);
  216.     --Header-Links-Hover-Text-Color:#b6bdc7;
  217.     --Header-Links-Hover-Speed:0.4s;
  218.    
  219.     /* boxes */
  220.     --Boxes-Rounded-Corners:14px;
  221.     --Boxes-BG:#323338;
  222.     --Boxes-Padding:18px;
  223.     --Boxes-Shadow-X-Offset:0.5rem;
  224.     --Boxes-Shadow-Y-Offset:0.5rem;
  225.     --Boxes-Shadow-Size:0.7rem;
  226.     --Boxes-Shadow-Color:#141518;
  227.     --Boxes-Shadow-Strength:85%; /* percentage only */
  228.     --Boxes-Text-Color:#b6bdc7;
  229.  
  230.     /* box headings */
  231.     --Box-Heading-Border-Size:1px;
  232.     --Box-Heading-Border-Color:#4c546a;
  233.     --Box-Heading-Padding-X:0.8rem;
  234.     --Box-Heading-Padding-Y:0.6rem;
  235.     --Box-Heading-BG:#3d404a;
  236.     --Box-Heading-Font-Size:calc(var(--Main-Text-Font-Size) * 0.875);
  237.     --Box-Heading-Text-Color:#b6bdc7;
  238.     --Box-Heading-Shadow-X-Offset:0.35rem;
  239.     --Box-Heading-Shadow-Y-Offset:0.35rem;
  240.     --Box-Heading-Shadow-Size:0.45rem;
  241.     --Box-Heading-Shadow-Color:#24262b;
  242.     --Box-Heading-Shadow-Strength:85%; /* percentage only */
  243.  
  244.     /* box contents - icon bullet lists */
  245.     --Icon-Bullets-Size:calc(var(--Main-Text-Font-Size) + 2px);
  246.     --Icon-Bullets-Color:#b0a9a1;
  247.     --Icon-Bullets-Gutter:0.6em;
  248.  
  249.     --Bullet-List-Label-Padding-X:6px;
  250.     --Bullet-List-Label-Padding-Y:4px;
  251.     --Bullet-List-Label-BG:#3e404a;
  252.     --Bullet-List-Label-Rounded-Corners:7px;
  253.     --Bullet-List-Label-Font-Size:calc(var(--Caps-Font-Size) - 0.5px);
  254.     --Bullet-List-Label-Text-Color:#bca58d;
  255.  
  256.     --Bullet-List-Rows-Spacing:0.35em;
  257.  
  258.     /* ask popup */
  259.     --Popup-Fade-Speed:420ms;
  260.     --Popup-BG-Color:var(--Background-Color);
  261.     --Popup-BG-Color-Transparency:25%; /* percentage only */
  262.     --Popup-BG-Blur:5px;
  263. }/* end root - don't delete this line */
  264.  
  265. /*----- TUMBLR CONTROLS -----*/
  266. iframe.tmblr-iframe.iframe-controls--desktop {
  267.     position:fixed!important;
  268.     left:initial!important;
  269.     top:0!important;
  270.     right:0!important;
  271.     margin-left:0px!important;
  272.     margin-top:10px!important;
  273.     margin-right:10px!important;
  274.     transform-origin:100% 0%!important;
  275.     transform:scale(0.8,0.8)!important;
  276.     opacity:0.8;
  277.     transition:opacity 0.4s ease-in-out;
  278. }
  279.  
  280. iframe.tmblr-iframe.iframe-controls--desktop:hover {
  281.     opacity:1;
  282. }
  283.  
  284. .tmblr-iframe--follow-teaser, .follow-teaser, .tmblr-iframe--app-cta-button {
  285.     display:none!important;
  286.     visibility:hidden!important;
  287.     height:0!important;
  288. }
  289.  
  290. /*----- BASICS -----*/
  291. body {
  292.     margin:0;
  293.     background:var(--Background-Color) var(--Background-Image) var(--Background-Repeat) fixed center / var(--Background-Size,auto);
  294.     font:var(--Main-Text-Font-Weight,normal) var(--Main-Text-Font-Size,0.9rem)/var(--Main-Text-Line-Height,1.5) var(--Main-Text-Font-Family), sans-serif;
  295.     color:var(--Main-Text-Color);
  296. }
  297.  
  298. img { max-width:100% }
  299.  
  300. /* bold */
  301. b, strong, b.caps {
  302.     font-weight:var(--Bold-Font-Weight);
  303.     color:var(--Bold-Text-Color);
  304. }
  305.  
  306. /* bold :: small caps */
  307. b.caps {
  308.     font-weight:min(calc(var(--Bold-Font-Weight,600) + 100),800);
  309. }
  310.  
  311. b.label {
  312.     font-weight:var(--Bold-Font-Weight)!important;
  313. }
  314.  
  315. /* italics */
  316. i:not([class]), em:not([class]){
  317.     color:var(--Italic-Text-Color);
  318. }
  319.  
  320. /* blockquotes */
  321. blockquote:not(.header-status blockquote){
  322.     position:relative;
  323.     margin-inline:0;
  324.     padding-left:calc(var(--Blockquote-Border-Size) + var(--Blockquote-Border-Left-Gap-1) + var(--Blockquote-Border-Left-Gap-2));
  325. }
  326.  
  327. blockquote:not(.header-status blockquote):before {
  328.     content:"";
  329.     position:absolute;
  330.     top:0;left:0;
  331.     margin-left:var(--Blockquote-Border-Left-Gap-1);
  332.     width:var(--Blockquote-Border-Size);
  333.     height:100%;
  334.     background:var(--Blockquote-Border-Color);
  335.     border-radius:calc(var(--Blockquote-Border-Size) / 2);
  336. }
  337.  
  338. /* faded text */
  339. .faded:not(a > .faded, i:not([class] > .faded), b:not([class] > .faded)){
  340.     color:rgb(from var(--Boxes-Text-Color,#000) r g b / calc(100% - var(--Faded-Text-Transparency)));
  341. }
  342.  
  343. /*----- HEADINGS -----*/
  344. h1, h2, h3 {
  345.     font-family:var(--Heading-Font-Family);
  346.     font-weight:var(--Heading-Font-Weight);
  347.     font-size:calc(var(--Main-Text-Font-Size) + 1px);
  348.     text-transform:uppercase;
  349.     letter-spacing:var(--Heading-Letter-Spacing);
  350. }
  351.  
  352. h1 {
  353.     font-size:var(--Heading-Font-Size);
  354. }
  355.  
  356. /*----- SMALL CAPS -----*/
  357. .caps, b.label, .hover-label {
  358.     font:var(--Caps-Font-Weight,normal) var(--Caps-Font-Size,0.9rem)/var(--Caps-Line-Height,1.5) var(--Caps-Font-Family), sans-serif;
  359.     text-transform:uppercase;
  360.     letter-spacing:var(--Caps-Letter-Spacing);
  361. }
  362.  
  363. /*----- LINKS -----*/
  364. a[href]:not([href=""],:has(>*:not(span))){
  365.     color:var(--Links-Color);
  366.     padding-bottom:var(--Links-Underline-Gap);
  367.     border-bottom:var(--Links-Underline-Size) solid var(--Links-Underline-Color);
  368.     transition:all var(--Links-HOVER-Speed) ease-in-out;
  369. }
  370.  
  371. a[href]:not([href=""],:has(>*:not(span))):hover {
  372.     color:var(--Links-HOVER-Color);
  373.     border-color:var(--Links-HOVER-Underline-Color);
  374. }
  375.  
  376. /*----- SCROLLBAR -----*/
  377. /*  Chrome/Edge/Brave/Opera only */
  378. ::-webkit-scrollbar {
  379.     width:calc((var(--Chrome-Scrollbar-Padding) * 2) + var(--Chrome-Scrollbar-Thumb-Size));
  380.     height:calc((var(--Chrome-Scrollbar-Padding) * 2) + var(--Chrome-Scrollbar-Thumb-Size));
  381.     background:transparent;
  382. }
  383.  
  384. ::-webkit-scrollbar-thumb {
  385.     background-clip:padding-box;
  386.     background-color:var(--Chrome-Scrollbar-Thumb);
  387.     border:var(--Chrome-Scrollbar-Padding) solid transparent;
  388. }
  389.  
  390. ::-webkit-scrollbar-corner {
  391.     background:transparent;
  392. }
  393.  
  394. /* firefox only */
  395. @-moz-document url-prefix(){
  396.     * {
  397.         scrollbar-width:thin;
  398.     }
  399. }
  400.  
  401. /*----- TEXT HIGHLIGHT -----*/
  402. ::selection {
  403.     background:var(--Highlighted-Text-BG);
  404.     color:var(--Highlighted-Text-Color);
  405. }
  406.  
  407. ::-moz-selection {
  408.     background:var(--Highlighted-Text-BG);
  409.     color:var(--Highlighted-Text-Color);
  410. }
  411.  
  412. /*----- CONTAINER -----*/
  413. .page-cont {
  414.     position:absolute;
  415.     top:0;left:0;right:0;
  416.     min-height:100vh;
  417.     display:flex;
  418.     flex-flow:column nowrap;
  419.     align-items:center;
  420.     margin-inline:auto;
  421.     width:clamp(var(--Container-Min-Width),var(--Container-Width),var(--Container-Max-Width));
  422. }
  423.  
  424. @supports(width:fit-content){
  425.     .page-cont {
  426.         width:fit-content;
  427.         max-width:min(var(--Container-Width),var(--Container-Max-Width));
  428.     }
  429. }
  430.  
  431. main {
  432.     display:flex;
  433.     flex-flow:column nowrap;
  434.     gap:var(--Grid-Spacing);
  435.     width:100%;
  436.     max-width:100%;
  437.     filter:drop-shadow(var(--Boxes-Shadow-X-Offset) var(--Boxes-Shadow-Y-Offset) var(--Boxes-Shadow-Size) rgb(from var(--Boxes-Shadow-Color,#000) r g b / var(--Boxes-Shadow-Strength,100%)));
  438. }
  439.  
  440. /*----- HEADER -----*/
  441. header {
  442.     position:relative;
  443.     border-radius:var(--Boxes-Rounded-Corners);
  444.     background:var(--Boxes-BG);
  445.     z-index:2;
  446. }
  447.  
  448. .header-inner {
  449.     position:relative;
  450.     z-index:0;
  451. }
  452.  
  453. /*----- HEADER :: UPPER DECK -----*/
  454. .header-top-hug {
  455.     position:relative;
  456.     border-radius:var(--Boxes-Rounded-Corners) var(--Boxes-Rounded-Corners) 0 0;
  457.     overflow:hidden;
  458.     z-index:0;
  459. }
  460.  
  461. .header-top-hug img {
  462.     display:block;
  463.     width:100%;
  464.     max-width:100%;
  465.     object-fit:cover;
  466.     object-position:center;
  467. }
  468.  
  469. /*----- HEADER :: LOWER DECK -----*/
  470. .header-bot-hug {
  471.     position:relative;
  472.     display:flex;
  473.     flex-flow:row wrap;
  474.     gap:var(--Header-Status-Left-Gap,0px);
  475.     margin-left:var(--Boxes-Padding);
  476.     margin-right:calc(var(--Boxes-Padding) + (var(--Header-PFP-Border-Thickness) / 2));
  477.     z-index:1;
  478. }
  479.  
  480. .header-bot-hug:not(:first-child){
  481.     margin-top:calc(var(--Header-Profile-Pic-Total-Size) / -2);
  482. }
  483.  
  484. /*----- HEADER :: LEFT -----*/
  485. .header-icon-hug {
  486.     position:relative;
  487.     margin-bottom:calc(var(--Boxes-Padding) - var(--Header-PFP-Border-Thickness) + (var(--Header-Links-Icons-Total-Size) / 2));
  488.     width:var(--Header-Profile-Pic-Total-Size);
  489.     height:var(--Header-Profile-Pic-Total-Size);
  490.     border-radius:var(--Header-Profile-Pic-Rounded-Corners);
  491.     background:var(--Boxes-BG);
  492.     display:flex;
  493.     align-items:center;
  494.     justify-content:center;
  495.     overflow:hidden;
  496.     flex-shrink:0;
  497.     z-index:0;
  498. }
  499.  
  500. .header-icon-hug img {
  501.     display:block;
  502.     width:var(--Header-PFP-Size);
  503.     height:var(--Header-PFP-Size);
  504.     border-radius:var(--Header-Profile-Pic-Rounded-Corners);
  505.     object-fit:cover;
  506.     object-position:center;
  507. }
  508.  
  509. /*----- HEADER :: MID + RIGHT -----*/
  510. .header-mdrr-hug {
  511.     margin-top:calc((var(--Header-Profile-Pic-Total-Size) / 2) - (var(--Header-Status-Single-Line-Height) / 2));
  512.     flex:1;
  513.     gap:var(--Header-Status-Left-Gap,0px);
  514.     align-items:flex-start;
  515.     display:flex;
  516.     flex-flow:row wrap;
  517. }
  518.  
  519. /*----- HEADER :: MID -----*/
  520. .header-mid-hug {
  521.     position:relative;
  522.     display:flex;
  523.     flex-direction:column;
  524.     align-items:flex-start;
  525. }
  526.  
  527. /*----- HEADER STATUS -----*/
  528. .header-status {
  529.     position:relative;
  530.     border:var(--Header-Status-Border-Size) solid var(--Header-Status-Border-Color);
  531.     border-radius:var(--Header-Status-Rounded-Corners);
  532.     padding:calc(var(--Header-Status-Padding-Y) - var(--Main-Text-LH-V-Gap)) var(--Header-Status-Padding-X);
  533.     --ts:calc(var(--Header-Status-Padding-X) + 2px + var(--Header-Status-Bubble-Total-Size-2));
  534.     min-width:calc((var(--ts) * 2) - var(--Header-Status-Left-Gap,0px));
  535.     background:var(--Header-Status-BG);
  536.     font-size:var(--Header-Status-Font-Size);
  537.     color:var(--Header-Status-Text-Color);
  538.     filter:drop-shadow(var(--Header-Status-Shadow-X-Offset) var(--Header-Status-Shadow-Y-Offset) var(--Header-Status-Shadow-Size) rgb(from var(--Header-Status-Shadow-Color,#000) r g b / var(--Header-Status-Shadow-Strength,100%)));
  539.     text-align:left;
  540. }
  541.  
  542. .header-status.caps {
  543.     padding:calc(var(--Header-Status-Padding-Y) - var(--Caps-LH-V-Gap)) var(--Header-Status-Padding-X);
  544. }
  545.  
  546. .header-status:not(.caps) blockquote {
  547.     margin-top:-1px;
  548. }
  549.  
  550. /*----- HEADER USERNAME -----*/
  551. .header-username {
  552.     margin-top:var(--Header-Username-Top-Gap);
  553.     margin-left:calc(var(--Header-Status-Border-Size) + var(--Header-Status-Padding-X));
  554.     font-size:var(--Header-Username-Font-Size,var(--Main-Text-Font-Size));
  555.     font-weight:var(--Header-Username-Font-Weight,400);
  556.     color:var(--Header-Username-Color);
  557. }
  558.  
  559.  
  560. /* @ symbol */
  561. .header-username > span:first-child:before {
  562.     content:"@";
  563.     margin-right:calc(var(--Header-Username-Font-Size,var(--Main-Text-Font-Size)) * -0.1);
  564.     font-family:"Asimovian", sans-serif;
  565. }
  566.  
  567. /*----- HEADER LINKS -----*/
  568. .header-right-hug {
  569.     align-self:flex-start;
  570.     margin-bottom:calc(var(--Header-Links-Icons-Total-Size) / -2);
  571.     margin-left:auto;
  572.     flex:1;
  573. }
  574.  
  575. .header-links {
  576.     display:flex;
  577.     flex-flow:row wrap;
  578.     justify-content:flex-end;
  579.     gap:var(--Header-Links-Icons-Spacing);
  580.     filter:drop-shadow(var(--Header-Links-Icons-Shadow-X-Offset) var(--Header-Links-Icons-Shadow-Y-Offset) var(--Header-Links-Icons-Shadow-Size) rgb(from var(--Header-Links-Icons-Shadow-Color,#000) r g b / var(--Header-Links-Icons-Shadow-Strength,100%)));
  581. }
  582.  
  583. .header-links > li {
  584.     position:relative;
  585. }
  586.  
  587. .header-links [role="menuitem"]{
  588.     display:flex;
  589.     align-items:center;
  590.     justify-content:center;
  591.     width:var(--Header-Links-Icons-Total-Size);
  592.     height:var(--Header-Links-Icons-Total-Size);
  593.     border:var(--Header-Links-Icons-Border-Size) solid var(--Header-Links-Icons-Border-Color);
  594.     border-radius:var(--Header-Links-Icons-Rounded-Corners);
  595.     background:var(--Header-Links-Icons-BG);
  596.     color:var(--Header-Links-Icons-Color);
  597.     transition:all var(--Header-Links-Icons-Hover-Speed) ease-in-out;
  598. }
  599.  
  600. .header-links [role="menuitem"] i[class]:not([class=""]){
  601.     font-size:var(--Header-Links-Icons-Size);
  602. }
  603.  
  604. .header-links [role="menuitem"] i[class^="mgc_"]{
  605.     font-size:calc(var(--Header-Links-Icons-Size) + 1px)!important;
  606. }
  607.  
  608. .header-links [role="menuitem"]:hover {
  609.     border-color:var(--Header-Links-Icons-HOVER-Border-Color);
  610.     background:var(--Header-Links-Icons-HOVER-BG);
  611.     color:var(--Header-Links-Icons-HOVER-Color);
  612.     transform:scale(calc(100% + var(--Header-Links-Icons-Hover-Zoom-Percentage,0%)),calc(100% + var(--Header-Links-Icons-Hover-Zoom-Percentage,0%)));
  613. }
  614.  
  615. .header-links .hover-label {
  616.     position:absolute;
  617.     top:100%;left:50%;
  618.     transform:translateX(-50%);
  619.     margin-top:var(--Header-Links-Hover-Text-Margin);
  620.     border:var(--Header-Links-Hover-Text-Border-Size) solid var(--Header-Links-Hover-Text-Border-Color);
  621.     border-radius:var(--Header-Links-Hover-Text-Rounded-Corners);
  622.     padding:calc(var(--Header-Links-Hover-Text-Padding-Y) - var(--Caps-LH-V-Gap)) var(--Header-Links-Hover-Text-Padding-X);
  623.     background:var(--Header-Links-Hover-Text-BG);
  624.     font-size:var(--Header-Links-Hover-Text-Font-Size);
  625.     color:var(--Header-Links-Hover-Text-Color);
  626.     text-align:center;
  627.     white-space:nowrap;
  628.     max-width:400px;
  629.     overflow:hidden;
  630.     text-overflow:ellipsis;
  631.     opacity:0;
  632.     visibility:hidden;
  633.     transition:opacity var(--Header-Links-Hover-Speed) ease-in-out, visibility 0s var(--Header-Links-Hover-Speed) ease-in-out;
  634.     z-index:2;
  635. }
  636.  
  637. .header-links [role="menuitem"]:hover + .hover-label {
  638.     visibility:visible;
  639.     opacity:1;
  640.     transition:opacity var(--Header-Links-Hover-Speed) ease-in-out, visibility 0s 0s ease-in-out;
  641. }
  642.  
  643. /*----- BOXES GRID -----*/
  644. /* boxes UNDERNEATH the main header box */
  645. .boxes-grid {
  646.     position:relative;
  647.     display:grid;
  648.     grid-template-columns:repeat(2,1fr);
  649.     gap:var(--Grid-Spacing);
  650. }
  651.  
  652. /*----- BOXES -----*/
  653. .box[full-width="yes"]{
  654.     grid-column-end:span 2;
  655. }
  656.  
  657. .box {
  658.     position:relative;
  659.     background:var(--Boxes-BG);
  660.     border-radius:var(--Boxes-Rounded-Corners);
  661.     padding:var(--Boxes-Padding);
  662.     color:var(--Boxes-Text-Color);
  663.     z-index:0;
  664. }
  665.  
  666. /*----- BOXES :: HEADINGS -----*/
  667. .box-heading {
  668.     position:relative;
  669.     margin-left:-2px;
  670.     font-size:var(--Box-Heading-Font-Size);
  671.     color:var(--Box-Heading-Text-Color);
  672.     filter:drop-shadow(var(--Box-Heading-Shadow-X-Offset) var(--Box-Heading-Shadow-Y-Offset) var(--Box-Heading-Shadow-Size) rgb(from var(--Box-Heading-Shadow-Color,#000) r g b / var(--Box-Heading-Shadow-Strength,100%)));
  673. }
  674.  
  675. .box-heading:first-child:has(> span),
  676. .popup-inner .box-heading:first-child:has(> span){
  677.     margin-top:calc(0px - var(--Boxes-Padding) - (var(--Box-Heading-Single-Line-Height) / 2));
  678. }
  679.  
  680. .box-heading:not(:last-child):has(> span),
  681. .popup-inner .box-heading:not(:last-child):has(> span){
  682.     margin-bottom:var(--Box-Heading-Bottom-Gap);
  683. }
  684.  
  685. .box-heading > span {
  686.     display:inline-block;
  687.     vertical-align:middle;
  688.     border:var(--Box-Heading-Border-Size) solid var(--Box-Heading-Border-Color);
  689.     border-radius:var(--Box-Heading-Rounded-Corners);
  690.     padding:calc(var(--Box-Heading-Padding-Y) - var(--Main-Text-LH-V-Gap)) var(--Box-Heading-Padding-X);
  691.     background:var(--Box-Heading-BG);
  692. }
  693.  
  694. /*----- BOXES :: ICON BULLET LISTS -----*/
  695. .icon-bullets {
  696.     margin:0;
  697.     padding:0;
  698.     list-style:none;
  699.  
  700.     display:flex;
  701.     flex-flow:column nowrap;
  702.     gap:var(--Bullet-List-Rows-Spacing);
  703. }
  704.  
  705. .icon-bullets li {
  706.     position:relative;
  707. }
  708.  
  709. .icon-bullets li:has(> i[class]:not([class=""])){
  710.     padding-left:calc(var(--Icon-Bullets-Size) + var(--Icon-Bullets-Gutter));
  711. }
  712.  
  713. .icon-bullets li i[class]:not([class=""]){
  714.     position:absolute;
  715.     top:0;left:0;
  716.     display:flex;
  717.     align-items:center;
  718.     justify-content:center;
  719.     width:var(--Icon-Bullets-Size);
  720.     height:calc(var(--Main-Text-Font-Size) * var(--Main-Text-Line-Height) + var(--Main-Text-Line-Height-Vertical-Align-Adjust));
  721.     font-size:var(--Icon-Bullets-Size);
  722.     color:var(--Icon-Bullets-Color);
  723. }
  724.  
  725. .icon-bullets li i[class^="fa-"]{
  726.     font-size:calc(var(--Icon-Bullets-Size) - 2px)!important;
  727. }
  728.  
  729. b.label {
  730.     padding:var(--Bullet-List-Label-Padding-Y) var(--Bullet-List-Label-Padding-X);
  731.     background:var(--Bullet-List-Label-BG);
  732.     border-radius:var(--Bullet-List-Label-Rounded-Corners);
  733.     font-size:var(--Bullet-List-Label-Font-Size)!important;
  734.     color:var(--Bullet-List-Label-Text-Color);
  735. }
  736.  
  737. b.label:has(+ *){
  738.     margin-right:2px;
  739. }
  740.  
  741. b.label + :is(a,b,i,em,span):before {
  742.     content:" ";
  743. }
  744.  
  745. b.label + .detail:is(p,ul,ol,h1,h2,h3,h4,h5,h6,blockquote){
  746.     margin-top:var(--Bullet-List-Rows-Spacing);
  747. }
  748.  
  749. /*----- ASK POPUP -----*/
  750. dialog .popup-inner {
  751.     border-radius:var(--Boxes-Rounded-Corners);
  752.     filter:drop-shadow(var(--Boxes-Shadow-X-Offset) var(--Boxes-Shadow-Y-Offset) var(--Boxes-Shadow-Size) rgb(from var(--Boxes-Shadow-Color,#000) r g b / var(--Boxes-Shadow-Strength,100%)));
  753.     overflow:initial;
  754. }
  755.  
  756. dialog .popup-inner:has(> .box-heading:first-child){
  757.     margin-top:calc(var(--Box-Heading-Single-Line-Height) / 2);
  758. }
  759.  
  760. dialog .popup-inner .box-heading {
  761.     max-width:100%;
  762.     white-space:nowrap;
  763. }
  764.  
  765. dialog .popup-inner .box-heading > span {
  766.     max-width:100%;
  767.     overflow:hidden;
  768.     text-overflow:ellipsis;
  769. }
  770.  
  771. dialog .popup-inner .box-heading br {
  772.     display:none;
  773. }
  774.  
  775. dialog .popup-inner .box-contents {
  776.     max-height:calc(var(--Popup-Max-Height,85vh) - var(--Box-Heading-Bottom-Gap) - (var(--Popup-Padding) * 2));
  777.     overflow:auto;
  778. }
  779.  
  780. iframe[dim-the-askbox="yes"]{
  781.     filter:brightness(85%) contrast(125%);
  782. }
  783.  
  784. </style><!--don't delete this line-->
  785.  
  786. </head>
  787.  
  788. <!--++++++++++++++++++++++++++++++-->
  789.  
  790. <body>
  791.  
  792. <!--=================================================
  793.  
  794.    PLEASE READ THE GUIDE ON HOW TO USE AND EDIT:
  795.    https://dub.sh/heartworm-guide
  796.    
  797.    ANY QUESTIONS, PLEASE ASK:
  798.    https://discord.gg/RcMKnwz
  799.    
  800. ==================================================-->
  801.  
  802. <div class="page-cont">
  803. <main>
  804.  
  805. <!--======= HEADER =======-->
  806. <header>
  807.     <div class="header-inner">
  808.         <div class="header-top-hug">
  809.  
  810.             <!--++++++ HEADER IMAGE ++++++-->
  811.             <img src="https://64.media.tumblr.com/c40f419bfc405ac4d86bfa5855707247/tumblr_inline_t8h5euGC5i1qf8af3_1280.png" alt="Banner">
  812.  
  813.         </div><!--don't delete this line-->
  814.        
  815.         <div class="header-bot-hug">
  816.             <div class="header-icon-hug">
  817.  
  818.                 <!--++++++ HEADER ICON ++++++-->
  819.                 <img src="https://64.media.tumblr.com/486c0b21b1268f051260b7c5209bf286/tumblr_inline_t8h5buDkgP1qf8af3_1280.png" alt="Avatar">
  820.  
  821.             </div><!--don't delete this line-->
  822.  
  823.             <div class="header-mdrr-hug">
  824.                 <div class="header-mid-hug">
  825.                     <div class="header-status">
  826.                         <blockquote>
  827.  
  828.                             <!--++++++ HEADER STATUS ++++++-->
  829.                             <!-- please keep it short -->
  830.                             <b>heartworm</b> / <i>ˈhärt-ˌwərm</i>
  831.  
  832.                         </blockquote><!--don't delete this line-->
  833.                     </div><!--don't delete this line-->
  834.  
  835.                     <div class="header-username caps">
  836.                         <span>
  837.  
  838.                             <!--++++++ HEADER USERNAME ++++++-->
  839.                             {Name}
  840.  
  841.                         </span><!--don't delete this line-->
  842.                     </div><!--don't delete this line-->
  843.                 </div><!--don't delete this line-->
  844.  
  845.                 <nav class="header-right-hug">
  846.                     <ul class="header-links" role="menu">
  847.                        
  848.                         <!--++++++ HEADER LINKS ++++++-->
  849.                         <!-- looks best under 8 links -->
  850.  
  851.                         <!-- start a link -->
  852.                         <li role="presentation">
  853.                             <a href="/" role="menuitem">
  854.                                 <i class="mgc_home_3_line"></i>
  855.                             </a>
  856.  
  857.                             <span class="hover-label">Home</span>
  858.                         </li><!--end a link-->
  859.  
  860.                         <!-- start a link -->
  861.                         <li role="presentation">
  862.                             <label for="ask-popup" role="menuitem">
  863.                                 <i class="mgc_mail_line"></i>
  864.                             </label>
  865.  
  866.                             <span class="hover-label">Askbox</span>
  867.                         </li><!--end a link-->
  868.  
  869.                         <!-- start a link -->
  870.                         <li role="presentation">
  871.                             <a href="/archive" role="menuitem">
  872.                                 <i class="mgc_grid_line"></i>
  873.                             </a>
  874.  
  875.                             <span class="hover-label">Archive</span>
  876.                         </li><!--end a link-->
  877.  
  878.                         <!-- start a link -->
  879.                         <li role="presentation">
  880.                             <a href="/" role="menuitem">
  881.                                 <i class="fa-solid fa-spiral"></i>
  882.                             </a>
  883.  
  884.                             <span class="hover-label">example link</span>
  885.                         </li><!--end a link-->
  886.  
  887.                         <!-- start a link -->
  888.                         <li role="presentation">
  889.                             <a href="/" role="menuitem">
  890.                                 <i class="mgc_flower_4_line"></i>
  891.                             </a>
  892.  
  893.                             <span class="hover-label">example link</span>
  894.                         </li><!--end a link-->
  895.  
  896.                         <!---- PAGE CREDIT :: PLEASE DO NOT REMOVE <3 ---->
  897.                         <!-- if you have questions please ask me! (https://discord.gg/RcMKnwz) -->
  898.                         <li role="presentation">
  899.                             <a href="https://glenthemes.tumblr.com" role="menuitem">
  900.                                 <i class="gt-misc-icons" icon-name="gt-3"></i>
  901.                             </a>
  902.  
  903.                             <span class="hover-label">&lobrk; Heartworm &robrk;&ensp;page by glenthemes</span>
  904.                         </li><!--end thm credit-->
  905.  
  906.                     </ul><!--end all header links-->
  907.                 </nav><!--end header-right-hug-->
  908.             </div><!--end header-mdrr-hug-->
  909.         </div><!--end header-bot-hug-->
  910.     </div><!--end header-inner-->
  911. </header><!--end header-->
  912.  
  913. <!--++++++++++++++++++++++++++++++-->
  914.  
  915. <!--======= BOXES GRID =======-->
  916. <div class="boxes-grid">
  917.  
  918.     <!--++++++ START A BOX ++++++-->
  919.     <section class="box" full-width="no">
  920.         <h2 class="box-heading">
  921.             <span>
  922.  
  923.             <!---- BOX HEADING ---->
  924.             About me
  925.  
  926.             </span>
  927.         </h2>
  928.  
  929.         <div class="box-contents">
  930.             <!---- BOX CONTENTS ---->
  931.  
  932.             <ul class="icon-bullets">
  933.            
  934.                 <li>
  935.                     <i class="mgc_wave_hand_line"></i>
  936.                     <b class="label">Some label:</b>
  937.                     <p class="detail">
  938.                         some text
  939.                     </p>
  940.                 </li>
  941.  
  942.                 <li>
  943.                     <i class="mgc_birthday_2_line"></i>
  944.                     <b class="label">Some label:</b>
  945.                     <span class="detail">
  946.                         some text
  947.                     </span>
  948.                 </li>
  949.  
  950.             </ul><!--end bullet list-->
  951.         </div><!--end box's contents-->
  952.     </section><!--end a box-->
  953.  
  954.     <!--++++++ START A BOX ++++++-->
  955.     <section class="box" full-width="no">
  956.     <h2 class="box-heading">
  957.         <span>
  958.  
  959.         <!---- BOX HEADING ---->
  960.         Favorites
  961.  
  962.         </span>
  963.     </h2>
  964.  
  965.     <div class="box-contents">
  966.         <!---- BOX CONTENTS ---->
  967.  
  968.         <ul class="icon-bullets">
  969.        
  970.             <li>
  971.                 <i class="mgc_game_2_line"></i>
  972.                 <b class="label">Some label:</b>
  973.                 <span class="detail">
  974.                     some text
  975.                 </span>
  976.             </li>
  977.            
  978.             <li>
  979.                 <i class="mgc_music_line"></i>
  980.                 <b class="label">Some label:</b>
  981.                 <span class="detail">
  982.                     some text
  983.                 </span>
  984.             </li>
  985.            
  986.         </ul><!--end bullet list-->
  987.     </div><!--end box's contents-->
  988.     </section><!--end a box-->
  989.  
  990.     <!--++++++ START A BOX ++++++-->
  991.     <section class="box" full-width="yes">
  992.         <h2 class="box-heading">
  993.             <span>
  994.  
  995.             <!---- BOX HEADING ---->
  996.             Here's a wide box as an example
  997.  
  998.             </span>
  999.         </h2>
  1000.  
  1001.         <div class="box-contents">
  1002.             <!---- BOX CONTENTS ---->
  1003.            
  1004.             <!-- example text formatting examples -->
  1005.             <!-- feel free to delete this comment -->
  1006.            
  1007.             <b>example bold text</b>,
  1008.            
  1009.             <br/>
  1010.            
  1011.             <i>example italic text</i>,
  1012.            
  1013.             <br/>
  1014.            
  1015.             <a href="https://onemillionpats.com">example link</a>,
  1016.            
  1017.             <br/>
  1018.            
  1019.             <span class="faded">example faded text</span>,
  1020.            
  1021.             <br/>
  1022.            
  1023.             <span class="caps">example small uppercase text</span>,
  1024.            
  1025.             <br/>
  1026.            
  1027.             <b class="caps">example small bold uppercase text</b>
  1028.  
  1029.             <blockquote>
  1030.                 an example blockquote
  1031.             </blockquote>
  1032.  
  1033.             <p>
  1034.                 example paragraph text
  1035.             </p>
  1036.            
  1037.         </div><!--end box's contents-->    
  1038.     </section><!--end a box-->
  1039. </div><!--end boxes-grid (end all boxes)-->
  1040. </main><!--end main-->
  1041. </div><!--end page-cont-->
  1042.  
  1043.  
  1044. <!--======= ASK POPUP =======-->
  1045. <dialog>
  1046.     <input id="ask-popup" type="radio" name="p">
  1047.     <div class="popup-inner">
  1048.  
  1049.         <h2 class="box-heading">
  1050.             <span>
  1051.  
  1052.             <!---- ASK POPUP HEADING ---->
  1053.             Ask me anything
  1054.  
  1055.             </span>
  1056.         </h2>
  1057.  
  1058.         <div class="box-contents">
  1059.  
  1060.             <!---- ASK POPUP FORM ---->
  1061.             <iframe dim-the-askbox="yes" id="ask_form" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" style="background-color:transparent; overflow:hidden;" width="100%"></iframe>
  1062.  
  1063.         </div><!--end popup box contents-->
  1064.  
  1065.     </div><!--end popup-inner-->
  1066. </dialog><!--end ask popup-->
  1067.  
  1068. <!-- close popups :: don't touch/move -->
  1069. <label for="close-popups">
  1070.     <input id="close-popups" type="radio" name="p">
  1071. </label>
  1072.  
  1073. </body>
  1074. </html>
Add Comment
Please, Sign In to add comment