:root {
--lighter: rgb(255,255,255,0.25);
--little-lighter: rgba(255, 255, 255, 0.05);
--little-darker: rgb(0,0,0,0.05);
--darker: rgb(0,0,0,0.25);
--lot-darkwr: rgb(0,0,0,0.5);
--accent: var(--brown);
--radius: 0.25rem;
--single: 2px solid;
--double: 6px double;
--focus: var(--single) blue;
--fast: 0.25s;
--center-width: min( 100%, 45rem);
/* --side-width: calc( ( 100vw - var(--center-width) ) / 2 - 1rem ); */
--side-width: 30rem;
}
html{
scroll-behavior:smooth;
}
body {
background: radial-gradient( #f8f8f8, #b8b8b8 );
}
main {
position: relative;
margin: auto;
margin-left: calc(var(--side-width) + 0.5rem);
max-width: var(--center-width);
font-family: Arial;
line-height: 2;
}
.mw-body-content {
position: relative;
}
main > h1 {
display: none;
}
h1, h2, h3, h4, h5 {
font-weight: normal;
font-family: monospace;
}
h1, h2 {
font-family: Arial;
font-family: Times New Roman, Times, Serif;
font-size: 4rem;
text-align: center;
line-height: 1.2 !important;
}
h1 {
font-size: 4rem;
}
.author {
font-weight: normal;
text-align: center;
font-family: cursive;
font-size: 2rem;
color: #ff10c3;
}
section {
background-color: rgb(0,0,0,0.02);
border-top: var(--single) var(--little-darker);
border-left: var(--single) var(--little-darker);
border-bottom: var(--single) var(--lighter);
border-right: var(--single) var(--lighter);
padding: 1rem;
margin: 1rem;
}
section:target,
section:has(:target),
:target section,
section section {
display: block;
}
#nav {
display: none;
}
/* TOC */
#toc {
position: fixed;
right: calc( -1 * ( 40% + 2rem ) );
box-sizing: border-box;
min-width: 40%;
width: 40%;
height: calc( 100vh );
top: 0;
padding-right: 1rem;
transition: right 0.2s linear;
/* overflow:scroll; */
z-index: 10000;
}
img {
min-width: 100%;
max-width: 100%;
height: auto;
}
#toc .toctitle h2 {
font-size: 1rem;
padding: 1rem;
display: inline-block;
border-top: var(--single) var(--little-darker);
border-left: var(--single) var(--little-darker);
border-bottom: var(--single) var(--lighter);
border-right: var(--single) var(--lighter);
background-color: rgb(0,0,0,0.02);
position: relative;
width: 100%;
max-width: 8rem;
right: calc(0% + 13rem);
transition:
background-color 0.2s linear,
border-color 0.2s linear,
max-width 0.2s linear,
right 0.2s linear,
font-size 0.2s linear
;
}
#toc ul {
padding-left: 1rem;
list-style: none;
text-align: center;
}
#toc > ul > li {
display: inline-block;
border-radius: 1rem;
background-color: lightgray;
box-shadow: 0 0 1rem 0 #6A6E09;
padding: 1rem;
margin: 0;
text-align: left;
}
#toc > ul > li > ul > li {
display: none;
}
#toc > ul > li a.selected + ul li,
#toc > ul li:has(a.selected) ul li {
display: list-item;
text-align: left;
}
#toc > ul > li:first-of-type,
#toc .tocnumber {
display: none;
}
#toc:hover {
right: calc( 0% );
}
#toc:hover .toctitle h2 {
right: 0;
background-color: transparent;
border-color: transparent;
font-size: 4rem;
max-width: 40vw;
}
/* left navigation */
section#The_New_Social {
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
max-width: var(--side-width);
max-height: calc( 100vh - 2rem );
padding: 1rem;
transition: left 0.2s linear;
scroll-behavior:smooth;
display: flex;
flex-direction: column;
overflow: hidden;
}
#The_New_Social:hover {
left: 0;
}
#The_New_Social > h2,
#The_New_Social > section h3 {
margin: 0;
}
#The_New_Social > * {
margin-block-end: 0rem;
margin-inline: 0;
}
#The_New_Social > section:last-of-type {
padding: 0;
max-height: 100%;
overflow: scroll;
}
#The_New_Social div#Principles {
overflow: scroll;
box-sizing: border-box;
max-height: 100%;
padding: 0.3rem;
}
#The_New_Social div#Principles > p {
display: none;
}
#The_New_Social div#Principles section {
padding: 0.3rem;
margin: 0.3rem;
}
#The_New_Social div#Principles > section {
display: inline-block;
padding: 0.3rem 0.6rem;
}
#The_New_Social div#Principles > section > p {
display: none;
}
#The_New_Social div#Principles > section > h3 {
margin: 0;
display: inline-block;
}
#The_New_Social div#Principles > section .content {
min-width: 20rem;
vertical-align: bottom;
}
/* default: hide */
#The_New_Social div#Principles > section .content {
display: none;
}
/* targeted: show */
/*#The_New_Social div#Principles > section:target .content,*/
/*#The_New_Social div#Principles > section:has(:target) .content,*/
#The_New_Social div#Principles > section.selected .content
/*#The_New_Social div#Principles > section:has(.selected) .content*/
{
display: unset;
}
/* Custom Clippy Ant Styling */
.clippy_ant {
/* changed in JS */
--index: 0;
position: relative;
font-family: NotCourierSans;
background: hsl(70, 80%, 80%);
border-radius: 600% 50px;
padding: 1rem;
min-width: 250px;
max-width: 400px;
margin-left: calc( -100px + 1rem * var(--index) );
transition: border-radius 0.5s linear, border-color 0.5s linear;
border-top: var(--single) var(--darker);
border-left: var(--single) var(--darker);
border-bottom: var(--single) var(--lighter);
border-right: var(--single) var(--lighter);
}
.clippy_ant::before {
content: "🐜🐜🐜";
position: absolute;
left: -20px;
bottom: 12px;
text-align: center;
width: 100%;
font-size: 1.3rem;
font-family: emoji;
transform: scaleX(-1);
rotate: -11deg;
transition: bottom 0.6s linear;
}
.clippy_ant:hover {
border-radius: 100% 50px;
border-top: var(--single) var(--little-darker);
border-left: var(--single) var(--little-darker);
border-bottom: var(--single) var(--little-lighter);
border-right: var(--single) var(--little-lighter);
}
.clippy_ant:hover::before {
transform: scaleX(1);
rotate: -9deg;
bottom: 0px;
}
/* Galleries */
ul.gallery {
position: relative;
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: scroll;
width: 100%;
border-top: var(--single) var(--little-darker);
border-left: var(--single) var(--little-darker);
border-bottom: var(--single) var(--lighter);
border-right: var(--single) var(--lighter);
padding: 1rem;
}
ul.gallery li {
min-width: 100%;
margin-right: 1rem;
border-top: var(--single) var(--little-darker);
border-left: var(--single) var(--little-darker);
border-bottom: var(--single) var(--lighter);
border-right: var(--single) var(--lighter);
background-color: rgb(0,0,0,0.02);
}
ul.gallery li:last-of-type {
margin-right: 0;
}
ul.gallery li div.thumb {
width: 100% !important;
height: unset !important;
}
ul.gallery li div.thumb span {
display: block;
width: 100%;
}
ul.gallery li div.thumb span a {
display: block;
width: 100%;
}
ul.gallery li div.thumb span a img {
box-sizing: border-box;
width: 100%;
height: unset;
}
ul.gallery .controls {
position: sticky;
align-self: flex-start;
top: 0;
left: 0;
width: 0%;
background: red;
display: flex;
justify-content: flex-start;
overflow: visible;
}
ul.gallery .controls span {
min-width: 2rem;
height: 2rem;
text-align: center;
display: block;
background-color: grey;
border-top: var(--single) var(--little-darker);
border-left: var(--single) var(--little-darker);
border-bottom: var(--single) var(--lighter);
border-right: var(--single) var(--lighter);
padding: 0rem;
color: lightgrey;
cursor: pointer;
}
ul.gallery .controls span.left {
margin: -0.5rem;
}
ul.gallery .controls span.right {
margin-left: 1rem;
}
@media screen and (max-width: 75rem) {
:root {
--main-width: 30rem;
--side-width: 20rem;
}
}