gabriel/interverse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more mobile friendly

Browse source
This commit is contained in:
Gabriel 2022-10-12 04:41:34 -04:00
parent 759574017d
commit 98d89ca81c
1 changed files with 99 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
Client/index.html
View file

@ -1,104 +1,106 @@
<style>
.interverse{
display: flex;
flex-direction: column;
align-items: center;
}
#interverse-details{
font-size:1.5rem;
display: flex;
flex-direction: row;
align-items: center;
max-width: 100%;
}
#interverse-details>*{
margin:1rem;
}
#interverse-details img{
max-width:20vw;
max-height:50vh;
.interverse{
display: flex;
flex-direction: column;
align-items: center;
max-width: 90vw;
}
#interverse-resource-groups{
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
}
#interverse-resource-groups>*{
margin:1rem;
}
#interverse-groups h3{
text-align: center;
font-size:2rem;
}
#interverse-resource-groups img{
max-height:5rem;
max-width: 5rem;
}
#interverse-resources{
display: flex;
flex-direction: row;
max-width: 100%;
}
#interverse-resources>*{
margin:1rem;
}
#interverse-resources img{
#interverse-details{
display: flex;
flex-direction: row;
align-items: center;
}
#interverse-details>*{
margin:1rem;
}
#interverse-details img{
max-width:20vw;
max-height:50vh;
}
#interverse-resource-groups{
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
justify-content: center;
}
#interverse-resource-groups>*{
margin:1rem;
}
#interverse-groups h3{
text-align: center;
font-size:2rem;
}
#interverse-resource-groups img{
max-height:5rem;
max-width: 5rem;
}
#interverse-groups{
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
}
.interverse-connection-group{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
#interverse-connections{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#interverse-connections>*{
margin:5px;
}
@keyframes glow{
from {box-shadow: 0rem 0rem 0.25rem transparent;}
to {box-shadow: 0rem 0rem 1.5rem rgb(7, 129, 229);}
}
.interverse-connection-preview{
animation: glow 1s alternate;
animation-iteration-count: infinite;
}
.interverse-connection-preview,.interverse-connection{
display:flex;
flex-direction: column;
align-items: center;
margin:1rem;
}
.interverse-connection-preview>*{
margin:1rem;
}
a{
font-weight: bolder;
}
.interverse-connection-preview img{
max-height:15rem;
max-width: 15rem;
}
</style>
}
#interverse-resources{
display: flex;
flex-direction: row;
max-width: 100%;
justify-content: center;
}
#interverse-resources>*{
margin:1rem;
}
#interverse-resources img{
max-height:5rem;
max-width: 5rem;
}
#interverse-groups{
display: flex;
flex-direction: column;
align-items: center;
}
.interverse-connection-group{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#interverse-connections{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#interverse-connections>*{
margin:5px;
}
@keyframes glow{
from {box-shadow: 0rem 0rem 0.25rem transparent;}
to {box-shadow: 0rem 0rem 1.5rem rgb(7, 129, 229);}
}
.interverse-connection-preview{
animation: glow 2s alternate;
animation-iteration-count: infinite;
border-radius:1.5rem;
}
.interverse-connection-preview,.interverse-connection{
display:flex;
flex-direction: column;
align-items: center;
margin:1rem;
}
.interverse-connection-preview>*{
margin:1rem;
}
a{
font-weight: bolder;
}
.interverse-connection-preview img{
max-height:15rem;
max-width: 15rem;
}
</style>
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="/helper.js"></script>
<div class="interverse" x-data x-if="Alpine.store('data')">