Commit bdaa3d26 authored by Zachary Dunn's avatar Zachary Dunn

Update styles some more

parent f10948f9
......@@ -170,30 +170,37 @@ a:focus {
.h-card-grid {
display: grid;
grid-template-rows: min-content 1fr;
grid-template-rows: min-content;
grid-template-columns: 1fr 1fr;
justify-content: space-around;
}
.h-card-grid__first-row {
grid-rows: span all;
display: flex;
flex-flow: row;
flex: 1 0 auto;
}
.h-card-grid__second-row {
column-count: 3;
list-style: none;
align-self: center;
/* column-rule: 1px solid currentColor; */
padding: 0;
margin: 0;
}
.h-card,
.h-card--extended header {
display: flex;
flex-wrap: wrap;
.h-card-grid__third-row {
grid-column: span 2;
}
.h-card--extended {
display: flex;
flex-flow: column nowrap;
.h-card-grid__list-item {
line-height: 2;
justify-content: center;
justify-self: center;
}
.h-card__avatar a,
.h-card__avatar-link,
.h-card__avatar img {
width: var(--avatar-width);
height: var(--avatar-height);
......@@ -331,7 +338,7 @@ a:focus {
text-decoration: underline;
}
.h-cite.context {
.context {
padding: 0.5rem 1rem;
color: var(--tertiary-color);
border-bottom: 1px solid var(--tertiary-color-faded);
......
......@@ -14,7 +14,7 @@
}
@media screen and (min-width: 900px) {
.h-entry, .h-card .bio, .bth-form {
.h-entry, .block {
min-width: 750px;
max-width: 1120px;
margin: 10px auto 0px;
......
......@@ -22,15 +22,24 @@
margin: 0 .5rem;
}
.h-card-grid {
grid-template-rows: min-content 1fr;
grid-template-columns: 1fr;
}
.h-card-grid__first-row {
grid-column: span 2;
}
.h-card__name {
padding: 0 0.5rem;
}
.h-card__avatar {
--avatar-width: 75px;
--avatar-height: 75px;
}
.h-card-grid__second-row {
list-style: none;
}
.sm-hidden {
display: none;
}
......
......@@ -124,7 +124,7 @@
text-shadow: 0 1px 1px var(--base1);
}
.solarized-dark .h-cite.context {
.solarized-dark .context {
padding: 0.5rem 1rem;
color: var(--base00);
border-bottom: 1px solid var(--base01);
......
......@@ -148,7 +148,7 @@
fill: var(--secondary-color);
}
.typewolf .h-cite.context {
.typewolf .context {
padding: 0.5rem 1rem;
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
......
......@@ -23,31 +23,23 @@
{% endblock opengraph %}
{% block content %}
<section class="h-card h-card--extended">
<header>
<div class="h-card__avatar">
<a class="u-url" href="{{host}}/about" rel="me"></a>
<a class="u-url" href="{{host}}" rel="me">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
</div>
<section class="h-card h-card-grid">
<header class="h-card-grid__first-row h-card__avatar">
<a class="u-url h-card__avatar-link" href="{{host}}" rel="me">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
<a class="u-url" href="{{host}}/about" rel="me"></a>
<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>
</header>
<hr class="extended-divider" />
{% include "partials/links" %}
<hr class="extended-divider h-card-grid__third-row" />
<section class="bio">
<section class="bio h-card-grid__third-row">
<h2>About Me</h2>
<div class="bio__inner block block--padding">
<p class="p-adr h-adr">
......
<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}}">
<a class="u-url h-card__avatar-link" href="{{host}}">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
<a class="u-url" href="{{host}}/about" rel="me"></a>
<div class="h-card__name">
<h1 class="p-name">{{name}}</h1>
<h4>
......@@ -11,10 +11,6 @@
</h4>
</div>
</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>
{% include "partials/links" %}
</address>
<ul class="h-card-grid__second-row">
<li class="h-card-grid__list-item"><a href="{{host}}/likes">Likes</a></li>
<li class="h-card-grid__list-item"><a href="{{host}}/boosts">Boosts</a></li>
<li class="h-card-grid__list-item"><a href="https://github.com/zcdunn" rel="me">Github</a></li>
<li class="h-card-grid__list-item"><a href="https://gitlab.com/zdunn" rel="me">GitLab</a></li>
<li class="h-card-grid__list-item"><a href="https://edolas.world/0x1C3B00DA" rel="me">Fediverse</a></li>
<li class="h-card-grid__list-item"><a href="{{host}}/settings">Site Settings</a></li>
</ul>
<section class="h-cite context">
<section class="context">
In reply to <a href="{{post.in_reply_to}}" class="u-in-reply-to">{{post.in_reply_to}}</a>
</section>
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