Add style for button with text, rename "btn" to "button"

portal/static/css/main.css

@@ -95,7 +95,7 @@ a {
     );
 }
 
-a.btn {
+.button {
     height: 10em;
     width: 10em;
 
@@ -112,15 +112,38 @@ a.btn {
     text-decoration: none;
 }
 
-a.btn > i {
+.small.button {
+    height: 3em;
+    width: 3em;
+}
+
+.button > i {
     font-size: 200%;
 }
 
-a.btn:active {
+.small.button > i {
+    font-size: 120%;
+}
+
+.button:active,
+a:active .button {
     margin: var(--shadow-width) 0 0 var(--shadow-width);
     box-shadow: none;
 }
 
+a.button-and-text {
+    text-decoration: none;
+
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+    column-gap: 0.5em;
+}
+
+a.button-and-text .text {
+    color: white;
+}
+
 input {
     padding: 0.4em 0.7em;
     border-radius: 0.5em;
@@ -376,7 +399,7 @@ a.detail:hover {
 }
 
 @media (max-width: 480px) {
-    a.btn {
+    .button {
         width: 8em;
         height: 8em;
     }

portal/static/js/components/pieces/BoxedButton.mjs

@@ -7,7 +7,7 @@ export const BoxedButton = {
                 {
                     href: vnode.attrs.href,
                     target: vnode.attrs.sameTab ? "" : "_blank",
-                    class: "box btn",
+                    class: "box button",
                 },
                 [
                     m("i", {