diff options
-rw-r--r-- | assets/css/default-simple.css | 12 | ||||
-rw-r--r-- | assets/css/default.css | 102 | ||||
-rw-r--r-- | themes/default/layouts/_default/home.xslt.rss.xsl | 48 | ||||
-rw-r--r-- | themes/default/layouts/_default/section.following.html | 84 | ||||
-rw-r--r-- | themes/default/layouts/_default/summary.html | 26 | ||||
-rw-r--r-- | themes/default/layouts/partials/author-card.html | 80 |
6 files changed, 172 insertions, 180 deletions
diff --git a/assets/css/default-simple.css b/assets/css/default-simple.css index ffc9f07..ee01f86 100644 --- a/assets/css/default-simple.css +++ b/assets/css/default-simple.css @@ -14,27 +14,27 @@ micro-card[id] micro-metadata { display: block; } -micro-card[id] micro-summary { +micro-card[id] { flex-direction: row; padding: 1.25rem 1rem; } -micro-card[id] micro-summary > article { +micro-card[id] > article { margin: auto 0; min-width: 0; } -micro-card[id] micro-summary > article > * { +micro-card[id] > article > * { width: 100%; } -micro-card[id] micro-summary > article > :nth-last-child(2) { +micro-card[id] > article > :nth-last-child(2) { margin-bottom: 0; } micro-card[id] micro-tags, micro-card[id] micro-metadata header, -micro-card[id] micro-summary > article footer, -micro-card[id] micro-summary > article figcaption { +micro-card[id] > article footer, +micro-card[id] > article figcaption { display: none; } diff --git a/assets/css/default.css b/assets/css/default.css index 5e2e989..127f9a8 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -144,8 +144,8 @@ visibility: hidden; } -:not(#main):target micro-summary, -:not(#main):target micro-summary:hover { +:not(#main):target micro-card, +:not(#main):target micro-card:hover { background-color: transparent; border-radius: 0.5rem; outline-offset: -6px; @@ -249,7 +249,7 @@ kbd, code, svg text, following-list details summary:after, -micro-summary article details[data-disclosure] summary:after { +micro-card article details[data-disclosure] summary:after { font-family: "Fira Code", "Lucida Console", "Andale Mono", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -840,7 +840,7 @@ summary:after, [type="submit"], micro-tags a, nav[data-type="pagination"] a, -micro-author micro-summary > a { +micro-author micro-card > a { align-items: center; appearance: none; background-color: #fff; @@ -869,7 +869,7 @@ button:hover, [type="submit"]:hover, micro-tags a:hover, nav[data-type="pagination"] a:hover, -micro-author micro-summary > a:hover { +micro-author micro-card > a:hover { border: 1px solid; border-color: #aaa; border-color: var(--border-darkest); @@ -877,7 +877,7 @@ micro-author micro-summary > a:hover { button svg, nav[data-type="pagination"] svg, -micro-author micro-summary > a svg { +micro-author micro-card > a svg { height: 1.25rem; width: 1.25rem; } @@ -1036,7 +1036,7 @@ micro-tags a { margin: 0 0.25rem 0.5rem 0; } -micro-summary { +micro-card { border-bottom: 1px solid; border-color: #eee; border-color: var(--border-lighter); @@ -1046,27 +1046,27 @@ micro-summary { position: relative; } -micro-author micro-summary { +micro-author micro-card { flex-direction: row; } -micro-summary:hover { +micro-card:hover { background-color: #f5f9ff; background-color: var(--hover-background-alternate); } -micro-summary:focus-within { +micro-card:focus-within { background-color: #f0ecf9; background-color: var(--focus-within-background); } -micro-author micro-summary { +micro-author micro-card { justify-content: start; align-items: center; border: none; } -micro-author micro-summary > * { +micro-author micro-card > * { margin: 0 0.5rem; } @@ -1083,7 +1083,7 @@ micro-author micro-header h3 { font-weight: 400; } -micro-author micro-summary p:not(:last-child) { +micro-author micro-card p:not(:last-child) { flex: 1.75; color: #444; color: var(--fade); @@ -1116,35 +1116,35 @@ micro-thumbnail figure object { max-height: 3.5rem; } -micro-summary > article { +micro-card > article { margin-left: 4.25rem; } -micro-summary article ul { +micro-card article ul { list-style-type: "\2012"; padding-left: 2rem; } -micro-summary article li { +micro-card article li { padding-left: 0.5rem; } -micro-summary article li::marker { +micro-card article li::marker { opacity: 0.85; } -micro-summary article ul li + li { +micro-card article ul li + li { margin-top: 0.25rem; } -micro-summary article figure img { +micro-card article figure img { border: none; margin: 0 auto; box-shadow: 0 0 3px #00000060; box-shadow: 0 0 3px var(--shadow); } -micro-summary article figure img:before { +micro-card article figure img:before { background-color: #fefefe; background-color: var(--background); border-radius: 0.5rem; @@ -1156,16 +1156,16 @@ micro-summary article figure img:before { margin: 1rem; } -micro-summary article figure > a { +micro-card article figure > a { border-radius: 0.5rem; display: inline-block; } -micro-summary article figure > a[data-orientation="landscape"] { +micro-card article figure > a[data-orientation="landscape"] { display: block; } -micro-summary article figure > a[data-orientation="landscape"] img { +micro-card article figure > a[data-orientation="landscape"] img { width: 100%; } @@ -1368,20 +1368,20 @@ profile-box footer p { display: inline; } -micro-summary details[data-disclosure] summary { +micro-card details[data-disclosure] summary { display: inline-block; margin: 0 -0.25rem 0.5rem -0.25rem; padding: 0.25rem; } -micro-summary details[data-disclosure] summary:focus a { +micro-card details[data-disclosure] summary:focus a { color: inherit; } following-list details summary:focus:after, following-list details[open] summary:focus:after, -micro-summary details[data-disclosure] summary:focus:after, -micro-summary details[data-disclosure][open] summary:focus:after { +micro-card details[data-disclosure] summary:focus:after, +micro-card details[data-disclosure][open] summary:focus:after { color: #111; color: var(--foreground); border-color: #111; @@ -1389,51 +1389,51 @@ micro-summary details[data-disclosure][open] summary:focus:after { following-list details summary:after, following-list details[open] summary:after, -micro-summary details[data-disclosure] summary:after, -micro-summary details[data-disclosure][open] summary:after { +micro-card details[data-disclosure] summary:after, +micro-card details[data-disclosure][open] summary:after { border-radius: 0.5rem; display: inline; font-size: 85%; vertical-align: bottom; } -micro-summary details[data-disclosure] summary:hover, -micro-summary details[data-disclosure] summary:hover:after { +micro-card details[data-disclosure] summary:hover, +micro-card details[data-disclosure] summary:hover:after { text-shadow: 0 0 currentColor; } -micro-summary details[data-disclosure] summary:hover:after { +micro-card details[data-disclosure] summary:hover:after { text-decoration: underline; } -micro-summary details[data-disclosure] summary:after { +micro-card details[data-disclosure] summary:after { content: "HIDDEN"; } -micro-summary details[data-disclosure][open] summary:after { +micro-card details[data-disclosure][open] summary:after { content: "OPENED"; } -micro-summary details[data-disclosure][open] ~ details summary:after { +micro-card details[data-disclosure][open] ~ details summary:after { content: none; } -micro-summary details[data-disclosure][open] ~ *:not(details):not(micro-tags) { +micro-card details[data-disclosure][open] ~ *:not(details):not(micro-tags) { display: inherit; } -micro-summary +micro-card details[data-disclosure][open] ~ *:not(details):not(micro-tags):not(math-ml) { color: #444; color: var(--fade); } -micro-summary details[data-disclosure][open] ~ details summary { +micro-card details[data-disclosure][open] ~ details summary { cursor: not-allowed; } -micro-summary details[data-disclosure] ~ *:not(details):not(micro-tags) { +micro-card details[data-disclosure] ~ *:not(details):not(micro-tags) { display: none; } @@ -2371,11 +2371,11 @@ nav[hidden] { padding-left: 2rem; } -[data-xml] micro-summary { +[data-xml] micro-card { flex-direction: row; } -[data-xml] micro-summary article { +[data-xml] micro-card article { margin-left: 0; } @@ -2418,11 +2418,11 @@ nav[hidden] { column-base[position="right"] { width: 38%; } - micro-author micro-summary { + micro-author micro-card { flex-direction: column; text-align: center; } - micro-author micro-summary > :not(:last-child) { + micro-author micro-card > :not(:last-child) { margin-bottom: 0.5rem; } micro-author micro-header { @@ -2481,15 +2481,15 @@ nav[hidden] { profile-box section { display: block; } - micro-author micro-summary { + micro-author micro-card { flex-direction: column; text-align: center; border-bottom: 1px solid #eee; border-bottom: 1px solid var(--border-lighter); } - micro-author micro-summary micro-header, - micro-author micro-summary micro-thumbnail, - micro-author micro-summary p:not(:last-child) { + micro-author micro-card micro-header, + micro-author micro-card micro-thumbnail, + micro-author micro-card p:not(:last-child) { flex: auto; margin: 0 0 0.75rem 0; } @@ -2515,7 +2515,7 @@ nav[hidden] { } @media screen and (max-width: 460px) { - micro-summary > article { + micro-card > article { margin-left: 0; } tag-card { @@ -2534,11 +2534,11 @@ nav[hidden] { width: 100vw; padding-right: 1rem; } - micro-summary { + micro-card { min-height: 14rem; } - :not(#main):target micro-summary, - :not(#main):target micro-summary:hover { + :not(#main):target micro-card, + :not(#main):target micro-card:hover { outline: none; } :target::before { diff --git a/themes/default/layouts/_default/home.xslt.rss.xsl b/themes/default/layouts/_default/home.xslt.rss.xsl index f828f4f..1bde28d 100644 --- a/themes/default/layouts/_default/home.xslt.rss.xsl +++ b/themes/default/layouts/_default/home.xslt.rss.xsl @@ -69,31 +69,29 @@ <main> <xsl:for-each select="/rss/channel/item"> <micro-card> - <micro-summary> - <micro-thumbnail> - <figure> - <a> - <xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute> - <span> - <object> - <xsl:attribute name="title"><xsl:value-of select="atom:author/atom:name" /></xsl:attribute> - <xsl:attribute name="data"><xsl:value-of select="atom:author/atom:uri" /></xsl:attribute> - <xsl:value-of select="substring(atom:author/atom:name, 1, 1)" /> - </object> - </span> - </a> - </figure> - </micro-thumbnail> - <article> - <h2> - <a> - <xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute> - <xsl:value-of select="title" /> - </a> - </h2> - <small>Published: <xsl:value-of select="pubDate" /></small> - </article> - </micro-summary> + <micro-thumbnail> + <figure> + <a> + <xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute> + <span> + <object> + <xsl:attribute name="title"><xsl:value-of select="atom:author/atom:name" /></xsl:attribute> + <xsl:attribute name="data"><xsl:value-of select="atom:author/atom:uri" /></xsl:attribute> + <xsl:value-of select="substring(atom:author/atom:name, 1, 1)" /> + </object> + </span> + </a> + </figure> + </micro-thumbnail> + <article> + <h2> + <a> + <xsl:attribute name="href"><xsl:value-of select="link" /></xsl:attribute> + <xsl:value-of select="title" /> + </a> + </h2> + <small>Published: <xsl:value-of select="pubDate" /></small> + </article> </micro-card> </xsl:for-each> </main> diff --git a/themes/default/layouts/_default/section.following.html b/themes/default/layouts/_default/section.following.html index f002d43..9e937c6 100644 --- a/themes/default/layouts/_default/section.following.html +++ b/themes/default/layouts/_default/section.following.html @@ -26,49 +26,47 @@ <micro-author> <micro-card> - <micro-summary> - <micro-thumbnail> - <figure> - <a - title="{{ $distinct.FeedName }}" - href="{{ $href }}"> - <picture> - <img - width="64" - height="64" - alt="{{ $distinct.FeedName }}" - src="{{ $.Site.BaseURL }}{{ $favicon }}" - /> - </picture> - </a> - </figure> - </micro-thumbnail> - <micro-header> - <h2> - <b>{{ $distinct.FeedName }}</b> - </h2> - <h3> - <a - data-hover - title="{{ $distinct.FeedName }}" - href="{{ $href }}"> - @{{ $distinct.FeedSourceDomain }} - </a> - </h3> - <time - data-type="default" - title="{{ $distinct.FeedDateTitle }}" - datetime="{{ $distinct.FeedDateTime }}"> - {{ $distinct.FeedDate -}} - </time> - </micro-header> - <a - title="Follow {{ $distinct.FeedName }}" - href="{{ $href }}"> - {{ safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/rss.svg")) }} - <header>Follow</header> - </a> - </micro-summary> + <micro-thumbnail> + <figure> + <a + title="{{ $distinct.FeedName }}" + href="{{ $href }}"> + <picture> + <img + width="64" + height="64" + alt="{{ $distinct.FeedName }}" + src="{{ $.Site.BaseURL }}{{ $favicon }}" + /> + </picture> + </a> + </figure> + </micro-thumbnail> + <micro-header> + <h2> + <b>{{ $distinct.FeedName }}</b> + </h2> + <h3> + <a + data-hover + title="{{ $distinct.FeedName }}" + href="{{ $href }}"> + @{{ $distinct.FeedSourceDomain }} + </a> + </h3> + <time + data-type="default" + title="{{ $distinct.FeedDateTitle }}" + datetime="{{ $distinct.FeedDateTime }}"> + {{ $distinct.FeedDate -}} + </time> + </micro-header> + <a + title="Follow {{ $distinct.FeedName }}" + href="{{ $href }}"> + {{ safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/rss.svg")) }} + <header>Follow</header> + </a> </micro-card> </micro-author> diff --git a/themes/default/layouts/_default/summary.html b/themes/default/layouts/_default/summary.html index c761aa8..7c9397c 100644 --- a/themes/default/layouts/_default/summary.html +++ b/themes/default/layouts/_default/summary.html @@ -7,18 +7,16 @@ {{ if .Draft }}draft{{ end }} {{ if .ExpiryDate }}data-expires{{ end }} > - <micro-summary> - <micro-metadata> - <micro-thumbnail> - {{ partial "profile-picture.html" . }} - </micro-thumbnail> - {{ partial "card-meta-header.html" . }} - </micro-metadata> - <article aria-label="article"> - {{- $content -}} - <micro-tags> - {{- partial "tags.html" (dict "Format" "page" "Context" .) -}} - </micro-tags> - </article> - </micro-summary> + <micro-metadata> + <micro-thumbnail> + {{ partial "profile-picture.html" . }} + </micro-thumbnail> + {{ partial "card-meta-header.html" . }} + </micro-metadata> + <article aria-label="article"> + {{- $content -}} + <micro-tags> + {{- partial "tags.html" (dict "Format" "page" "Context" .) -}} + </micro-tags> + </article> </micro-card> diff --git a/themes/default/layouts/partials/author-card.html b/themes/default/layouts/partials/author-card.html index 6b4b91b..70ec252 100644 --- a/themes/default/layouts/partials/author-card.html +++ b/themes/default/layouts/partials/author-card.html @@ -38,46 +38,44 @@ <micro-author> <micro-card> - <micro-summary> - <micro-thumbnail> - <figure> - <a title="{{ .Data.name }}" href="{{ "" | absURL }}/{{ .Data.user }}/"> - <picture> - {{- with $sourceset -}} - <source srcset="{{ print ("" | absURL) $sourceset }}" type="image/webp" /> - {{- end -}} - <img - width="{{ or $width "64" }}" - height="{{ or $height "64" }}" - src="{{ print ("" | absURL) $source }}" - alt="{{ $alternate }}" - /> - </picture> - </a> - </figure> - </micro-thumbnail> - <micro-header> - <h2> - <b>{{ .Data.name }}</b> - </h2> - <h3> - <a data-hover="" title="{{ .Data.name }}" href="{{ "" | absURL }}/{{ .Data.user }}/"> - {{ .Data.user }}@{{ $host }} - </a> - </h3> - <time - data-type="default" - title="{{ .Date | time.Format "Monday January 2 2006 at 15:04:05 MST" }}" - datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}" - > - {{ $date }} - </time> - </micro-header> - <p>{{ .Data.description | markdownify | plainify | htmlUnescape | truncate 60 "..." }}</p> - <a title="Follow with RSS Reader" href="{{ "" | absURL }}/{{ .Data.user }}/rss.xml"> - {{ safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/rss.svg")) }} - <header>Follow</header> - </a> - </micro-summary> + <micro-thumbnail> + <figure> + <a title="{{ .Data.name }}" href="{{ "" | absURL }}/{{ .Data.user }}/"> + <picture> + {{- with $sourceset -}} + <source srcset="{{ print ("" | absURL) $sourceset }}" type="image/webp" /> + {{- end -}} + <img + width="{{ or $width "64" }}" + height="{{ or $height "64" }}" + src="{{ print ("" | absURL) $source }}" + alt="{{ $alternate }}" + /> + </picture> + </a> + </figure> + </micro-thumbnail> + <micro-header> + <h2> + <b>{{ .Data.name }}</b> + </h2> + <h3> + <a data-hover="" title="{{ .Data.name }}" href="{{ "" | absURL }}/{{ .Data.user }}/"> + {{ .Data.user }}@{{ $host }} + </a> + </h3> + <time + data-type="default" + title="{{ .Date | time.Format "Monday January 2 2006 at 15:04:05 MST" }}" + datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}" + > + {{ $date }} + </time> + </micro-header> + <p>{{ .Data.description | markdownify | plainify | htmlUnescape | truncate 60 "..." }}</p> + <a title="Follow with RSS Reader" href="{{ "" | absURL }}/{{ .Data.user }}/rss.xml"> + {{ safeHTML (readFile (print (partial "function-paths.html").static "/icons/tabler/rss.svg")) }} + <header>Follow</header> + </a> </micro-card> </micro-author> |