₊⁺✿˚
This commit is contained in:
parent
ef1e564dd9
commit
b89fad3302
|
@ -0,0 +1,896 @@
|
|||
<!-----------------------------------------------------------------------
|
||||
About Page [11]: Crimson Lily
|
||||
Made by glenthemes
|
||||
|
||||
Initial release: 2019/02/20
|
||||
Last updated: 2021/10/21
|
||||
|
||||
TERMS OF USE:
|
||||
1) Do not remove the page credit.
|
||||
2) Do not repost/redistribute my themes.
|
||||
3) Do not take parts of the code and use it as your own.
|
||||
4) Do not use my themes as a base code.
|
||||
5) Do not mix my themes together.
|
||||
|
||||
Guide:
|
||||
//docs.google.com/document/d/1RQwqJQBh_6OTuZifg_cGNociuyshLMm3Yny-5BoyGeo/edit?usp=sharing
|
||||
|
||||
--- Credits:
|
||||
|
||||
Layout & design insp:
|
||||
- Persona 5 UI, Bandori UI
|
||||
|
||||
Side image:
|
||||
- "Can I Make Tea?" card: trained ver.
|
||||
//bandori.party/card/969/Tsugumi-Hazawa-Happy-Barista/
|
||||
publishers: Bushiroad, Craft Egg
|
||||
|
||||
Fonts:
|
||||
- Google Fonts
|
||||
- Persona 5 'p5hatty' compiled by HattyMikune & ToxicDevil93 [YouTube]
|
||||
//www.youtube.com/watch?time_continue=5&v=6B90DMr-OBY
|
||||
- 'Eri ji' font
|
||||
//www.freejapanesefont.com/eri-ji-えり字/
|
||||
//v7.mine.nu/pysco/
|
||||
|
||||
Background:
|
||||
- 'Pinstripe' @ subtlepatterns
|
||||
//www.toptal.com/designers/subtlepatterns/pinstripe/
|
||||
------------------------------------------------------------------------>
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>{Title}</title>
|
||||
|
||||
<link rel="shortcut icon" href="{Favicon}">
|
||||
|
||||
<!--------------------JAVASCRIPTS-------------------->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
|
||||
<script>
|
||||
(function($){
|
||||
$(document).ready(function(){
|
||||
$("a[title]").style_my_tooltips({
|
||||
tip_follows_cursor:true,
|
||||
tip_delay_time:0,
|
||||
tip_fade_speed:100,
|
||||
attribute:"title"
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=Quicksand:500|Lato|Exo" rel="stylesheet">
|
||||
|
||||
<!-------------------------------------------------------------------->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face { font-family: "p5"; src: url('//glen-assets.github.io/fonts/p5hatty.ttf'); }
|
||||
|
||||
@font-face { font-family: "eri ji"; src: url('//glen-assets.github.io/fonts/Eri Ji.otf'); }
|
||||
|
||||
/*--------------------TOOLTIPS--------------------*/
|
||||
#s-m-t-tooltip {
|
||||
padding:4px 9px;
|
||||
margin:20px;
|
||||
box-shadow:4px 4px var(--Tooltip-Shadow);
|
||||
border:1px solid var(--Tooltip-Border);
|
||||
background:var(--Tooltip-Background);
|
||||
max-width:40vw;
|
||||
font-family:lato;
|
||||
font-size:13px;
|
||||
color:var(--Tooltip-Text);
|
||||
}
|
||||
|
||||
/*--------------------TUMBLR CONTROLS--------------------*/
|
||||
iframe#tumblr_controls, .iframe-controls--desktop {
|
||||
top:5px!important;
|
||||
right:5px!important;
|
||||
position:fixed!important;
|
||||
|
||||
transform:scale(0.8,0.8);
|
||||
-webkit-transform:scale(0.8,0.8);
|
||||
-moz-transform:scale(0.8,0.8);
|
||||
-ms-transform:scale(0.8,0.8);
|
||||
|
||||
/* delete the next 4 lines if you want white tumblr controls */
|
||||
filter:invert(100%) hue-rotate(180deg);
|
||||
-webkit-filter:invert(100%) hue-rotate(180deg);
|
||||
-moz-filter:invert(100%) hue-rotate(180deg);
|
||||
-ms-filter:invert(100%) hue-rotate(180deg);
|
||||
|
||||
transform-origin:100% 0;
|
||||
z-index:999999!important;
|
||||
}
|
||||
|
||||
/*--------------------TEXT HIGHLIGHT--------------------*/
|
||||
::selection {
|
||||
background:var(--Highlighted-Background);
|
||||
color:var(--Highlighted-Text);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background:var(--Highlighted-Background);
|
||||
color:var(--Highlighted-Text);
|
||||
}
|
||||
|
||||
/*--------------------BASICS--------------------*/
|
||||
/* general styling */
|
||||
body {
|
||||
background:var(--Background);
|
||||
background-image:url('//66.media.tumblr.com/1363b3c61583a1f7b7cd901f7ab7ee13/tumblr_pn6oktMhE31qg2f5co1_400.png');
|
||||
background-attachment:fixed;
|
||||
background-repeat:repeat;
|
||||
font-family:lato;
|
||||
line-height:1.6em;
|
||||
font-size:12px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
a, .ccc-ii, .ccc-iii {
|
||||
color:var(--Link);
|
||||
text-decoration:none;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
b, strong {font-weight:bold;color:var(--Bold);}
|
||||
|
||||
i, em {font-style:italic;color:var(--Italic);}
|
||||
|
||||
pre, code {
|
||||
white-space:pre-wrap;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/*--------------------COLORS--------------------*/
|
||||
:root {
|
||||
/* background */
|
||||
--Background:#fefefe;
|
||||
|
||||
/* basics */
|
||||
--Bold: ;
|
||||
--Italic: ;
|
||||
|
||||
/* speech box */
|
||||
--Speech-Label-Shadow:#222;
|
||||
--Speech-Label-Border:#222;
|
||||
--Speech-Label-Background:#fcfcfc;
|
||||
--Speech-Label-Text:#222;
|
||||
--Main-Speech-Box-Shadow:#222;
|
||||
--Main-Speech-Box-Outer-Border:#222;
|
||||
--Main-Speech-Box-Inner-Border:#fcfcfc;
|
||||
--Main-Speech-Box-Background:#222;
|
||||
--Main-Speech-Box-Text:#fcfcfc;
|
||||
|
||||
/* label 1 */
|
||||
--Label-1-Arrow:#222;
|
||||
--Label-1-Arrow-Shadow:#222;
|
||||
--Label-1-Shadow:#222;
|
||||
--Label-1-Outer-Border:#222;
|
||||
--Label-1-Inner-Border:#fcfcfc;
|
||||
--Label-1-Background:#222;
|
||||
--Label-1-Text:#eee;
|
||||
|
||||
/* label 2 */
|
||||
--Label-2-Arrow:#222;
|
||||
--Label-2-Arrow-Shadow:#222;
|
||||
--Label-2-Shadow:#222;
|
||||
--Label-2-Outer-Border:#222;
|
||||
--Label-2-Inner-Border:#fcfcfc;
|
||||
--Label-2-Background:#222;
|
||||
--Label-2-Text:#eee;
|
||||
|
||||
/* name header */
|
||||
--Name-Header-Shadow:#222;
|
||||
--Name-Header-Border:#222;
|
||||
--Name-Header-Label-Background:#222;
|
||||
--Name-Header-Label-Text:#eee;
|
||||
--Name-Header-Background:#fcfcfc;
|
||||
--Name-Header-Text:#222;
|
||||
|
||||
/* main boxes */
|
||||
--About-Box-Label-Shadow:#222;
|
||||
--About-Box-Label-Outer-Border:#222;
|
||||
--About-Box-Label-Inner-Border:#fcfcfc;
|
||||
--About-Box-Label-Background:#222;
|
||||
--About-Box-Label-Text:#eee;
|
||||
--About-Box-Shadow:#222;
|
||||
--About-Box-Border:#222;
|
||||
--About-Box-Background:#fcfcfc;
|
||||
--About-Box-Text:#222;
|
||||
|
||||
/* links */
|
||||
--Link:#222;
|
||||
--Link-Bottom-Border:#eee;
|
||||
|
||||
/* meter bars */
|
||||
--Meter-Bar-Border:#222;
|
||||
--Meter-Bar-Fill:#222;
|
||||
|
||||
/* custom links */
|
||||
--Custom-Links-Shadow:#222;
|
||||
--Custom-Links-Outer-Border:#222;
|
||||
--Custom-Links-Inner-Border:#fcfcfc;
|
||||
--Custom-Links-Background:#222;
|
||||
--Custom-Links:#eee;
|
||||
--Custom-Links-Background-On-Hover:#fcfcfc;
|
||||
--Custom-Links-On-Hover:#222;
|
||||
|
||||
/* tooltips */
|
||||
--Tooltip-Shadow:#222;
|
||||
--Tooltip-Border:#222;
|
||||
--Tooltip-Background:#fcfcfc;
|
||||
--Tooltip-Text:#222;
|
||||
|
||||
/* other */
|
||||
--Credit-Text:#222; /* pls don't be an asshole! */
|
||||
--Highlighted-Text:#fff;
|
||||
--Highlighted-Background:#f3726f;
|
||||
}
|
||||
|
||||
/*--------------------CONTAINER--------------------*/
|
||||
#sesame {
|
||||
position:fixed;
|
||||
margin:0 auto;
|
||||
top:0;left:0;right:0;
|
||||
width:1000px; /* width of everything */
|
||||
height:100vh;
|
||||
display:table;
|
||||
}
|
||||
|
||||
#bun {
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#flexwrap {display:flex;}
|
||||
|
||||
/*-----------------CHARACTER LEFT-----------------*/
|
||||
#chara-cont {
|
||||
width:430px; /* left sidebar width */
|
||||
}
|
||||
|
||||
.chara {
|
||||
/* position from the bottom */
|
||||
/* as this is designed for the speech box to overlap the image, */
|
||||
/* a negative value is recommended */
|
||||
margin-bottom:-105px;
|
||||
width:inherit;
|
||||
}
|
||||
|
||||
/*--------------------SPEECH BOX--------------------*/
|
||||
.speech-a {
|
||||
margin-left:-35px;
|
||||
width:inherit;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
/* speech (top left) label */
|
||||
.speech-name-1 {
|
||||
position:relative;
|
||||
margin-bottom:-16px;
|
||||
margin-left:32px;
|
||||
display:inline-block;
|
||||
border:4px solid var(--Speech-Label-Border);
|
||||
padding:8px 12px;
|
||||
background:var(--Speech-Label-Background);
|
||||
transform:skew(-10deg);
|
||||
-webkit-transform:skew(-10deg);
|
||||
-moz-transform:skew(-10deg);
|
||||
-ms-transform:skew(-10deg);
|
||||
-o-transform:skew(-10deg);
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
/* speech label shadow */
|
||||
.speech-name-1:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:4px;
|
||||
left:calc(100% + 4px);
|
||||
width:4px;
|
||||
height:18px;
|
||||
background:var(--Speech-Label-Shadow);
|
||||
}
|
||||
|
||||
/* speech label text */
|
||||
.speech-name-2 {
|
||||
font-family:p5;
|
||||
font-size:18px;
|
||||
line-height:1em;
|
||||
color:var(--Speech-Label-Text);
|
||||
letter-spacing:0.5px;
|
||||
}
|
||||
|
||||
/* main speech box */
|
||||
.speech-b {
|
||||
display:block;
|
||||
margin:auto;
|
||||
width:320px; /* width of speech box */
|
||||
}
|
||||
|
||||
.speech-c {
|
||||
box-shadow:8px 8px var(--Main-Speech-Box-Shadow);
|
||||
border:4px solid var(--Main-Speech-Box-Outer-Border);
|
||||
transform:skew(-10deg);
|
||||
-webkit-transform:skew(-10deg);
|
||||
-moz-transform:skew(-10deg);
|
||||
-ms-transform:skew(-10deg);
|
||||
-o-transform:skew(-10deg);
|
||||
}
|
||||
|
||||
.speech-d {
|
||||
border:8px solid var(--Main-Speech-Box-Inner-Border);
|
||||
padding:12px 20px;
|
||||
background:var(--Main-Speech-Box-Background);
|
||||
}
|
||||
|
||||
/* main speech box text */
|
||||
.speech-e {
|
||||
font-family:p5;
|
||||
font-size:17px;
|
||||
letter-spacing:0.3px;
|
||||
color:var(--Main-Speech-Box-Text);
|
||||
line-height:1.6em;
|
||||
}
|
||||
|
||||
/*--------------------LABELS--------------------*/
|
||||
#labelwrap {
|
||||
margin-left:-80px;
|
||||
}
|
||||
|
||||
/*-------------------LABEL 1-------------------*/
|
||||
.label-1 {
|
||||
margin-top:50px;
|
||||
margin-left:-30px;
|
||||
}
|
||||
|
||||
.label-1-arrow, .label-1-arrow-shadow, .label-1-a {
|
||||
transform:skew(-8deg) rotate(-18deg);
|
||||
-webkit-transform:skew(-8deg) rotate(-18deg);
|
||||
-moz-transform:skew(-8deg) rotate(-18deg);
|
||||
-ms-transform:skew(-8deg) rotate(-18deg);
|
||||
-o-transform:skew(-8deg) rotate(-18deg);
|
||||
}
|
||||
|
||||
.label-1-arrow {
|
||||
position:absolute;
|
||||
margin-top:28px;
|
||||
width:0;height:0;
|
||||
border-bottom:20px solid var(--Label-1-Arrow);
|
||||
border-left:50px solid transparent;
|
||||
}
|
||||
|
||||
.label-1-arrow-shadow {
|
||||
position:absolute;
|
||||
margin-top:calc(28px + 3px);
|
||||
margin-left:9px;
|
||||
width:0;height:0;
|
||||
border-bottom:20px solid var(--Label-1-Arrow-Shadow);
|
||||
border-left:calc(50px - 8px) solid transparent;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
/* label 1 box */
|
||||
.label-1-a {
|
||||
margin-left:49px;
|
||||
display:inline-block;
|
||||
box-shadow:6px 6px var(--Label-1-Shadow);
|
||||
border:3px solid var(--Label-1-Outer-Border);
|
||||
transform-origin:left;
|
||||
-webkit-transform-origin:left;
|
||||
-moz-transform-origin:left;
|
||||
-ms-transform-origin:left;
|
||||
}
|
||||
|
||||
.label-1-b {
|
||||
border:6px solid var(--Label-1-Inner-Border);
|
||||
padding:12px 16px;
|
||||
background:var(--Label-1-Background);
|
||||
}
|
||||
|
||||
/* label 1 text */
|
||||
.label-1-c {
|
||||
font-family:eri ji;
|
||||
font-size:20px;
|
||||
color:var(--Label-1-Text);
|
||||
font-weight:bold;
|
||||
line-height:1em;
|
||||
}
|
||||
|
||||
/* Japanese character styling */
|
||||
jp {
|
||||
letter-spacing:-3px;
|
||||
}
|
||||
|
||||
/*-------------------LABEL 2-------------------*/
|
||||
.label-2 {
|
||||
margin-top:35px;
|
||||
}
|
||||
|
||||
.label-2-arrow, .label-2-arrow-shadow, .label-2-a {
|
||||
transform:skew(4deg) rotate(20deg);
|
||||
-webkit-transform:skew(4deg) rotate(20deg);
|
||||
-moz-transform:skew(4deg) rotate(20deg);
|
||||
-ms-transform:skew(4deg) rotate(20deg);
|
||||
-o-transform:skew(4deg) rotate(20deg);
|
||||
}
|
||||
|
||||
.label-2-arrow {
|
||||
position:absolute;
|
||||
margin-top:10px;
|
||||
width:0;height:0;
|
||||
border-bottom:20px solid var(--Label-2-Arrow);
|
||||
border-left:50px solid transparent;
|
||||
}
|
||||
|
||||
.label-2-arrow-shadow {
|
||||
position:absolute;
|
||||
margin-top:calc(10px + 6px);
|
||||
margin-left:10px;
|
||||
width:0;height:0;
|
||||
border-bottom:20px solid var(--Label-2-Arrow-Shadow);
|
||||
border-left:calc(50px - 12px) solid transparent;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
/* label 2 box */
|
||||
.label-2-a {
|
||||
margin-left:48px;
|
||||
display:inline-block;
|
||||
box-shadow:6px 6px var(--Label-2-Shadow);
|
||||
border:3px solid var(--Label-2-Outer-Border);
|
||||
transform-origin:left;
|
||||
-webkit-transform-origin:left;
|
||||
-moz-transform-origin:left;
|
||||
-ms-transform-origin:left;
|
||||
}
|
||||
|
||||
.label-2-b {
|
||||
border:6px solid var(--Label-2-Inner-Border);
|
||||
padding:12px 16px;
|
||||
background:var(--Label-2-Background);
|
||||
}
|
||||
|
||||
/* label 2 text */
|
||||
.label-2-c {
|
||||
font-family:p5;
|
||||
font-size:18px;
|
||||
letter-spacing:0.5px;
|
||||
color:var(--Label-2-Text);
|
||||
line-height:1em;
|
||||
}
|
||||
|
||||
/*------------------MAIN (RIGHT) ABOUT------------------*/
|
||||
#mainbox-a {
|
||||
margin-left:calc(12px + 40px);
|
||||
margin-right:20px;
|
||||
-webkit-flex:1;
|
||||
-ms-flex:1;
|
||||
-moz-flex:1;
|
||||
flex:1;
|
||||
align-self:center;
|
||||
-webkit-align-self:center;
|
||||
transform:skew(-10deg);
|
||||
-webkit-transform:skew(-10deg);
|
||||
-moz-transform:skew(-10deg);
|
||||
-ms-transform:skew(-10deg);
|
||||
-o-transform:skew(-10deg);
|
||||
}
|
||||
|
||||
.unskew {
|
||||
transform:skew(10deg);
|
||||
-webkit-transform:skew(10deg);
|
||||
-moz-transform:skew(10deg);
|
||||
-ms-transform:skew(10deg);
|
||||
-o-transform:skew(10deg);
|
||||
}
|
||||
|
||||
/* first row - name label */
|
||||
.mainbox-header {
|
||||
margin-bottom:calc(8px + 20px);
|
||||
box-shadow:8px 8px var(--Name-Header-Shadow);
|
||||
border:4px solid var(--Name-Header-Border);
|
||||
background:var(--Name-Header-Background);
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.about-name-label {
|
||||
padding:9px 12px;
|
||||
background:var(--Name-Header-Label-Background);
|
||||
font-family:p5;
|
||||
font-size:17px;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:1px;
|
||||
color:var(--Name-Header-Label-Text);
|
||||
}
|
||||
|
||||
.about-name-text {
|
||||
align-self:center;
|
||||
-webkit-align-self:center;
|
||||
margin-left:14px;
|
||||
font-family:p5;
|
||||
font-size:18px;
|
||||
letter-spacing:0.5px;
|
||||
color:var(--Name-Header-Text);
|
||||
}
|
||||
|
||||
/* about boxes */
|
||||
.mainbox-item {
|
||||
margin-bottom:calc(8px + 20px);
|
||||
box-shadow:8px 8px var(--About-Box-Shadow);
|
||||
border:4px solid var(--About-Box-Border);
|
||||
background:var(--About-Box-Background);
|
||||
padding:30px 30px 18px 30px;
|
||||
font-family:lato;
|
||||
font-size:13px;
|
||||
color:var(--About-Box-Text);
|
||||
}
|
||||
|
||||
/* about boxes - title labels */
|
||||
.box-label-a {
|
||||
position:relative;
|
||||
margin-bottom:-24px;
|
||||
margin-left:32px;
|
||||
display:inline-block;
|
||||
border:4px solid var(--About-Box-Label-Outer-Border);
|
||||
padding:4px;
|
||||
background:var(--About-Box-Label-Inner-Border);
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
.box-label-b {
|
||||
padding:8px 12px;
|
||||
background:var(--About-Box-Label-Background);
|
||||
}
|
||||
|
||||
/* about boxes - title labels: shadow */
|
||||
.box-label-a:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:4px;
|
||||
left:calc(100% + 4px);
|
||||
width:4px;
|
||||
height:18px;
|
||||
background:var(--About-Box-Label-Shadow);
|
||||
}
|
||||
|
||||
/* about boxes - title labels: text */
|
||||
.box-label-c {
|
||||
font-family:p5;
|
||||
font-size:18px;
|
||||
line-height:1em;
|
||||
color:var(--About-Box-Label-Text);
|
||||
letter-spacing:0.5px;
|
||||
}
|
||||
|
||||
.bio {
|
||||
line-height:1.7em;
|
||||
}
|
||||
|
||||
/* general links */
|
||||
#mainbox-a a {
|
||||
color:var(--Link);
|
||||
padding-bottom:1px;
|
||||
border-bottom:1px solid var(--Link-Bottom-Border);
|
||||
}
|
||||
|
||||
/*------------------STATISTICS BOX------------------*/
|
||||
.stat-row {
|
||||
display:flex;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.stat-row:last-child {margin-bottom:0px;}
|
||||
|
||||
.stat-row > * {
|
||||
align-self:center;
|
||||
-webkit-align-self:center;
|
||||
}
|
||||
|
||||
/* 1st stat column */
|
||||
.stat-a {
|
||||
margin-right:20px;
|
||||
width:80px;
|
||||
}
|
||||
|
||||
/* 2nd stat column */
|
||||
.stat-b {
|
||||
margin-right:20px;
|
||||
width:40px;
|
||||
font-family:exo;
|
||||
font-size:12px;
|
||||
letter-spacing:0.5px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/* percentage bar */
|
||||
.statbar {
|
||||
-webkit-flex:1;
|
||||
-ms-flex:1;
|
||||
-moz-flex:1;
|
||||
flex:1;
|
||||
height:5px;
|
||||
border:1px solid var(--Meter-Bar-Border);
|
||||
}
|
||||
|
||||
.statfill {
|
||||
height:inherit;
|
||||
background:var(--Meter-Bar-Fill);
|
||||
}
|
||||
|
||||
/*--------------------CUSTOM LINKS--------------------*/
|
||||
#customlinks {
|
||||
margin:calc((6px + 3px) * -1);
|
||||
}
|
||||
|
||||
#customlinks a {
|
||||
display:inline-block;
|
||||
margin:calc(6px + 3px);
|
||||
}
|
||||
|
||||
.ccc-i {
|
||||
box-shadow:6px 6px var(--Custom-Links-Shadow);
|
||||
border:4px solid var(--Custom-Links-Outer-Border);
|
||||
padding:4px;
|
||||
background:var(--Custom-Links-Inner-Border);
|
||||
}
|
||||
|
||||
.ccc-ii {
|
||||
padding:8px 12px;
|
||||
background:var(--Custom-Links-Background);
|
||||
}
|
||||
|
||||
/* custom links - text */
|
||||
.ccc-iii {
|
||||
font-family:p5;
|
||||
font-size:14px;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:1px;
|
||||
color:var(--Custom-Links);
|
||||
}
|
||||
|
||||
#customlinks a:hover .ccc-ii {
|
||||
background:var(--Custom-Links-Background-On-Hover);
|
||||
}
|
||||
|
||||
#customlinks a:hover .ccc-iii {
|
||||
color:var(--Custom-Links-On-Hover);
|
||||
}
|
||||
|
||||
/*---------------CREDIT---------------*/
|
||||
/* pls do not cover or remove! thank you! */
|
||||
#please-respect-theme-makers {
|
||||
position:fixed;
|
||||
bottom:0;margin-bottom:22px;
|
||||
right:0;margin-right:22px;
|
||||
font-family:Quicksand;font-weight:500;
|
||||
font-size:9px;
|
||||
letter-spacing:1.7px;
|
||||
text-transform:uppercase;
|
||||
color:var(--Credit-Text);
|
||||
line-height:1em;
|
||||
z-index:99;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!----PAGE CREDIT---->
|
||||
<!--pls do not remove! tysm!-->
|
||||
<a id="please-respect-theme-makers" href="//glenthemes.tumblr.com" title="Page by glenthemes">credit</a>
|
||||
|
||||
<div id="sesame">
|
||||
<div id="bun">
|
||||
|
||||
<div id="flexwrap">
|
||||
<div id="chara-cont">
|
||||
|
||||
<!----LEFT IMAGE---->
|
||||
<img class="chara" src="//66.media.tumblr.com/b171970c43c301a54c93ca6df837d8a5/tumblr_pn6p30Ze8l1qg2f5co3_r1_1280.png">
|
||||
|
||||
|
||||
<div class="speech-a">
|
||||
<div class="speech-b">
|
||||
|
||||
<div class="speech-name-1">
|
||||
<div class="speech-name-2 unskew">Tsugumi</div> <!--SPEECH BOX LABEL-->
|
||||
</div><!--speech-name end-->
|
||||
|
||||
|
||||
<div class="speech-c">
|
||||
<div class="speech-d">
|
||||
<div class="speech-e unskew">I don't seem to be getting any better at playing keyboard, but I'll keep trying!</div> <!--SPEECH BOX TEXT-->
|
||||
|
||||
</div><!--speech-d-->
|
||||
</div><!--speech-c-->
|
||||
</div><!--speech-b-->
|
||||
</div><!--speech-a-->
|
||||
</div><!--chara-cont-->
|
||||
|
||||
|
||||
|
||||
<div id="labelwrap">
|
||||
|
||||
<div class="label-1">
|
||||
<div class="label-1-arrow"></div>
|
||||
<div class="label-1-arrow-shadow"></div>
|
||||
<div class="label-1-a">
|
||||
<div class="label-1-b">
|
||||
|
||||
<!--LABEL 1 TEXT-->
|
||||
<!--use <jp>...</jp> for Japanese characters-->
|
||||
<div class="label-1-c">羽沢 <jp>つぐみ</jp></div>
|
||||
|
||||
</div></div><!--end label 1 a/b-->
|
||||
</div><!--end label-1-->
|
||||
|
||||
|
||||
|
||||
<div class="label-2">
|
||||
<div class="label-2-arrow"></div>
|
||||
<div class="label-2-arrow-shadow"></div>
|
||||
<div class="label-2-a">
|
||||
<div class="label-2-b">
|
||||
|
||||
<!--LABEL 2 TEXT-->
|
||||
<div class="label-2-c">Pianist</div>
|
||||
|
||||
</div></div><!--end label 2 a/b-->
|
||||
</div><!--end label-2-->
|
||||
</div><!--labelwrap-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!----MAIN ABOUT---->
|
||||
<!----FIRST ROW---->
|
||||
<div id="mainbox-a">
|
||||
<div class="mainbox-header">
|
||||
<div class="about-name-label">
|
||||
<div class="unskew">Name:</div> <!--FIRST ROW: NAME LABEL-->
|
||||
</div>
|
||||
|
||||
<div class="about-name-text">
|
||||
<div class="unskew">Hazawa Tsugumi</div> <!--FIRST ROW: NAME TEXT-->
|
||||
</div>
|
||||
</div><!--mainbox-header-->
|
||||
|
||||
|
||||
<!-----FIRST ABOUT BOX----->
|
||||
<div class="box-label-a">
|
||||
<div class="box-label-b">
|
||||
<div class="box-label-c unskew">Information</div> <!--1ST ABOUT BOX TITLE-->
|
||||
</div><!--box-label-b-->
|
||||
</div><!--box-label-a-->
|
||||
|
||||
<div class="mainbox-item">
|
||||
<!--1ST ABOUT BOX CONTENT-->
|
||||
<div class="bio unskew">
|
||||
Your about text here :)
|
||||
</div><!--end bio-->
|
||||
</div><!--end one box-->
|
||||
|
||||
|
||||
<!-----STATS (2ND) BOX----->
|
||||
<div class="box-label-a">
|
||||
<div class="box-label-b">
|
||||
<div class="box-label-c unskew">Card Stats</div> <!--STATS BOX TITLE-->
|
||||
</div><!--box-label-b-->
|
||||
</div><!--box-label-a-->
|
||||
|
||||
<div class="mainbox-item">
|
||||
<div class="stats unskew">
|
||||
|
||||
|
||||
<!--START ONE ROW-->
|
||||
<div class="stat-row">
|
||||
<div class="stat-a">Performance:</div> <!--STAT ROW COLUMN 1 TEXT-->
|
||||
<div class="stat-b">8748</div> <!--STAT ROW COLUMN 2 TEXT-->
|
||||
|
||||
<!--PERCENTAGE BAR WIDTH %-->
|
||||
<div class="statbar"><div class="statfill" style="width:61%">
|
||||
</div></div>
|
||||
</div><!--stat-row-->
|
||||
<!--END ONE ROW-->
|
||||
|
||||
|
||||
|
||||
<!--START ONE ROW-->
|
||||
<div class="stat-row">
|
||||
<div class="stat-a">Technique:</div> <!--STAT ROW COLUMN 1 TEXT-->
|
||||
<div class="stat-b">8990</div> <!--STAT ROW COLUMN 2 TEXT-->
|
||||
|
||||
<!--PERCENTAGE BAR WIDTH %-->
|
||||
<div class="statbar"><div class="statfill" style="width:63%">
|
||||
</div></div>
|
||||
</div><!--stat-row-->
|
||||
<!--END ONE ROW-->
|
||||
|
||||
|
||||
|
||||
<!--START ONE ROW-->
|
||||
<div class="stat-row">
|
||||
<div class="stat-a">Visual:</div> <!--STAT ROW COLUMN 1 TEXT-->
|
||||
<div class="stat-b">10250</div> <!--STAT ROW COLUMN 2 TEXT-->
|
||||
|
||||
<!--PERCENTAGE BAR WIDTH %-->
|
||||
<div class="statbar"><div class="statfill" style="width:71%">
|
||||
</div></div>
|
||||
</div><!--stat-row-->
|
||||
<!--END ONE ROW-->
|
||||
|
||||
|
||||
|
||||
<!--START ONE ROW-->
|
||||
<div class="stat-row">
|
||||
<div class="stat-a">Overall:</div> <!--STAT ROW COLUMN 1 TEXT-->
|
||||
<div class="stat-b">27988</div> <!--STAT ROW COLUMN 2 TEXT-->
|
||||
|
||||
<!--PERCENTAGE BAR WIDTH %-->
|
||||
<div class="statbar"><div class="statfill" style="width:88%">
|
||||
</div></div>
|
||||
</div><!--stat-row-->
|
||||
<!--END ONE ROW-->
|
||||
|
||||
</div><!--end stats-->
|
||||
</div><!--end one box-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-----CUSTOM LINKS----->
|
||||
<div id="customlinks">
|
||||
<!--START ONE LINK-->
|
||||
<a href="/"> <!--LINK URL-->
|
||||
<div class="ccc-i">
|
||||
<div class="ccc-ii">
|
||||
<div class="ccc-iii unskew">home</div> <!--LINK TEXT-->
|
||||
</div></div></a>
|
||||
<!--END ONE LINK-->
|
||||
|
||||
<!--START ONE LINK-->
|
||||
<a href="/ask"> <!--LINK URL-->
|
||||
<div class="ccc-i">
|
||||
<div class="ccc-ii">
|
||||
<div class="ccc-iii unskew">mail</div> <!--LINK TEXT-->
|
||||
</div></div></a>
|
||||
<!--END ONE LINK-->
|
||||
|
||||
<!--START ONE LINK-->
|
||||
<a href="/archive"> <!--LINK URL-->
|
||||
<div class="ccc-i">
|
||||
<div class="ccc-ii">
|
||||
<div class="ccc-iii unskew">archive</div> <!--LINK TEXT-->
|
||||
</div></div></a>
|
||||
<!--END ONE LINK-->
|
||||
|
||||
<!--START ONE LINK-->
|
||||
<a href="/"> <!--LINK URL-->
|
||||
<div class="ccc-i">
|
||||
<div class="ccc-ii">
|
||||
<div class="ccc-iii unskew">navigate</div> <!--LINK TEXT-->
|
||||
</div></div></a>
|
||||
<!--END ONE LINK-->
|
||||
|
||||
</div><!--end customlinks-->
|
||||
</div><!--mainbox-a-->
|
||||
</div><!--flexwrap-->
|
||||
</div><!--bun-->
|
||||
</div><!--sesame-->
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue