Skip to content
Snippets Groups Projects
Commit 4c743854 authored by squidfunk's avatar squidfunk
Browse files

Added dark logo to README

parent d0b2c044
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.github/assets/logo-dark.svg 0 → 100644
+ 236
− 0
View file @ 4c743854
<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.5;
}
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.1;
}
}
.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>
README.md
+ 1
− 0
View file @ 4c743854
<p align="center">
<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-dark.svg#gh-dark-mode-only" width="320" alt="Material for MkDocs">
</a>
</p>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment