glossy menu and social icons

config.yaml

@@ -28,7 +28,7 @@ menu:
     - name: yequari@retro.pizza
       params:
         rel: external
-        icon: mastodon-fill.png
+        icon: aero-mastodon.svg
         class: masto
       url: https://retro.pizza/@yequari
       weight: 10
@@ -40,7 +40,7 @@ menu:
       weight: 5
     - name: yequari[a]32bit[.]cafe
       params:
-        icon: mail-fill.png
+        icon: mail-line.png
         rel: external
         class: email
       url:

layouts/partials/sidebar.html

@@ -10,6 +10,7 @@
     <ul class="social">
         {{ range site.Menus.social }}
         <li class="social">
+            <img class="social" src="/icons/{{.Params.icon}}">
             {{ if .URL }}
             <a rel="me" href="{{ .URL }}">
                 {{ .Name }}

static/icons/aero-mastodon.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="19.615791mm"
+   height="20.902094mm"
+   viewBox="0 0 19.615791 20.902094"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1"><linearGradient
+       id="linearGradient184"><stop
+         style="stop-color:#e7e6f4;stop-opacity:0.64941406;"
+         offset="0"
+         id="stop184" /><stop
+         style="stop-color:#a39ae5;stop-opacity:0.49637958;"
+         offset="0.5"
+         id="stop186" /><stop
+         style="stop-color:#573cce;stop-opacity:0;"
+         offset="1"
+         id="stop185" /></linearGradient><linearGradient
+       id="linearGradient182"
+       x1="37.069199"
+       y1="0"
+       x2="37.069199"
+       y2="79"
+       gradientUnits="userSpaceOnUse"
+       spreadMethod="pad"><stop
+         stop-color="#6364FF"
+         id="stop181" /><stop
+         offset="1"
+         stop-color="#563ACC"
+         id="stop182"
+         style="stop-color:#3a75cc;stop-opacity:1;" /></linearGradient><linearGradient
+       id="linearGradient7"><stop
+         style="stop-color:#ffffff;stop-opacity:0.59993502;"
+         offset="0"
+         id="stop7" /><stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop8" /></linearGradient><linearGradient
+       id="paint0_linear_549_34"
+       x1="37.069199"
+       y1="0"
+       x2="37.069199"
+       y2="79"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient182"><stop
+         stop-color="#6364FF"
+         id="stop2" /><stop
+         offset="1"
+         stop-color="#563ACC"
+         id="stop3" /></linearGradient><linearGradient
+       xlink:href="#linearGradient7"
+       id="linearGradient8"
+       x1="37.44276"
+       y1="2.5371401"
+       x2="37.446964"
+       y2="6.9551535"
+       gradientUnits="userSpaceOnUse" /><radialGradient
+       xlink:href="#linearGradient184"
+       id="radialGradient185"
+       cx="35.690678"
+       cy="78.767265"
+       fx="35.690678"
+       fy="78.767265"
+       r="37.069218"
+       gradientTransform="matrix(5.6100941,-0.73930764,0.19663734,1.4921447,-180.84545,-7.9072873)"
+       gradientUnits="userSpaceOnUse" /></defs><g
+     id="layer1"
+     transform="translate(-92.690897,-32.775722)"><g
+       style="fill:none"
+       id="g1"
+       transform="matrix(0.26458333,0,0,0.26458333,92.690896,32.775723)"><path
+         d="M 73.8393,17.4898 C 72.6973,9.00165 65.2994,2.31235 56.5296,1.01614 55.05,0.797115 49.4441,0 36.4582,0 h -0.097 C 23.3717,0 20.585,0.797115 19.1054,1.01614 10.5798,2.27644 2.79399,8.28712 0.904997,16.8758 -0.00358524,21.1056 -0.100549,25.7949 0.0682394,30.0965 0.308852,36.2651 0.355538,42.423 0.91577,48.5665 c 0.3873,4.0809 1.06295,8.1292 2.02186,12.1147 1.79562,7.3608 9.06427,13.4864 16.18567,15.9854 7.6245,2.6062 15.8241,3.0389 23.6806,1.2496 0.8643,-0.2011 1.7178,-0.4345 2.5606,-0.7002 1.9105,-0.6068 4.1478,-1.2855 5.7926,-2.4775 0.0226,-0.0168 0.0411,-0.0384 0.0541,-0.0632 0.0131,-0.0249 0.0204,-0.0524 0.0213,-0.0805 v -5.9532 c -4e-4,-0.0262 -0.0066,-0.052 -0.0183,-0.0755 -0.0117,-0.0235 -0.0284,-0.0441 -0.0491,-0.0603 -0.0207,-0.0162 -0.0447,-0.0275 -0.0703,-0.0332 -0.0256,-0.0057 -0.0522,-0.0056 -0.0777,3e-4 -5.0336,1.2021 -10.1917,1.8048 -15.3669,1.7953 -8.9063,0 -11.3016,-4.2262 -11.9876,-5.9856 -0.5513,-1.5206 -0.9014,-3.1067 -1.0414,-4.718 -0.0015,-0.0271 0.0035,-0.0541 0.0145,-0.0789 0.0109,-0.0248 0.0276,-0.0466 0.0486,-0.0637 0.021,-0.0172 0.0457,-0.0291 0.0722,-0.0349 0.0265,-0.0058 0.0539,-0.0053 0.0802,0.0015 4.9497,1.194 10.0237,1.7967 15.1155,1.7953 1.2246,0 2.4456,0 3.6702,-0.0323 5.1211,-0.1436 10.5187,-0.4057 15.5572,-1.3895 0.1257,-0.0252 0.2514,-0.0467 0.3591,-0.079 7.9474,-1.5261 15.5106,-6.3159 16.2791,-18.445 0.0287,-0.4775 0.1006,-5.0017 0.1006,-5.4972 0.0035,-1.684 0.5422,-11.946 -0.0791,-18.2511 z"
+         fill="url(#paint0_linear_549_34)"
+         id="path1"
+         style="fill:url(#paint0_linear_549_34)" /><path
+         d="M 61.2484,27.0263 V 48.114 H 52.8916 V 27.6475 c 0,-4.3087 -1.7956,-6.5062 -5.4479,-6.5062 -4.015,0 -6.026,2.5996 -6.026,7.7342 V 40.0782 H 33.1111 V 28.8755 c 0,-5.1346 -2.0146,-7.7342 -6.0296,-7.7342 -3.6308,0 -5.4444,2.1975 -5.4444,6.5062 V 48.114 H 13.2839 V 27.0263 c 0,-4.3087 1.1001,-7.7317 3.3004,-10.2691 2.2696,-2.5314 5.2468,-3.8312 8.9421,-3.8312 4.2772,0 7.5093,1.6445 9.6641,4.9299 l 2.0793,3.4901 2.0829,-3.4901 c 2.1547,-3.2854 5.3868,-4.9299 9.6568,-4.9299 3.6918,0 6.6689,1.2998 8.9458,3.8312 2.1978,2.535 3.2955,5.958 3.2931,10.2691 z"
+         fill="#ffffff"
+         id="path2" /><path
+         id="path4"
+         style="display:inline;opacity:0.136063;fill:#ffffff;fill-opacity:0.599935"
+         d="M 36.361658,2.0477855e-4 C 23.372171,2.0477855e-4 20.585397,0.79680501 19.105798,1.0158298 10.580207,2.2761285 2.7936171,8.2865336 0.90462598,16.875205 0.10110896,20.615886 -0.05102309,24.702922 0.03743847,28.576377 A 43.885017,22.490746 0 0 0 36.722986,38.810752 43.885017,22.490746 0 0 0 74.115564,28.033408 c 0.05132,-3.493242 0.0264,-7.480348 -0.27539,-10.542969 C 72.698175,9.0022979 65.299418,2.3120385 56.529627,1.0158298 55.050028,0.79680501 49.443248,2.0477855e-4 36.457361,2.0477855e-4 Z" /><path
+         style="opacity:1;fill:url(#linearGradient8);fill-opacity:0.599935;fill-rule:nonzero;stroke:none"
+         d="M 15.43957,6.82136 C 18.402594,5.6082081 21.464383,4.63638 24.58466,3.91866 36.603403,1.154132 49.484432,2.2765898 60.84385,7.0783"
+         id="path7"
+         transform="matrix(1.2462922,0,0,1,-10.132445,-0.757133)" /><path
+         d="M 73.8393,17.4898 C 72.6973,9.00165 65.2994,2.31235 56.5296,1.01614 55.05,0.797115 49.4441,0 36.4582,0 h -0.097 C 23.3717,0 20.585,0.797115 19.1054,1.01614 10.5798,2.27644 2.79399,8.28712 0.904997,16.8758 -0.00358524,21.1056 -0.100549,25.7949 0.0682394,30.0965 0.308852,36.2651 0.355538,42.423 0.91577,48.5665 c 0.3873,4.0809 1.06295,8.1292 2.02186,12.1147 1.79562,7.3608 9.06427,13.4864 16.18567,15.9854 7.6245,2.6062 15.8241,3.0389 23.6806,1.2496 0.8643,-0.2011 1.7178,-0.4345 2.5606,-0.7002 1.9105,-0.6068 4.1478,-1.2855 5.7926,-2.4775 0.0226,-0.0168 0.0411,-0.0384 0.0541,-0.0632 0.0131,-0.0249 0.0204,-0.0524 0.0213,-0.0805 v -5.9532 c -4e-4,-0.0262 -0.0066,-0.052 -0.0183,-0.0755 -0.0117,-0.0235 -0.0284,-0.0441 -0.0491,-0.0603 -0.0207,-0.0162 -0.0447,-0.0275 -0.0703,-0.0332 -0.0256,-0.0057 -0.0522,-0.0056 -0.0777,3e-4 -5.0336,1.2021 -10.1917,1.8048 -15.3669,1.7953 -8.9063,0 -11.3016,-4.2262 -11.9876,-5.9856 -0.5513,-1.5206 -0.9014,-3.1067 -1.0414,-4.718 -0.0015,-0.0271 0.0035,-0.0541 0.0145,-0.0789 0.0109,-0.0248 0.0276,-0.0466 0.0486,-0.0637 0.021,-0.0172 0.0457,-0.0291 0.0722,-0.0349 0.0265,-0.0058 0.0539,-0.0053 0.0802,0.0015 4.9497,1.194 10.0237,1.7967 15.1155,1.7953 1.2246,0 2.4456,0 3.6702,-0.0323 5.1211,-0.1436 10.5187,-0.4057 15.5572,-1.3895 0.1257,-0.0252 0.2514,-0.0467 0.3591,-0.079 7.9474,-1.5261 15.5106,-6.3159 16.2791,-18.445 0.0287,-0.4775 0.1006,-5.0017 0.1006,-5.4972 0.0035,-1.684 0.5422,-11.946 -0.0791,-18.2511 z"
+         fill="url(#paint0_linear_549_34)"
+         id="path8"
+         style="display:inline;opacity:1;mix-blend-mode:lighten;fill:url(#radialGradient185)" /></g></g></svg>

themes/dreamcast/layouts/partials/header.html

@@ -1,6 +1,6 @@
 <div class="profile h-card">
     <a class="sitetitle u-url" rel="me" href="{{ .Site.BaseURL }}"><h1><span class="p-name">{{ .Site.Title }}</span></h1></a>
-    <span class="about p-note">
+    <p class="about">
     {{.Site.Params.about}}
     </p>
 </div>

themes/dreamcast/static/css/main.css

@@ -24,6 +24,24 @@
     --platinum: #D0DDD7;
     --non-photo-blue: #8AC6D0;
 
+    --night: #121113;
+    --tea-green: #E2F1AF;
+    --anti-flash-white: #EEF0F2;
+    --zaffre: #0D21A1;
+    --saffron: #EEC643;
+    --purple: #7B1E7A;
+    --raspberry-rose: #B33F62;
+    --tufts-blue: #3C91E6;
+    --pale-purple: #F3E0EC;
+    --timberwolf: #DDCECD;
+    --isabelline: #EEE5E5;
+    --verdigris: #28AFB0;
+    --fandango: #AF4D98;
+    --risd-blue: #4242FF;
+
+    --charcoal: #364958;
+    --cornflower-blue: #758BFD;
+    --tropical-indigo: #9D8DF1;
 
     /* solarized dark colors */
     --base00: #657b83;
@@ -45,11 +63,11 @@
     --green: #859900;
 
     --main-bg: var(--dark-purple);
-    --content-bg: #353535;
+    --content-bg: var(--isabelline);
-    --primary-text: var(--platinum);
+    --primary-text: var(--night);
-    --secondary-text: var(--pewter-blue);
+    --secondary-text: var(--charcoal);
-    --primary-link: var(--chinese-red);
+    --primary-link: var(--risd-blue);
-    --primary-link-hover: var(--pewter-blue);
+    --primary-link-hover: var(--verdigris);
     --secondary-link: var(--cyan);
     --secondary-link-hover: var(--pewter-blue);
     --ternary-link: var(--fairy-tale);
@@ -89,17 +107,14 @@ p {
     line-height: 1.8;
 }
 
-a {
-    transition: color 0.5s;
-}
-
 a:link, a:visited {
     color: var(--primary-link);
     text-decoration: none;
 }
 
 a:hover, a:active {
-    color: var(--primary-link-hover);
+    /* color: var(--primary-link-hover); */
+    text-decoration: underline;
 }
 
 a.tag {
@@ -121,7 +136,7 @@ a.summary {
 header h1 {
     font-family: 'Phudu', monospace;
     /* font-size: 1rem; */
-    color: var(--pewter-blue);
+    color: var(--fairy-tale);
 }
 
 ul.social {
@@ -134,6 +149,10 @@ li.social {
     padding: 0;
 }
 
+img.social {
+    height: 16px;
+}
+
 header a.sitetitle {
     text-decoration: none;
 }
@@ -154,7 +173,8 @@ header .profile h1 {
 }
 
 p.about {
-    padding: 15px;
+    line-height: 0;
+    color: var(--fairy-tale);
 }
 
 p.context {
@@ -196,15 +216,39 @@ nav li a {
     padding: 20px;
     font-family: 'B612 Mono', monospace;
     font-weight: bold;
-    transition: background 0.5s;
+    transition: box-shadow 0.3s;
 }
 
 nav li a:link, nav li a:visited {
     color: var(--ternary-link);
+    text-decoration: none;
 }
 
 nav li a:hover, nav li a:active {
-    background-color: var(--ternary-link-hover);
+    animation: 0.2s ease-in 1 forwards gradient;
+    outline: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 3px 10px white;
+}
+
+@keyframes gradient {
+    0% {
+        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.00) 10%, rgba(255,255,255,0) 20%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.0) 41%); 
+    }
+    20% {
+        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 30%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    }
+    40% {
+        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 35%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    }
+    60% {
+        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 45%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    }
+    80% {
+        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    }
+    100% {
+        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    }
 }
 
 .main-sidebar {
@@ -269,14 +313,6 @@ article time {
     color: var(--secondary-text);
 }
 
-article a.title {
-    color: var(--primary-link);
-}
-
-article a.title:hover, article a.title:active {
-    color: var(--primary-link-hover);
-}
-
 blockquote {
     font: 14px/22px normal helvetica, sans-serif;
     margin-top: 10px;
@@ -308,14 +344,12 @@ li.page-item {
     padding: 0.3rem;
 }
 
-
 footer {
     padding: 0 0 15px 0px;
     text-align: center;
     color: var(--secondary-text);
 }
 
-
 #webmentions img { max-height: 1.2em; margin-right: -1ex; }
 
 .hidden {
@@ -330,7 +364,6 @@ footer {
  * Links page
  */
 
-
 #links-main {
     display: flex;
     flex-flow: row wrap;
@@ -368,6 +401,8 @@ footer {
     overflow-wrap: break-word;
 }
 
+/* webmention box */
+
 .send-webmention {
     margin: 55px 25px;
     max-width: fit-content;