Commit a42316ce authored by Zachary Dunn's avatar Zachary Dunn

Update hcard styling and fix about page styling

parent 17173b99
......@@ -168,9 +168,24 @@ a:focus {
text-shadow: 1px 0px 0px currentColor;
}
.h-card-grid {
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: 1fr 1fr;
}
.h-card-grid__first-row {
grid-rows: span all;
}
.h-card-grid__second-row {
column-count: 3;
}
.h-card,
.h-card--extended header {
display: flex;
flex-wrap: wrap;
}
.h-card--extended {
......@@ -178,11 +193,6 @@ a:focus {
flex-flow: column nowrap;
}
.h-card__avatar {
max-width: 20%;
}
.h-card__avatar,
.h-card__avatar a,
.h-card__avatar img {
width: var(--avatar-width);
......@@ -201,8 +211,6 @@ a:focus {
}
.h-card__avatar .u-photo {
width: var(--avatar-width);
height: var(--avatar-height);
border-radius: 30%;
border-top: 1px outset var(--secondary-color);
border-left: 1px outset var(--secondary-color);
......@@ -211,7 +219,6 @@ a:focus {
.h-card__name {
display: flex;
flex: 1 0 auto;
flex-flow: column nowrap;
align-items: flex-start;
padding: 0 2rem;
......
......@@ -7,6 +7,11 @@
padding: 0 1rem;
}
.h-card__name {
font-size: 14px;
float: right;
}
.main-nav {
line-height: 3rem;
overflow: scroll hidden;
......@@ -17,21 +22,13 @@
margin: 0 .5rem;
}
.h-card {
display: block;
align-items: center;
.h-card__avatar {
--avatar-width: 75px;
--avatar-height: 75px;
}
.h-card .avatar-container {
display: inline-block;
float: left;
max-width: 30%;
}
.h-card .name-container {
display: flex;
align-self: flex-end;
padding: 0 1rem;
.h-card-grid__second-row {
list-style: none;
}
.sm-hidden {
......
......@@ -2,7 +2,7 @@
{% block head %}
<style>
.bio-inner {
.bio__inner {
text-indent: 2.5rem;
}
</style>
......@@ -49,7 +49,7 @@
<section class="bio">
<h2>About Me</h2>
<div class="bio-inner block block--padding">
<div class="bio__inner block block--padding">
<p class="p-adr h-adr">
I'm Zachary Dunn. Blah blah blah. I'm a web developer... blah blah blah. I live in
<span class="p-locality">Simpsonville</span>,
......
<address class="h-card p-author">
<div class="h-card__avatar">
<address class="h-card p-author h-card-grid">
<div class="h-card-grid__first-row h-card__avatar">
<a class="u-url" href="{{host}}/about" rel="me"></a>
<a class="u-url" href="{{host}}">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
<div class="h-card__name">
<h1 class="p-name">{{name}}</h1>
<h4>
<span class="p-nickname">{{username}}</span>@{{domain}}
</h4>
</div>
</div>
<div class="h-card__name">
<h1 class="p-name">{{name}}</h1>
<h4>
<span class="p-nickname">{{username}}</span>@{{domain}}
</h4>
</div>
<div class="extra-links">
<ul>
<li><a href="{{host}}/likes">Likes</a></li>
<li><a href="{{host}}/boosts">Boosts</a></li>
<li><a href="{{host}}/settings">Site Settings</a></li>
</ul>
</div>
<ul class="h-card-grid__second-row">
<li><a href="{{host}}/likes">Likes</a></li>
<li><a href="{{host}}/boosts">Boosts</a></li>
<li><a href="{{host}}/settings">Site Settings</a></li>
</ul>
</address>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment