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)
|
||||||
|
}
|
||||||
138
js/script.js
138
js/script.js
|
|
@ -1,128 +1,32 @@
|
||||||
function setupUi() {
|
const body = document.body
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function initStars() {
|
function copyLink(/** @type {Event} */ ev) {
|
||||||
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 togglePopup(el, mode=1) {
|
/** @type {HTMLSpanElement} */
|
||||||
var displaying = (el.accessKey.trim() != '' && el.accessKey != '0');
|
let elem = ev.currentTarget
|
||||||
|
|
||||||
if (mode != 1 && !displaying)
|
navigator.clipboard.writeText(elem.dataset.link)
|
||||||
return;
|
|
||||||
|
|
||||||
if (!displaying) {
|
let wrapper = elem.parentElement.parentElement.parentElement
|
||||||
el.style.animation = 'tdExpandInBounce 0.3s ease 0s forwards';
|
let msg = wrapper.querySelector('.copied')
|
||||||
el.style.pointerEvents = 'auto';
|
|
||||||
el.accessKey = '1';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
el.style.animation = 'tdShrinkOutBounce 0.3s ease 0s forwards';
|
|
||||||
el.style.pointerEvents = 'none';
|
|
||||||
el.accessKey = '0';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function showDiscordSubmenu(e) {
|
msg.classList.add(...fadeAnimIn)
|
||||||
var submenu = document.querySelector('li#item-discord').querySelector('nav.submenu');
|
|
||||||
togglePopup(submenu);
|
|
||||||
e.stopPropagation();
|
|
||||||
};
|
|
||||||
|
|
||||||
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(() => {
|
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(() => {
|
setTimeout(() => {
|
||||||
togglePopup(document.querySelector('.msg-wrapper'), 0);
|
msg.classList.remove(...fadeAnimOut)
|
||||||
}, 1500);
|
msg.classList.remove(...fadeAnimIn)
|
||||||
e.stopPropagation();
|
}, 600)
|
||||||
};
|
|
||||||
|
|
||||||
function changePicture(e, num) {
|
}, 1500)
|
||||||
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;
|
|
||||||
}
|
|
||||||
togglePopup(document.querySelector('.context-menu'));
|
|
||||||
};
|
|
||||||
|
|
||||||
function spaceObjSpeed(spd) {
|
function styleValue(/** @type {string} */ prop) {
|
||||||
document.querySelector('.space-obj>img').style.animationDuration = `${spd}s`;
|
return prop.replace('px', '') * 1
|
||||||
};
|
}
|
||||||
|
|
||||||
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';
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -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…
Reference in a new issue