render/templates/base.tmpl

@@ -24,58 +24,6 @@
                 --background-light: color-mix(in srgb,var(--background),#fff 50%);
 
             }
-
-            [data-theme="light"],
-            :root:not([data-theme="dark"]) {
-                --pico-primary: {{.SiteConfig.PrimaryColor}};
-                --pico-primary-background: {{.SiteConfig.PrimaryColor}};
-                --pico-primary-hover: color-mix(in srgb,var(--primary),#000 20%);
-                --pico-primary-hover-background: color-mix(in srgb,var(--primary),#000 20%);
-                --pico-primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
-                --pico-primary-underline: color-mix(in srgb,var(--primary),#fff 40%);
-                --pico-primary-inverse: #FFF;
-                --pico-background: {{.SiteConfig.HeaderColor}};
-                --pico-background-dark: color-mix(in srgb,var(--background),#000 50%);
-                --pico-background-light: color-mix(in srgb,var(--background),#fff 50%);
-            }
-
-
-            footer {
-                border-top: dashed 2px;
-                border-color: #ccc;
-            }
-
-            .avatar {
-                float: left;
-                margin-right: 1rem;
-                border-radius: 50%;
-            }
-
-            .photo-grid {
-                display: flex;
-                flex-wrap: wrap;
-                padding: 0 4px;
-            }
-
-            .photo-grid-item {
-                flex: 1 0 25%;
-                padding: 4px;
-            }
-
-            .photo-grid-item img {
-                width: 100%;
-                height: 100%;
-                aspect-ratio: 1 / 1 ;
-                object-fit: cover;
-            }
-            
-            main img {
-                max-width: 100%;
-                margin: auto;
-                text-align: center;
-                display: block;
-            }
-
         </style>
         {{ .SiteConfig.HtmlHeadExtra }}
     </head>
@@ -90,8 +38,15 @@
 
                 <div>
                     <h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
-                    <h3 class="p-note">{{ .SiteConfig.SubTitle }}</h3>
+                    <div class="p-note">{{ .SiteConfig.SubTitle }}</div>
                 </div>
+
+                <ul style="list-style: none;padding:0;flex-shrink: 0;">
+                    {{ range $me := .SiteConfig.Me }}
+                        <li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
+                        </li>
+                    {{ end }}
+                </ul>                
             </div>
             <div>
                 <nav>

web/static/style.css

@@ -10,6 +10,7 @@ header {
     /* background: linear-gradient(180deg, var(--background) 0%, rgba(255, 255, 255, 0) 100%); */
 
     padding-bottom: 1rem !important;
+    margin-bottom: 2rem;
 }
 
 footer {
@@ -18,6 +19,67 @@ footer {
     padding-bottom: 5rem;
 }
 
+label {
+    display: inline-block;
+    padding-bottom: 0.25rem;
+}
+
+input, textarea, a[role='button'] {
+    display: inline-block;
+    width: 100%;
+    vertical-align: middle;
+    margin-bottom: 0.75rem;
+    padding: 0.25rem;
+    box-sizing: border-box;
+}
+
+input[type='submit'], a[role='button'] {
+    background-color: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 2px;
+    font-size: 1rem;
+    text-align: center;
+    height: 2rem;
+}
+
+input[type='submit']:hover, a[role='button']:hover {
+    background-color: var(--primary-hover);
+    color: #fff;
+}
+
+input[type='submit']:focus, a[role='button']:focus {
+    background-color: var(--primary-focus);
+    color: #fff;
+}
+
+input[type='submit'].secondary {
+    background-color: #5d6b89;
+}
+
+input[type='submit'].secondary:hover {
+    background-color: #48536b;
+}
+
+input[type='submit'].secondary:focus {
+    background-color: rgba(93, 107, 137, 0.25);
+}
+
+/* from pico.css */
+mark {
+    padding: 0.125rem 0.25rem;
+    background-color: #fde7c0;
+    vertical-align: baseline;
+}
+
+main img {
+    max-width: 100%;
+    margin: auto;
+    text-align: center;
+    display: block;
+}
+
+
 a {
     color: var(--primary);
     text-decoration: none;
@@ -83,6 +145,17 @@ pre {
     justify-content: space-between;
 }
 
+.grid {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.grid > * {
+    flex: 1;
+    margin: 0.25rem;
+}
+
 nav.row {
     margin-bottom: 2rem;
 }
@@ -118,7 +191,7 @@ nav.row {
 }
 
 .danger {
-    background-color: var(--pico-del-color) !important;
+    background-color: rgb(136, 57, 53) !important;
 }
 
 .drop-file {
@@ -170,3 +243,27 @@ nav.row {
     border-color: #ff3e3e;
     animation: border-pulsate-error 1s 2;
 }
+
+.avatar {
+    float: left;
+    margin-right: 1rem;
+    border-radius: 50%;
+}
+
+.photo-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 4px;
+}
+
+.photo-grid-item {
+    flex: 1 0 25%;
+    padding: 4px;
+}
+
+.photo-grid-item img {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+}