486 lines
6.9 KiB
Text
486 lines
6.9 KiB
Text
@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); }
|
|
}
|