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

186
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{
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-resource-groups{
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
}
#interverse-resource-groups>*{
margin:1rem;
}
#interverse-groups h3{ #interverse-details{
text-align: center; display: flex;
font-size:2rem; flex-direction: row;
} align-items: center;
#interverse-resource-groups img{ }
#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;
}
max-height:5rem; #interverse-groups h3{
max-width: 5rem; text-align: center;
} font-size:2rem;
#interverse-resources{ }
display: flex; #interverse-resource-groups img{
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; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; max-width: 100%;
max-width: 100%; justify-content: center;
}
#interverse-resources>*{
margin:1rem;
}
#interverse-resources img{
} max-height:5rem;
.interverse-connection-group{ max-width: 5rem;
display:flex; }
flex-direction: row; #interverse-groups{
flex-wrap: wrap; display: flex;
} flex-direction: column;
#interverse-connections{ align-items: center;
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-group{
} display:flex;
.interverse-connection-preview,.interverse-connection{ flex-direction: row;
display:flex; flex-wrap: wrap;
flex-direction: column; justify-content: center;
align-items: center; }
margin:1rem; #interverse-connections{
} display: flex;
.interverse-connection-preview>*{ flex-direction: row;
margin:1rem; align-items: center;
} justify-content: center;
a{ flex-wrap: wrap;
font-weight: bolder; }
} #interverse-connections>*{
.interverse-connection-preview img{ margin:5px;
max-height:15rem; }
max-width: 15rem; @keyframes glow{
} from {box-shadow: 0rem 0rem 0.25rem transparent;}
</style> 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="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')">