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

Test SVG logo in README

Browse Source
This commit is contained in:
squidfunk 2021-02-15 11:03:17 +01:00
parent 323f4265d4
commit e17f58d614
1 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
.github/assets/logo.svg vendored Normal file
View File

@ -0,0 +1,107 @@
<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 logo {
0%, 100% {
box-shadow: 0 0 0 10px #FFFFFF;
}
50% {
box-shadow: 0 0 0 4px #CCCCCC;
}
}
.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;
}
.logo {
width: 40%;
border-radius: 100%;
background-image: linear-gradient(#1A1A1A, #5E5E5E);
box-shadow: 0 0 0 4px transparent;
transition: box-shadow 1s;
}
.logo:hover {
box-shadow: 0 0 0 4px red;
animation: logo 2s infinite ease-in-out;
}
.logo svg {
display: block;
margin: 20%;
fill: white;
}
h1 {
margin: 24px 0 4px;
color: #1A1A1A;
font-size: 24px;
font-weight: bold;
}
h2 {
margin: 4px 0;
color: #5E5E5E;
font-size: 14px;
}
[data-color-mode=dark] h1 {
color: #E5E5E5;
}
</style>
<div class="container">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<polygon
points="3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387"
>
</polygon>
<clipPath id="clip">
<polygon
points="21.910 8.000, 64.843 72.398, 89 89, 89 0"
style="fill: blue; fill-opacity: 0.25"
>
</polygon>
</clipPath>
<polygon
points="21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387"
style="fill-opacity: 0.5;"
>
</polygon>
<polygon
clip-path="url(#clip)"
points="67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052"
>
</polygon>
<polygon
clip-path="url(#clip)"
points="67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387"
style="fill-opacity: 0.25;"
>
</polygon>
</svg>
</div>
<h1>Material for MkDocs</h1>
<h2>Technical documentation that just works</h2>
</div>
</div>
</foreignObject>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB