task/1.8
1{{define "base"}}
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>{{.Title}} - buylater.email</title>
8 <style>
9 * {
10 box-sizing: border-box;
11 margin: 0;
12 padding: 0;
13 }
14
15 body {
16 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
17 line-height: 1.6;
18 color: #333;
19 background-color: #f8f9fa;
20 }
21
22 .container {
23 max-width: 800px;
24 margin: 0 auto;
25 padding: 0 20px;
26 }
27
28 header {
29 background-color: #fff;
30 border-bottom: 1px solid #e9ecef;
31 padding: 1rem 0;
32 }
33
34 .header-content {
35 display: flex;
36 justify-content: space-between;
37 align-items: center;
38 }
39
40 .logo {
41 font-size: 1.5rem;
42 font-weight: 600;
43 color: #2c3e50;
44 text-decoration: none;
45 }
46
47 nav a {
48 text-decoration: none;
49 color: #6c757d;
50 margin-left: 1.5rem;
51 font-weight: 500;
52 }
53
54 nav a:hover {
55 color: #2c3e50;
56 }
57
58 main {
59 padding: 2rem 0;
60 min-height: calc(100vh - 160px);
61 }
62
63 footer {
64 background-color: #fff;
65 border-top: 1px solid #e9ecef;
66 padding: 1.5rem 0;
67 margin-top: 2rem;
68 color: #6c757d;
69 font-size: 0.9rem;
70 }
71
72 .footer-content {
73 text-align: center;
74 }
75
76 .tagline {
77 font-style: italic;
78 margin-top: 0.5rem;
79 }
80
81 @media (max-width: 768px) {
82 .container {
83 padding: 0 15px;
84 }
85
86 .header-content {
87 flex-direction: column;
88 gap: 1rem;
89 }
90
91 nav a {
92 margin-left: 1rem;
93 margin-right: 1rem;
94 }
95 }
96 </style>
97</head>
98<body>
99 <header>
100 <div class="container">
101 <div class="header-content">
102 <a href="/" class="logo">buylater.email</a>
103 <nav>
104 <a href="/">Home</a>
105 <a href="/submit">Submit</a>
106 <a href="/about">About</a>
107 </nav>
108 </div>
109 </div>
110 </header>
111
112 <main>
113 <div class="container">
114 {{template "main" .}}
115 </div>
116 </main>
117
118 <footer>
119 <div class="container">
120 <div class="footer-content">
121 <p>© 2025 buylater.email - Buy less, buy better</p>
122 <p class="tagline">Restoring friction to the buying process</p>
123 </div>
124 </div>
125 </footer>
126</body>
127</html>
128{{end}}