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

more mobile friendly

Browse Source
main
Gabriel 2 years ago
parent 759574017d
commit 98d89ca81c
1 changed files with 100 additions and 98 deletions
Show Stats Download Patch File Download Diff File

198
Client/index.html
Unescape Escape 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; #interverse-details{
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; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; max-width: 100%;
max-width: 100%; justify-content: center;
}
} #interverse-resources>*{
.interverse-connection-group{ margin:1rem;
display:flex; }
flex-direction: row; #interverse-resources img{
flex-wrap: wrap;
} max-height:5rem;
#interverse-connections{ max-width: 5rem;
display: flex; }
flex-direction: row; #interverse-groups{
align-items: center; display: flex;
justify-content: center; flex-direction: column;
flex-wrap: wrap; align-items: center;
}
#interverse-connections>*{ }
margin:5px; .interverse-connection-group{
} display:flex;
@keyframes glow{ flex-direction: row;
from {box-shadow: 0rem 0rem 0.25rem transparent;} flex-wrap: wrap;
to {box-shadow: 0rem 0rem 1.5rem rgb(7, 129, 229);} justify-content: center;
} }
.interverse-connection-preview{ #interverse-connections{
display: flex;
animation: glow 1s alternate; flex-direction: row;
animation-iteration-count: infinite; align-items: center;
} justify-content: center;
.interverse-connection-preview,.interverse-connection{ flex-wrap: wrap;
display:flex; }
flex-direction: column; #interverse-connections>*{
align-items: center; margin:5px;
margin:1rem; }
} @keyframes glow{
.interverse-connection-preview>*{ from {box-shadow: 0rem 0rem 0.25rem transparent;}
margin:1rem; to {box-shadow: 0rem 0rem 1.5rem rgb(7, 129, 229);}
} }
a{ .interverse-connection-preview{
font-weight: bolder;
} animation: glow 2s alternate;
.interverse-connection-preview img{ animation-iteration-count: infinite;
max-height:15rem; border-radius:1.5rem;
max-width: 15rem; }
} .interverse-connection-preview,.interverse-connection{
</style> 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')">

Write Preview
Loading…
Cancel
Save