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

108
Client/index.html
View file

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