Page 13 - Seafoam About

<!
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">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>


<link href="https://fonts.bunny.net/css?
family=Nunito:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i"
rel="stylesheet" />
<link href="https://fonts.bunny.net/css?
family=Quicksand:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i"
rel="stylesheet" />


<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://unpkg.com/phosphor-icons@1.4.0"></script>


<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>


<script>
const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-
color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
</script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>


<style type="text/css">
:root {
/*---- EDIT HERE: DEFAULT COLORS -----*/

--background:#b8c7cc;
--content:#c3d2d7;
--title:#02536d;
--text:#3f5e68;
--link:#00778c;
--accent:#2194a8;
--borders:#afc1c6;
/*--- EDIT HERE: DARK MODE COLORS ---*/

--night-background:#202224;
--night-content:#282c2f;
--night-title:#95e4ea;
--night-text:#a2b5bb;
--night-link:#55bed1;
--night-accent:#6cd5e7;
--night-borders:#323639;
/*--- EDIT HERE: GRADIENT COLORS ---*/

--gradient-one:#57929f;
--gradient-two:#9ac4ce;
--gradient-text:#103d4c;
--gradient-accent:#d7f4f8;
/*---- EDIT HERE: VARIABLES & FONTS ---*/

--border-radius:10px; /*-- 0px, 5px, or 10px recommended --*/
--body-font:'Nunito';
--title-font:'Quicksand';
/*-- find (command F) & replace the font names with the ones you want --*/
--font-size:15px;
}
/*--- DAY/NIGHT MODE ---*/
:root, html[data-theme='light'] {
--LightOn: block;
--LightOff: none;
--ColorBackground: var(--background);
--ColorContent: var(--content);
--ColorTitle: var(--title);
--ColorText: var(--text);
--ColorLink: var(--link);
--ColorAccent: var(--accent);
--ColorBorders: var(--borders);
}
html[data-theme='dark'] {
--LightOn: none;
--LightOff: block;
--ColorBackground: var(--night-background);
--ColorContent: var(--night-content);
--ColorTitle: var(--night-title);
--ColorText: var(--night-text);
--ColorLink: var(--night-link);
--ColorAccent: var(--night-accent);
--ColorBorders: var(--night-borders);
}
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
transition: 0s !important;
transition-delay: 0 !important;
}
button#theme-toggle {
outline:none;
height:100%;
position:relative;
padding:.25em .5em 0 .5em;
display:flex;
justify-content:center;
align-items:center;
background:transparent;
border-bottom:2px solid transparent;
border:0;
cursor:help;
}
button#theme-toggle:after {
content: '';
position:absolute;
opacity:.5;
width:100%;
transform:scaleX(0);
height:2px;
bottom:-2px;
left:0;
background-color:var(--ColorAccent);
transform-origin:center;
transition: transform 0.25s ease-out;
}
button#theme-toggle:hover:after {
transform: scaleX(1);
}
button#theme-toggle:hover {background:rgba(255,255,255,.1);}
button#theme-toggle i {
font-size:1.4em;
color:var(--ColorTitle);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
button#theme-toggle:hover i {
color:var(--ColorAccent);
transform:rotate(-360deg);
}
.light-on{
display: var(--LightOn);
}
.light-off{
display: var(--LightOff);
}
/*----- TOOLTIPS -----*/
.tippy-tooltip.custom-theme {
background:var(--ColorContent);
text-align:center;
text-transform:uppercase;
letter-spacing:.1em;
font-size:.95em;
border-radius:var(--border-radius);
border:1px solid var(--ColorTitle);
margin-bottom:.5em;
}
/*--- SCROLLBAR ---*/

::-webkit-scrollbar {
width:5px;
height:5px;
background:var(--ColorBackground);
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background:linear-gradient(to top, var(--gradient-one), var(--gradient-two));
border-radius: 5px;
}
/*--- TEXT SELECTION ---*/

::-moz-selection { /* Code for Firefox */
color:var(--gradient-text);
background:var(--ColorAccent);
}
::selection {
background:var(--ColorAccent);
}
/*----- BASIC STYLING -----*/

body {
font-family: var(--body-font), sans-serif;
font-size: var(--font-size);
color: var(--ColorText);
line-height:140%;
word-wrap: break-word;
margin:0;
padding:0;
transition:.5s;
}
a {
color:var(--ColorLink);
text-decoration: none;
}
a:hover {
color: var(--ColorAccent);
}
#hua {
display: inline-block;
position: relative;
}
#hua:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--ColorLink);
transform-origin: bottom right;
}
#hua:hover:after {
transform-origin: bottom left;
}
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(--title-font), sans-serif;
}
h1 {font-size:1.3em;}
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 {
font-weight:800;
}
b a:hover {
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
z-index: 999999999!important;
margin-top:3em;
transform:scale(.9);
opacity:0;
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
opacity:1;
}
/*--- HEADER ---*/

header {
position:fixed;
top:0;
left:0;
right:0;
height:3em;
display:flex;
justify-content:space-between;
align-items:center;
gap:1em;
border-bottom:2px solid var(--ColorBorders);
z-index:9999;
}
/*--- HEADER LEFT ---*/
.headerleft {
height:100%;
display:flex;
justify-content:flex-start;
align-items:center;
}
.sideicon {
margin-left:.5em;
margin-right:.5em;
width:2em;
height:2em;
}
.sideicon img {
width:2em;
height:2em;
border-radius:100%;
}
.headername {
height:100%;
display:flex;
align-items:center;
}
.headername a {
font-weight:bold;
position:relative;
height:100%;
display:flex;
align-items:center;
padding:0 .5em 0 .5em;
}
.headername a:after {
content: '';
position:absolute;
opacity:.5;
width:100%;
height:2px;
bottom:-2px;
left:0;
}
.headername a:hover:after {
}
.headername a:hover {color:var(--ColorAccent); background:rgba(255,255,255,.1);}
nav {
height:100%;
display:flex;
align-items:center;
}
nav a {
position:relative;
height:100%;
display:flex;
align-items:center;
}
nav a:after {
content: '';
position:absolute;
opacity:.5;
width:100%;
height:2px;
bottom:-2px;
left:0;
}
nav a:hover:after {
}
nav a:hover {background:rgba(255,255,255,.1);}
nav i {
font-style:normal;
font-weight:500;
}
nav a:hover i {
}
@keyframes jiggle {
0% {
-webkit-transform: skew(0);
-ms-transform: skew(0);
transform: skew(0)
}
25% {
-webkit-transform: skew(12deg);
-ms-transform: skew(12deg);
transform: skew(12deg);
}
50% {
-webkit-transform: skew(-12deg);
-ms-transform: skew(-12deg);
transform: skew(-12deg)
}
75% {
transform: skew(5deg)
}
85% {
transform: skew(2deg)
}
100% {
-webkit-transform: skew(0);
-ms-transform: skew(0);
transform: skew(0)
}
}
/*--- HEADER RIGHT ---*/
.headerright {
height:100%;
display:flex;
justify-content:flex-end;
align-items:center;
}
.headertitle {
height:100%;
display:flex;
align-items:center;
}
.headertitle a {
font-weight:bold;
position:relative;
height:100%;
display:flex;
align-items:center;
}
.headertitle a:after {
content: '';
position:absolute;
opacity:.5;
width:100%;
height:2px;
bottom:-2px;
left:0;
}
.headertitle a:hover:after {
}
.headertitle a:hover {color:var(--ColorAccent); background:rgba(255,255,255,.1);}
/*--- UPDATES TAB ---*/
.dropdown {height:100%; display:flex; justify-content:flex-end; align-

items:center;}
a.cthrough {
position:relative;
height:100%;
display:flex;
align-items:center;
cursor:help;
}
a.cthrough:after {
content: '';
position:absolute;
opacity:.5;
width:100%;
height:2px;
bottom:-3px;
left:0;
}
a.cthrough:hover:after {
}
a.cthrough:hover {background:rgba(255,255,255,.1);}
a.cthrough i {
font-size:1.4em;
}
a.cthrough:hover i {
-webkit-animation-duration: 1.25s;
animation-duration: 1.25s;
-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: wiggle;
-moz-animation-name: wiggle;
}
@keyframes wiggle {
0% {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px)
}
15% {
}
30% {
-webkit-transform: rotate(10deg);
-ms-transform: translateX(10deg);
transform: translateX(10deg)
}
45% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg)
}
60% {
-ms-transform: rotate(10deg);
transform: rotate(10deg)
}
75% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg)
}
85% {
-ms-transform: rotate(10deg);
transform: rotate(10deg)
}
100% {
}
}
.sub {
position:absolute;
top:100%;
margin-top:2px;
width:200px;
padding:.5em;
display:flex;
flex-direction:column;
gap:.75em;
box-shadow:-2px 2px 4px rgba(0,0,0,.05);
}
.sub-title {
display:flex;
align-items:center;
padding:0 .5em .25em .5em;
}
.sub-title b {
font-size:1.1em;
font-weight:600;
}
.sub-title i {
font-size:1.4em;
color:var(--ColorTitle);!important;
padding:0;
background:transparent;!important;
}
.subdates {
display:flex;
gap:.5em;
}
.subdates li {
width:100%;
display:flex;
align-items:center;
gap:.5em;
}
.subdates i {
font-size:1.1em;
color:var(--ColorContent);
padding:.35em;
background:var(--ColorTitle);
border-radius:100%;
}
.subdates b {
font-weight:normal;
color:var(--ColorText);
text-align:left;
}
.headerright .searchbutton {
position:relative;
height:100%;
display:flex;
align-items:center;
cursor:help;
}
.headerright .searchbutton:after {
content: '';
position:absolute;
opacity:.5;
width:100%;
height:2px;
bottom:-3px;
left:0;
}
.headerright .searchbutton:hover:after {
}
.headerright .searchbutton:hover {background:rgba(255,255,255,.1);}
.headerright .searchbutton i {
font-size:1.4em;
}
.headerright .searchbutton:hover i {
transform:scale(1.1);
}
/*--- SEARCH BAR ---*/
body.searchup #search {
left:0;
opacity:1;
transition:.5s;
}
#search {
position:fixed;
top:0;
left:-100vw;
bottom:0;
width:100vw;
height:100vh;
opacity:0;
text-align:center;
display:flex;
align-items:center;
gap:1em;
backdrop-filter: blur(2px);
background:rgba(0,0,0,.5);
z-index:99999;
transition:.5s;
}
.searchwrap {
display:flex;
align-items:center;
gap:.5em;
width:50%;
padding:.5em 1em .5em 1em;
background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
border-radius:30px;
}
.searchwrap .searchbutton {cursor:help;}

.searchwrap .searchbutton i {
font-size:1.4em;
color:var(--gradient-accent);
padding:.3em;
border:1px solid rgba(255,255,255,.1);
border-radius:100%;
}
.searchwrap .searchbutton:hover i {
}
.search {
width:100%;
border-radius:30px;
}
.search .query {
border: 0;
outline: 0;
font-size:1em;
width:100%;
}
::-webkit-input-placeholder {color: inherit; opacity:.75;}

:-moz-placeholder {color: inherit; opacity:.75;}
::-moz-placeholder {color: inherit; opacity:.75;}
:-ms-input-placeholder {color: inherit; opacity:.75;}
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;}
.headerright #totop, .followbutton {height:100%;}

.headerright #totop a {
position:relative;
height:100%;
display:flex;
align-items:center;
cursor:help;
}
.followbutton a {
position:relative;
height:100%;
display:flex;
align-items:center;
}
.headerright #totop a:after, .followbutton a:after {

content: '';
position:absolute;
opacity:.5;
width:100%;
height:2px;
bottom:-2px;
left:0;
}
.headerright #totop a:hover:after, .followbutton a:hover:after {

}
.headerright #totop a:hover, .followbutton a:hover
{background:rgba(255,255,255,.1);}
.headerright #totop i, .followbutton i {

font-size:1.4em;
}
.headerright #totop a:hover i {

font-size:1.4em;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
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% {
}
30% {
}
40% {
}
50% {
}
60% {
}
70% {
}
80% {
}
90% {
}
100% {
}
}
.followbutton a:hover i {
transform:scale(1.1);
}
/*----- COMMON -----*/
main {
width:100vw;
height:100vh;
display:flex;
}
section {
width:90%;
position:relative;
margin-top:5em;
margin-bottom:2em;
}
#set {
display:flex;
gap:1em;
}
#maincontent {
width:700px;
max-height:700px;
display:flex;
box-shadow:2px 2px 4px rgba(0,0,0,.05);
z-index:999;
}
#maincontentheader {
width:calc(100% - 1em);
display:flex;
align-items:center;
gap:.5em;
padding:.5em;
cursor:move;
border-radius:var(--border-radius) var(--border-radius) 0 0;
}
#maincontentheader .titleicons {
display:flex;
align-items:center;
gap:.5em;
}
#maincontentheader .titleicons i {
font-size:1.05em;
padding:.3em;
border-radius:100%;
}
#maincontentheader .titlelink {
font-size:1.2em;
font-weight:600;
text-align:left;
}
.titleimg {
width:2em;
height:2em;
border-radius:100%;
padding:2px;
}
.titleimg img {
width:2em;
height:2em;
border-radius:100%;
}
.topbar {
width:100%;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.75em;
background:linear-gradient(to top, var(--gradient-one), var(--gradient-two));
}
.topbar-left {
padding:.5em .75em .5em .75em;
display:flex;
align-items:center;
gap:.5em;
}
.topbarleft-img {
width:100px;
height:100px;
padding:2px;
border-radius:100%;
background:var(--gradient-accent);
}
.topbarleft-img img {
width:100px;
height:100px;
object-fit:cover;
border-radius:100%;
}
.topbarleft-text {
display:flex;
align-items:flex-start;
}
.topbarleft-text b {
font-size:1.1em;
}
.topbarleft-text i {
font-style:normal;
}
.topbar-right {
display:flex;
justify-content:flex-end;
align-items:center;
flex-wrap:wrap;
gap:.5em;
}
.topbar-right li {
display:flex;
align-items:center;
gap:.15em;
}
.topbar-right i {
font-size:1.4em;
padding:.25em;
border-radius:100%;
}
.topbar-right span {
text-align:center;
}
.midbar {
width:100%;
height:100%;
overflow-y:auto;
display:flex;
}
.midbar-left {
overflow-y:auto;
padding:.5em;
display:flex;
gap:.5em;
}
.midbar-left .subtitle {
font-size:1.05em;
font-weight:600;
}
.midbar-links {
width:calc(100% - .5em);
overflow-x:hidden;
padding:.25em;
}
.midbar-links a {
position:relative;
display:flex;
align-items:center;
gap:.5em;
}
.midbar-links i {
font-size:1.4em;
z-index:99;
}
.midbar-links a:hover i {
}
.midbar-links span {
z-index:99;
}
.midbar-links a:hover span {
}
.midbar-blogs {
width:calc(100% - .5em);
overflow-x:hidden;
padding:.25em;
}
.midbar-blogs a {
position:relative;
display:flex;
align-items:center;
gap:.25em;
}
.midbar-blogs img {
width:1.75em;
height:1.75em;
border-radius:100%;
z-index:99;
}
.midbar-blogs a:hover img {
transform:rotate(10deg);
}
.midbar-blogs span {
z-index:99;
}
.midbar-blogs a:hover span {
}
.midbar-socials {
overflow-x:hidden;
display:flex;
justify-content:space-evenly;
align-items:center;
gap:.5em;
padding:.5em;
}
.midbar-socials a {
display:flex;
align-items:center;
}
.midbar-socials i {
font-size:1.5em;
}
.midbar-socials a:hover i {
}
.midbar-right {
display:flex;
gap:.5em;
padding:.5em;
overflow-y:auto;
}
.midbar-right::-webkit-scrollbar {
width:5px;
height:5px;
}
.midbar-right::-webkit-scrollbar-track {
border-radius: 5px;
margin:.25em 0 .25em 0;
}
.midbar-right .subtitle {
font-size:1.1em;
font-weight:600;
}
.midbar-desc {
width:calc(100% - 1.5em);
padding:.75em;
}
.midbar-desc p:last-of-type {margin-bottom:0;}
.midbar-desc a, .subdates a {
display:inline-block;
position:relative;
}
.midbar-desc a:after, .subdates a:after {

content: '';
position:absolute;
width:100%;
height:2px;
bottom:-2px;
left:0;
background:var(--ColorLink);
transform-origin:middle;
}
.midbar-desc a:hover:after, .subdates a:hover:after {
transform-origin: middle;
}
.midbar-favs {
display:flex;
gap:.5em;
}
.likes-wrap, .dislikes-wrap {
width:50%;
display:flex;
gap:.5em;
}
.favs-subtitle {
font-size:1.05em;
font-weight:600;
}
.likes, .dislikes {
display:flex;
flex-wrap:wrap;
gap:.5em;
}
.likes li, .dislikes li {
list-style:none;
}
/*--- CHAT SECTION ---*/
#quotes {
position:fixed;
left:.5em;
width:350px;
display:flex;
cursor:move;
z-index:999;
}
#quotesheader {
display:flex;
align-items:center;
gap:.5em;
padding:.5em;
background:linear-gradient(to top right, var(--gradient-one), var(--gradient-
two));
}
#quotesheader i {
font-size:1.3em;
padding:.3em;
border-radius:100%;
}
.qhname {
display:flex;
align-items:center;
}
.qhname img {
width:2.5em;
height:2.5em;
object-fit:cover;
border-radius:100%;
background:var(--gradient-accent);
}
.qhname b {
font-weight:600;
text-align:center;
}
.quote {
display:flex;
gap:.5em;
max-height:475px;
overflow-y:auto;
padding:.75em .5em 1em .5em;
}
.p1-wrap {
display:flex;
align-items:flex-end;
}
.p1-wrap b {
font-weight:600;
text-align:right;
padding-right:3.5em;
}
.p1 {
display:flex;
align-items:center;
gap:1em;
}
.p1 a {
width:2em;
height:2em;
}
.p1 img {
width:2em;
height:2em;
border-radius:100%;
}
.p1 a:hover img {
}
.p1-text {
position:relative;
text-align:right;
}
.p1-text .blurb {
position:absolute;
right:-.5em;
bottom:0;
width:0;
height:0;
border-left:.5em solid transparent;
border-right:.5em solid transparent;
border-bottom:1.5em solid var(--ColorBackground);
}
.p2-wrap {
display:flex;
}
.p2-wrap b {
font-weight:600;
text-align:left;
padding-left:3.5em;
}
.p2 {
display:flex;
align-items:center;
gap:1em;
}
.p2 a {
width:2em;
height:2em;
}
.p2 img {
width:2em;
height:2em;
border-radius:100%;
}
.p2 a:hover img {
}
.p2-text {
position:relative;
}
.p2-text .blurb {
position:absolute;
left:-.5em;
bottom:0;
width:0;
height:0;
border-left:.5em solid transparent;
border-right:.5em solid transparent;
border-bottom:1.5em solid var(--ColorBackground);
}
.quotesfooter {
display:flex;
align-items:center;
gap:.5em;
padding:.5em;
two));
border-radius:0 0 var(--border-radius) var(--border-radius);
}
.quotesfooter i {
font-size:1.5em;
}
.qf-mid {
display:flex;
align-items:center;
gap:.5em;
border-radius:30px;
}
.qf-mid b {font-weight:normal; color:var(--gradient-text); letter-spacing:.05em;}
/*--- PROJECTS SECTION ---*/
#projects {
position:fixed;
right:.5em;
margin-top:3.5em;
width:350px;
height:auto;
display:flex;
backdrop-filter: blur(2px);
cursor:move;
z-index:999;
}
#projects:after {
position:absolute;
top:0;
content:'';
width:100%;
height:100%;
opacity:.75;
two));
z-index:-1;
}
#projectsheader {
display:flex;
align-items:center;
gap:.5em;
padding:.5em;
}
#projectsheader .titleicons {
display:flex;
align-items:center;
gap:.5em;
}
#projectsheader .titleicons i {
font-size:1.05em;
padding:.3em;
border-radius:100%;
}
#projectsheader .titleicons a:hover i {
}
#projectsheader .title {
font-size:1.2em;
font-weight:600;
text-align:left;
}
#projectsheader .righticon {display:flex; justify-content:center; align-
items:center;}
#projectsheader .righticon i {
font-size:1.5em;
}
.projects-mid {
position:relative;
display:flex;
align-items:center;
gap:.5em;
height:calc(100% - 1em);
padding:.5em;
}
.project {
padding:.5em;
}
.project-title {
width:100%;
display:flex;
align-items:center;
gap:.5em;
margin-bottom:.5em;
}
.project-title b {
font-size:1.05em;
font-weight:600;
}
.project-title i {
font-style:normal;
font-size:.9em;
color:var(--ColorContent);
background:var(--ColorTitle);
}
.projectline {
position:relative;
width:calc(100% - 4px);
height:5px;
padding:2px;
border-radius:30px;
}
.progressline {
position:absolute;
height:5px;
border-radius:30px;
}
.todolist {
padding:.5em;
}
.todo-title {
font-size:1.05em;
font-weight:600;
margin-bottom:.5em;
}
.todo {
max-height:250px;
overflow-y:auto;
display:flex;
gap:1em;
}
.todo li {
display:flex;
align-items:center;
gap:.5em;
}
.todo i {
font-size:1.3em;
}
.todo b {
font-weight:normal;
color:var(--ColorText);
text-align:left;
}
/*--- CREDIT: DO NOT TOUCH ---*/
.credit {
position:fixed;
bottom:1.5em;
left:1.5em;
z-index:99999999;
}
.credit a {
display:flex;
align-items:center;
}
.credit i {
font-size:1.6em;
}
.credit i:hover {
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-name: bounce;
-moz-animation-name: bounce;
}
@keyframes bounce {
0% {
}
25% {
}
50% {
}
75% {
}
100% {
}
}
@keyframes totop {
0% {
}
18% {
}
36% {
}
54% {
}
82% {
}
100% {
}
}
/*--- RESPONSIVENESS ---*/
@media only screen and (max-width: 1150px) {

.tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;!important;}
}

.headername, .headertitle {display:none;}
}

tumblr_controls, .tmblr-iframe{display:none!important;}
main {width:99%; margin:auto;}
#quotes, #projects {display:none;}
#maincontent {max-height:100%; margin-bottom:2em;}
.topbar {flex-direction:column;}
.topbar-left {width:calc(100% - 2em); flex-direction:column; align-items:center;}
.topbarleft-text {align-items:center;}
.topbarleft-text b, .topbarleft-text i {text-align:center;}
.topbar-right {width:calc(100% - 1.5em); justify-content:space-evenly;}
.topbar-right li {width:auto; height:auto;}
.midbar {flex-direction:column;}
.midbar-left {flex-direction:row; flex-wrap:wrap; width:calc(100% - 1em);}
.midbar-left .subtitle {width:100%;}
.midbar-links, .midbar-blogs {width:calc(100% - .5em); display:flex; justify-
content:space-between; flex-wrap:wrap;}
.midbar-links a {width:auto;}
.midbar-blogs a {width:calc(50% - 1em);}
.midbar-socials {width:calc(100% - 1em);}
.midbar-right {width:calc(100% - 1em);}
}

.followbutton, .dropdown, .headerright .searchbutton, #totop {display:none;}
.credit {display:none;}
}
</style>
</head>
<body>
<main>
<header>

<div class="headerleft">
<div class="sideicon"><img src="{PortraitURL-128}"></img></div>
<div class="headername"><a href="/">{Name}</a></div>
<nav>
<a href="/"><i>home</i></a>
<a href="/ask"><i>ask</i></a>
<a href="/archive"><i>archive</i></a>


<a title="page by sage"
href="https://demontimes.tumblr.com"><i>credit</i></a>
</nav>
</div>
<div class="headerright">
<button id="theme-toggle" aria-label="toggle dark or light mode"
type="button">
<span class="light-on" title="toggle dark mode"><i class="ph-moon-fill"></i></span>
<span class="light-off" title="toggle light mode"><i
class="ph-sun-fill"></i></span>
</button>
<div title="follow @{Name}" class="followbutton"><a
href="https://tumblr.com/follow/{Name}"><i
class="ph-battery-low-fill"></i></a></div>


<div class="dropdown"><a title="updates" href="#" class="cthrough"><i
class="ph-wifi-high-bold"></i></a>
<div class="sub">
<div class="sub-title"><b>updates</b><i class="ph-toggle-right-
fill"></i></div>
<div class="subdates">


<li><i class="ph-television-fill"></i><b>watching</b></li>
<li><i class="ph-game-controller-fill"></i><b>playing</b></li>
<li><i class="ph-headphones-fill"></i><b>listening to</b></li>
<li><i class="ph-book-open-fill"></i><b>reading</b></li>
<li><i class="ph-briefcase-fill"></i><b>working on</b></li>

</div>

</div>
</div>

<div title="search" class="searchbutton"><i
class="ph-magnifying-glass"></i></div>
<div id="totop"><a title="back to top" href="#top" target="_self"><i class="ph-
caret-up-bold"></i></a></div>
<div class="headertitle"><a href="/">{Title}</a></div>
</div>
</header>


<div id="search">
<div class="searchwrap">
<div title="exit" class="searchbutton"><i class="ph-magnifying-glass-minus-
fill"></i></div>
<form class="search" action="javascript:return false">
<input type="text" class="query" placeholder="search blog">
</form>
</div>
</div>


<section>
<div id="set">


<div id="quotes">
<div class="quote-wrap">
<div id="quotesheader">
<i class="ph-caret-left-bold"></i>
<div class="qhname">

<img src="IMAGEURLHERE"><b>CHAT TITLE</b>
</div>
<i class="ph-video-camera-fill"></i>
</div>
<div class="quote">


<b>chatter name</b>
<div class="p2">
<a href="https://demontimes.tumblr.com"><img
src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></a>
<span>text goes here put whatever u want</span>
</div>
</div>
</div>
<b>chatter name</b>
<div class="p1">
<span>another message hi</span>
</div>
</div>
</div>
<b>chatter name</b>
<div class="p2">
<span>and another message hello
<br>here's a line break
</span>
</div>
</div>
</div>
<b>chatter name</b>
<div class="p1">
<span>this section could be for quotes, an faq, testimonials,
etc. it's up to you!</span>
</div>
</div>
</div>
<b>chatter name</b>
<div class="p2">
<span>this section will scroll if it gets too long</span>
</div>
</div>
</div>


</div>
</div>
<div class="quotesfooter">
<i class="ph-camera-fill"></i>
<div class="qf-mid"><b>message</b><i
class="ph-google-podcasts-logo"></i></div>
<i class="ph-smiley-fill"></i>
</div>
</div>



<div id="projects">
<div id="projectsheader">
<div class="titleicons">
<i class="ph-x"></i>
<i class="ph-minus"></i>
<i class="ph-arrows-out-simple"></i>
</div>
<div class="title">projects</div>
<div class="righticon"><i class="ph-chart-bar-horizontal-fill"></i></div>
</div>
<div class="projects-mid">


<div class="project-title"><b>project name</b> <i>50%</i></div>
<div class="projectline"><div class="progressline"
style="width:50%"></div></div>
</div>
</div>
</div>
style="width:98.75%"></div></div>
</div>

<div class="todolist">
<div class="todo-title">to do list</div>
<div class="todo">


<li><i class="ph-check-square-offset-bold"></i><b>to do item
completed</b></li>
<li><i class="ph-check-square-offset-bold"></i><b>to do item
completed</b></li>
<li><i class="ph-square-bold"></i><b>to do item here</b></li>
<li><i class="ph-square-bold"></i><b>to do item here</b></li>

</div>
</div>
</div>
</div>



<div id="maincontent">
<div id="maincontentheader">
<div class="titleicons">
<i class="ph-x"></i>
<i class="ph-minus"></i>
<i class="ph-arrows-out-simple"></i>
</div>
<div class="titlelink">about me</div>
<div class="titleimg"><img src="{PortraitURL-128}"></div>
</div>
<div class="topbar">
<div class="topbar-left">

<div class="topbarleft-img"><img src="IMAGEURLHERE"></div>
<div class="topbarleft-text"><b>{Title}</b><i>@{Name}</i></div>
</div>
<div class="topbar-right">

<li><i class="ph-user-fill"></i><span>name</span></li>
<li><i class="ph-cake-fill"></i><span>age/bday</span></li>
<li><i class="ph-leaf-fill"></i><span>pronouns</span></li>
<li><i class="ph-map-pin-fill"></i><span>location</span></li>

</div>
</div>
<div class="midbar">
<div class="midbar-left">
<div class="subtitle">links</div>
<div class="midbar-links">

<a href="/"><i
class="ph-link-simple-horizontal-bold"></i><span>link name</span></a>
<a href="/"><i
<a href="/"><i
<a href="/"><i

</div>
<div class="subtitle">blogs</div>
<div class="midbar-blogs">

src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"><span>blog
name</span></a>
name</span></a>
name</span></a>
name</span></a>

</div>
<div class="subtitle">socials</div>
<div class="midbar-socials">

<a title="twitter" href="/"><i
class="ph-twitter-logo-fill"></i></a>
<a title="instagram" href="/"><i
class="ph-instagram-logo-fill"></i></a>
<a title="discord" href="/"><i
class="ph-discord-logo-fill"></i></a>
<a title="pinterest" href="/"><i
class="ph-pinterest-logo-fill"></i></a>
</div>
</div>
<div class="midbar-right">
<div class="subtitle">bio</div>
<div class="midbar-desc">

<b>about this page:</b>
<li>made to match my <a
href="https://demontimes.tumblr.com/post/688633275744485376/seafoam-premium-theme-
by-sage-5-static">seafoam theme</a></li>
<li>all of the sections are draggable!</li>
<p><b>featuring:</b>
<blockquote>
<li>a header to match <b>seafoam</b></li>
<li>a chat section for quotes/testimonials/etc.</li>
<li>a projects & to do list section
<li>main section with an image, info stats, links & blogs, description, and
likes/dislikes</li>
</blockquote>
this section will scroll if it gets too long, instructions for customizing
this page are written in the code - search '<b>edit here</b>'
<li>a guide for customizing is also in the post!</li>

</div>
<div class="midbar-favs">
<div class="likes-wrap">
<div class="favs-subtitle">likes</div>
<div class="likes">

<li>like</li> <li>like</li> <li>like</li> <li>like</li>
<li>like</li> <li>like</li> <li>like</li> <li>like</li>

</div>
</div>
<div class="dislikes-wrap">
<div class="favs-subtitle">dislikes</div>
<div class="dislikes">

<li>dislike</li> <li>dislike</li> <li>dislike</li>
<li>dislike</li> <li>dislike</li> <li>dislike</li>

</div>
</div>
</div>
</div>
</div>

</div>

</div>

</section>


<div class="credit">
<a href="https://demontimes.tumblr.com" title="page by sage"><i class="ph-ghost-
fill"></i></a>
</div>
</main>
<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;
},
});
//scroll to top
$(document).ready(function(){
$('#totop a').click(function(){
$('html, body').animate({scrollTop : 0},400);
return false;
});
});
// search button hover

$('.searchbutton').hover(function(){
$('.searchbutton i').toggleClass('ph-magnifying-glass-fill');
});
});
// search menu
$('.searchbutton').click(function(){
$('body').toggleClass('searchup');
});
});
// searchbar
$('.search').submit(function(event){
var value = $('input:first').val();
location.replace('http://{Name}.tumblr.com/search/' + value);
});
});
// scroll to top
$('#totop a').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
// follow button hover

$('.followbutton a').hover(function(){
$('.followbutton i').toggleClass('ph-battery-medium-fill');
});
});
// updates click
$('a.cthrough').click(function(){
$('a.cthrough i').toggleClass('ph-wifi-slash-bold');
});
});
//drop downs
$(document).ready(function() {
$(".sub").hide();
$(".cthrough").click(function(event){
$(this).next(".sub").slideToggle(500);
event.preventDefault();
$(this).toggleClass('upside', 500);
});
});
// draggables
$( function() {
$( "#maincontent" ).draggable({ handle: "#maincontentheader" });
$( "#maincontent" ).draggable({ containment: "main", scroll: false })
$( "#maincontent" ).draggable({ snap: "header" });
$( "#set #maincontent" ).draggable({ stack: "#set #maincontent" });
$( "#maincontent" ).draggable({ revert: true });
$( "#quotes" ).draggable();
$( "#quotes" ).draggable({ containment: "main", scroll: false })
$( "#quotes" ).draggable({ snap: "header" });
$( "#set #quotes" ).draggable({ stack: "#set #quotes" });
$( "#projects" ).draggable();
$( "#projects" ).draggable({ containment: "main", scroll: false })
$( "#projects" ).draggable({ snap: "header" });
$( "#set #projects" ).draggable({ stack: "#set #projects" });
});
// 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>

Page 13 - Seafoam About

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Page 13 - Seafoam About

Uploaded by

Copyright:

Available Formats

<!

<link rel="shortcut icon" href="{Favicon}">

SEARCH 'EDIT HERE' TO CUSTOMIZE

/*---- EDIT HERE: DEFAULT COLORS -----*/

/*--- EDIT HERE: DARK MODE COLORS ---*/

/*--- EDIT HERE: GRADIENT COLORS ---*/

/*---- EDIT HERE: VARIABLES & FONTS ---*/

/*--- DAY/NIGHT MODE ---*/

/*----- TOOLTIPS -----*/

/*--- SCROLLBAR ---*/

/*--- TEXT SELECTION ---*/

/*----- BASIC STYLING -----*/

h1, h1 a, h2, h3, h4, h5 {

h4 {margin:0 0 1em 0; text-align:center;}

small {font-size: 0.95em;}

/*--- HEADER ---*/

/*--- HEADER LEFT ---*/

/*--- HEADER RIGHT ---*/

/*--- UPDATES TAB ---*/

.dropdown {height:100%; display:flex; justify-content:flex-end; align-

/*--- SEARCH BAR ---*/

.searchwrap .searchbutton {cursor:help;}

::-webkit-input-placeholder {color: inherit; opacity:.75;}

input:focus::-webkit-input-placeholder {color: transparent;}

.headerright #totop, .followbutton {height:100%;}

.headerright #totop a:after, .followbutton a:after {

.headerright #totop a:hover:after, .followbutton a:hover:after {

.headerright #totop i, .followbutton i {

.headerright #totop a:hover i {

/*----- COMMON -----*/

.midbar-desc a:after, .subdates a:after {

/*--- CHAT SECTION ---*/

/*--- PROJECTS SECTION ---*/

/*--- CREDIT: DO NOT TOUCH ---*/

/*--- RESPONSIVENESS ---*/

@media only screen and (max-width: 1150px) {

@media only screen and (max-width: 900px) {

@media only screen and (max-width: 750px) {

@media only screen and (max-width: 500px) {

<!-- EDIT HERE: HEADER LEFT

<!--- EDIT HERE: UPDATES TAB

<li><i class="ph-ICON-NAME"></i><b>UPDATE TEXT</b></li>

- capitalized words indicate what you can change

</div>

- replace the 'IMAGEURLHERE' with your image url

CHATS FROM OTHER PEOPLE

- capitalized words indicate what you can change

--- all chats below this line --->

- capitalized words indicate what you can change

all projects below this line ---->

/---- EDIT HERE: DEFAULT COLORS -----/

/--- EDIT HERE: DARK MODE COLORS ---/

/--- EDIT HERE: GRADIENT COLORS ---/

/---- EDIT HERE: VARIABLES & FONTS ---/

/--- DAY/NIGHT MODE ---/

/----- TOOLTIPS -----/

/--- SCROLLBAR ---/

/--- TEXT SELECTION ---/

/----- BASIC STYLING -----/

/--- HEADER ---/

/--- HEADER LEFT ---/

/--- HEADER RIGHT ---/

/--- UPDATES TAB ---/

/--- SEARCH BAR ---/

/----- COMMON -----/

/--- CHAT SECTION ---/

/--- PROJECTS SECTION ---/

/--- CREDIT: DO NOT TOUCH ---/

/--- RESPONSIVENESS ---/