Rewritten in less, new floating menu, separated js

This commit is contained in:
DarkCat09 2022-10-11 13:28:46 +04:00
parent e0629a750a
commit e9f60236a4
16 changed files with 1663 additions and 535 deletions

View file

@ -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

File diff suppressed because one or more lines are too long

Binary file not shown.

BIN
img/mars.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

1040
index.html

File diff suppressed because it is too large Load diff

View file

@ -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
View 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
View 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
View 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
View 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
View 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)
}

View file

@ -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
}

View file

@ -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
View 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
View 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