avatar in sidebar

This commit is contained in:
yequari 2024-02-26 22:33:04 -07:00
parent c9718f3ed9
commit cf8d28d1c1
5 changed files with 80 additions and 18 deletions

View File

@ -1,5 +1,17 @@
<section> <section>
<img class="u-photo" width="100px" src="/images/avatar.jpg"> {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
{{ $d1 := time.ParseDuration "-168h" }}
{{ $t1 := time.Now.Add $d1 }}
{{ $t2 := time.AsTime .PublishDate }}
{{ if $t2.After $t1 }}
<div id="avatar-frame" class="online">
{{ else }}
<div id="avatar-frame" class="busy">
{{ end }}
{{ end }}
<span class="gloss"></span>
<img class="u-photo" width="100px" src="/images/avatar.jpg">
</div>
</section> </section>
<section> <section>
<h1>current status</h1> <h1>current status</h1>

View File

@ -2,7 +2,6 @@ var subtitles = [
"null", "null",
"George likes his chicken spicy", "George likes his chicken spicy",
"Graphic design is my passion", "Graphic design is my passion",
"Twitter is a fandom site for current events",
"Genesis does what Nintendon\'t", "Genesis does what Nintendon\'t",
"1000 JS libraries in your pocket", "1000 JS libraries in your pocket",
"A large boulder the size of a small boulder", "A large boulder the size of a small boulder",

View File

@ -3,7 +3,7 @@
{{ .Content }} {{ .Content }}
<h2>Latest Blog Posts</h2> <h2>Latest Blog Posts</h2>
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }} {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
<h3>{{ .Name }}</h3> <h3>{{ .Name }}</h3>
<p>{{ .Summary }}</p> <p>{{ .Summary }}</p>
<a href="{{ .RelPermalink }}">Read More &gt;</a> <a href="{{ .RelPermalink }}">Read More &gt;</a>
{{ end }} {{ end }}

View File

@ -7,7 +7,7 @@
<title>{{ .Page.Title }}</title> <title>{{ .Page.Title }}</title>
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<script src="/js/quotes.js"></script> <script src="/js/quotes.js" defer></script>
<link rel="webmention" href="https://webmention.io/yequari.com/webmention" /> <link rel="webmention" href="https://webmention.io/yequari.com/webmention" />
<link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" /> <link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" />
<script src="/js/webmention.js" async></script> <script src="/js/webmention.js" async></script>

View File

@ -1,4 +1,4 @@
@import url(https://fonts.bunny.net/css?family=b612-mono:400|phudu:400|noto-sans:400|martian-mono:700); @import url(https://fonts.bunny.net/css?family=b612-mono:400|phudu:400|noto-sans:400|martian-mono:700|andika:400);
/* CSS HEX */ /* CSS HEX */
:root { :root {
--jet: #353535ff; --jet: #353535ff;
@ -137,6 +137,7 @@ header h1 {
font-family: 'Phudu', monospace; font-family: 'Phudu', monospace;
/* font-size: 1rem; */ /* font-size: 1rem; */
color: var(--fairy-tale); color: var(--fairy-tale);
display: inline;
} }
ul.social { ul.social {
@ -168,10 +169,6 @@ header .profile img {
display: inline-block; display: inline-block;
} }
header .profile h1 {
display: inline;
}
p.about { p.about {
line-height: 0; line-height: 0;
color: var(--fairy-tale); color: var(--fairy-tale);
@ -214,7 +211,8 @@ nav li {
nav li a { nav li a {
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
font-family: 'B612 Mono', monospace; font-family: 'Andika', monospace;
font-size: 1.1rem;
font-weight: bold; font-weight: bold;
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
} }
@ -227,7 +225,7 @@ nav li a:link, nav li a:visited {
nav li a:hover, nav li a:active { nav li a:hover, nav li a:active {
animation: 0.2s ease-in 1 forwards gradient; animation: 0.2s ease-in 1 forwards gradient;
outline: 1px solid rgba(255, 255, 255, 0.3); outline: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 3px 10px white; box-shadow: 0 0 10px white;
} }
@keyframes gradient { @keyframes gradient {
@ -258,14 +256,16 @@ nav li a:hover, nav li a:active {
display: flex; display: flex;
flex-flow: row wrap-reverse; flex-flow: row wrap-reverse;
box-shadow: 10px 5px 5px #00000066; box-shadow: 10px 5px 5px #00000066;
padding: 30px; padding: 0;
} }
.sidebar { .sidebar {
flex: 0 1 20%; flex: 0 1 20%;
border-right: 1px solid grey; border-right: 1px solid;
margin-right: 15px; border-image: linear-gradient(transparent 5vh, grey 5.1vh, grey 94%, transparent 95%) 1;
padding-right: 15px; padding: 30px 15px;
/* background: linear-gradient(aqua 0%, transparent 15%); */
/* border-radius: 15px 0 0 0; */
} }
.sidebar h1 { .sidebar h1 {
@ -273,9 +273,49 @@ nav li a:hover, nav li a:active {
padding-bottom: 5px; 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 { main {
flex: 1 3 70%; flex: 1 3 70%;
padding-left: 10px; padding: 30px;
} }
main li { main li {
@ -290,7 +330,6 @@ article p.context {
article p { article p {
text-align: justify; text-align: justify;
font-size: 1.1rem;
} }
article img { article img {
@ -360,6 +399,15 @@ footer {
text-align: 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 page
*/ */
@ -417,6 +465,9 @@ footer {
@media only screen and (max-width: 700px) { @media only screen and (max-width: 700px) {
.sidebar { .sidebar {
border: none; border: none;
margin: 0; }
article img {
max-width: 200px;
} }
} }