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>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -9,8 +10,10 @@
<!-- Yandex.Metrika counter -->
<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)};
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)})
(function (m, e, t, r, i, 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");
ym(88895893, "init", {
@@ -20,13 +23,17 @@
webvisor: true
});
</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 -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

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

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

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

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

2
src/components/Links.tsx
View File

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

16
src/index.css
View File

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