App :: github link ui update

This commit is contained in:
mertJF
2020-05-23 14:42:29 +03:00
parent 5576e236df
commit 2855e366b2
2 changed files with 43 additions and 6 deletions

View File

@@ -297,9 +297,13 @@ class App extends Component {
</div> </div>
</main> </main>
<a href="https://github.com/mertJF/tailblocks" className="github" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/mertJF/tailblocks" className="github" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> <path
fill="currentColor"
d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"
/>
</svg> </svg>
GitHub
</a> </a>
</div> </div>
); );

View File

@@ -552,19 +552,25 @@ pre, code {
} }
.github { .github {
width: 52px; padding: 8px 12px;
height: 52px; border-radius: 50px;
border-radius: 50%;
position: fixed; position: fixed;
right: 20px; right: 20px;
bottom: 20px; bottom: 20px;
background-color: var(--solid-900); background-color: var(--solid-900);
color: #fff; color: #fff;
display: inline-flex; display: inline-flex;
font-weight: 600;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.github svg {
width: 24px;
flex-shrink: 0;
margin-right: 6px;
}
.dark-mode .github { .dark-mode .github {
color: #1a202c; color: #1a202c;
background-color: #fff; background-color: #fff;
@@ -649,5 +655,32 @@ pre, code {
.dark-mode .switcher { .dark-mode .switcher {
background-color: #1a202c; background-color: #1a202c;
} }
}
@media (max-width: 380px) {
.github {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
color: transparent;
white-space: nowrap;
}
.github svg {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
.dark-mode .github {
color: transparent;
}
.dark-mode .github svg {
color: #1a202c;
}
} }