glennwso/home
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

styling

Browse source
This commit is contained in:
GlennWSo 2024-04-08 21:53:07 +02:00
parent 59c1094f97
commit aec519c427
2 changed files with 58 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
static/index.html
View file

@ -17,8 +17,8 @@
<body> <body>
<ul class="lasdist"> <ul class="list">
<div class="card derp" _="on click toggle .trunc on me"> <div class="card trunc" _="on click toggle .trunc on me">
<img class="icon" src="nextcloud_icon_14.png"> <img class="icon" src="nextcloud_icon_14.png">
<h3>Nextcloud</h3> <h3>Nextcloud</h3>
<p class="text"> <p class="text">
@ -72,16 +72,58 @@
</div> </div>
</div> </div>
<div class="card"> <div class="card trunc" _="on click toggle .trunc on me">
<img class="icon" src="nextcloud_icon_14.png"> <img class="icon" src="nextcloud_icon_14.png">
<h3>Nextcloud</h3> <h3>Nextcloud</h3>
<p class="text"> <p class="text">
Mollis, ante non euismod ornare, orci diam ornare orci, eu mattis Nextcloud is a suite of client-server software for creating and using file
tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur hosting services. Our nextcloud server is integrated with OnlyOffice and can provide functionality similar to
et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis Dropbox, Office 365 or Google Drive.
maximus quam auctor pellentesque.
</p> </p>
<a class="footer" href="https://cloud.sondell.org">web app</a> <div class="footer" _="on click halt the event's bubbling">
<h4>Get started</h4>
<p>
Download the app for your device and login with the server adress:
<code class="link">
https://cloud.sondell.org/
</code>
<button
style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em"
_="on click
writeText(my previousElementSibling's innerText) into navigator's clipboard
put 'copied!' into me
wait 1s
put 'copy' into me">
copy
</button>
</p>
<span>
<a class="app-link" href="https://nextcloud.com/install/#card-clients-btns">
<img src="./desktop.svg" height="40">
</a>
<a class="app-link" href= "https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
<img src="./googleplay-trim.png" alt="Download from Google Play" height="40"
data-canonical-src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
style="max-width: 100%;">
</a>
<a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
<img
src="https://camo.githubusercontent.com/c4395f930c17c2f878dbd98b55d461375f6feb7a998e0ac6e3be2376b8429b8a/68747470733a2f2f646576656c6f7065722e6170706c652e636f6d2f6173736574732f656c656d656e74732f6261646765732f646f776e6c6f61642d6f6e2d7468652d6170702d73746f72652e737667"
alt="the Nextcloud iOS files app" height="40"
data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
style="max-width: 100%;">
</a>
<a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
<img src="./pwa-badge.png" alt="Demo of the Nextcloud iOS files app" height="40"
data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
style="max-width: 100%;">
</a>
</span>
</div>
</div> </div>
</ul> </ul>
</body> </body>

10
static/style.css
View file

@ -1,3 +1,7 @@
body {
padding-left: 2%;
}
.icon { .icon {
height: 100px; height: 100px;
float: left; float: left;
@ -15,15 +19,17 @@
} }
.list { .list {
display: flex; /* display: flex; */
flex-direction: column; flex-direction: column;
padding: 0px;
} }
.card { .card {
border: 1px solid #1948e3; border: 1px solid #1948e3;
border-radius: 25px; border-radius: 25px;
margin: 0 auto; margin: 0 0 0 0;
padding: 1em; padding: 1em;
max-width: 40em;
&:hover { &:hover {
background-color: lightblue; background-color: lightblue;