nicolas-sage

page 15: seashell navi

Jan 28th, 2023 (edited)
210
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.54 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <title>{Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!----
  11. _________
  12. / \
  13. | __ __ |
  14. | |__| |__| | SEASHELL NAVI BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20.  
  21. CREDITS:
  22. - tabler icons / https://tabler-icons.io/
  23. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  24. - bunny fonts / https://fonts.bunny.net/
  25.  
  26. ---->
  27.  
  28. <!---- JQUERY ---->
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30.  
  31. <!----- BUNNY FONTS -----
  32. EDIT HERE: if you change the fonts replace the names here too ---->
  33. <link href="https://fonts.bunny.net/css?family=Quicksand:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Montserrat+Alternates:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  34.  
  35. <!---- ICONS ---->
  36. <script src="https://unpkg.com/phosphor-icons"></script>
  37. <script src="https://unpkg.com/[email protected]"></script>
  38. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  39.  
  40. <!---- TOOLTIPS ---->
  41. <script src="https://unpkg.com/popper.js@1"></script>
  42. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  43.  
  44. <!--- day/night --->
  45. <script>
  46. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  47. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  48. </script>
  49.  
  50. <!------- CSS -------->
  51. <style>
  52.  
  53. :root {
  54.  
  55. /*---- EDIT HERE: VARIABLES ----*/
  56. --Corners:10px; /* 0px, 5px, or 10px recommended */
  57. --Glow:0 0 10px; /* change to 0 if you don't want the glow */
  58.  
  59. /* replace the fonts in both places ^ if you change them */
  60. --BodyFont:'Quicksand';
  61. --TitleFont:'Montserrat Alternates';
  62. --FontSize:15px;
  63. }
  64.  
  65. html[data-theme='light'] {
  66. --LightOn: flex;
  67. --LightOff: none;
  68. --ColorBackground:#eee;
  69. --ColorSidebar:#f8f8f8;
  70. --ColorPosts:#fff;
  71. --ColorBorders:#e5e5e5;
  72. --ColorTitle:#333;
  73. --ColorText:#5a5a5a;
  74. --ColorLink:#58729e;
  75. --ColorAccent:#3d5988;
  76. --ColorGradientOne:#8993b3;
  77. --ColorGradientTwo:#b6c0de;
  78. --ColorGradientText:#fff;
  79. --ColorGradientAccent:#edf2ff;
  80. --ColorOpacity: rgba(255,255,255,.1);
  81. --ColorReverseOpacity: rgba(0,0,0,.1);
  82. }
  83. html[data-theme='dark'] {
  84. --LightOn: none;
  85. --LightOff: flex;
  86. --ColorBackground:#262832;
  87. --ColorSidebar:#313440;
  88. --ColorPosts:#3a3d4b;
  89. --ColorBorders:#4a4e5e;
  90. --ColorTitle:#fcfdff;
  91. --ColorText:#d2d8e0;
  92. --ColorLink:#bac9e3;
  93. --ColorAccent:#d6e5ff;
  94. --ColorGradientOne:#96a2c3;
  95. --ColorGradientTwo:#b6c0de;
  96. --ColorGradientText:#fff;
  97. --ColorGradientAccent:#4c5776;
  98. --ColorOpacity: rgba(0,0,0,.1);
  99. --ColorReverseOpacity: rgba(255,255,255,.1);
  100. }
  101. html.theme-transition,
  102. html.theme-transition *,
  103. html.theme-transition *:before,
  104. html.theme-transition *:after {
  105. transition: 0s !important;
  106. transition-delay: 0 !important;
  107. }
  108.  
  109. .light-on{
  110. display: var(--LightOn);
  111. }
  112. .light-off{
  113. display: var(--LightOff);
  114. }
  115.  
  116. /*--- TOOLTIPS ---*/
  117. .tippy-tooltip.custom-theme {
  118. font-family:var(--TitleFont), sans-serif;
  119. font-size:.9em;
  120. color:var(--ColorTitle);
  121. text-transform:lowercase;
  122. text-align:center;
  123. letter-spacing:.1em;
  124. background:var(--ColorPosts);
  125. border-radius:var(--Corners);
  126. margin-bottom:.5em;
  127. }
  128.  
  129. /*--- SCROLLBAR ---*/
  130. ::-webkit-scrollbar {
  131. width:5px;
  132. height:5px;
  133. background:var(--ColorBackground);
  134. }
  135.  
  136. ::-webkit-scrollbar-track {
  137. background:var(--ColorBackground);
  138. border-radius: 5px;
  139. }
  140.  
  141. ::-webkit-scrollbar-thumb {
  142. background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
  143. border-radius: 5px;
  144. }
  145.  
  146. /*--- TEXT SELECTION ---*/
  147. ::-moz-selection { /* Code for Firefox */
  148. color:var(--ColorPosts);
  149. background:var(--ColorAccent);
  150. }
  151.  
  152. ::selection {
  153. color:var(--ColorPosts);
  154. background:var(--ColorAccent);
  155. }
  156.  
  157. /*--- COMMON ---*/
  158.  
  159. body {
  160. font-family:var(--BodyFont), sans-serif;
  161. font-size:var(--FontSize);
  162. color: var(--ColorText);
  163. background-color: var(--ColorBackground);
  164. line-height:140%;
  165. word-wrap:break-word;
  166. letter-spacing:.04em;
  167. margin:0;
  168. }
  169.  
  170. a {
  171. color:var(--ColorLink);
  172. text-decoration: none;
  173. -webkit-transition: all 0.3s;
  174. -moz-transition: all 0.3s;
  175. -ms-transition: all 0.3s;
  176. -o-transition: all 0.3s;
  177. transition: all 0.3s;
  178. }
  179.  
  180. a:hover {
  181. color: var(--ColorAccent);
  182. -webkit-transition: all 0.3s;
  183. -moz-transition: all 0.3s;
  184. -ms-transition: all 0.3s;
  185. -o-transition: all 0.3s;
  186. transition: all 0.3s;
  187. }
  188.  
  189. button {font-size:1em;}
  190.  
  191. blockquote {
  192. border-left:2px solid var(--ColorBorders);
  193. padding-left:.75em;
  194. margin-left:1em;
  195. }
  196.  
  197. li {list-style-type:circle;}
  198. li::marker {color:var(--ColorAccent)}
  199.  
  200. h1, h1 a, h2, h3, h4, h5 {
  201. font-family:var(--TitleFont), sans-serif;
  202. letter-spacing:.1em;
  203. color:var(--ColorTitle);
  204. }
  205.  
  206. h1 {font-size:1.3em;}
  207. h2 {font-size:1.2em;}
  208. h3 {font-size:1.1em; padding:0 0 .5em 0; margin:0; display:inline-block;}
  209. h4 {font-size:1.05em;}
  210. h5 {font-size:1.025em;}
  211. h1 a:hover {color:var(--ColorAccent);}
  212.  
  213. h4 {margin:0 0 1em 0; text-align:center;}
  214. h5 {margin:0; padding:0;}
  215.  
  216. small {font-size: 0.95em;}
  217. big {font-size: 1.1em;}
  218.  
  219. hr {
  220. height: 1px;
  221. border: none;
  222. box-shadow: none;
  223. background-color: var(--ColorBorders);
  224. }
  225.  
  226. pre {
  227. line-height: inherit;
  228. font-size: inherit;
  229. white-space: pre-wrap;
  230. white-space: -moz-pre-wrap;
  231. white-space: -pre-wrap;
  232. white-space: -o-pre-wrap;
  233. word-wrap: break-word;
  234. }
  235.  
  236. b, strong {
  237. color:var(--ColorTitle);
  238. font-weight:800;
  239. }
  240.  
  241. b a:hover {
  242. color:var(--ColorAccent);
  243. -webkit-transition: all 0.3s;
  244. -moz-transition: all 0.3s;
  245. -ms-transition: all 0.3s;
  246. -o-transition: all 0.3s;
  247. transition: all 0.3s;
  248. }
  249.  
  250. /*--- HEADER ---*/
  251.  
  252. header {
  253. position:fixed;
  254. top:0;
  255. left:0;
  256. right:0;
  257. width:calc(100% - 2em);
  258. height:calc(54px - 2em);
  259. display:flex;
  260. justify-content:space-between;
  261. align-items:center;
  262. gap:1em;
  263. padding:1em;
  264. background:var(--ColorSidebar);
  265. z-index:9999;
  266. }
  267. header:before {
  268. content:'';
  269. position:absolute;
  270. left:0;
  271. bottom:-2px;
  272. width:100%;
  273. height:2px;
  274. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  275. }
  276.  
  277. .topleft {
  278. display:flex;
  279. justify-content:flex-start;
  280. align-items:center;
  281. gap:.75em;
  282. }
  283.  
  284. /* HEADER IMG */
  285. a.headerimg {
  286. display:flex;
  287. justify-content:center;
  288. align-items:center;
  289. }
  290. a.headerimg img {
  291. width:2.25em;
  292. height:2.25em;
  293. padding:2px;
  294. border-radius:100%;
  295. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  296. -webkit-transition: all 0.4s;
  297. -moz-transition: all 0.4s;
  298. -ms-transition: all 0.4s;
  299. -o-transition: all 0.4s;
  300. transition: all 0.4s;
  301. }
  302. a.headerimg:hover img {
  303. transform:scale(.95) rotate(10deg);
  304. }
  305.  
  306. a.headertitle {
  307. display:flex;
  308. flex-direction:column;
  309. line-height:120%;
  310. }
  311. a.headertitle b {
  312. font-family:var(--TitleFont), sans-serif;
  313. font-weight:600;
  314. letter-spacing:.075em;
  315. -webkit-transition: all 0.4s;
  316. -moz-transition: all 0.4s;
  317. -ms-transition: all 0.4s;
  318. -o-transition: all 0.4s;
  319. transition: all 0.4s;
  320. }
  321. a.headertitle:hover b {
  322. color:var(--ColorAccent);
  323. -webkit-transition: all 0.4s;
  324. -moz-transition: all 0.4s;
  325. -ms-transition: all 0.4s;
  326. -o-transition: all 0.4s;
  327. transition: all 0.4s;
  328. }
  329.  
  330. a.headertitle li {
  331. display:flex;
  332. justify-content:flex-start;
  333. align-items:center;
  334. gap:.25em;
  335. }
  336.  
  337. a.headertitle li i {
  338. color:var(--ColorAccent);
  339. }
  340.  
  341. a.headertitle li span {
  342. font-family:var(--TitleFont), sans-serif;
  343. font-size:.9em;
  344. font-style:normal;
  345. color:var(--ColorText);
  346. -webkit-transition: all 0.4s;
  347. -moz-transition: all 0.4s;
  348. -ms-transition: all 0.4s;
  349. -o-transition: all 0.4s;
  350. transition: all 0.4s;
  351. }
  352. a.headertitle:hover span {color:var(--ColorTitle);}
  353.  
  354. .topright {
  355. display:flex;
  356. justify-content:flex-end;
  357. align-items:center;
  358. gap:.5em;
  359. }
  360.  
  361. /* DAY/NIGHT */
  362. button#theme-toggle {
  363. outline:none;
  364. border:none;
  365. padding:0;
  366. background:transparent;
  367. display:flex;
  368. justify-content:center;
  369. align-items:center;
  370. }
  371.  
  372. button#theme-toggle span {
  373. justify-content:center;
  374. align-items:center;
  375. cursor:help;
  376. -webkit-transition: all 0.4s;
  377. -moz-transition: all 0.4s;
  378. -ms-transition: all 0.4s;
  379. -o-transition: all 0.4s;
  380. transition: all 0.4s;
  381. }
  382.  
  383. button#theme-toggle i {
  384. font-size:1.5em;
  385. color:var(--ColorTitle);
  386. -webkit-transition: all 0.4s;
  387. -moz-transition: all 0.4s;
  388. -ms-transition: all 0.4s;
  389. -o-transition: all 0.4s;
  390. transition: all 0.4s;
  391. }
  392. button#theme-toggle:hover i {
  393. color:var(--ColorAccent);
  394. text-shadow:var(--Glow);
  395. -webkit-transition: all 0.4s;
  396. -moz-transition: all 0.4s;
  397. -ms-transition: all 0.4s;
  398. -o-transition: all 0.4s;
  399. transition: all 0.4s;
  400. -webkit-animation-duration: .75s;
  401. animation-duration: .75s;
  402. -webkit-animation-fill-mode: both;
  403. animation-fill-mode: both;
  404. -webkit-animation-timing-function: ease-in-out;
  405. animation-timing-function: ease-in-out;
  406. animation-iteration-count:1;
  407. -webkit-animation-iteration-count:1;
  408. animation-name:daynight;
  409. -moz-animation-name:daynight;
  410. }
  411.  
  412. @keyframes daynight {
  413. 50% {
  414. -webkit-transform: scaleX(-1);
  415. -ms-transform: scaleX(-1);
  416. transform: scaleX(-1);
  417. }
  418. }
  419.  
  420. /* SCROLL TO TOP */
  421. a#totop {
  422. display:flex;
  423. justify-content:center;
  424. align-items:center;
  425. cursor:help;
  426. }
  427.  
  428. #totop i {
  429. font-size:1.4em;
  430. color:var(--ColorTitle);
  431. -webkit-transition: all 0.4s;
  432. -moz-transition: all 0.4s;
  433. -ms-transition: all 0.4s;
  434. -o-transition: all 0.4s;
  435. transition: all 0.4s;
  436. }
  437.  
  438. a#totop:hover i {
  439. color:var(--ColorAccent);
  440. text-shadow:var(--Glow);
  441. -webkit-transition: all 0.4s;
  442. -moz-transition: all 0.4s;
  443. -ms-transition: all 0.4s;
  444. -o-transition: all 0.4s;
  445. transition: all 0.4s;
  446. -webkit-animation-duration: 2.5s;
  447. animation-duration: 2.5s;
  448. -webkit-animation-fill-mode: both;
  449. animation-fill-mode: both;
  450. -webkit-animation-timing-function: ease-in-out;
  451. animation-timing-function: ease-in-out;
  452. animation-iteration-count:1;
  453. -webkit-animation-iteration-count:1;
  454. animation-name:totop;
  455. -moz-animation-name:totop;
  456. }
  457.  
  458. @keyframes totop {
  459. 0% {
  460. -webkit-transform: translateY(0px);
  461. -ms-transform: translateY(0px);
  462. transform: translateY(0px)
  463. }
  464. 10% {
  465. -webkit-transform: translateY(-3px);
  466. -ms-transform: translateY(-3px);
  467. transform: translateY(-3px)
  468. }
  469. 20% {
  470. -webkit-transform: translateY(0px);
  471. -ms-transform: translateY(0px);
  472. transform: translateY(0px)
  473. }
  474. 30% {
  475. -webkit-transform: translateY(-3px);
  476. -ms-transform: translateY(-3px);
  477. transform: translateY(-3px)
  478. }
  479. 40% {
  480. -webkit-transform: translateY(0px);
  481. -ms-transform: translateY(0px);
  482. transform: translateY(0px)
  483. }
  484. 50% {
  485. -webkit-transform: translateY(0px);
  486. -ms-transform: translateY(0px);
  487. transform: translateY(0px)
  488. }
  489. 60% {
  490. -webkit-transform: translateY(0px);
  491. -ms-transform: translateY(0px);
  492. transform: translateY(0px)
  493. }
  494. 70% {
  495. -webkit-transform: translateY(-3px);
  496. -ms-transform: translateY(-3px);
  497. transform: translateY(-3px)
  498. }
  499. 80% {
  500. -webkit-transform: translateY(0px);
  501. -ms-transform: translateY(0px);
  502. transform: translateY(0px)
  503. }
  504. 90% {
  505. -webkit-transform: translateY(-3px);
  506. -ms-transform: translateY(-3px);
  507. transform: translateY(-3px)
  508. }
  509. 100% {
  510. -webkit-transform: translateY(0px);
  511. -ms-transform: translateY(0px);
  512. transform: translateY(0px)
  513. }
  514. }
  515.  
  516. /* TUMBLR CONTROLS */
  517. #controlsbutton {
  518. display:flex;
  519. justify-content:center;
  520. align-items:center;
  521. cursor:help;
  522. -webkit-transition: all 0.4s;
  523. -moz-transition: all 0.4s;
  524. -ms-transition: all 0.4s;
  525. -o-transition: all 0.4s;
  526. transition: all 0.4s;
  527. }
  528.  
  529. #controlsbutton i {
  530. font-size:1.5em;
  531. color:var(--ColorTitle);
  532. -webkit-transition: all 0.4s;
  533. -moz-transition: all 0.4s;
  534. -ms-transition: all 0.4s;
  535. -o-transition: all 0.4s;
  536. transition: all 0.4s;
  537. }
  538. #controlsbutton:hover i {
  539. color:var(--ColorAccent);
  540. text-shadow:var(--Glow);
  541. -webkit-transition: all 0.4s;
  542. -moz-transition: all 0.4s;
  543. -ms-transition: all 0.4s;
  544. -o-transition: all 0.4s;
  545. transition: all 0.4s;
  546. -webkit-animation-duration: 1.5s;
  547. animation-duration: 1.5s;
  548. -webkit-animation-fill-mode: both;
  549. animation-fill-mode: both;
  550. -webkit-animation-timing-function: ease-in-out;
  551. animation-timing-function: ease-in-out;
  552. animation-iteration-count:1;
  553. -webkit-animation-iteration-count:1;
  554. animation-name:tumblrcontrols;
  555. -moz-animation-name:tumblrcontrols;
  556. }
  557.  
  558. @keyframes tumblrcontrols {
  559. 45% {
  560. -webkit-transform: rotate(180deg);
  561. -ms-transform: rotate(180deg);
  562. transform: rotate(180deg);
  563. }
  564. 55% {
  565. -webkit-transform: rotate(180deg);
  566. -ms-transform: rotate(180deg);
  567. transform: rotate(180deg);
  568. }
  569. 100% {
  570. -webkit-transform: rotate(360deg);
  571. -ms-transform: rotate(360deg);
  572. transform: rotate(360deg);
  573. }
  574. }
  575.  
  576. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  577. z-index:999999999!important;
  578. margin-top:50px;
  579. margin-right:-2em;
  580. transform:scale(.75);
  581. opacity:0;
  582. visibility:hidden;
  583. }
  584.  
  585. body.controlsclick iframe.tmblr-iframe {
  586. opacity:1.0;
  587. visibility:visible;
  588. -webkit-transition: all 0.5s;
  589. -moz-transition: all 0.5s;
  590. -ms-transition: all 0.5s;
  591. -o-transition: all 0.5s;
  592. transition: all 0.5s;
  593. }
  594.  
  595. body.controlsclick #controlsbutton i {
  596. color:var(--ColorAccent);
  597. text-shadow:var(--Glow);
  598. }
  599.  
  600. /*----- FOOTER ----*/
  601. footer {
  602. position:fixed;
  603. left:0;
  604. bottom:0;
  605. right:0;
  606. width:calc(100% - 2em);
  607. height:calc(38px - 1em);
  608. display:flex;
  609. justify-content:center;
  610. align-items:center;
  611. padding:.5em 1em .5em 1em;
  612. background:var(--ColorPosts);
  613. z-index:999999;
  614. }
  615.  
  616. .footerleft {
  617. position:fixed;
  618. left:1em;
  619. height:38px;
  620. display:flex;
  621. justify-content:flex-start;
  622. align-items:center;
  623. gap:.5em;
  624. }
  625.  
  626. /* SEARCH BAR */
  627. #search {
  628. width:100%;
  629. display:flex;
  630. justify-content:flex-start;
  631. align-items:center;
  632. gap:.25em;
  633. }
  634.  
  635. #search i {
  636. font-size:1.3em;
  637. color:var(--ColorAccent);
  638. -webkit-transition: all 0.4s;
  639. -moz-transition: all 0.4s;
  640. -ms-transition: all 0.4s;
  641. -o-transition: all 0.4s;
  642. transition: all 0.4s;
  643. }
  644. #search:hover i {
  645. transform:scale(1.1);
  646. color:var(--ColorTitle);
  647. -webkit-transition: all 0.4s;
  648. -moz-transition: all 0.4s;
  649. -ms-transition: all 0.4s;
  650. -o-transition: all 0.4s;
  651. transition: all 0.4s;
  652. }
  653.  
  654. .search {
  655. width:100%;
  656. }
  657.  
  658. .search .query {
  659. border: 0;
  660. outline: 0;
  661. font-family:var(--TitleFont), sans-serif;
  662. font-size:.9em;
  663. width:100%;
  664. color:var(--ColorTitle);
  665. letter-spacing:.075em;
  666. background:transparent;
  667. }
  668.  
  669. ::-webkit-input-placeholder {color: inherit; opacity:.85;}
  670. :-moz-placeholder {color: inherit; opacity:.85;}
  671. ::-moz-placeholder {color: inherit; opacity:.85;}
  672. :-ms-input-placeholder {color: inherit; opacity:.85;}
  673.  
  674. input:focus::-webkit-input-placeholder {color: transparent;}
  675. input:focus:-moz-placeholder {color: transparent;}
  676. input:focus::-moz-placeholder {color: transparent;}
  677. input:focus:-ms-input-placeholder { color: transparent;}
  678.  
  679. .footermid {
  680. display:flex;
  681. justify-content:center;
  682. align-items:center;
  683. gap:1em;
  684. }
  685. .footermid a {
  686. display:flex;
  687. justify-content:center;
  688. align-items:center;
  689. }
  690. .footermid i {
  691. font-size:1.35em;
  692. color:var(--ColorTitle);
  693. -webkit-transition: all 0.4s;
  694. -moz-transition: all 0.4s;
  695. -ms-transition: all 0.4s;
  696. -o-transition: all 0.4s;
  697. transition: all 0.4s;
  698. }
  699. .footermid a:hover i {
  700. color:var(--ColorAccent);
  701. text-shadow:var(--Glow);
  702. }
  703.  
  704. .footerright {
  705. position:fixed;
  706. right:1em;
  707. height:38px;
  708. display:flex;
  709. justify-content:flex-end;
  710. align-items:center;
  711. gap:.75em;
  712. }
  713.  
  714. /* rules button --- delete ---*/
  715. a.rulesbutton {
  716. display:flex;
  717. justify-content:center;
  718. align-items:center;
  719. cursor:help;
  720. }
  721. a.rulesbutton i {
  722. font-size:1.4em;
  723. color:var(--ColorTitle);
  724. -webkit-transition: all 0.4s;
  725. -moz-transition: all 0.4s;
  726. -ms-transition: all 0.4s;
  727. -o-transition: all 0.4s;
  728. transition: all 0.4s;
  729. }
  730. a.rulesbutton:hover i {
  731. color:var(--ColorAccent);
  732. text-shadow:var(--Glow);
  733. }
  734. body.rules-click a.rulesbutton i {color:var(--ColorAccent); text-shadow:var(--Glow);}
  735.  
  736. a.sidebarbutton {
  737. display:none;
  738. justify-content:center;
  739. align-items:center;
  740. cursor:help;
  741. }
  742. a.sidebarbutton i {
  743. font-size:1.4em;
  744. color:var(--ColorTitle);
  745. -webkit-transition: all 0.4s;
  746. -moz-transition: all 0.4s;
  747. -ms-transition: all 0.4s;
  748. -o-transition: all 0.4s;
  749. transition: all 0.4s;
  750. }
  751. a.sidebarbutton:hover i {
  752. color:var(--ColorAccent);
  753. text-shadow:var(--Glow);
  754. }
  755. body.sidebar-click a.sidebarbutton i {color:var(--ColorAccent); text-shadow:var(--Glow);}
  756.  
  757. /* CREDIT: DO NOT TOUCH */
  758. a.credit {
  759. display:flex;
  760. justify-content:center;
  761. align-items:center;
  762. }
  763. .credit i {
  764. font-size:1.5em;
  765. color:var(--ColorTitle);
  766. -webkit-transition: all 0.4s;
  767. -moz-transition: all 0.4s;
  768. -ms-transition: all 0.4s;
  769. -o-transition: all 0.4s;
  770. transition: all 0.4s;
  771. }
  772. a.credit:hover i {
  773. color:var(--ColorAccent);
  774. text-shadow:var(--Glow);
  775. -webkit-animation-duration: 2s;
  776. animation-duration: 2s;
  777. -webkit-animation-fill-mode: both;
  778. animation-fill-mode: both;
  779. -webkit-animation-timing-function: ease-in-out;
  780. animation-timing-function: ease-in-out;
  781. animation-iteration-count:infinite;
  782. -webkit-animation-iteration-count:infinite;
  783. animation-name: bounce;
  784. -moz-animation-name: bounce;
  785. }
  786.  
  787. @keyframes bounce {
  788. 0% {
  789. -webkit-transform: translateY(0px);
  790. -ms-transform: translateY(0px);
  791. transform: translateY(0px)
  792. }
  793. 25% {
  794. -webkit-transform: translateY(-3px);
  795. -ms-transform: translateY(-3px);
  796. transform: translateY(-3px)
  797. }
  798. 50% {
  799. -webkit-transform: translateY(0px);
  800. -ms-transform: translateY(0px);
  801. transform: translateY(0px)
  802. }
  803. 75% {
  804. -webkit-transform: translateY(-3px);
  805. -ms-transform: translateY(-3px);
  806. transform: translateY(-3px)
  807. }
  808. 100% {
  809. -webkit-transform: translateY(0px);
  810. -ms-transform: translateY(0px);
  811. transform: translateY(0px)
  812. }
  813. }
  814.  
  815. /* MAIN CONTENT */
  816.  
  817. main {
  818. width:100%;
  819. display:flex;
  820. justify-content:center;
  821. }
  822.  
  823. section {
  824. display:flex;
  825. justify-content:center;
  826. flex-wrap:wrap;
  827. gap:1em;
  828. max-width:900px;
  829. margin-top:calc(54px + 1em);
  830. margin-bottom:calc(38px + 1em);
  831. margin-left:1em;
  832. margin-right:1em;
  833. }
  834.  
  835. article {
  836. position:relative;
  837. width:100%;
  838. background:var(--ColorSidebar);
  839. border-radius:var(--Corners);
  840. }
  841.  
  842. /* links */
  843. article.links {
  844. width:calc(50% - .5em);
  845. display:flex;
  846. flex-direction:column;
  847. }
  848. article.links.long {width:100%;}
  849.  
  850. .links-top {
  851. position:sticky;
  852. top:0;
  853. width:calc(100% - 2em);
  854. height:calc(54px - 2em);
  855. display:flex;
  856. justify-content:space-between;
  857. align-items:center;
  858. gap:1em;
  859. padding:1em;
  860. background:var(--ColorSidebar);
  861. border-radius:var(--Corners);
  862. z-index:9999;
  863. }
  864. .links-top b {
  865. font-family:var(--TitleFont), sans-serif;
  866. font-size:1.2em;
  867. font-weight:600;
  868. letter-spacing:.075em;
  869. margin-top:.15em;
  870. }
  871. .links-top i {
  872. font-size:1.5em;
  873. color:var(--ColorTitle);
  874. }
  875.  
  876. .links-mid {
  877. position:relative;
  878. width:calc(100% - 2em);
  879. height:100%;
  880. display:flex;
  881. justify-content:flex-start;
  882. align-items:flex-start;
  883. flex-wrap:wrap;
  884. gap:1.5em;
  885. padding:1em;
  886. background:var(--ColorPosts);
  887. border-radius:0 0 var(--Corners) var(--Corners);
  888. }
  889. .links-mid:after {
  890. content:'';
  891. position:absolute;
  892. left:0;
  893. top:0;
  894. width:100%;
  895. height:2px;
  896. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  897. }
  898.  
  899. .links-midtitle {
  900. width:100%;
  901. font-size:1.05em;
  902. margin-bottom:.5em;
  903. }
  904.  
  905. .linksection {
  906. width:calc(50% - .75em);
  907. display:flex;
  908. justify-content:flex-start!important;
  909. align-items:flex-start;
  910. flex-wrap:wrap;
  911. gap:.5em;
  912. }
  913.  
  914. .linksection.long {width:100%;}
  915. .linksection.long .lslinks {width:calc(50% - .25em);}
  916. .linksection.long.three .lslinks {width:calc(33% - .25em);}
  917.  
  918. .linksection .lstitle {
  919. position:relative;
  920. width:100%;
  921. font-family:var(--TitleFont), sans-serif;
  922. font-size:1.1em;
  923. font-weight:700;
  924. color:var(--ColorTitle);
  925. padding-bottom:.15em;
  926. border-bottom:1px solid var(--ColorBorders);
  927. }
  928.  
  929. .linksection .lslinks {
  930. display:flex;
  931. flex-direction:column;
  932. gap:.25em;
  933. }
  934. .lslinks a {
  935. display:flex;
  936. justify-content:flex-start;
  937. align-items:center;
  938. gap:.5em;
  939. }
  940. .lslinks b {
  941. font-size:1.05em;
  942. font-weight:normal;
  943. color:var(--ColorText);
  944. -webkit-transition: all 0.4s;
  945. -moz-transition: all 0.4s;
  946. -ms-transition: all 0.4s;
  947. -o-transition: all 0.4s;
  948. transition: all 0.4s;
  949. }
  950. .lslinks a:hover b {color:var(--ColorTitle);}
  951.  
  952. .lslinks i {
  953. font-size:1.2em;
  954. color:var(--ColorLink);
  955. -webkit-transition: all 0.4s;
  956. -moz-transition: all 0.4s;
  957. -ms-transition: all 0.4s;
  958. -o-transition: all 0.4s;
  959. transition: all 0.4s;
  960. }
  961. .lslinks a:hover i {color:var(--ColorAccent);}
  962.  
  963. /*---- RESPONSIVENESS ---*/
  964.  
  965. @media only screen and (max-width: 1000px) {
  966. section {width:650px;}
  967. article.links, article.links.long {width:calc(100% - 2em);}
  968. }
  969.  
  970. @media only screen and (max-width: 800px) {
  971. a.headerimg, .tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton {display:none;}
  972. section {width:500px;}
  973. .linksection.long.three .lslinks {width:calc(50% - .25em);}
  974. }
  975.  
  976. @media only screen and (max-width: 600px) {
  977. section {width:calc(100% - .5em); margin-left:auto; margin-right:auto;}
  978. #search {width:100px;}
  979. }
  980.  
  981. @media only screen and (max-width: 450px) {
  982. article.links, article.links.long {width:100%;}
  983. }
  984.  
  985. {CustomCSS}
  986.  
  987. </style>
  988. </head>
  989.  
  990. <!----- HTML ----->
  991.  
  992. <body>
  993. <main> <!-- main container -->
  994.  
  995. <!-- HEADER --->
  996. <header>
  997. <div class="topleft">
  998. <a class="headerimg" target="_blank" href="//tumblr.com/follow/{Name}" title="follow @{Name}"><img src="{PortraitURL-128}"></a>
  999. <a class="headertitle" href="/">
  1000. <b>navigation</b>
  1001. <li><i class="ti ti-at"></i><span>{Name}</span></li>
  1002. </a>
  1003. </div>
  1004. <div class="topright">
  1005. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1006. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1007. <span class="light-off" title="turn on the lights"><i class="ti ti-sun"></i></span>
  1008. </button>
  1009. <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-up"></i></a>
  1010. <div title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></div>
  1011. </div>
  1012. </header>
  1013.  
  1014. <section><!-- section -->
  1015.  
  1016. <!-- EDIT HERE: LINKS --
  1017.  
  1018. - there are two options for link sections, regular and long
  1019.  
  1020. REGULAR LINK SECTION FORMAT:
  1021.  
  1022. <div class="linksection">
  1023. <div class="lstitle">SUBTITLE</div>
  1024. <div class="lslinks">
  1025. <a href="/LINK"><i class="ti ti-ICON"></i><b>LINK NAME</b></a>
  1026. </div>
  1027. </div>
  1028.  
  1029. - capitalized words indicate what you can change
  1030. - copy and paste as needed, but make sure there is an even number of these or it will look weird
  1031.  
  1032. LONG LINK SECTION FORMAT:
  1033.  
  1034. <div class="linksection long">
  1035. <div class="lstitle">SUBTITLE</div>
  1036. <div class="lslinks">
  1037. <a href="/LINK"><i class="ti ti-ICON"></i><b>LINK NAME</b></a>
  1038. </div>
  1039. <div class="lslinks">
  1040. <a href="/LINK"><i class="ti ti-ICON"></i><b>LINK NAME</b></a>
  1041. </div>
  1042. </div>
  1043.  
  1044. - capitalized words indicate what you can change
  1045. - copy and paste as needed
  1046.  
  1047.  
  1048. --- IF YOU WANT TO ADD A NEW SEPARATE LINK BLOCK ---
  1049.  
  1050. FORMAT EXAMPLE:
  1051.  
  1052. <article class="links">
  1053. <div class="links-top">
  1054. <b>LINK BLOCK TITLE</b>
  1055. <i class="ti ti-ICON"></i>
  1056. </div>
  1057. <div class="links-mid">
  1058. <div class="linksection">
  1059. <div class="lstitle">SUBTITLE</div>
  1060. <div class="lslinks">
  1061. <a href="/LINK"><i class="ti ti-ICON"></i><b>LINK NAME</b></a>
  1062. </div>
  1063. </div>
  1064. <div class="linksection long">
  1065. <div class="lstitle">SUBTITLE</div>
  1066. <div class="lslinks">
  1067. <a href="/LINK"><i class="ti ti-ICON"></i><b>LINK NAME</b></a>
  1068. </div>
  1069. <div class="lslinks">
  1070. <a href="/LINK"><i class="ti ti-ICON"></i><b>LINK NAME</b></a>
  1071. </div>
  1072. </div>
  1073. </div>
  1074. </article>
  1075.  
  1076. - capitalized words indicate what you can change
  1077. - copy and paste as needed
  1078.  
  1079. -->
  1080.  
  1081. <article class="links">
  1082. <div class="links-top">
  1083. <!-- change the title & icon here -->
  1084. <b>link block title</b>
  1085. <i class="ti ti-heart"></i>
  1086. </div>
  1087. <div class="links-mid">
  1088. <div class="linksection"><!-- this is a regular link section -->
  1089. <div class="lstitle">subtitle</div>
  1090. <div class="lslinks">
  1091. <a href="/"><i class="ti ti-link"></i><b>link one</b></a>
  1092. <a href="/"><i class="ti ti-link"></i><b>link two</b></a>
  1093. <a href="/"><i class="ti ti-link"></i><b>link three</b></a>
  1094. </div>
  1095. </div>
  1096. <div class="linksection">
  1097. <div class="lstitle">subtitle</div>
  1098. <div class="lslinks">
  1099. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag one</b></a>
  1100. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag two</b></a>
  1101. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag three</b></a>
  1102. </div>
  1103. </div>
  1104. <div class="linksection long"><!-- this is a long link section -->
  1105. <div class="lstitle">subtitle</div>
  1106. <div class="lslinks"><!-- these links show up on the left -->
  1107. <a href="/"><i class="ti ti-link"></i><b>link one</b></a>
  1108. <a href="/"><i class="ti ti-link"></i><b>link two</b></a>
  1109. <a href="/"><i class="ti ti-link"></i><b>link three</b></a>
  1110. </div>
  1111. <div class="lslinks"><!-- these links show up on the right -->
  1112. <a href="/"><i class="ti ti-link"></i><b>link four</b></a>
  1113. <a href="/"><i class="ti ti-link"></i><b>link five</b></a>
  1114. <a href="/"><i class="ti ti-link"></i><b>link six</b></a>
  1115. </div>
  1116. </div>
  1117. </div>
  1118. </article>
  1119.  
  1120. <!-- this is separate link block -->
  1121. <article class="links">
  1122. <div class="links-top">
  1123. <b>link block title</b>
  1124. <i class="ti ti-star"></i>
  1125. </div>
  1126. <div class="links-mid">
  1127. <div class="linksection long">
  1128. <div class="lstitle">subtitle</div>
  1129. <div class="lslinks">
  1130. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag one</b></a>
  1131. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag two</b></a>
  1132. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag three</b></a>
  1133. </div>
  1134. <div class="lslinks">
  1135. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag four</b></a>
  1136. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag five</b></a>
  1137. <a href="/tagged/"><i class="ti ti-tag"></i><b>tag six</b></a>
  1138. </div>
  1139. </div>
  1140. <div class="linksection">
  1141. <div class="lstitle">subtitle</div>
  1142. <div class="lslinks">
  1143. <a href="/"><i class="ti ti-link"></i><b>link one</b></a>
  1144. <a href="/"><i class="ti ti-link"></i><b>link two</b></a>
  1145. <a href="/"><i class="ti ti-link"></i><b>link three</b></a>
  1146. </div>
  1147. </div>
  1148. <div class="linksection">
  1149. <div class="lstitle">subtitle</div>
  1150. <div class="lslinks">
  1151. <a href="/"><i class="ti ti-link"></i><b>link one</b></a>
  1152. <a href="/"><i class="ti ti-link"></i><b>link two</b></a>
  1153. <a href="/"><i class="ti ti-link"></i><b>link three</b></a>
  1154. </div>
  1155. </div>
  1156. </div>
  1157. </article>
  1158.  
  1159. </section><!-- section ends -->
  1160.  
  1161. <!----- FOOTER: no need to change anything here ----->
  1162. <footer>
  1163. <div class="footerleft">
  1164. <!--- SEARCH BAR --->
  1165. <div id="search">
  1166. <i class="ti ti-search"></i>
  1167. <form class="search" action="javascript:return false">
  1168. <input type="text" class="query" placeholder="search">
  1169. </form>
  1170. </div>
  1171. </div>
  1172. <!-- NAVIGATION --->
  1173. <div class="footermid">
  1174. <a title="home" href="/"><i class="ti ti-home"></i></a>
  1175. <a title="contact" href="/ask"><i class="ti ti-message-dots"></i></a>
  1176. <a title="archive" href="/archive"><i class="ti ti-archive"></i></a>
  1177. </div>
  1178. <div class="footerright">
  1179. <a title="toggle sidebars" class="sidebarbutton"><i class="ti ti-layout-board"></i></a>
  1180.  
  1181. <!--- CREDIT: DO NOT TOUCH --->
  1182. <a class="credit" title="page by sage" href="https://phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  1183. </div>
  1184. </footer>
  1185.  
  1186. </main><!-- end of main container -->
  1187.  
  1188. <script>
  1189.  
  1190. // tooltips
  1191. tippy('[title]', {
  1192. theme: 'custom',
  1193. arrow: false,
  1194. followCursor: true,
  1195. delay: 100,
  1196. placement: 'bottom',
  1197. offset: "40, 10",
  1198. zIndex: 9999999999,
  1199. maxWidth: 400,
  1200.  
  1201. content(reference) {
  1202. const title = reference.getAttribute('title');
  1203. reference.removeAttribute('title');
  1204. return title;
  1205. },
  1206. });
  1207.  
  1208. // searchbar
  1209. $(document).ready(function(){
  1210. $('.search').submit(function(event){
  1211. var value = $('input:first').val();
  1212. location.replace('http://{Name}.tumblr.com/search/' + value);
  1213. });
  1214. });
  1215.  
  1216. // scroll to top
  1217. $(document).ready(function(){
  1218. $('a#totop').click(function(){
  1219. $('html, body').animate({scrollTop : 0},800);
  1220. return false;
  1221. });
  1222. });
  1223.  
  1224. // tumblr controls
  1225. $(document).ready(function(){
  1226. $('#controlsbutton').click(function(){
  1227. $('body').toggleClass('controlsclick');
  1228. });
  1229. });
  1230.  
  1231. // day/night mode
  1232. const toggle = document.getElementById("theme-toggle");
  1233.  
  1234. toggle.onclick = function () {
  1235. // add class to html and make transition snappy
  1236. document.documentElement.classList.add("theme-transition");
  1237. // alright lets retrive the info from data-theme
  1238. let currentTheme = document.documentElement.getAttribute("data-theme");
  1239. // if it's dark already, let's go into the light
  1240. let targetTheme = "light";
  1241. // but if it is light let's toggle dark mode
  1242. if (currentTheme === "light") {
  1243. targetTheme = "dark";
  1244. }
  1245. // ok now that theme has been toggled, get rid of snappy transition
  1246. window.setTimeout(function () {
  1247. document.documentElement.classList.remove("theme-transition");
  1248. }, 50);
  1249. // we're going to save our theme preference now
  1250. document.documentElement.setAttribute("data-theme", targetTheme);
  1251. localStorage.setItem("theme", targetTheme);
  1252. };
  1253.  
  1254. </script>
  1255.  
  1256. </body>
  1257. </html>
Advertisement
Add Comment
Please, Sign In to add comment