Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | STARBURST ABOUT BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- SEARCH 'EDIT HERE'
- CREDITS:
- - phosphor icons / phosphoricons.com
- - tabler icons / https://tabler-icons.io/ <-- you'll use these icons
- - tippy.js tooltips / https://atomiks.github.io/tippyjs/
- - bunny fonts / https://fonts.bunny.net/
- ---->
- <!---- JQUERY ---->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!--- FILTERS --->
- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
- <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
- <!----- BUNNY FONTS ---->
- <link href="https://fonts.bunny.net/css?family=Urbanist: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" />
- <!---- ICONS ---->
- <script src="https://unpkg.com/phosphor-icons"></script>
- <script src="https://unpkg.com/[email protected]"></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
- <!---- TOOLTIPS ---->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <!--- day/night --->
- <script>
- const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
- if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
- </script>
- <!------- CSS -------->
- <style>
- :root {
- /*---- EDIT HERE | VARIABLES ----*/
- --Corners:15px; /*-- 0px, 5px, 10px, or 15px recommended --*/
- --Glow:0 0 10px; /*-- change to 0 if you don't want the glow --*/
- /*---- EDIT HERE | FONT STYLE -----*/
- --BodyFont:'Urbanist'; /*-- command+f to find & replace font names --*/
- --TitleFont:'Montserrat Alternates';
- --FontSize:15px;
- /*--- EDIT HERE | GRADIENT COLORS ---*/
- --ColorGradientOne:#e19eb4;
- --ColorGradientTwo:#e6be89;
- --ColorGradientText:#fff;
- --ColorGradientAccent:#ffd3e4;
- --ColorGradientAccentTwo:#ffefd6;
- /* don't change these */
- --ColorOpacity:rgba(255,255,255,.25);
- --ColorReverseOpacity:rgba(0,0,0,.05);
- }
- html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- /* EDIT HERE | LIGHT MODE COLORS */
- --ColorBackground:#eaeaea;
- --ColorPosts:#fff;
- --ColorBorders:#ddd;
- --ColorTitle:#333;
- --ColorText:#666;
- --ColorLink:#cd7596;
- --ColorAccent:#e67da4;
- /* don't change this */
- --ColorSwitchOpacity:rgba(0,0,0,.05);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- /* EDIT HERE | DARK MODE COLORS */
- --ColorBackground:#222;
- --ColorPosts:#3a3a3a;
- --ColorBorders:#555;
- --ColorTitle:#fff;
- --ColorText:#ccc;
- --ColorLink:#ffb8d7;
- --ColorAccent:#ffcae1;
- /* don't change this */
- --ColorSwitchOpacity:rgba(255,255,255,.05);
- }
- html.theme-transition,
- html.theme-transition *,
- html.theme-transition *:before,
- html.theme-transition *:after {
- transition: 0s !important;
- transition-delay: 0 !important;
- }
- .light-on{
- display: var(--LightOn);
- }
- .light-off{
- display: var(--LightOff);
- }
- /*--- TOOLTIPS ---*/
- .tippy-tooltip.custom-theme {
- font-family:var(--TitleFont), sans-serif;
- font-size:.9em;
- color:var(--ColorTitle);
- text-transform:lowercase;
- text-align:center;
- letter-spacing:.1em;
- margin-bottom:.5em;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:0 4px 10px 2px rgba(0,0,0,.1);
- }
- /*--- SCROLLBAR ---*/
- ::-webkit-scrollbar {
- width:5px;
- height:5px;
- background:var(--ColorBackground);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorBackground);
- border-radius: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius: 5px;
- }
- /*--- TEXT SELECTION ---*/
- ::-moz-selection { /* Code for Firefox */
- color:var(--ColorPosts);
- background:var(--ColorAccent);
- }
- ::selection {
- color:var(--ColorPosts);
- background:var(--ColorAccent);
- }
- /*--- COMMON ---*/
- body {
- font-family:var(--BodyFont), sans-serif;
- font-size:var(--FontSize);
- color: var(--ColorText);
- background-color: var(--ColorBackground);
- line-height:140%;
- word-wrap:break-word;
- letter-spacing:.04em;
- margin:0;
- }
- a {
- color:var(--ColorLink);
- text-decoration: none;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a:hover {
- color: var(--ColorAccent);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- .pd-text a {
- position:relative;
- white-space:nowrap;
- border-bottom:2px solid var(--ColorBorders);
- }
- .pd-text a:after {
- content:'';
- position:absolute;
- width:100%;
- transform:scaleX(0);
- height:2px;
- bottom:-2px;
- left:0;
- background-color:var(--ColorLink);
- border-radius:5px;
- transform-origin:middle;
- transition: transform 0.25s ease-out;
- }
- .pd-text a:hover:after {
- transform: scaleX(1);
- transform-origin:middle;
- }
- button {font-size:1em;}
- blockquote {
- border-left:2px solid var(--ColorBorders);
- padding-left:.75em;
- margin-left:1em;
- }
- li {list-style-type:circle;}
- li::marker {color:var(--ColorAccent)}
- h1, h1 a, h2, h3, h4, h5 {
- font-family:var(--TitleFont), sans-serif;
- letter-spacing:.1em;
- color:var(--ColorTitle);
- }
- h1 {font-size:1.3em;}
- h2 {font-size:1.2em;}
- h3 {font-size:1.1em; padding:0 0 .5em 0; margin:0; display:inline-block;}
- h4 {font-size:1.05em;}
- h5 {font-size:1.025em;}
- h1 a:hover {color:var(--ColorAccent);}
- h4 {margin:0 0 1em 0; text-align:center;}
- h5 {margin:0; padding:0;}
- small {font-size: 0.95em;}
- big {font-size: 1.1em;}
- hr {
- height: 1px;
- border: none;
- box-shadow: none;
- background-color: var(--ColorBorders);
- }
- pre {
- line-height: inherit;
- font-size: inherit;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- }
- b, strong {
- color:var(--ColorTitle);
- font-weight:800;
- }
- b a:hover {
- color:var(--ColorAccent);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- /*--- HEADER ---*/
- header {
- position:fixed;
- top:0;
- width:100%;
- height:50px;
- display:flex;
- justify-content:center;
- align-items:center;
- gap:1em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- z-index:9999;
- }
- /* header middle */
- .topmid {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .topmid a {
- display:flex;
- align-items:center;
- font-family:var(--TitleFont), sans-serif;
- font-size:1.1em;
- font-weight:500;
- color:var(--ColorGradientText);
- white-space:nowrap;
- }
- .topmid a:hover {transform:scale(.95);}
- /* header left & right */
- .topleft {
- position:absolute;
- left:.5em;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- a.headericon {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:0!important;
- border:3px dotted var(--ColorOpacity);
- }
- a.headericon:hover {background:none!important; border:3px dotted var(--ColorGradientAccent);}
- a.headericon img {
- width:2em;
- height:2em;
- padding:2px;
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.headericon:hover img {transform:rotate(10deg) scale(.95);}
- .topright {
- position:absolute;
- right:.5em;
- height:100%;
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- }
- .topleft a, .topright a {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.4em;
- border:3px dotted var(--ColorOpacity);
- border-radius:100%;
- }
- .topleft a:hover {border:3px dotted var(--ColorGradientAccent);}
- .topright a:hover {border:3px dotted var(--ColorGradientAccentTwo);}
- .topleft i, .topright i {
- font-size:1.4em;
- color:var(--ColorGradientText);
- text-shadow:var(--Glow);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .topleft a:hover i {transform:scale(.95);}
- /* DAY/NIGHT */
- button#theme-toggle {
- outline:none;
- border:none;
- height:100%;
- padding:0;
- background:transparent;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- button#theme-toggle span {
- position:relative;
- justify-content:center;
- align-items:center;
- padding:.4em;
- border:3px dotted var(--ColorOpacity);
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- cursor:help;
- }
- button#theme-toggle span:hover {border:3px dotted var(--ColorGradientAccentTwo);}
- button#theme-toggle span:hover i {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:daynight;
- -moz-animation-name:daynight;
- }
- @keyframes daynight {
- 50% {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- }
- a#sidebarbutton {display:none; cursor:help;}
- body.sidebar-click a#sidebarbutton {border:3px dotted var(--ColorGradientAccentTwo);}
- /* TUMBLR CONTROLS */
- a#controlsbutton {cursor:help;}
- body.controls-click a#controlsbutton {border:3px dotted var(--ColorGradientAccentTwo);}
- a#controlsbutton:hover i {
- -webkit-animation-duration: 1.5s;
- animation-duration: 1.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:tumblrcontrols;
- -moz-animation-name:tumblrcontrols;
- }
- @keyframes tumblrcontrols {
- 45% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 55% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- transform:scale(.75);
- margin-top:50px;
- margin-right:-1em;
- opacity:0;
- visibility:hidden;
- z-index:999999999!important;
- }
- body.controls-click iframe.tmblr-iframe {
- opacity:1.0;
- visibility:visible;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- -ms-transition: all 0.5s;
- -o-transition: all 0.5s;
- transition: all 0.5s;
- }
- /*---- FIXED BUTTONS ----*/
- .fixedbuttons {
- position:fixed;
- right:.5em;
- bottom:.5em;
- display:flex;
- flex-direction:column;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:50px;
- z-index:9999;
- }
- .fixedbuttons a {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.6em;
- }
- .fixedbuttons i {
- font-size:1.4em;
- color:var(--ColorGradientText);
- text-shadow:var(--Glow);
- }
- /* SCROLL TO TOP */
- a#totop {
- display:none;
- cursor:help;
- }
- a#totop:hover i {
- -webkit-animation-duration: 2.5s;
- animation-duration: 2.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:totop;
- -moz-animation-name:totop;
- }
- @keyframes totop {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 10% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 20% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 30% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 40% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 60% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 70% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 80% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 90% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a.credit {
- }
- a.credit i {
- font-size:1.5em;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.credit:hover i {
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:infinite;
- -webkit-animation-iteration-count:infinite;
- animation-name: bounce;
- -moz-animation-name: bounce;
- }
- @keyframes bounce {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 25% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 75% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*---- MAIN CONTAINER ----*/
- main {
- width:100%;
- display:flex;
- justify-content:flex-start;
- gap:5em;
- }
- /*--- SIDEBAR ---*/
- aside {width:calc(200px + .5em);}
- #sidebar {
- position:fixed;
- top:calc(50px + 3.5em);
- left:.5em;
- bottom:3.5em;
- width:200px;
- height:calc(100% - 50px - 7em);
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- z-index:999;
- }
- .sidebar-top {
- width:100%;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:center;
- gap:1em;
- padding-top:1em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:var(--Corners);
- }
- .profileimg {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .profileimg img {
- width:80px;
- height:80px;
- object-fit:cover;
- padding:4px;
- background:var(--ColorGradientAccent);
- border-radius:100%;
- }
- /* SEARCH BAR */
- #search {
- position:relative;
- width:calc(100% - 2em);
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- padding:.5em 1em .75em 1em;
- border-top:3px dotted var(--ColorOpacity);
- }
- #search i {
- font-size:1.3em;
- color:var(--ColorGradientText);
- text-shadow:var(--Glow);
- }
- .search {width:100%;}
- .search .query {
- border: 0;
- outline: 0;
- font-family:var(--TitleFont), sans-serif;
- font-size:.9em;
- color:var(--ColorGradientText);
- width:100%;
- height:100%;
- letter-spacing:.05em;
- background:transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- ::-webkit-input-placeholder {color: inherit; opacity:.9;}
- :-moz-placeholder {color: inherit; opacity:.9;}
- ::-moz-placeholder {color: inherit; opacity:.9;}
- :-ms-input-placeholder {color: inherit; opacity:.9;}
- input:focus::-webkit-input-placeholder {color: transparent;}
- input:focus:-moz-placeholder {color: transparent;}
- input:focus::-moz-placeholder {color: transparent;}
- input:focus:-ms-input-placeholder { color: transparent;}
- .sidebar-mid {
- width:100%;
- display:flex;
- flex-direction:column;
- overflow:hidden;
- border-radius:var(--Corners);
- }
- /*- FILTERS -*/
- .sort {
- width:calc(100% - 2em);
- overflow-y:auto;
- padding:1em;
- display:flex;
- flex-direction:column;
- gap:.5em;
- background:var(--ColorPosts);
- }
- .sort::-webkit-scrollbar {
- width:3px;
- height:3px;
- background:transparent;
- }
- .sort::-webkit-scrollbar-track {margin-top:1em; background:transparent;}
- .filtertitle {
- width:fit-content;
- font-family:var(--TitleFont), sans-serif;
- font-size:.95em;
- font-weight:500;
- color:var(--ColorTitle);
- letter-spacing:.1em;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- }
- .filterbox:nth-of-type(odd) .filtertitle {border-bottom:3px dotted var(--ColorGradientOne);}
- .filterbox:nth-of-type(even) .filtertitle {border-bottom:3px dotted var(--ColorGradientTwo);}
- .filterbox ul {
- padding:0;
- margin-top:.5em;
- display:flex;
- flex-direction:column;
- gap:.5em;
- }
- .filterbox a {
- width:calc(100% - 1.25em);
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- cursor:help;
- }
- .filterbox a i {
- font-size:1.5em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .filterbox a#all i {font-size:1.3em;}
- .filterbox a:hover i, .filterbox a.selected i {margin-left:1em; transform:rotate(180deg);}
- .filterbox b {
- font-size:.95em;
- font-weight:normal;
- letter-spacing:.1em;
- text-align:right;
- -webkit-text-fill-color:var(--ColorText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .filterbox a.selected b {
- font-weight:bold;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- nav {
- width:calc(100% - 2em);
- display:flex;
- justify-content:space-evenly;
- align-items:flex-start;
- gap:.5em;
- padding:.5em 1em .5em 1em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- nav a {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.3em;
- border:3px dotted var(--ColorOpacity);
- border-radius:100%;
- }
- nav a:hover {border:3px dotted var(--ColorGradientText);}
- nav i {
- font-size:1.3em;
- color:var(--ColorGradientText);
- text-shadow:var(--Glow);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- nav a:hover i {transform:scale(.95);}
- .sidebar-title {
- font-family:var(--TitleFont), sans-serif;
- font-size:.95em;
- font-weight:500;
- color:var(--ColorGradientText);
- width:calc(100% - 2em);
- padding:.5em 1em .75em 1em;
- text-align:center;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-top:3px dotted var(--ColorOpacity);
- }
- /*--- MAIN CONTENT ---*/
- section {
- width:calc(100% - 4em);
- margin-top:calc(50px + 3em);
- margin-bottom:4em;
- margin-left:2em;
- margin-right:2em;
- }
- /*-- PROJECTS --*/
- .project {
- position:relative;
- width:100%;
- max-width:900px;
- height:500px;
- display:flex;
- flex-direction:column;
- margin:.5em;
- overflow:hidden;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- }
- .project-top {
- width:100%;
- height:100px;
- display:flex;
- flex-direction:column;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .project-topper {
- width:100%;
- height:100%;
- opacity:.25;
- background:linear-gradient(to right, var(--ColorGradientAccent), var(--ColorGradientAccentTwo));
- }
- .project-img {
- position:absolute;
- top:-35px;
- left:1em;
- width:70px;
- height:70px;
- display:flex;
- justify-content:center;
- align-items:center;
- background:linear-gradient(to bottom, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- }
- .project-img img {
- width:64px;
- height:64px;
- object-fit:cover;
- border-radius:100%;
- }
- .project-title {
- position:relative;
- width:calc(100% - 2em);
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- padding:.5em 1em .5em 1em;
- }
- .project-title b {
- margin-left:70px;
- font-family:var(--TitleFont), sans-serif;
- font-size:1.05em;
- font-weight:600;
- color:var(--ColorGradientText);
- }
- /* project links */
- .project-links {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- }
- .project-links a {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.3em;
- border:3px dotted var(--ColorOpacity);
- border-radius:100%;
- }
- .project-links a:hover {border:3px dotted var(--ColorGradientAccentTwo);}
- .project-links i {
- font-size:1.2em;
- color:var(--ColorGradientText);
- text-shadow:var(--Glow);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .project-links a:hover i {transform:scale(.95);}
- .project-mid {
- width:100%;
- height:400px;
- overflow-y:auto;
- display:flex;
- flex-wrap:wrap;
- }
- .project-mid::-webkit-scrollbar {
- width:3px;
- height:3px;
- background:transparent;
- }
- .project-mid::-webkit-scrollbar-track {background:transparent;}
- .pm-title {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- padding-bottom:.25em;
- border-bottom:3px dotted var(--ColorBorders);
- }
- .pm-title b {
- font-family:var(--TitleFont), sans-serif;
- font-weight:normal;
- color:var(--ColorTitle);
- }
- .pm-title i {
- font-size:1.3em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /* stats */
- .project-stats {
- width:calc(65% - 1.5em);
- padding:1em .5em .5em 1em;
- display:flex;
- flex-direction:column;
- gap:.5em;
- }
- .ps-content {
- display:flex;
- flex-wrap:wrap;
- gap:.5em 1em;
- }
- .ps-content li {
- display:flex;
- align-items:flex-start;
- gap:.5em;
- }
- .ps-content b {
- font-weight:600;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /* triggers */
- .project-trig {
- width:calc(35% - 1.5em);
- padding:1em 1em .5em .5em;
- display:flex;
- flex-direction:column;
- gap:.5em;
- }
- .pt-content {
- display:flex;
- flex-wrap:wrap;
- gap:.5em 1em;
- }
- .pt-content li {
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.5em;
- }
- .pt-content span {}
- .pt-content i {
- font-size:1.3em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /* summary */
- .project-desc {
- width:calc(100% - 2em);
- padding:1em 1em .5em 1em;
- display:flex;
- flex-direction:column;
- gap:.5em;
- }
- .pd-text {
- width:100%;
- max-height:150px;
- overflow-y:auto;
- text-align:left;
- }
- .pd-text li {margin-left:.25em;}
- .pd-text p {margin-bottom:0;}
- .pd-text::-webkit-scrollbar {
- width:2px;
- height:2px;
- background:transparent;
- }
- .pd-text::-webkit-scrollbar-track {background:transparent;}
- /* characters */
- .project-chara {
- width:calc(65% - 1.5em);
- padding:.5em .5em 1em 1em;
- display:flex;
- flex-direction:column;
- gap:.75em;
- }
- .pc-content {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:.5em;
- }
- .chara {
- width:calc(50% - .25em);
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .chara a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .chara img {
- width:45px;
- height:45px;
- object-fit:cover;
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .chara a:hover img {transform:scale(.95) rotate(10deg);}
- .chara li {
- display:flex;
- flex-direction:column;
- }
- .chara b {
- width:fit-content;
- line-height:110%;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- border-bottom:2px dotted var(--ColorBorders);
- }
- .chara span {}
- /* status */
- .project-status {
- width:calc(35% - 1.5em);
- padding:.5em 1em 1em .5em;
- display:flex;
- flex-direction:column;
- gap:.75em;
- }
- .statuses {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:.5em;
- }
- .status {
- width:100%;
- display:flex;
- flex-direction:column;
- }
- .status-title {
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- }
- .status-title b {
- font-weight:normal;
- color:var(--ColorText);
- }
- .status-title span {
- font-family:var(--TitleFont), sans-serif;
- font-size:.95em;
- font-weight:600;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .progress {
- position:relative;
- width:100%;
- height:6px;
- overflow:hidden;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- background:var(--ColorBorders);
- border-radius:var(--Corners);
- }
- .progressbar {
- position:absolute;
- top:0;
- left:0;
- height:100%;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- transform:skew(-25deg);
- }
- /*---- RESPONSIVENESS ----*/
- @media only screen and (max-width: 1100px) {
- }
- @media only screen and (max-width: 900px) {
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton {display:none;}
- a#sidebarbutton {display:flex;}
- aside {display:none;}
- body.sidebar-click aside {display:flex;}
- }
- @media only screen and (max-width: 700px) {
- .chara {width:calc(100% - 2em);}
- }
- @media only screen and (max-width: 450px) {
- section {width:calc(100% - .5em); margin-top:auto; margin-bottom:1em; margin-left:auto; margin-right:auto;}
- }
- {CustomCSS}
- </style>
- </head>
- <!----- HTML ----->
- <body>
- <main> <!-- main container -->
- <!-- HEADER --->
- <header>
- <div class="topleft">
- <a class="headericon" title="follow @{Name}" href="//tumblr.com/follow/{Name}"><img src="{PortraitURL-128}"></a>
- </div><!-- .topleft -->
- <div class="topmid"><a href="/">{Title}</a></div>
- <div class="topright">
- <a id="sidebarbutton" title="toggle sidebar"><i class="ph-sidebar"></i></a>
- <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
- <span class="light-on" title="turn off the lights"><i class="ph-moon"></i></span>
- <span class="light-off" title="turn on the lights"><i class="ph-sun"></i></span>
- </button>
- <a title="toggle controls" id="controlsbutton"><i class="ph-gear"></i></a>
- </div>
- </header>
- <div class="fixedbuttons">
- <a id="totop" title="back to top" href="#top" target="_self"><i class="ph-arrow-up"></i></a>
- <!--- CREDIT: DO NOT TOUCH --->
- <a title="page by sage" class="credit" href="//phantomcodes.tumblr.com"><i class="ph-ghost"></i></a>
- </div>
- <!-- SIDEBAR -->
- <aside>
- <div id="sidebar">
- <div class="sidebar-top">
- <div class="profileimg"><img src="{PortraitURL-128}"></div>
- <!--- SEARCH BAR --->
- <div id="search">
- <i class="ph-magnifying-glass"></i>
- <form class="search" action="javascript:return false">
- <input type="text" class="query" placeholder="search blog">
- </form>
- </div>
- </div>
- <div class="sidebar-mid">
- <!-- EDIT HERE: FILTERS -->
- <div class="sort">
- <div class="filterbox">
- <div class="filtertitle">status</div>
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <a href="#" data-filter-value="" class="selected" id="all"><i class="ti ti-plus"></i><b>all</b></a>
- <a href="#" data-filter-value=".f1"><i class="ti ti-caret-left"></i><b>filter one</b></a>
- <a href="#" data-filter-value=".f2"><i class="ti ti-caret-left"></i><b>filter two</b></a>
- </ul>
- </div><!-- .filterbox -->
- <div class="filterbox">
- <div class="filtertitle">genre</div>
- <ul class="filter option-set" data-filter-group="group2">
- <a href="#" data-filter-value="" class="selected" id="all"><i class="ti ti-plus"></i><b>all</b></a>
- <a href="#" data-filter-value=".f3"><i class="ti ti-caret-left"></i><b>filter three</b></a>
- <a href="#" data-filter-value=".f4"><i class="ti ti-caret-left"></i><b>filter four</b></a>
- <a href="#" data-filter-value=".f5"><i class="ti ti-caret-left"></i><b>filter five</b></a>
- <a href="#" data-filter-value=".f6"><i class="ti ti-caret-left"></i><b>filter six</b></a>
- </ul>
- </div><!-- .filterbox -->
- </div><!-- .sort -->
- <nav><!-- EDIT HERE: NAVIGATION LINKS -->
- <a title="home" href="/"><i class="ti ti-home"></i></a>
- <a title="contact" href="/"><i class="ti ti-message"></i></a>
- <a title="archive" href="/"><i class="ti ti-archive"></i></a>
- <a title="characters page" href="/"><i class="ti ti-list-details"></i></a>
- </nav>
- </div><!-- .sidebar-mid -->
- </div><!-- #sidebar -->
- </aside>
- <section><!-- MAIN CONTENT / PROJECTS START -->
- <!-- project starts -->
- <div class="project f1 f3 f4">
- <div class="project-top">
- <div class="project-topper"></div>
- <div class="project-title">
- <div class="project-img"><img src=""></div>
- <b>project one title</b>
- <!-- project links -->
- <div class="project-links">
- <a title="read project" href="/"><i class="ti ti-book"></i></a>
- <a title="characters tag" href="/"><i class="ti ti-users"></i></a>
- <a title="link" href="/"><i class="ti ti-link"></i></a>
- </div>
- </div>
- </div>
- <div class="project-mid"><!-- project content -->
- <div class="project-stats"><!-- info -->
- <div class="pm-title"><i class="ti ti-info-circle"></i><b>info</b></div>
- <div class="ps-content">
- <li><b>rating</b><span>rating</span></li>
- <li><b>status</b><span>status</span></li>
- <li><b>genre</b><span>genre</span></li>
- <li><b>started</b><span>date</span></li>
- <li><b>word count</b><span>number</span></li>
- </div>
- </div><!-- info ends -->
- <div class="project-trig"><!-- triggers -->
- <div class="pm-title"><i class="ti ti-flag"></i><b>triggers</b></div>
- <div class="pt-content">
- <li><i class="ti ti-alert-octagon"></i><span>trigger</span></li>
- <li><i class="ti ti-alert-octagon"></i><span>trigger</span></li>
- <li><i class="ti ti-alert-octagon"></i><span>trigger</span></li>
- </div>
- </div><!-- triggers ends -->
- <div class="project-desc"><!-- summary -->
- <div class="pm-title"><i class="ti ti-writing"></i><b>summary</b></div>
- <div class="pd-text">
- summary/description goes here. this section will scroll if it gets too long
- </div>
- </div><!-- summary ends -->
- <div class="project-chara"><!-- characters -->
- <div class="pm-title"><i class="ti ti-friends"></i><b>main characters</b></div>
- <div class="pc-content">
- <div class="chara"><!-- character -->
- <a href="/"><img src=""></a>
- <li><b>NAME</b><span>subtitle</span></li>
- </div><!-- character -->
- <div class="chara"><!-- character -->
- <a href="/"><img src=""></a>
- <li><b>NAME</b><span>subtitle</span></li>
- </div><!-- character -->
- <div class="chara"><!-- character -->
- <a href="/"><img src=""></a>
- <li><b>NAME</b><span>subtitle</span></li>
- </div><!-- character -->
- <div class="chara"><!-- character -->
- <a href="/"><img src=""></a>
- <li><b>NAME</b><span>subtitle</span></li>
- </div><!-- character -->
- </div>
- </div><!-- characters ends -->
- <div class="project-status"><!-- status -->
- <div class="pm-title"><i class="ti ti-chart-bar"></i><b>status</b></div>
- <div class="statuses">
- <div class="status"><!-- status -->
- <div class="status-title"><b>status title</b><span>50%</span></div>
- <div class="progress"><div style="width:50%;" class="progressbar"></div></div>
- </div><!-- status -->
- <div class="status"><!-- status -->
- <div class="status-title"><b>status title</b><span>50%</span></div>
- <div class="progress"><div style="width:50%;" class="progressbar"></div></div>
- </div><!-- status -->
- <div class="status"><!-- status -->
- <div class="status-title"><b>status title</b><span>50%</span></div>
- <div class="progress"><div style="width:50%;" class="progressbar"></div></div>
- </div><!-- status -->
- </div>
- </div><!-- status ends -->
- </div>
- </div>
- <!-- project ends -->
- </section><!-- section ends -->
- </main><!-- end of main container -->
- <script>
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- followCursor: true,
- delay: 100,
- placement: 'bottom',
- offset: "40, 10",
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- // search function
- $(document).ready(function(){
- $('.search').submit(function(event){
- var value = $('input:first').val();
- location.replace('http://{Name}.tumblr.com/search/' + value);
- });
- });
- // searchbar
- $(document).ready(function(){
- $('#search').click(function(){
- $('body').toggleClass('search-click');
- });
- });
- // scroll to top
- $(document).ready(function(){
- $('a#totop').click(function(){
- $('html, body').animate({scrollTop : 0},800);
- return false;
- });
- });
- var mybutton = document.getElementById("totop");
- window.onscroll = function() {scrollFunction()};
- function scrollFunction() {
- if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
- mybutton.style.display = "flex";
- } else {
- mybutton.style.display = "none";
- }
- }
- // search function
- $(document).ready(function(){
- $('.search').submit(function(event){
- var value = $('input:first').val();
- location.replace('http://{Name}.tumblr.com/search/' + value);
- });
- });
- // searchbar
- $(document).ready(function(){
- $('#search').click(function(){
- $('body').toggleClass('search-click');
- });
- });
- // tumblr controls
- $(document).ready(function(){
- $('a#controlsbutton').click(function(){
- $('body').toggleClass('controls-click');
- });
- });
- //updates tab
- $(document).ready(function(){
- $('a#updatesbutton').click(function(){
- $('body').toggleClass('updates-click');
- $('a#updatesbutton i').toggleClass('ph-bell-simple-slash');
- });
- });
- // sidebar popup
- $(document).ready(function(){
- $('a#sidebarbutton').click(function(){
- $('body').toggleClass('sidebar-click');
- });
- });
- //filters
- $(document).ready(function() {
- var $container = $("section"); // the container with all the elements to filter inside
- var filters = {}; //should be outside the scope of the filtering function
- /* --- read the documentation on isotope.metafizzy.co for more options --- */
- var $grid = $container.isotope({
- itemSelector: ".project", // the elements to filter
- layoutMode: 'fitRows'
- });
- $(".option-set a").click(function(e) {
- var $this = $(this); // cache the clicked link
- var filterAttr = "data-filter-value";
- var filterValue = $this.attr(filterAttr); // cache the filter
- var $optionSet = $this.parents(".option-set"); // cache the parent element
- var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
- var filterGroup = filters[group];
- if (!filterGroup) {
- filterGroup = filters[group] = [];
- }
- var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
- var activeClass = "selected", // the class for active links
- exclClass = "exclusive"; // the class for exclusive groups
- comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
- var comboFilter = getComboFilter(filters);
- $grid.isotope({
- filter: comboFilter
- });
- $this.toggleClass(activeClass);
- e.preventDefault();
- });
- });
- // day/night mode
- const toggle = document.getElementById("theme-toggle");
- toggle.onclick = function () {
- // add class to html and make transition snappy
- document.documentElement.classList.add("theme-transition");
- // alright lets retrive the info from data-theme
- let currentTheme = document.documentElement.getAttribute("data-theme");
- // if it's dark already, let's go into the light
- let targetTheme = "light";
- // but if it is light let's toggle dark mode
- if (currentTheme === "light") {
- targetTheme = "dark";
- }
- // ok now that theme has been toggled, get rid of snappy transition
- window.setTimeout(function () {
- document.documentElement.classList.remove("theme-transition");
- }, 50);
- // we're going to save our theme preference now
- document.documentElement.setAttribute("data-theme", targetTheme);
- localStorage.setItem("theme", targetTheme);
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment