kaholaz/hello-friend-ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve styling to allow flexible overrides

Browse source 
This commit changes targeted styling of `a` element to a class-based
styling. This way, this is style is reusable on other elements and
another `<a>` element can be used inside a `post-item`.

Otherwise, if someone would need to use `<a>` element in a post item,
then he would get all other styles (such as `display:flex`) on every
`<a>` which is unexpected.

This commit ensures that the style is abstracted from the element type
itself, giving more flexibility when overriding the theme, and increases
maintainability by making the intent more clear.
This commit is contained in:
undergoundwires 2022-11-16 01:14:33 +01:00
parent 345c1cb020
commit 94b6795a52
2 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/scss/_list.scss
View file

@ -67,7 +67,7 @@
&-item { &-item {
border-bottom: 1px grey dashed; border-bottom: 1px grey dashed;
a { &-inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;

2
layouts/_default/list.html
View file

@ -15,7 +15,7 @@
<ul class="posts-list"> <ul class="posts-list">
{{ range .Pages }} {{ range .Pages }}
<li class="post-item"> <li class="post-item">
<a href="{{.Permalink}}"> <a href="{{.Permalink}}" class="post-item-inner">
<span class="post-title">{{.Title}}</span> <span class="post-title">{{.Title}}</span>
<span class="post-day"> <span class="post-day">
{{ if .Site.Params.dateformShort }} {{ if .Site.Params.dateformShort }}