OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update logo

Browse Source
This commit is contained in:
squidfunk 2023-02-26 17:36:59 +01:00
parent adbc2afd6c
commit 402835e930
3 changed files with 52 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
.github/assets/logo-dark.svg vendored
View File

@ -1,236 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<style>
@keyframes backdrop {
0% {
transform: scale(0.9) rotateZ(45deg);
opacity: 0.25;
}
10% {
opacity: 1;
}
15% {
transform: scale(1.1) rotateZ(35deg);
}
50% {
transform: scale(1) rotateZ(0deg);
}
75% {
transform: scale(1.1) rotateZ(-35deg);
opacity: 1;
}
100% {
transform: scale(0.9) rotateZ(-45deg);
opacity: 0.25;
}
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 320px;
height: 320px;
font-family:
system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
letter-spacing: -1px;
border-radius: 2px;
}
.logo {
position: relative;
width: 40%;
}
.logo svg {
position: relative;
display: block;
margin: 20%;
fill: #FFFFFF;
}
.backdrop {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(#1A1A1A, #5E5E5E);
border-radius: 100%;
animation: backdrop infinite both 10s 1s cubic-bezier(0.7, 0, 0.3, 1);
}
h1 {
margin: 24px 0 4px;
color: #FFFFFF;
font-weight: bold;
font-size: 24px;
}
h2 {
margin: 4px 0;
color: #7E7E7E;
font-size: 14px;
}
</style>
<div class="container">
<div class="logo">
<div class="backdrop"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<polygon id="p1">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1s;p1o.end+1s" id="p1i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
3.136 17.387, 3.136 60.319, 3.136 60.319, 3.136 60.319;
3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387
"
/>
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p1i.end+5s" id="p1o"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387;
3.136 17.387, 3.136 60.319, 3.136 60.319, 3.136 60.319
"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="5s" begin="p1i.end"
from="1" to="0.5"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="0.1s" begin="p1o.end"
from="0.5" to="1"
/>
</polygon>
<polygon id="p2" style="fill-opacity: 0.5;">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1s;p2o.end+1s" id="p2i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
21.910 50.932, 21.910 50.932, 3.136 60.319, 3.136 60.319;
21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387
"
/>
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p2i.end+5s" id="p2o"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387;
21.910 50.932, 21.910 50.932, 3.136 60.319, 3.136 60.319
"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="5s" begin="p1i.end"
from="0.5" to="1"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="0.1s" begin="p2o.end"
from="1" to="0.5"
/>
</polygon>
<clipPath id="clip">
<polygon id="p3">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1s;p3o.end+1s" id="p3i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
21.910 50.932, 21.910 50.932, 89 89, 89 0;
21.910 8.000, 64.843 72.398, 89 89, 89 0
"
/>
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p3i.end+5s" id="p3o"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
21.910 8.000, 64.843 72.398, 89 89, 89 0;
21.910 50.932, 21.910 50.932, 89 89, 89 0
"
/>
</polygon>
</clipPath>
<polygon id="p4" clip-path="url(#clip)">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1.25s;p4o.end+1s" id="p4i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052;
67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052
"
/>
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p4i.end+5s" id="p4o"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052;
67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052
"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="5s" begin="p1i.end"
from="1" to="0.5"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="0.1s" begin="p4o.end"
from="0.5" to="1"
/>
</polygon>
<polygon id="p5" clip-path="url(#clip)" style="fill-opacity: 0.25;">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1.25s;p5o.end+1s" id="p5i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053;
67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387
"
/>
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p5i.end+5s" id="p5o"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387;
67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053
"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="5s" begin="p1i.end"
from="0.25" to="1"
/>
<animate
attributeName="fill-opacity" fill="freeze"
dur="0.1s" begin="p5o.end"
from="1" to="0.25"
/>
</polygon>
</svg>
</div>
<h1>Material for MkDocs</h1>
<h2>Documentation that simply works</h2>
</div>
</div>
</foreignObject>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

103
.github/assets/logo.svg vendored
View File

@ -3,81 +3,80 @@
<div xmlns="http://www.w3.org/1999/xhtml"> <div xmlns="http://www.w3.org/1999/xhtml">
<style> <style>
@keyframes backdrop { @keyframes backdrop {
0% { 0% {
transform: scale(0.9) rotateZ(45deg); transform: scale(0.9) rotateZ(45deg);
opacity: 0.1; opacity: 0.1;
} }
10% { 10% {
opacity: 1; opacity: 1;
} }
15% { 15% {
transform: scale(1.1) rotateZ(35deg); transform: scale(1.1) rotateZ(35deg);
} }
50% { 50% {
transform: scale(1) rotateZ(0deg); transform: scale(1) rotateZ(0deg);
} }
75% { 75% {
transform: scale(1.1) rotateZ(-35deg); transform: scale(1.1) rotateZ(-35deg);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: scale(0.9) rotateZ(-45deg); transform: scale(0.9) rotateZ(-45deg);
opacity: 0.1; opacity: 0.1;
} }
} }
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 320px; width: 320px;
height: 320px; height: 320px;
font-family: font-family:
system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
letter-spacing: -1px; letter-spacing: -1px;
background: #FFFFFF; border-radius: 2px;
border-radius: 2px;
} }
.logo { .logo {
position: relative; position: relative;
width: 40%; width: 40%;
} }
.logo svg { .logo svg {
position: relative; position: relative;
display: block; display: block;
margin: 20%; margin: 20%;
fill: #FFFFFF; fill: #FFFFFF;
} }
.backdrop { .backdrop {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: linear-gradient(#1A1A1A, #5E5E5E); background-image: linear-gradient(#1A1A1A, #526cfe);
border-radius: 100%; border-radius: 100%;
animation: backdrop infinite both 10s 1s cubic-bezier(0.7, 0, 0.3, 1); animation: backdrop infinite both 10s 1s cubic-bezier(0.7, 0, 0.3, 1);
} }
h1 { h1 {
margin: 24px 0 4px; margin: 24px 0 4px;
color: #1A1A1A; color: #526cfe;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
} }
h2 { h2 {
margin: 4px 0; margin: 4px 0;
color: #5E5E5E; color: #5E5E5E;
font-size: 14px; font-size: 14px;
} }
</style> </style>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

5
README.md
View File

@ -1,10 +1,7 @@
<p align="center"> <p align="center">
<a href="https://squidfunk.github.io/mkdocs-material/#gh-light-mode-only"> <a href="https://squidfunk.github.io/mkdocs-material/">
<img src="https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/.github/assets/logo.svg" width="320" alt="Material for MkDocs"> <img src="https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/.github/assets/logo.svg" width="320" alt="Material for MkDocs">
</a> </a>
<a href="https://squidfunk.github.io/mkdocs-material/#gh-dark-mode-only">
<img src="https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/.github/assets/logo-dark.svg" width="320" alt="Material for MkDocs">
</a>
</p> </p>
<p align="center"> <p align="center">