Moved root page to space/
This commit is contained in:
parent
4c54e1e62f
commit
310fa09baf
23 changed files with 1 additions and 2 deletions
502
space/styles.less
Normal file
502
space/styles.less
Normal file
|
|
@ -0,0 +1,502 @@
|
|||
@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 !important;
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.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: 1.1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#code {
|
||||
|
||||
.card {
|
||||
|
||||
& > div {
|
||||
margin-top: 0;
|
||||
padding: 4px 3px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#selfhosted {
|
||||
|
||||
.card {
|
||||
|
||||
& > div {
|
||||
|
||||
margin-top: 0;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @menuhl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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); }
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue