Extract common styles

Author: boreq

moooodotfarm-backend/src/ports/http/templates/base.html

@@ -86,24 +86,24 @@
             margin-bottom: 1.5rem;
         }
 
-        .back-link {
+        .button {
             display: inline-block;
             background: var(--grass);
             color: white;
-            padding: 0.5rem 1.2rem;
+            padding: 0.6rem 1.5rem;
+            margin: 0.3rem;
             border-radius: 30px;
             text-decoration: none;
-            font-size: 1rem;
+            font-size: 1.2rem;
             font-weight: 700;
             transition: all 0.2s ease;
             box-shadow: 0 4px 0 var(--grass-dark);
         }
 
-        .back-link:hover {
+        .button:hover {
             transform: translateY(2px);
             box-shadow: 0 2px 0 var(--grass-dark);
             background: var(--grass-dark);
-            color: white;
         }
 
         .subpage-header {
@@ -166,6 +166,12 @@
             color: var(--grass-dark);
         }
 
+        strong {
+            color: var(--grass-dark);
+            font-weight: 700;
+            letter-spacing: 0.1em;
+        }
+
         {% block extra_styles %}{% endblock %}
     </style>
 </head>

moooodotfarm-backend/src/ports/http/templates/common.html

@@ -1,7 +1,7 @@
 {% macro common_header(title, subtitle_text) %}
 <header class="subpage-header">
     <div class="back-link-container">
-        <a href="/" class="back-link">← go back to admiring all cows</a>
+        <a href="/" class="button">← go back to admiring all cows</a>
     </div>
     <div class="cow">
         <img src="/cow.png" alt="a very round cow">

moooodotfarm-backend/src/ports/http/templates/index.html

@@ -39,28 +39,6 @@
             margin-bottom: 1.5rem;
         }
 
-        .links {
-            a {
-                display: inline-block;
-                background: var(--grass);
-                color: white;
-                padding: 0.6rem 1.5rem;
-                margin: 0.3rem;
-                border-radius: 30px;
-                text-decoration: none;
-                font-size: 1.2rem;
-                font-weight: 700;
-                transition: all 0.2s ease;
-                box-shadow: 0 4px 0 var(--grass-dark);
-            }
-
-            a:hover {
-                 transform: translateY(2px);
-                 box-shadow: 0 2px 0 var(--grass-dark);
-                 background: var(--grass-dark);
-            }
-        }
-
         .herd-subtitle {
             font-size: 1.5rem;
             font-weight: 700;
@@ -218,8 +196,8 @@
         <img src="/cow.png" alt="a very round cow" class="cow-hero">
         <p class="site-subtitle">moooooonitoring the cow.txt herd</p>
         <ul class="links">
-            <a href="/rfc">read the RFC</a>
-            <a href="/new">add a new cow</a>
+            <a href="/rfc" class="button">read the RFC</a>
+            <a href="/new" class="button">add a new cow</a>
         </ul>
     </header>
 

moooodotfarm-backend/src/ports/http/templates/new.html

@@ -4,14 +4,6 @@
 
 {% block title %}report a new cow{% endblock %}
 
-{% block extra_styles %}
-    .keyword {
-        color: var(--grass-dark);
-        font-weight: 700;
-        letter-spacing: 0.03em;
-    }
-{% endblock %}
-
 {% block content %}
     <main class="content">
         {{ common::common_header("bring a new cow to the herd", "how to get your cow.txt listed") }}
@@ -23,8 +15,8 @@
 
         <p>
             As some cows can be shy and other cows can be brave please clearly state whether the cow URL should be
-            <span class="keyword">VISIBLE</span> or <span class="keyword">CENSORED</span>,
-            and make sure the URL you send is <span class="keyword">NOT</span> censored.
+            <strong>VISIBLE</strong> or <strong>CENSORED</strong>,
+            and make sure the URL you send is <strong>NOT</strong> censored.
         </p>
 
         <section>

moooodotfarm-backend/src/ports/http/templates/rfc.html

@@ -76,16 +76,12 @@
             color: var(--warm-brown);
             text-align: center;
         }
-
-        strong {
-            color: var(--grass-dark);
-        }
 {% endblock %}
 
 {% block content %}
     <main class="content">
         <div class="back-link-container">
-            <a href="/" class="back-link">← go back to admiring all cows</a>
+            <a href="/" class="button">← go back to admiring all cows</a>
         </div>
         <div class="rfc-top">
             <div class="left">