pitchum/xmpp-invitation-page
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Make buttons responsive using FlexBox CSS

Browse Source 
cf. this great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This commit is contained in:
pitchum 2021-07-11 12:23:16 +02:00 committed by root
parent 018f543787
commit f3b564322e
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html.tpl
View File

@ -32,6 +32,11 @@ a:hover { color: #aaa; text-decoration: none; }
background-color: #fbae6e; background-color: #fbae6e;
color: #fff; color: #fff;
} }
#downloads {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul { ul {
padding: 0; padding: 0;
} }
@ -40,11 +45,18 @@ li {
margin: 0.2rem; margin: 0.2rem;
} }
.appbutton { .appbutton {
background-color: #222; background-color: #444;
border-radius: 0.2rem; border-radius: 0.2rem;
width: 220px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
} }
img.app, img.store { img.app, img.store {
max-height: 40px; max-height: 40px;
}
#downloads a div {
display: flex;
justify-content: space-between;
align-items: center;
} }
</style> </style>
</head> </head>
@ -56,7 +68,7 @@ img.app, img.store {
<u>Pour me joindre&nbsp;:</u><br/> <u>Pour me joindre&nbsp;:</u><br/>
<div>1) Installe une appli Jabber/XMPP et crée-toi un compte</div> <div>1) Installe une appli Jabber/XMPP et crée-toi un compte</div>
<div> <div>
<ul> <ul id="downloads">
<li> <li>
<a href="https://play.google.com/store/apps/details?id=im.blabber.messenger" title="Blabber.im sur Google Play"> <a href="https://play.google.com/store/apps/details?id=im.blabber.messenger" title="Blabber.im sur Google Play">
<div class="appbutton"> <div class="appbutton">
@ -85,8 +97,9 @@ img.app, img.store {
</li> </li>
--> -->
</ul> </ul>
</div>
<div> <div>
<a href="https://chapril.org/XMPP">... autres plateformes</a> <a href="https://chapril.org/XMPP">... autres applis</a>
</div> </div>
<div>2) Puis ajoute <a href="xmpp:{{username}}@chapril.org"><button class="button"><strong>{{username}}@chapril.org</strong></button></a> à ta liste de contacts</div> <div>2) Puis ajoute <a href="xmpp:{{username}}@chapril.org"><button class="button"><strong>{{username}}@chapril.org</strong></button></a> à ta liste de contacts</div>
</article> </article>