avatar in sidebar
This commit is contained in:
parent
c9718f3ed9
commit
cf8d28d1c1
|
@ -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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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 ></a>
|
<a href="{{ .RelPermalink }}">Read More ></a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue