More style updates

main
JD Cantrell 2 years ago
parent 71e9dcdc9f
commit b705005739

@ -23,8 +23,21 @@
--link-underline-hover: #3800ff;
--accent-color: #25dd39;
--background-color: #fbf6de;
--background-image: inherit;
--background-color: #fff6ca;
--article-background-color: #fff8d3;
--background-image: linear-gradient(
30deg,
hsl(50deg 100% 90%) 0%,
hsl(51deg 96% 88%) 11%,
hsl(51deg 93% 86%) 22%,
hsl(52deg 91% 84%) 33%,
hsl(53deg 89% 82%) 44%,
hsl(53deg 88% 80%) 56%,
hsl(54deg 87% 78%) 67%,
hsl(54deg 86% 76%) 78%,
hsl(54deg 86% 73%) 89%,
hsl(55deg 85% 71%) 100%
);
--image-border-color: #40dc7b87;
--backdrop-color: rgb(251, 246, 2228);
@ -47,6 +60,7 @@
--dialog-background: #011d37;
--textarea-background: #002644;
--article-background-color: #011628;
--background-image: linear-gradient(
25deg,
hsl(206deg 100% 14%) 0%,
@ -158,9 +172,10 @@ footer {
.posts {
display: flex;
width: 500px;
width: 535px;
flex-direction: column;
gap: 96px;
padding-bottom: 96px;
}
.posts img {
@ -264,6 +279,35 @@ article:only-child {
margin-top: 64px;
}
article {
background-color: var(--article-background-color);
padding: 16px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 2px;
box-shadow: var(--shadow-elevation-medium);
}
article footer {
display: flex;
align-items: center;
justify-content: end;
gap: 8px;
}
.icon svg {
fill: currentColor;
width: 20px;
height: 20px;
}
a.icon {
border-bottom: 2px solid var(--link-underline);
}
a:hover.icon {
border-bottom: 2px solid var(--link-underline-hover);
}
header {
display: flex;
flex-wrap: wrap;

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -11,6 +11,8 @@
{% endblock %}
{% block content %}
<style>
</style>
<div class="posts">
{% for post in posts %}
<article>
@ -21,10 +23,13 @@
{% endif %}
{{ post.content|format_content}}
<footer>
at <a href="{{ url_for("view_post", timestamp=post.created_at.timestamp(), post_id=post.id) }}">
<time datetime="{{post.created_at}}">
{{ '{dt:%-I}{dt:%p}'.format(dt=post.created_at)|lower }} on
{{ '{dt:%A} {dt:%B} {dt.day}, {dt.year}'.format(dt=post.created_at) }}</time></a>
{{ '{dt:%-I}{dt:%p}'.format(dt=post.created_at)|lower }} on
{{ '{dt:%B} {dt.day}, {dt.year}'.format(dt=post.created_at) }}
</time>
<a class="icon" aria-label="Perma link" href="{{ url_for("view_post", timestamp=post.created_at.timestamp(), post_id=post.id) }}">
{% include "icons/link.svg" %}
</a>
</footer>
</article>
{% endfor %}

Loading…
Cancel
Save