$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) { @return adjust-color($color, $lightness: $pct) }
body {
@extend %sans;
background-color: adjust-color($color, $lightness: -55%);
color: adjust-color($color, $lightness: 25%);
font-size: 14pt;
margin: 0;
padding: 0;
}
a[href] {
color: adjust-color($color, $lightness: 10%);
&:hover {
color: white;
text-shadow: 0 0 15px adjust-color($color, $lightness: 20%);
}
}
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: adjust-color($color, $lightness: 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 adjust-color($color, $alpha: -0.8);
}
%button {
@extend %sans;
font-size: 14pt;
padding: 0.1in 0.2in;
border: 1px solid black;
color: adjust-color($color, $lightness: 25%);
text-shadow: 1px 1px black;
text-decoration: none;
text-align: center;
background: linear-gradient(to bottom,
adjust-color($color, $lightness: -45%),
adjust-color($color, $lightness: -50%) 15%,
adjust-color($color, $lightness: -50%) 75%,
adjust-color($color, $lightness: -55%)
);
&:hover, &:focus {
@extend %glow;
outline: none;
color: adjust-color($color, $lightness: -55%);
text-shadow: none;
background: linear-gradient(to bottom,
adjust-color($color, $lightness: -25%),
adjust-color($color, $lightness: -30%) 15%,
adjust-color($color, $lightness: -30%) 75%,
adjust-color($color, $lightness: -35%)
);
}
&:active {
color: black;
padding-bottom: calc(0.1in - 2px);
padding-top: calc(0.1in + 2px);
background: linear-gradient(to top,
adjust-color($color, $lightness: -25%),
adjust-color($color, $lightness: -30%) 15%,
adjust-color($color, $lightness: -30%) 75%,
adjust-color($color, $lightness: -35%)
);
}
}
button { @extend %button;
&:first-of-type {
@extend %button;
color: white;
box-shadow: inset 0 1px adjust-color($color, $lightness: -25%),
inset 0 -1px adjust-color($color, $lightness: -50%);
background: linear-gradient(to bottom,
adjust-color($color, $lightness: -35%),
adjust-color($color, $lightness: -40%) 15%,
adjust-color($color, $lightness: -40%) 75%,
adjust-color($color, $lightness: -45%)
);
&:hover, &:focus {
box-shadow: inset 0 1px adjust-color($color, $lightness: -15%),
inset 0 -1px adjust-color($color, $lightness: -40%);
}
&:active {
box-shadow: inset 0 1px adjust-color($color, $lightness: -50%),
inset 0 -1px adjust-color($color, $lightness: -25%);
background: linear-gradient(to top,
adjust-color($color, $lightness: -30%),
adjust-color($color, $lightness: -35%) 15%,
adjust-color($color, $lightness: -35%) 75%,
adjust-color($color, $lightness: -40%)
);
}
}
&:hover { font-weight: bold; }
}
$grad-ui-focus: linear-gradient(to bottom,
adjust-color($color, $lightness: -50%),
adjust-color($color, $lightness: -35%)
);
input[type='text'], input[type='password'], textarea {
@extend %serif;
padding: 0.08in 0.1in;
border: 1px solid black;
background: linear-gradient(to bottom,
adjust-color($color, $lightness: -55%),
adjust-color($color, $lightness: -40%)
);
font-size: 16pt;
color: adjust-color($color, $lightness: 25%);
box-shadow: inset 0 0 20px -3px adjust-color($color, $lightness: -55%);
&:focus {
color: white;
border-image: linear-gradient(to bottom,
adjust-color($color, $lightness: -10%),
adjust-color($color, $lightness: -30%)
) 1 / 1px;
background: $grad-ui-focus;
outline: none;
@extend %glow;
}
}
@mixin glass {
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background-color: adjust-color($color, $lightness: -53%, $alpha: -0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
background-color: adjust-color($color, $lightness: -53%, $alpha: -0.1);
}
}
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.15in;
//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;
background-color: adjust-color($color, $lightness: -45%, $alpha: 0.4);
border: {
left: 1px solid black;
right: 1px solid black;
}
}
div.profile {
@extend %box;
padding: 0.1in;
position: relative;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
> .banner {
grid-column: 1 / 3;
grid-row: 1 / 2;
display: grid;
grid-template-columns: 1.1in 1fr;
grid-template-rows: 0.3in 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: adjust-color($color, $lightness: 25%, $alpha: -0.4);
> .nym {
font-weight: bold;
color: adjust-color($color, $lightness: 25%);
}
> .xid {
color: adjust-color($color, $lightness: 20%, $alpha: -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;
}
> .menu {
grid-column: 1 / 3;
grid-row: 2 / 3;
display: flex;
justify-content: center;
align-items: center;
> a[href] {
@extend %button;
display: block;
margin: 0 0.05in;
}
> hr {
all: unset;
display: block;
height: 0.3in;
width: 1px;
border-left: 1px solid rgba(0,0,0,0.6);
}
}
}
%box {
margin: auto;
border: 1px solid adjust-color($color, $lightness: -55%);
border-bottom: 3px solid black;
box-shadow: 0 0 1px black;
border-image: linear-gradient(to bottom,
adjust-color($color, $lightness: -40%),
adjust-color($color, $lightness: -52%) 10%,
adjust-color($color, $lightness: -55%) 90%,
adjust-color($color, $lightness: -60%)
) 1 / 1px;
background: linear-gradient(to bottom,
adjust-color($color, $lightness: -58%),
adjust-color($color, $lightness: -55%) 10%,
adjust-color($color, $lightness: -50%) 80%,
adjust-color($color, $lightness: -45%)
);
// outline: 1px solid black;
}
body.error .message {
@extend %box;
width: 4in;
margin:auto;
padding: 0.5in;
text-align: center;
}
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: adjust-color($color, $lightness: -20%, $alpha: -0.3);
border: 1px solid black;
color: adjust-color($color, $lightness: -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;
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/5; grid-row: 1/2; height: 3in;}
> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
> button { 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: adjust-color($color, $lightness: -50%);
border: 1px solid adjust-color($color, $lightness: -20%);
padding: 2px 6px;
text-shadow: 2px 2px black;
}