475 lines
9.9 KiB
CSS
475 lines
9.9 KiB
CSS
@import url(https://fonts.bunny.net/css?family=b612-mono:400|phudu:400|noto-sans:400|martian-mono:700|andika:400);
|
|
/* CSS HEX */
|
|
:root {
|
|
--jet: #353535ff;
|
|
--chinese-red: #aa3322ff;
|
|
--pale-silver: #c4bbafff;
|
|
--space-cadet: #292640ff;
|
|
--xiketic: #0f101aff;
|
|
--blue-ryb: #4056f4ff;
|
|
--raisin-black: #241e1edd;
|
|
--dim-gray: #756b6bff;
|
|
--pewter-blue: #93A8ACff;
|
|
|
|
--celestial-blue: #5299D3;
|
|
--white-smoke: #F1EDEE;
|
|
--midnight-blue: #18206F;
|
|
--penn-blue: #17255A;
|
|
--eerie-black: #172121;
|
|
--vista-blue: #8EA4D2;
|
|
|
|
--dark-purple: #331832;
|
|
--fairy-tale: #FFC6D9;
|
|
--english-violet: #694D75;
|
|
--platinum: #D0DDD7;
|
|
--non-photo-blue: #8AC6D0;
|
|
|
|
--night: #121113;
|
|
--tea-green: #E2F1AF;
|
|
--anti-flash-white: #EEF0F2;
|
|
--zaffre: #0D21A1;
|
|
--saffron: #EEC643;
|
|
--purple: #7B1E7A;
|
|
--raspberry-rose: #B33F62;
|
|
--tufts-blue: #3C91E6;
|
|
--pale-purple: #F3E0EC;
|
|
--timberwolf: #DDCECD;
|
|
--isabelline: #EEE5E5;
|
|
--verdigris: #28AFB0;
|
|
--fandango: #AF4D98;
|
|
--risd-blue: #4242FF;
|
|
|
|
--charcoal: #364958;
|
|
--cornflower-blue: #758BFD;
|
|
--tropical-indigo: #9D8DF1;
|
|
|
|
/* solarized dark colors */
|
|
--base00: #657b83;
|
|
--base01: #586e75;
|
|
--base02: #073642;
|
|
--base03: #002b36;
|
|
--base0: #839496;
|
|
--base1: #93a1a1;
|
|
--base2: #eee8d5;
|
|
--base3: #fdf6e3;
|
|
|
|
--yellow: #b58900;
|
|
--orange: #cb4b16;
|
|
--red: #dc322f;
|
|
--magenta: #d33682;
|
|
--violet: #6c71c4;
|
|
--blue: #268bd2;
|
|
--cyan: #2aa198;
|
|
--green: #859900;
|
|
|
|
--main-bg: var(--dark-purple);
|
|
--content-bg: var(--isabelline);
|
|
--primary-text: var(--night);
|
|
--secondary-text: var(--charcoal);
|
|
--primary-link: var(--risd-blue);
|
|
--primary-link-hover: var(--verdigris);
|
|
--secondary-link: var(--cyan);
|
|
--secondary-link-hover: var(--pewter-blue);
|
|
--ternary-link: var(--fairy-tale);
|
|
--ternary-link-hover: var(--pewter-blue);
|
|
}
|
|
|
|
body {
|
|
background: fixed no-repeat url('/images/waves.svg') #00c2f6;
|
|
/* placeholder blueprint bg */
|
|
/* background-color:#269; */
|
|
/* background-image: linear-gradient(white 2px, transparent 2px),
|
|
linear-gradient(90deg, white 2px, transparent 2px),
|
|
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
|
|
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
|
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px; */
|
|
/* end placeholder */
|
|
color: var(--primary-text);
|
|
font-size: 16px;
|
|
font-family: 'Noto Sans', sans-serif;
|
|
scrollbar-width: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: var(--secondary-text);
|
|
font-family: 'Martian Mono', monospace;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.8;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
color: var(--primary-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:active {
|
|
/* color: var(--primary-link-hover); */
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.tag {
|
|
color: var(--secondary-link);
|
|
}
|
|
|
|
a.tag:hover, a.tag:active {
|
|
color: var(--secondary-link-hover);
|
|
}
|
|
|
|
a.permalink {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
a.summary {
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
header h1 {
|
|
font-family: 'Phudu', monospace;
|
|
/* font-size: 1rem; */
|
|
color: var(--fairy-tale);
|
|
display: inline;
|
|
}
|
|
|
|
ul.social {
|
|
list-style-type: none;
|
|
padding: 0 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li.social {
|
|
padding: 0;
|
|
}
|
|
|
|
img.social {
|
|
height: 16px;
|
|
}
|
|
|
|
header a.sitetitle {
|
|
text-decoration: none;
|
|
}
|
|
|
|
header .profile {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
margin: 10px;
|
|
}
|
|
|
|
header .profile img {
|
|
display: inline-block;
|
|
}
|
|
|
|
p.about {
|
|
line-height: 0;
|
|
color: var(--fairy-tale);
|
|
}
|
|
|
|
p.context {
|
|
font-style: italic;
|
|
}
|
|
|
|
.wrapper {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
nav {
|
|
/* From https://css.glass */
|
|
background: rgba(255, 255, 255, 0.13);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
|
text-align: center;
|
|
padding: 0;
|
|
border-radius: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav li {
|
|
display: inline;
|
|
}
|
|
|
|
nav li a {
|
|
display: inline-block;
|
|
padding: 20px;
|
|
font-family: 'Andika', monospace;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
nav li a:link, nav li a:visited {
|
|
color: var(--ternary-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav li a:hover, nav li a:active {
|
|
animation: 0.2s ease-in 1 forwards gradient;
|
|
outline: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 0 10px white;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.00) 10%, rgba(255,255,255,0) 20%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.0) 41%);
|
|
}
|
|
20% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 30%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
40% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 35%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
60% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 45%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
80% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
100% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
}
|
|
|
|
.main-sidebar {
|
|
background-color: var(--content-bg);
|
|
border-radius: 15px;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-flow: row wrap-reverse;
|
|
box-shadow: 10px 5px 5px #00000066;
|
|
padding: 0;
|
|
}
|
|
|
|
.sidebar {
|
|
flex: 0 1 20%;
|
|
border-right: 1px solid;
|
|
border-image: linear-gradient(transparent 30px, grey 31px, grey 97%, transparent 98%) 1;
|
|
padding: 30px 15px;
|
|
/* background: linear-gradient(aqua 0%, transparent 15%); */
|
|
/* border-radius: 15px 0 0 0; */
|
|
}
|
|
|
|
.sidebar h1 {
|
|
border-bottom: 1px inset grey;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sidebar #avatar-frame {
|
|
width: fit-content;
|
|
height: 100px;
|
|
margin: 0 auto;
|
|
padding: 8px 8px;
|
|
border: 1px solid #cccccf;
|
|
border-radius: 16px/24px;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar #avatar-frame img {
|
|
max-width: 100px;
|
|
border: 1px solid grey;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.online {
|
|
background: linear-gradient(#D6FFDB00 0%, #D6FFDB 30%, #66FF00 100%);
|
|
box-shadow: 0 5px 10px #66FF00;
|
|
}
|
|
|
|
.busy {
|
|
background: linear-gradient(#FF9A0000 0%, #D8820055 30%, #fca30d 100%);
|
|
box-shadow: 0 5px 10px #fca30d;
|
|
}
|
|
|
|
.gloss {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* background: red; */
|
|
background: radial-gradient(ellipse 200px 140px at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%,
|
|
rgba(255,255,255,0) 51%);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
border-radius: 16px/24px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
main {
|
|
flex: 1 3 70%;
|
|
padding: 30px;
|
|
}
|
|
|
|
main li {
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
|
|
article p.context {
|
|
margin-top: -25px;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
article p {
|
|
text-align: justify;
|
|
}
|
|
|
|
article img {
|
|
display: block;
|
|
max-width: 400px;
|
|
margin: 8px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
article figcaption {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
section.posts ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
article time {
|
|
color: var(--secondary-text);
|
|
}
|
|
|
|
blockquote {
|
|
font: 14px/22px normal helvetica, sans-serif;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
margin-left: 50px;
|
|
padding-left: 15px;
|
|
border-left: 3px solid #ccc;
|
|
}
|
|
|
|
code {
|
|
background-color: black;
|
|
overflow-x: scroll;
|
|
padding: 0 5px;
|
|
color: white;
|
|
}
|
|
|
|
pre code{
|
|
padding: 15px;
|
|
display: block;
|
|
max-width: 640px;
|
|
}
|
|
|
|
ul.pagination {
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
li.page-item {
|
|
display: inline;
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
footer {
|
|
padding: 0 0 15px 0px;
|
|
text-align: center;
|
|
color: var(--secondary-text);
|
|
}
|
|
|
|
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Index page blog posts */
|
|
.title-date {
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/*
|
|
* Links page
|
|
*/
|
|
|
|
#links-main {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#links-main li {
|
|
padding: 7px 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.link-list details {
|
|
border: 1px dotted var(--pewter-blue);
|
|
padding: 0.5em 0.5em 0;
|
|
}
|
|
|
|
.link-list details[open] {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.link-list details[open] summary {
|
|
border-bottom: 1px dotted var(--pewter-blue);
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.link-list summary {
|
|
margin: -0.5em -0.5em 0;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.links-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 30%;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* webmention box */
|
|
|
|
.send-webmention {
|
|
margin: 55px 25px;
|
|
max-width: fit-content;
|
|
border: 1px dotted var(--primary-text);
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
.send-webmention p {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.sidebar {
|
|
border: none;
|
|
}
|
|
|
|
article img {
|
|
max-width: 200px;
|
|
}
|
|
}
|