1 line
4.4 KiB
CSS
1 line
4.4 KiB
CSS
body{margin:0;font-family:Inter}a{text-decoration:none;color:unset}.container{padding:0 1em;margin:0 auto;max-width:80em}.section{padding:2em 0}@media(min-width:40em){.container{padding:0 2em}}p{line-height:1.4}.site-title{display:flex;align-items:center}.site-title img{width:4em;height:4em}.site-title h1{margin:0;margin-left:.25em;font-size:1.5em}.site-header .container{display:flex;justify-content:space-between}.site-nav,.site-nav a{display:flex;align-items:center;justify-content:center}.site-nav a{height:3em;width:3em}.site-nav a{margin-left:1em}.site-nav a:first-child{margin-left:0}.site-nav a.primary{background:#4682b4;color:#fff}.site-nav i{font-size:1.5em}.site-nav{padding:0 1em}.site-header{background:#000;color:#fff;position:fixed;top:0;left:0;width:100%}body{margin-top:4em;min-height:calc(100vh - 4em);display:flex;flex-flow:column}main{flex-grow:1}@media(max-width:40em){.site-nav{position:fixed;bottom:0;left:0;width:100%;background:#000;color:#fff;padding:0}.site-nav i{font-size:1.5em}.site-header h1{font-size:1.5em}.site-header img{height:3em;width:3em}body{margin-bottom:3em;margin-top:3em;min-height:calc(100vh - 3em - 3em)}}.site-footer{background:#ddd;padding:1em 0}.site-footer .links{list-style:none;padding:0;display:flex;flex-flow:column;flex-basis:100%;padding-bottom:1em}.site-footer .container{display:flex;flex-flow:row wrap;justify-content:space-between}.site-footer .credit{display:flex;align-items:center}.site-footer .version{display:flex;margin:0}.hero h1{font-size:clamp(2em,10vw,5em);margin:0}.entry .button{display:inline-block;padding:1em;border:1px solid #ddd;box-shadow:2px 2px 6px #ddd;border-radius:4px}.login.button{background:green;color:#fff}.signup.button{background:#4682b4;color:#fff}.pwreset.button{background:salmon;color:#fff}.entry .container{display:flex;flex-flow:column;gap:.5em}.entry .container .button{max-width:10em}.features{display:grid;gap:2em;grid-template-columns:repeat(auto-fit,minmax(20em,1fr))}@media(max-width:22em){.features{display:flex;flex-flow:column}}.index header>.container{display:grid;grid-template-areas:"hero info" "entry info";grid-template-columns:1fr auto;grid-template-rows:auto 1fr}.index header>.container .nodeinfo{grid-area:info;display:flex;flex-flow:column;justify-content:center}.index header>.container .hero{grid-area:hero}.index header>.container .entry{grid-area:entry;align-self:end}@media(max-width:52.5em){.index header>.container{display:unset}.index header>.container .nodeinfo{padding:unset}}@media(min-width:52.5em){.index header>.container .container{padding:0}.index header>.container .nodeinfo{padding:2em;background:#eee}.index header>.container .entry{padding:0}}.nodeinfo .account{display:inline-grid;grid-template-areas:"pic name" "pic url";grid-template-columns:4em 1fr;grid-template-rows:1fr 1fr;background:#eee;border-radius:100em;width:18em}.nodeinfo .account .displayname{grid-area:name;align-self:end;margin:0 2em 0 1em}.nodeinfo .account .username{grid-area:url;margin:0 2em 0 1em}.nodeinfo .account img{grid-area:pic;width:100%;height:100%;background:#333}.nodeinfo .account img{border-radius:100em}form.login{display:flex;flex-flow:column;max-width:40ch}form.login label{font-size:1.5em;font-weight:700;margin-bottom:1em}form.login input{font-size:1.4em;padding:.25em;margin-bottom:2em}form.login .login{padding:1em;background:#25b625;color:#fff}#home{background:#eee;display:flex;flex-flow:column}.post{background:#fff;max-width:600px}.post .post-header{padding:1em}.post .post-header .icon{width:3em}.post .post-header .username{font-weight:700}.post .post-header .domain{opacity:.5}.post .post-image{width:100%;object-fit:contain}.post .post-body .author{padding:1em;display:flex;align-items:center}.post .post-body .author .avatar{width:3em;border-radius:100em;margin-right:1em}.post .post-body .author .name{font-weight:700}.post .post-body .description{padding:0 1em}.post .post-comment{border-top:1px solid #ddd;padding:1em;display:flex;flex-flow:column}.post .post-comment .author{display:flex;align-items:center}.post .post-comment .author .avatar{width:3em;background:pink;border-radius:100em;margin-right:1em}.post .post-comment .author .name{font-weight:700;margin-right:1em}.post .post-actions{padding:1em;display:flex;justify-content:space-between}.post .post-actions button{background:0 0;border:none}.post .post-actions .comment{display:flex;align-items:center}@media(max-width:25em){.post .post-actions .comment .hint{display:none}}.post .post-actions .comment i{margin-left:.5em} |