$color: hsl(323,100%,65%);
%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
@function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
body {
@extend %sans;
background-color: tone(-55%);
color: tone(25%);
font-size: 14pt;
margin: 0;
padding: 0;
}
::selection {
color: tone(-60%);
background-color: tone(-10%);
}
::placeholder {
color: tone(0,-0.3);
font-style: italic;
}
a[href] {
color: tone(10%);
text-decoration-color: tone(10%,-0.5);
&:hover {
color: white;
text-shadow: 0 0 15px tone(20%);
text-decoration-color: tone(10%,-0.1);
}
&.button { @extend %button; }
}
a[href^="//"],
a[href^="http://"],
a[href^="https://"] { // external link
&:hover::after {
color: black;
background-color: white;
}
&::after {
content: "↗";
display: inline-block;
color: black;
margin-left: 4pt;
background-color: tone(10%);
padding: 0 4px;
text-shadow: none;
padding-right: 5px;
vertical-align: baseline;
font-size: 80%;
}
}
%content {
width: 8in;
margin: auto;
}
%glow {
box-shadow: 0 0 20px tone(0%,-0.8);
}
%button {
@extend %sans;
font-size: 14pt;
box-sizing: border-box;
padding: 0.1in 0.2in;
border: 1px solid black;
color: tone(25%);
text-shadow: 1px 1px black;
text-decoration: none;
text-align: center;
cursor: default;
user-select: none;
background: linear-gradient(to bottom,
tone(-47%),
tone(-50%) 15%,
tone(-50%) 75%,
tone(-53%)
);
&:hover, &:focus {
@extend %glow;
outline: none;
color: tone(-55%);
text-shadow: none;
background: linear-gradient(to bottom,
tone(-27%),
tone(-30%) 15%,
tone(-30%) 75%,
tone(-35%)
);
}
&:active {
color: black;
padding-bottom: calc(0.1in - 2px);
padding-top: calc(0.1in + 2px);
background: linear-gradient(to top,
tone(-25%),
tone(-30%) 15%,
tone(-30%) 75%,
tone(-35%)
);
}
}
button { @extend %button;
&:first-of-type {
@extend %button;
color: white;
box-shadow: inset 0 1px tone(-25%),
inset 0 -1px tone(-50%);
background: linear-gradient(to bottom,
tone(-35%),
tone(-40%) 15%,
tone(-40%) 75%,
tone(-45%)
);
&:hover, &:focus {
box-shadow: inset 0 1px tone(-15%),
inset 0 -1px tone(-40%);
}
&:active {
box-shadow: inset 0 1px tone(-50%),
inset 0 -1px tone(-25%);
background: linear-gradient(to top,
tone(-30%),
tone(-35%) 15%,
tone(-35%) 75%,
tone(-40%)
);
}
}
&:hover { font-weight: bold; }
}
$grad-ui-focus: linear-gradient(to bottom,
tone(-50%),
tone(-35%)
);
input[type='text'], input[type='password'], textarea, select {
@extend %serif;
padding: 0.08in 0.1in;
box-sizing: border-box;
border: 1px solid black;
background: linear-gradient(to bottom, tone(-55%), tone(-40%));
font-size: 16pt;
color: tone(25%);
box-shadow: inset 0 0 20px -3px tone(-55%);
&:focus {
color: white;
border-image: linear-gradient(to bottom, tone(-10%), tone(-30%)) 1 / 1px;
background: $grad-ui-focus;
outline: none;
@extend %glow;
}
}
select { width: 100%; }
@mixin glass {
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background-color: tone(-53%, -0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
background-color: tone(-53%, -0.1);
}
}
h1 { margin-top: 0 }
header {
position: fixed;
height: min-content;
width: 100vw;
margin: 0;
padding: 0;
border-bottom: 1px solid black;
z-index: 1;
@include glass;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
> div {
position: relative;
max-width: 10in;
margin: auto;
display: grid;
grid-template-columns: 1fr max-content;
grid-template-rows: 1fr;
h1 {
all: unset;
display: block;
font-size: 1.4em;
padding: 0.25in 0;
text-shadow: 2px 2px 1px black;
grid-column: 1/2; grid-row: 1/2;
}
nav {
all: unset;
display: flex;
justify-content: flex-end;
align-items: center;
grid-column: 2/3; grid-row: 1/2;
> a[href] {
display: block;
padding: 0.25in 0.10in;
//padding: calc((25% - 1em)/2) 0.15in;
&, &::after { transition: 0.3s; }
text-shadow: 1px 1px 1px black;
&:hover{
transform: scale(120%);
}
}
}
}
}
main {
@extend %content;
display: block;
position: relative;
min-height: calc(100vh - 1.1in);
margin-top: 0;
margin-bottom: 0;
padding: 0 0.4in;
padding-top: 1.1in;
padding-bottom: 0.1in;
background-color: tone(-45%,-0.3);
border: {
left: 1px solid black;
right: 1px solid black;
}
}
div.profile {
padding: 0.1in;
position: relative;
display: grid;
margin-bottom: 0.4in;
grid-template-columns: 2fr 1fr;
grid-template-rows: max-content 1fr;
width: 100%;
> .banner {
grid-column: 1 / 3;
grid-row: 1 / 2;
display: grid;
grid-template-columns: 1.1in 1fr;
grid-template-rows: max-content 1fr;
> .avatar {
display: block;
width: 1in; height: 1in;
grid-column: 1 / 2;
grid-row: 1 / 3;
border: 1px solid black;
}
> .id {
grid-column: 2 / 3;
grid-row: 1 / 2;
color: tone(25%,-0.4);
> .nym {
font-weight: bold;
color: tone(25%);
}
> .xid {
color: tone(20%,-0.1);
font-size: 80%;
vertical-align: text-top;
}
}
> .bio {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
}
> .stats {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
> form.actions {
grid-column: 1 / 3; grid-row: 2 / 3;
padding-top: 0.075in;
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
> a[href] {
display: block;
margin: 0.025in 0.05in;
}
> hr {
all: unset;
display: block;
height: 0.3in;
width: 1px;
border-left: 1px solid rgba(0,0,0,0.6);
}
}
}
.epithet {
display: inline-block;
background: tone(20%);
color: tone(-45%);
text-shadow: 0 0 3px tone(-30%, -0.4);
border-radius: 2px;
padding: 6px;
padding-top: 2px;
padding-bottom: 4px;
font-size: 80%;
vertical-align: top;
font-weight: 300;
letter-spacing: 0.5px;
margin: 0 5pt;
// transform: scale(80%) translateX(-10pt); // cheating!
}
%box {
margin: auto;
border: 1px solid tone(-55%);
border-bottom: 3px solid black;
box-shadow: 0 0 1px black;
border-image: linear-gradient(to bottom,
tone(-40%),
tone(-52%) 10%,
tone(-55%) 90%,
tone(-60%)
) 1 / 1px;
background: linear-gradient(to bottom,
tone(-58%),
tone(-55%) 10%,
tone(-50%) 80%,
tone(-45%)
);
// outline: 1px solid black;
}
//body.error .message {
.message {
@extend %box;
display: block;
width: 4in;
margin:auto;
padding: 0.5in;
text-align: center;
menu:first-of-type { margin-top: 0.3in; }
}
div.login {
@extend %box;
width: 4in;
padding: 0.4in;
> .msg {
text-align: center;
padding: 0.3in;
}
> .msg:first-child { padding-top: 0; }
> .user {
width: min-content; margin: auto;
background: tone(-20%,-0.3);
border: 1px solid black;
color: tone(-50%);
padding: 0.1in;
> img { width: 1in; height: 1in; border: 1px solid black; }
> .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
}
>form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.2em 1fr 1fr;
grid-gap: 5px;
> label, input, button { display: block; }
> label { grid-column: 1 / 3; grid-row: 1/2; font-weight: bold }
> input { grid-column: 1 / 3; grid-row: 2/3; }
> button { grid-column: 2 / 3; grid-row: 3/4; }
> a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
}
}
form.compose {
@extend %box;
display: grid;
grid-template-columns: 1.1in 2fr min-content 1fr 1.5fr;
grid-template-rows: 1fr min-content;
grid-gap: 2px;
padding: 0.1in;
> img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
> textarea {
grid-column: 2/6; grid-row: 1/2; height: 3in;
resize: vertical;
margin-bottom: 0.08in;
}
> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
> button[value="post"] { grid-column: 5/6; grid-row: 2/3; }
> button[value="attach"] { grid-column: 4/5; grid-row: 2/3; }
a.help[href] { margin-right: 0.05in }
}
a.help[href] {
display: block;
text-align: center;
padding: 0.09in 0.2in;
background: tone(-40%);
border: 1px solid black;
font-weight: bold;
text-decoration: none;
cursor: help;
}
input.acl {
@extend %teletype;
background: url(/s/padlock.webp) no-repeat;
background-size: 20pt;
background-position: 0.05in 50%;
&:focus {
background: url(/s/padlock.webp) no-repeat, $grad-ui-focus;
background-size: 20pt;
background-position: 0.05in 50%;
};
padding-left: 0.40in;
}
div.modal {
@extend %box;
position: fixed;
display: none;
left: 0; right: 0; bottom: 0; top: 0;
max-width: 7in;
margin: 1in auto;
padding: 0.2in 0.3in;
&:target { display: block; }
box-shadow: 0 0 4in 5in rgba(0,0,0,0.5);
z-index: 2;
> div {
height: 100%;
overflow-y: scroll;
>p:first-of-type { margin-top: 0; }
}
>a[href="#0"] { // close link
@extend %button;
cursor: default;
display: block;
position: absolute;
top: -0.3in;
right: 0.1in;
margin: 0.1in;
padding: 0.1in;
&:hover { font-weight: bold; }
}
}
code {
@extend %teletype;
background: tone(-55%);
border: 1px inset tone(-20%);
padding: 2px 6px;
font-size: 1.5ex !important;
letter-spacing: 1.3px;
padding-bottom: 3px;
border-radius: 2px;
vertical-align: baseline;
box-shadow: 1px 1px 1px black;
}
div.post {
@extend %box;
display: grid;
grid-template-columns: 1in 1fr max-content;
grid-template-rows: min-content max-content;
margin-bottom: 0.1in;
>.avatar {
grid-column: 1/2; grid-row: 1/2;
img { display: block; width: 1in; margin:0; }
background: linear-gradient(to bottom, tone(-53%), tone(-57%));
}
>a[href].username {
display: block;
grid-column: 1/3;
grid-row: 2/3;
text-align: left;
text-decoration: none;
padding: 0.1in;
padding-left: 0.15in;
>.nym { font-weight: bold; }
color: tone(0%,-0.4);
> span.nym { color: tone(10%) }
> span.handle { color: tone(-5%) }
background: linear-gradient(to right, tone(-55%), transparent);
&:hover {
> span.nym { color: white; }
> span.handle { color: tone(15%) }
}
}
>.content {
grid-column: 2/4; grid-row: 1/2;
padding: 0.2in;
@extend %serif;
font-size: 110%;
text-align: justify;
}
> a[href].permalink {
display: block;
grid-column: 3/4; grid-row: 2/3;
font-size: 80%;
text-align: right;
padding: 0.1in;
padding-right: 0.15in;
font-style: italic;
background: linear-gradient(to left, tone(-55%,-0.5), transparent);
}
}
a[href].rawlink {
@extend %teletype;
}
body.doc main {
@extend %serif;
text-align: justify;
li { margin-top: 0.05in; }
li:first-child { margin-top: 0; }
h1, h2, h3, h4, h5, h6 {
background: linear-gradient(to right, tone(-50%), transparent);
margin-left: -0.4in;
padding-left: 0.2in;
text-shadow: 0 2px 0 black;
}
}
menu { all: unset; display: block; }
body.conf main {
display: grid;
grid-template-columns: 2in 1fr;
grid-template-rows: max-content 1fr;
> menu {
margin-left: -0.25in;
grid-column: 1/2; grid-row: 1/2;
background: linear-gradient(to bottom, tone(-45%),tone(-55%));
border: 1px solid black;
padding: 0.1in;
> a[href] {
@extend %button;
display: block;
text-align: left;
}
> a[href] + a[href] {
border-top: none;
}
hr {
border: none;
}
}
> .panel {
grid-column: 2/3; grid-row: 1/3;
padding-left: 0.15in;
> h1 {
padding-bottom: 0.1in;
margin-bottom: 0.1in;
margin-left: -0.15in;
padding-left: 0.15in;
padding-top: 0.12in;
background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
border: 1px solid tone(-55%);
border-left: none;
text-shadow: 1px 1px 0 black;
}
}
}
hr {
border: none;
border-top: 1px solid tone(-30%);
border-bottom: 1px solid tone(-55%);
}
form {
margin: 0.15in 0;
> p:first-child { margin-top: 0; }
> p:last-child { margin-bottom: 0; }
.elem {
margin: 0.1in 0;
label { display:block; font-weight: bold; padding: 0.03in 0; }
.txtbox {
@extend %serif;
box-sizing: border-box;
padding: 0.08in 0.1in;
border: 1px solid black;
background: tone(-55%);
}
input, textarea, .txtbox {
display: block;
width: 100%;
}
textarea { resize: vertical; min-height: 2in; }
}
.elem + %button { margin-left: 50%; width: 50%; }
}
menu.choice {
display: flex;
&.horizontal {
flex-flow: row-reverse wrap;
justify-content: space-evenly;
}
&.vertical {
flex-flow: column;
margin-left: 50%;
}
&.vertical-float {
flex-flow: column;
float: right;
width: 40%;
margin-left: 0.1in;
}
> %button {
flex-basis: 0;
flex-grow: 1;
display: block; margin: 2px;
}
}
.check-panel {
display: flex;
flex-flow: row wrap;
> label {
display: block;
box-sizing: border-box;
width: calc(50% - 0.2in);
padding: 0.1in 0.1in;
margin: 0.1in 0.1in;
background: tone(-45%);
border: 1px solid black;
text-shadow: 1px 1px black;
flex-grow: 1;
&:focus-within {
border: 1px inset tone(-10%);
background: tone(-50%);
}
}
input[type="checkbox"] {
-webkit-appearance: none;
padding: 0.5em;
background: tone(-35%);
border: 1px outset tone(-50%);
vertical-align: bottom;
box-shadow: 0 1px tone(-50%);
&:checked {
border: 1px inset tone(-35%);
background: tone(-60%);
box-shadow: 0 1px tone(-40%);
}
&:focus {
border-color: tone(10%);
outline: none;
}
}
}
@keyframes flashup {
0% { opacity: 0; transform: scale(0.8); }
10% { opacity: 1; transform: scale(1.1); }
80% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.9) translateY(-0.12in); display: none; }
}
.flashmsg {
display: block;
position: fixed;
top: 1.3in;
max-width: 3in;
padding: 0.5in 0.2in;
left: 0; right: 0;
text-align: center;
text-shadow: 0 0 15px tone(10%);
margin: auto;
background: linear-gradient(to bottom, tone(-49%), tone(-43%,-0.1));
border: 1px solid tone(0%);
border-radius: 3px;
box-shadow: 0 0 50px tone(-55%);
color: white;
animation: ease forwards flashup;
//cubic-bezier(0.4, 0.63, 0.6, 0.31)
animation-duration: 3s;
}
form.action-bar {
display: flex;
> * {
flex-grow: 1;
flex-basis: 0;
margin-left: 0.1in;
}
> *:first-child {
margin-left: 0;
}
}