Single post in Coding Diaries
Forum Index > PokéFarm > Journals > Coding Diaries >
Kaede
Code
[sc=about][
][sc=header]Name[/sc][
][sc=nav][
][sc=tabbed_interface][
][ul][
][li][tip=About Me]웃[/tip][/li][
][li][tip=Friends]❥[/tip][/li][
][li][tip=Collections]∞[/tip][/li][
][li][tip=Credits]</>[/tip][/li][
][/ul][
][sc=tab tab-active]Content[/sc][
][sc=tab]Content[/sc][
][sc=tab]Content[/sc][
][sc=tab]Coded by [url=https://pfq.link/@bPV]Aemilia[/url][/sc][
][/sc][
][/sc][
][sc=credit][url=https://pokefarm.com/forum/post/6297225][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc][
][/sc]
[style]
/****************************************
* EDIT THESE VALUES ONLY. MAKE SURE TO *
* FOLLOW PFQ'S LEGIBILITY GUIDELINES. *
****************************************/
@Light = #A4ACB7;
@LightTabContent = #9EA7B3;
@MidShade = #36393f;
@Dark = #2f3136;
/***************************************
* IGNORES WHITESPACE BETWEEN ELEMENTS *
***************************************/
.tabbed_interface {
white-space: nowrap;
& > ul > li, & > div
{
white-space: pre-line;
}
}
/****************
* RESET STYLES *
****************/
table, tr, th, td, .panel *, .panel, .tabbed_interface, .tabbed_interface > ul, .tabbed_interface > ul > li, .tabbed_interface > div
{
padding: 0;
margin: 0;
background: none;
box-shadow: none;
border: none;
border-radius: 0;
}
/**************************
* IMPORTED FONT-FAMILIES *
**************************/
/* latin-ext */
@font-face
{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face
{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face
{
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face
{
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*******************
* ABOUT ME CODING *
*******************/
.about
{
display: flex;
flex-flow: column;
width: 310px;
min-height: 450px;
background: @Dark;
font-size: 12pt;
font-family: Helvetica;
color: @Light;
.nav
{
flex-grow: 1;
display: flex;
&>.tabbed_interface
{
flex: 1;
}
}
.header
{
text-align: center;
font-size: 22pt;
font-family: Open Sans;
letter-spacing: 1.5px;
padding-top: 0.75%;
padding-bottom: 0.75%;
}
.tabbed_interface
{
display: flex;
> ul
{
padding-top: 5px;
background: @Dark;
width: 45px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
}
> ul > li
{
flex: 0;
text-align: center;
display: inline-block;
background: transparent;
color: @Light;
font-size: 20pt;
width: 35px;
height: 35px;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
border-radius: 100%;
border: 5px solid transparent;
font-weight: bold;
z-index: 5;
span.bbcode_tooltip
{
border: none;
}
.tooltip_trigger.lock+.tooltip_content, .tooltip_trigger.lock.dismiss+.tooltip_content
{
display: block !important;
z-index: 10000;
}
.tooltip_trigger
{
cursor: pointer;
}
.tooltip_content
{
clip-path: polygon(20% 0, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
position: absolute;
border-radius: 0 10px 10px 0;
white-space: nowrap;
top: 4px;
left: 49px;
height: 30px;
background: @Dark;
color: @Light;
border: none;
font-weight: bold;
font-size: 12pt;
padding-left: 25px;
padding-right: 10px;
line-height: 1.75;
}
}
> ul > li:last-child
{
font-size: 15pt;
line-height: 1.65;
}
> ul > li.tab-active
{
background: @Light;
color: @Dark;
border: 5px solid @Dark;
}
> .tab, > .tab-active
{
flex-grow: 1;
background: @MidShade;
font-size: 12pt;
line-height: 1.25;
border:none;
padding-left: 6%;
padding-right: 2%;
padding-top: 4px;
padding-bottom: 1%;
text-align: justify;
font-family: Raleway;
color: @LightTabContent;
a, a:link, a:visited
{
/* RESET */
text-decoration: none;
font-style: none;
position: relative;
z-index: 0;
display: inline-block;
padding: 0px 5px;
overflow: hidden;
color: #ccc;
vertical-align: bottom;
transition: color .3s ease-out;
}
a::before
{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: translateY(calc(100% - 6px));
width: 100%;
height: 100%;
background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
transition: transform .5s ease-out;
}
a:hover
{
color: #000;
text-shadow: 0 0 4px #888;
font-style: normal;
}
a:hover::before
{
transform: translateY(0);
transition: transform .5s ease-out;
}
a:active
{
}
u
{
text-decoration: underline;
text-decoration-color: #c2e59c;
-moz-text-decoration-color: #c2e59c;
text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
/*background-image: linear-gradient(to right, @Light 50%, transparent 50%);
background-position: 0 1.1em;
background-repeat: repeat-x;
background-size: 6px 1px;*/
}
del
{
text-decoration: line-through;
text-decoration-color: #c2e59c;
-moz-text-decoration-color: #c2e59c;
text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
}
b
{
color: #64b3f4;
}
.panel
{
margin-top: 10px;
background: none;
text-align: left !important;
border: none;
border-radius: 0px;
box-shadow: none !important;
a
{
color: @Light;
}
&>h3
{
padding: 5px;
font-size: 13pt;
text-transform: uppercase;
background: none;
text-shadow:none;
font-family: Open Sans;
font-weight: bold;
-webkit-text-stroke: 0;
a
{
color: @Light;
-webkit-text-stroke: 0;
}
a:before
{
background-color: @Light;
}
a:hover
{
color:black;
}
}
&>div
{
border-left: 1px solid @Light !important;
margin-left: 10px;
padding: 5px 10px;
color: @Light;
border: @Light;
font-size: 12pt!important;
font-family: Helvetica;
}
}
h1,h2,h3
{
font-family: Open Sans;
color: @Light;
-webkit-text-stroke: 1.5px @Dark;
text-shadow: 0px 0px 3px @Light;
}
hr
{
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(54, 57, 63,0), rgba(158, 167, 179,0.75), rgba(54, 57, 63,0));
}
ol
{
list-style-type: lower-greek;
list-style-position: outside;
}
ul
{
list-style-type: square;
list-style-position: outside;
}
.tooltip_content
{
background: @Light !important;
font-size: 10pt;
letter-spacing: 5%;
padding: 2%;
box-shadow: 0px 0px 5px @LightTabContent;
border: @Dark 2px solid;
color: @Dark;
}
span.bbcode_tooltip
{
border-color: @Light;
}
.expbar
{
color: @Dark;
background-color: rgba(255,255,255,0.2);
border-color: @Light;
border-radius: 10px;
text-shadow: 1px 1px 0 #efefef, 1px -1px 0 #efefef, -1px 1px 0 #efefef, -1px -1px 0 #efefef;
font-weight: bold;
overflow: hide;
&>div
{
background-color: @Light !important;
border-right: none;
}
}
.expbar>span
{
font-size: 10pt;
text-transform: uppercase;
border-right: none;
}
table
{
margin: 0 auto;
border: none;
width: auto;
border-spacing: 5px;
border-collapse: separate;
a { color: @Light; }
a:hover { color: @Dark; }
a:before { background-color: @Dark; }
}
th, td
{
background: none;
border: 1px solid @Light;
text-align: center;
color: @color;
padding: 5px;
border-radius: 5px;
}
td:hover
{
background: @Light;
color: @Dark;
-webkit-transition: 800ms ease-out;
transition: 800ms ease-out;
}
th
{
background: @Light;
color: @Dark;
text-transform: uppercase;
letter-spacing: 1px;
}
}
}
.credit
{
position: absolute;
bottom: 5px;
left: 5px;
> a > img:hover
{
filter: drop-shadow(0 0 5px #777);
}
}
}
[/style]
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
