anatolykopyl/kopyl.dev
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

Updated telegram and formatting

Browse Source
This commit is contained in:
Anatoly Kopyl
2023-01-01 21:58:51 +03:00
parent 35b6170959
commit 3963b68a73
18 changed files with 131 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -9,8 +10,10 @@
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
<script type="text/javascript"> <script type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; (function (m, e, t, r, i, k, a) {
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(88895893, "init", { ym(88895893, "init", {
@@ -20,13 +23,17 @@
webvisor: true webvisor: true
}); });
</script> </script>
<noscript><div><img src="https://mc.yandex.ru/watch/88895893" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <noscript>
<div><img src="https://mc.yandex.ru/watch/88895893" style="position:absolute; left:-9999px;" alt="" /></div>
</noscript>
<!-- /Yandex.Metrika counter --> <!-- /Yandex.Metrika counter -->
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>
</html> </html>

41
src/components/Controls.module.css
View File

@@ -1,3 +1,7 @@
:root {
--blob-distance: 70px;
}
.Controls { .Controls {
position: fixed; position: fixed;
background: var(--clr-bg-secondary); background: var(--clr-bg-secondary);
@@ -12,12 +16,13 @@
.chapters { .chapters {
position: relative; position: relative;
height: calc(70px * 3); height: calc(var(--blob-distance) * 3);
width: 100%; width: 100%;
margin-bottom: var(--gap-md); margin-bottom: var(--gap-md);
} }
.controlsWrapper, .gooWrapper { .controlsWrapper,
.gooWrapper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -29,7 +34,8 @@
filter: url('#goo'); filter: url('#goo');
} }
.control, .blob { .control,
.blob {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -62,15 +68,16 @@
.selected { .selected {
width: 64px; width: 64px;
height: 64px; height: 64px;
transform: translateX(-50%);
} }
.control:nth-child(2), .blob:nth-child(2) { .control:nth-child(2),
top: 70px; .blob:nth-child(2) {
top: var(--blob-distance);
} }
.control:nth-child(3), .blob:nth-child(3) { .control:nth-child(3),
top: calc(70px * 2); .blob:nth-child(3) {
top: calc(var(--blob-distance) * 2);
} }
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
@@ -85,29 +92,33 @@
} }
.chapters { .chapters {
width: calc(70px * 3); width: calc(var(--blob-distance) * 3);
height: 64px; height: 64px;
margin: auto; margin: auto;
} }
.control, .blob { .control,
.blob {
top: 0; top: 0;
left: 0; left: 0;
transform: translateX(0); transform: translateX(0);
} }
.control, .control > img { .control,
.control>img {
width: auto; width: auto;
height: 100%; height: 100%;
} }
.control:nth-child(2), .blob:nth-child(2) { .control:nth-child(2),
.blob:nth-child(2) {
top: unset; top: unset;
left: 70px; left: var(--blob-distance);
} }
.control:nth-child(3), .blob:nth-child(3) { .control:nth-child(3),
.blob:nth-child(3) {
top: unset; top: unset;
left: calc(70px * 2); left: calc(var(--blob-distance) * 2);
} }
} }

2
src/components/Hero.module.css
View File

@@ -41,9 +41,11 @@
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }
100% { 100% {
background-position: 0% 50%; background-position: 0% 50%;
} }

2
src/components/Links.tsx
View File

@@ -16,7 +16,7 @@ export default () => {
linkedin linkedin
</a> </a>
<a <a
href='https://t.me/avkopyl' href='https://t.me/anatolykopyl'
target='_blank' target='_blank'
> >
telegram telegram

16
src/index.css
View File

@@ -34,7 +34,12 @@ body {
background: var(--clr-bg); background: var(--clr-bg);
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0; margin: 0;
} }
@@ -49,7 +54,8 @@ code {
monospace; monospace;
} }
input, textarea { input,
textarea {
background: var(--clr-bg-secondary); background: var(--clr-bg-secondary);
border: none; border: none;
padding: var(--gap-sm); padding: var(--gap-sm);
@@ -62,10 +68,12 @@ textarea {
resize: none; resize: none;
} }
textarea:focus, input:focus{ textarea:focus,
input:focus {
outline: none; outline: none;
} }
input::placeholder, textarea::placeholder { input::placeholder,
textarea::placeholder {
color: var(--clr-text-secondary); color: var(--clr-text-secondary);
} }