themes/default/layouts/_default/section.following: Let it go

Remove shuffle and allow toggling

1 files changed, 56 insertions, 23 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 43936a0..4a6a834 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -448,6 +448,7 @@ pre,
 kbd,
 code,
 svg text,
+following-list details summary:after,
 micro-summary 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,
@@ -512,13 +513,14 @@ main {
 
 main,
 details,
+summary,
 code-block,
 diagram-container {
   display: block;
 }
 
-summary {
-  display: list-item;
+summary::-webkit-details-marker {
+  display: none;
 }
 
 cite {
@@ -1304,7 +1306,6 @@ micro-header footer p {
 }
 
 micro-summary details[data-disclosure] summary {
-  display: block;
   margin: 0 -0.25rem 0.5rem -0.25rem;
   padding: 0.25rem;
   outline-offset: 0.05rem !important;
@@ -1322,6 +1323,8 @@ micro-summary details[data-disclosure] summary:hover {
   text-shadow: 0 0 currentColor;
 }
 
+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 {
   padding: 0 0.25rem;
@@ -1355,7 +1358,6 @@ micro-summary details[data-disclosure][open] ~ details {
   cursor: not-allowed;
 }
 
-micro-summary details[data-disclosure] summary::-webkit-details-marker,
 micro-summary details[data-disclosure] ~ *:not(micro-tags):not(details) {
   display: none;
 }
@@ -1573,24 +1575,6 @@ paginator-navigation a[title="hidden"] {
   visibility: hidden;
 }
 
-web-ring,
-author-list,
-following-list,
-gallery-images {
-  padding-bottom: 1rem;
-  display: block;
-}
-
-web-ring > h1,
-author-list > h1,
-following-list > h1,
-gallery-images > h1 {
-  font-size: 95%;
-  margin: 0.5rem 0 1rem 0;
-  text-align: center;
-  text-transform: uppercase;
-}
-
 gallery-images aside {
   display: flex;
   flex-wrap: wrap;
@@ -1680,7 +1664,7 @@ author-list aside,
 following-list aside {
   background-color: #f9f9f9;
   background-color: var(--widget-background);
-  border-radius: 1rem;
+  border-radius: 0.5rem;
 }
 
 web-ring aside footer,
@@ -1690,6 +1674,55 @@ following-list aside footer {
   background-color: var(--background);
 }
 
+web-ring,
+author-list,
+following-list,
+gallery-images {
+  padding-bottom: 1rem;
+  display: block;
+}
+
+web-ring > h1,
+author-list > h1,
+gallery-images > h1,
+following-list details {
+  font-size: 95%;
+  margin: 0.5rem 0 1rem 0;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+following-list details h1 {
+  display: inline-block;
+}
+
+following-list aside micro-author {
+  display: none;
+}
+
+following-list details[open] + aside micro-author,
+following-list aside micro-author:nth-child(-n + 3) {
+  display: inherit;
+}
+
+following-list:hover details[open] + aside {
+  outline: 2px solid #ccc;
+  outline: 2px solid var(--border-darker);
+}
+
+following-list details[data-expand="more"] summary:after {
+  content: "less";
+}
+
+following-list details[open][data-expand="more"] summary:after {
+  content: "more";
+}
+
+author-list:hover h1,
+following-list:hover details h1 {
+  text-decoration: underline;
+}
+
 author-list h1 a {
   color: inherit;
 }