Rewritten in less, new floating menu, separated js
This commit is contained in:
parent
e0629a750a
commit
e9f60236a4
16 changed files with 1663 additions and 535 deletions
203
css/style.css
203
css/style.css
|
|
@ -1,203 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||
@font-face {
|
||||
font-family: 'Minecraft';
|
||||
src: url('../fonts/minecraft.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #001;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
--topmenu-bg: rgba(81, 75, 144, 0.4);
|
||||
--popups-rgb: 34;
|
||||
--popups-alpha: 0.8;
|
||||
--hint-alpha: 0.4;
|
||||
--popups-bg: rgba(var(--popups-rgb), var(--popups-rgb), var(--popups-rgb), var(--popups-alpha));
|
||||
}
|
||||
|
||||
img.logo {
|
||||
width: 4rem;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
background-color: var(--topmenu-bg);
|
||||
z-index: 998;
|
||||
}
|
||||
.top-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
.top-menu li {
|
||||
padding: 10px;
|
||||
}
|
||||
.top-menu li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.context-menu-like {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
background-color: var(--popups-bg);
|
||||
}
|
||||
.context-menu-like ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.context-menu-like li {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.context-menu-like li:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
.context-menu-like li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.submenu {
|
||||
left: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.submenu:before {
|
||||
content: "";
|
||||
border: solid transparent;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
bottom: 100%;
|
||||
border-bottom-color: #222;
|
||||
border-width: 9px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#item-minecraft {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
span.minecraft-text {
|
||||
font-family: 'Minecraft';
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.popup {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
.card { margin: 10px; }
|
||||
|
||||
.about-card-wrapper {
|
||||
margin-top: 18%;
|
||||
margin-left: 65%;
|
||||
}
|
||||
.msg-wrapper {
|
||||
margin-top: 5%;
|
||||
margin-left: 65%;
|
||||
}
|
||||
.card h1 {
|
||||
margin: 0 0 0 0;
|
||||
padding: 0;
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 10px 0;
|
||||
padding: 0;
|
||||
font-size: 1.3em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 40%;
|
||||
left: 35%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(var(--popups-rgb),var(--popups-rgb),var(--popups-rgb),var(--hint-alpha));
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-out 0s;
|
||||
z-index: 1000;
|
||||
}
|
||||
.hint > span {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
#stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.space-obj {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 997;
|
||||
}
|
||||
.space-obj > img {
|
||||
animation: rotate 480s linear 0s infinite normal;
|
||||
|
||||
/* unselectable */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
2
css/tuesday.min.css
vendored
2
css/tuesday.min.css
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
BIN
img/mars.gif
Normal file
BIN
img/mars.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
img/sun.xcf
BIN
img/sun.xcf
Binary file not shown.
1040
index.html
1040
index.html
File diff suppressed because it is too large
Load diff
10
js/age.js
10
js/age.js
|
|
@ -1,10 +0,0 @@
|
|||
// Computing My Age
|
||||
// Вычисление моего возраста
|
||||
var birthday = new Date(2009, 7, 13, 13);
|
||||
try {
|
||||
// https://ru.stackoverflow.com/questions/576478/javascript-Вычисление-возраста-по-дате-рождения
|
||||
document.getElementById('age-js').innerHTML = Math.floor((Date.now() - birthday.getTime()) / (24 * 3600 * 365.25 * 1000));
|
||||
}
|
||||
catch (ex) {
|
||||
console.log('Произошла ошибка при попытке рендеринга моего возраста! Подробнее:\n' + ex.message);
|
||||
}
|
||||
22
js/anim.js
Normal file
22
js/anim.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
const fadeAnimIn = [
|
||||
'show',
|
||||
'animated',
|
||||
'tdFadeIn',
|
||||
]
|
||||
|
||||
const fadeAnimOut = [
|
||||
'animated',
|
||||
'tdFadeOut',
|
||||
]
|
||||
|
||||
|
||||
const bounceAnimIn = [
|
||||
'show',
|
||||
'animated',
|
||||
'tdExpandInBounce',
|
||||
]
|
||||
|
||||
const bounceAnimOut = [
|
||||
'animated',
|
||||
'tdShrinkOutBounce',
|
||||
]
|
||||
19
js/control.js
Normal file
19
js/control.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/** @type {HTMLImageElement} */
|
||||
const spaceObj = document.querySelector('#space-obj')
|
||||
|
||||
/** @type {HTMLDivElement} */
|
||||
const space = document.querySelector('.space')
|
||||
|
||||
|
||||
function changePicture(/** @type {Event} */ ev) {
|
||||
spaceObj.src = ev.target.dataset.img || 'img/earth.gif'
|
||||
hideContextMenu()
|
||||
}
|
||||
|
||||
function changeSpeed(/** @type {Event} */ ev) {
|
||||
spaceObj.style.animationDuration = `${1200 - ev.target.value}s`
|
||||
}
|
||||
|
||||
function landToEarth() {
|
||||
hideContextMenu()
|
||||
}
|
||||
24
js/handlers.js
Normal file
24
js/handlers.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
context.addEventListener('mousedown', ev => ev.stopPropagation())
|
||||
|
||||
space.addEventListener('mousedown', ev => ev.preventDefault())
|
||||
space.addEventListener('contextmenu', contextMenu)
|
||||
|
||||
document.querySelectorAll('.copylink>.profile-link').forEach(
|
||||
elem => elem.addEventListener('click', copyLink)
|
||||
)
|
||||
|
||||
document.querySelectorAll('li.change-img>a').forEach(
|
||||
elem => elem.addEventListener('click', changePicture)
|
||||
)
|
||||
|
||||
document.querySelector('li.change-speed a').addEventListener('mousedown', ev => ev.preventDefault())
|
||||
document.querySelector('li.change-speed input').addEventListener('input', changeSpeed)
|
||||
document.querySelector('li.change-speed input').addEventListener('mousedown', ev => ev.stopPropagation())
|
||||
document.querySelector('li.land-to').addEventListener('click', landToEarth)
|
||||
|
||||
move.addEventListener('mousedown', moveMenu)
|
||||
move.addEventListener('mouseup', moveMenu)
|
||||
move.addEventListener('mousemove', moveMenu)
|
||||
body.addEventListener('mousemove', moveMenu)
|
||||
body.addEventListener('mouseup', moveMenu)
|
||||
body.addEventListener('mousedown', hideContextMenu)
|
||||
69
js/init.js
Normal file
69
js/init.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
function init() {
|
||||
initStars()
|
||||
computeAge()
|
||||
}
|
||||
|
||||
function initStars() {
|
||||
|
||||
const colors = [
|
||||
'#999','#9999ac','#ac9999','#acac99',
|
||||
'#bbb','#bbbbcf','#cfbbbb','#cfcfbb',
|
||||
'#eee','#e5e5ff','#ffe5e5','#ffffe5',
|
||||
'#fff'
|
||||
]
|
||||
const len = colors.length
|
||||
|
||||
const canvas = document.querySelector('canvas#stars')
|
||||
const css = getComputedStyle(canvas)
|
||||
|
||||
const w = canvas.width = styleValue(css.getPropertyValue('width' ))
|
||||
const h = canvas.height = styleValue(css.getPropertyValue('height'))
|
||||
|
||||
// if CSS hasn't been loaded yet
|
||||
// (w and h contains NaN)
|
||||
const err = [w,h].some(n => isNaN(n))
|
||||
if (err) {
|
||||
setTimeout(init, 200)
|
||||
return
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
const radius = 3
|
||||
const circle = 2 * Math.PI
|
||||
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
for (let star = 0; star < 200; star++) {
|
||||
|
||||
let color = Math.floor(Math.random() * len)
|
||||
ctx.fillStyle = colors[color]
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(
|
||||
Math.round(Math.random() * w),
|
||||
Math.round(Math.random() * h),
|
||||
radius, 0, circle, false
|
||||
)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
function computeAge() {
|
||||
|
||||
const birthday = new Date(2009, 7, 13, 12, 30)
|
||||
const timedelta = Date.now() - birthday.getTime()
|
||||
|
||||
/*
|
||||
The line below is equivalent to:
|
||||
const age = timedelta / 1000 / 60 / 60 / 24 / 365.25
|
||||
where:
|
||||
1000: convert milliseconds -> seconds
|
||||
60: secs -> minutes
|
||||
60: minutes -> hours
|
||||
24: hours -> days
|
||||
365.25: average count of days in a year:
|
||||
(366 + (365 * 3)) / 4 = 365.25
|
||||
*/
|
||||
const age = timedelta / (1000 * 60 * 60 * 24 * 365.25)
|
||||
|
||||
document.getElementById('age-js').textContent = Math.floor(age)
|
||||
}
|
||||
76
js/menu.js
Normal file
76
js/menu.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/** @type {HTMLDivElement} */
|
||||
const menu = document.querySelector('.about-menu')
|
||||
|
||||
/** @type {HTMLLIElement} */
|
||||
const move = document.querySelector('.about-menu li#move')
|
||||
|
||||
/** @type {HTMLDivElement} */
|
||||
const context = document.querySelector('.context-menu')
|
||||
|
||||
|
||||
var contextShown = false
|
||||
var contextTimeout
|
||||
|
||||
var menuDragging = false
|
||||
var mousePos = {x: 0, y: 0}
|
||||
|
||||
|
||||
function moveMenu(/** @type {MouseEvent} */ ev) {
|
||||
switch (ev.type) {
|
||||
|
||||
case 'mousedown':
|
||||
menuDragging = true
|
||||
mousePos.y = ev.clientY - styleValue(menu.style.top)
|
||||
mousePos.x = ev.clientX - styleValue(menu.style.left)
|
||||
menu.classList.add('dragging')
|
||||
ev.preventDefault()
|
||||
break
|
||||
|
||||
case 'mouseup':
|
||||
menuDragging = false
|
||||
menu.classList.remove('dragging')
|
||||
break
|
||||
|
||||
case 'mousemove':
|
||||
if (menuDragging) {
|
||||
let top = ev.clientY - mousePos.y
|
||||
let left = ev.clientX - mousePos.x
|
||||
menu.style.top = `${top}px`
|
||||
menu.style.left = `${left}px`
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function contextMenu(/** @type {MouseEvent} */ ev) {
|
||||
|
||||
clearTimeout(contextTimeout)
|
||||
context.classList.remove(...bounceAnimOut)
|
||||
|
||||
context.style.top = `${ev.clientY + 5}px`
|
||||
context.style.left = `${ev.clientX + 5}px`
|
||||
|
||||
context.classList.add(...bounceAnimIn)
|
||||
contextShown = true
|
||||
|
||||
ev.preventDefault()
|
||||
return false
|
||||
}
|
||||
|
||||
function hideContextMenu(/** @type {MouseEvent} */ ev) {
|
||||
|
||||
if (!contextShown) return
|
||||
if (ev && ev.button != 0) return
|
||||
|
||||
context.classList.remove(...bounceAnimIn)
|
||||
|
||||
context.classList.add('show')
|
||||
context.classList.add(...bounceAnimOut)
|
||||
contextShown = false
|
||||
|
||||
// animation-duration: 0.6s;
|
||||
contextTimeout = setTimeout(() => {
|
||||
context.classList.remove('show')
|
||||
context.classList.remove(...bounceAnimOut)
|
||||
}, 600)
|
||||
}
|
||||
136
js/script.js
136
js/script.js
|
|
@ -1,128 +1,32 @@
|
|||
function setupUi() {
|
||||
// Context Menu
|
||||
document.body.addEventListener('contextmenu', (e) => {
|
||||
var menu = document.querySelector('.context-menu');
|
||||
menu.style.top = e.pageY + 'px';
|
||||
menu.style.left = e.pageX + 'px';
|
||||
togglePopup(menu);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
// Hide Pop-ups
|
||||
document.body.addEventListener('click', () => {
|
||||
var popups = document.querySelectorAll('.popup');
|
||||
for (var i = 0; i < popups.length; i++) {
|
||||
togglePopup(popups[i], 0);
|
||||
}
|
||||
});
|
||||
// Initialize Hints
|
||||
var itemswh = document.querySelectorAll('.withhint');
|
||||
for (var j = 0; j < itemswh.length; j++) {
|
||||
itemswh[j].addEventListener('mouseover', showHint);
|
||||
//itemswh[j].addEventListener('mousemove', showHint);
|
||||
itemswh[j].addEventListener('mouseleave', hideHint);
|
||||
}
|
||||
};
|
||||
const body = document.body
|
||||
|
||||
function initStars() {
|
||||
var colors = ['#aaa','#ddd','#eee','#fff'];
|
||||
var canvas = document.querySelector('canvas#stars');
|
||||
var w = canvas.width;
|
||||
var h = canvas.height;
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
for (var star = 0; star < 200; star++) {
|
||||
ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)];
|
||||
ctx.fillRect(Math.round(Math.random()*w), Math.round(Math.random()*h), 1, 1);
|
||||
}
|
||||
};
|
||||
function copyLink(/** @type {Event} */ ev) {
|
||||
|
||||
function togglePopup(el, mode=1) {
|
||||
var displaying = (el.accessKey.trim() != '' && el.accessKey != '0');
|
||||
/** @type {HTMLSpanElement} */
|
||||
let elem = ev.currentTarget
|
||||
|
||||
if (mode != 1 && !displaying)
|
||||
return;
|
||||
navigator.clipboard.writeText(elem.dataset.link)
|
||||
|
||||
if (!displaying) {
|
||||
el.style.animation = 'tdExpandInBounce 0.3s ease 0s forwards';
|
||||
el.style.pointerEvents = 'auto';
|
||||
el.accessKey = '1';
|
||||
}
|
||||
else {
|
||||
el.style.animation = 'tdShrinkOutBounce 0.3s ease 0s forwards';
|
||||
el.style.pointerEvents = 'none';
|
||||
el.accessKey = '0';
|
||||
}
|
||||
};
|
||||
let wrapper = elem.parentElement.parentElement.parentElement
|
||||
let msg = wrapper.querySelector('.copied')
|
||||
|
||||
function showDiscordSubmenu(e) {
|
||||
var submenu = document.querySelector('li#item-discord').querySelector('nav.submenu');
|
||||
togglePopup(submenu);
|
||||
e.stopPropagation();
|
||||
};
|
||||
msg.classList.add(...fadeAnimIn)
|
||||
|
||||
function showAboutCard(e) {
|
||||
var about = document.querySelector('div.about-card-wrapper');
|
||||
togglePopup(about);
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
function copyDiscordTag(e) {
|
||||
var dtag = e.target.innerText;
|
||||
var text = document.createElement('textarea');
|
||||
text.style.position = 'absolute';
|
||||
text.style.left = '-9999px';
|
||||
text.style.top = '0';
|
||||
text.innerHTML = dtag;
|
||||
text.classList.add('copyarea');
|
||||
e.target.append(text);
|
||||
text.select();
|
||||
|
||||
document.execCommand('copy');
|
||||
setTimeout(() => {
|
||||
document.querySelector('textarea.copyarea').remove();
|
||||
togglePopup(document.querySelector('li#item-discord').querySelector('nav.submenu'));
|
||||
}, 100);
|
||||
|
||||
togglePopup(document.querySelector('.msg-wrapper'));
|
||||
msg.classList.remove(...fadeAnimIn)
|
||||
|
||||
msg.classList.add('show')
|
||||
msg.classList.add(...fadeAnimOut)
|
||||
|
||||
setTimeout(() => {
|
||||
togglePopup(document.querySelector('.msg-wrapper'), 0);
|
||||
}, 1500);
|
||||
e.stopPropagation();
|
||||
};
|
||||
msg.classList.remove(...fadeAnimOut)
|
||||
msg.classList.remove(...fadeAnimIn)
|
||||
}, 600)
|
||||
|
||||
function changePicture(e, num) {
|
||||
var img = document.querySelector('.space-obj > img');
|
||||
switch (num) {
|
||||
case 0:
|
||||
img.src = 'img/earth.gif';
|
||||
break;
|
||||
case 1:
|
||||
img.src = 'img/moon.gif';
|
||||
break;
|
||||
case 2:
|
||||
img.src = 'img/sun.gif';
|
||||
break;
|
||||
}, 1500)
|
||||
}
|
||||
togglePopup(document.querySelector('.context-menu'));
|
||||
};
|
||||
|
||||
function spaceObjSpeed(spd) {
|
||||
document.querySelector('.space-obj>img').style.animationDuration = `${spd}s`;
|
||||
};
|
||||
|
||||
function showHint(e) {
|
||||
var elid = e.target.id;
|
||||
var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
|
||||
var hintel = document.getElementById(hintid);
|
||||
if (hintel)
|
||||
hintel.style.opacity = '1';
|
||||
};
|
||||
|
||||
function hideHint(e) {
|
||||
var elid = e.target.id;
|
||||
var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
|
||||
var hintel = document.getElementById(hintid);
|
||||
if (hintel)
|
||||
hintel.style.opacity = '0';
|
||||
};
|
||||
function styleValue(/** @type {string} */ prop) {
|
||||
return prop.replace('px', '') * 1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="1715"
|
||||
height="825"
|
||||
viewBox="0 0 453.7604 218.28126"
|
||||
version="1.1"
|
||||
id="svg3214"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="dc09logo.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview3216"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
width="1800px"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="0.32756265"
|
||||
inkscape:cx="850.21903"
|
||||
inkscape:cy="444.18983"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="705"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs3211" />
|
||||
<g
|
||||
inkscape:label="Слой 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(17.097721,3.065316)">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#514b90;stroke-width:26.4583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path3297"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="-3.3783622"
|
||||
sodipodi:cy="106.07529"
|
||||
sodipodi:rx="122.97446"
|
||||
sodipodi:ry="95.669495"
|
||||
sodipodi:start="4.7129475"
|
||||
sodipodi:end="1.5747827"
|
||||
sodipodi:arc-type="slice"
|
||||
d="M -3.3096803,10.405815 A 122.97446,95.669495 0 0 1 103.22508,58.381557 122.97446,95.669495 0 0 1 102.94536,154.14546 122.97446,95.669495 0 0 1 -3.8685779,201.74403 l 0.4902157,-95.66874 z" />
|
||||
<path
|
||||
style="fill:none;stroke:#e1c08f;stroke-width:26.4583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path3525"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="119.47025"
|
||||
sodipodi:cy="106.07515"
|
||||
sodipodi:rx="91.52832"
|
||||
sodipodi:ry="93.859245"
|
||||
sodipodi:start="4.1083814"
|
||||
sodipodi:end="2.1731524"
|
||||
sodipodi:arc-type="arc"
|
||||
d="M 67.487153,28.822783 A 91.52832,93.859245 0 0 1 187.94969,43.799682 91.52832,93.859245 0 0 1 188.04989,168.23456 91.52832,93.859245 0 0 1 67.611638,183.41545"
|
||||
sodipodi:open="true" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;line-height:1.25;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
x="155.89256"
|
||||
y="205.22354"
|
||||
id="text11016"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan11014"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke-width:0.264583"
|
||||
x="155.89256"
|
||||
y="205.22354">0</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;line-height:1.25;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
x="288.05435"
|
||||
y="206.58174"
|
||||
id="text15242"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan15240"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke-width:0.264583"
|
||||
x="288.05435"
|
||||
y="206.58174">9</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.5 KiB |
486
styles.less
Normal file
486
styles.less
Normal file
|
|
@ -0,0 +1,486 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||
|
||||
@spacebg: #000015;
|
||||
@menubg: rgba(0,0,0,0.65);
|
||||
@menuhl: lighten(@menubg, 14%);
|
||||
@menusel: lighten(@menubg, 30%);
|
||||
@textfg: #fff;
|
||||
@linkfg: #fff;
|
||||
@linkhl: #b0bfff;
|
||||
@popup: #223;
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: @spacebg;
|
||||
color: @textfg;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @linkfg;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
cursor: pointer;
|
||||
color: @linkhl;
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
&:target {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.row-fill {
|
||||
flex-grow: 1;
|
||||
background: @menubg;
|
||||
}
|
||||
|
||||
|
||||
.menu {
|
||||
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border-radius: 5px;
|
||||
|
||||
ul {
|
||||
background-color: @menubg;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li, li label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-menu {
|
||||
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 998;
|
||||
|
||||
transition: opacity 0.32s ease 0s;
|
||||
&.dragging {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
ul {
|
||||
&:nth-child(1) {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
&:nth-last-child(1) {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.section {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
label {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
width: 1.3rem;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#move, #move label, #move a {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
input[type=radio]:checked ~ label {
|
||||
background-color: @menusel;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background-color: @menuhl;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
background-color: @menubg;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.profiles {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& > div {
|
||||
|
||||
position: relative;
|
||||
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: @menuhl;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
a.name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copylink {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 6px;
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
padding-right: 5px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.inline-popup {
|
||||
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
margin-left: 10px;
|
||||
|
||||
cursor: default;
|
||||
font-size: 0.85rem;
|
||||
padding: 3px 6px;
|
||||
background: @popup;
|
||||
border-radius: 5px;
|
||||
|
||||
box-shadow: 0 0 15px #000;
|
||||
|
||||
animation-duration: 0.6s;
|
||||
|
||||
&.show {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.right::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
rotate: z 45deg;
|
||||
left: -0.25rem;
|
||||
background: @popup;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div:not(.title) {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 5px;
|
||||
gap: 10px;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.about-card {
|
||||
.icon {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
width: 1.1rem;
|
||||
margin-top: 1px;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#code {
|
||||
|
||||
.card {
|
||||
|
||||
& > div {
|
||||
margin-top: 0;
|
||||
padding: 4px 3px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
i {
|
||||
width: 1.1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
img {
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.lang-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.lang-skills {
|
||||
|
||||
ol {
|
||||
|
||||
list-style: disc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.less-logo {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: 1.16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projects:not(:empty) {
|
||||
|
||||
border: 2px solid shade(@linkhl, 40%);
|
||||
border-radius: 5px;
|
||||
|
||||
.repo {
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 6fr repeat(2, 1fr);
|
||||
grid-column-gap: 5px;
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: @menuhl;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
|
||||
display: none;
|
||||
animation-duration: 0.6s;
|
||||
|
||||
&.show {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
padding: 7px;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: @menuhl;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
width: 1.2rem;
|
||||
margin-top: 1px;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.expand-wrapper {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
|
||||
.expand {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
|
||||
display: none;
|
||||
|
||||
&:checked ~ .hidden {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& ~ label > i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:checked ~ label > i {
|
||||
rotate: z 180deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.space {
|
||||
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 997;
|
||||
|
||||
#stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
z-index: 0;
|
||||
animation: rotate 480s linear 0s infinite normal;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
11
svg/kotlin.svg
Normal file
11
svg/kotlin.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Logotypes">
|
||||
<polygon class="st0" points="500,500 0,500 0,0 500,0 250,250 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
Loading…
Add table
Reference in a new issue