glossy menu and social icons
This commit is contained in:
parent
ddf962ee99
commit
c9718f3ed9
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
--primary-text: var(--platinum);
|
||||
--secondary-text: var(--pewter-blue);
|
||||
--primary-link: var(--chinese-red);
|
||||
--primary-link-hover: var(--pewter-blue);
|
||||
--content-bg: var(--isabelline);
|
||||
--primary-text: var(--night);
|
||||
--secondary-text: var(--charcoal);
|
||||
--primary-link: var(--risd-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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue