Fix content overflow on mobile, style tweaks

This commit is contained in:
David Lapshin 2023-09-14 03:50:49 +03:00
parent 42740c305d
commit 9b1d5ec8fc
Signed by untrusted user: daudix
GPG key ID: 93ECF15D3053D81C
7 changed files with 56 additions and 28 deletions

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif"> <source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp"> <source srcset="img/logo.webp" type="image/webp">
<source srcset="img/logo.png" type="image/png"> <source srcset="img/logo.png" type="image/png">
<img src="img/logo.png" alt="exozyme" height="360" width="360"> <img src="img/logo.png" alt="exozyme" height="360" width="360" class="logo">
</picture> </picture>
</a> </a>
<h1>About</h1> <h1>About</h1>

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif"> <source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp"> <source srcset="img/logo.webp" type="image/webp">
<source srcset="img/logo.png" type="image/png"> <source srcset="img/logo.png" type="image/png">
<img src="img/logo.png" alt="exozyme" height="360" width="360"> <img src="img/logo.png" alt="exozyme" height="360" width="360" class="logo">
</picture> </picture>
</a> </a>
<h1>Explore</h1> <h1>Explore</h1>

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif"> <source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp"> <source srcset="img/logo.webp" type="image/webp">
<source srcset="img/logo.png" type="image/png"> <source srcset="img/logo.png" type="image/png">
<img src="img/logo.png" alt="exozyme" height="360" width="360"> <img src="img/logo.png" alt="exozyme" height="360" width="360" class="logo">
</picture> </picture>
</a> </a>
<h1>Frequently Unasked Questions</h1> <h1>Frequently Unasked Questions</h1>

View file

@ -6,6 +6,6 @@ for old in *; do
rsvg-convert "$old" -h 1440 -f svg -o "$new" rsvg-convert "$old" -h 1440 -f svg -o "$new"
done done
cd .. cd ..
montage -background white icons/*-large.svg -geometry 720x720 -tile 5x5 -border 30 -bordercolor white montage.png montage -background white icons/*-large.svg -geometry 720x720 -tile 5x5 -border 30 -bordercolor transparent montage.png
convert montage.png -resize 50% montage.webp convert montage.png -resize 50% montage.webp
rm icons/*-large.svg rm icons/*-large.svg

View file

@ -13,18 +13,23 @@
<source srcset="img/logo.avif" type="image/avif"> <source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp"> <source srcset="img/logo.webp" type="image/webp">
<source srcset="img/logo.png" type="image/png"> <source srcset="img/logo.png" type="image/png">
<img src="img/logo.png" alt="exozyme" height="360" width="360"> <img src="img/logo.png" alt="exozyme" height="360" width="360" class="logo">
</picture> </picture>
</a> </a>
<h1>The exozyme project</h1> <h1>The exozyme project</h1>
<div class="emoji">🏗️ 💻 👾 📖 🗨️</div> <div class="emoji">🏗️ 💻 👾 📖 🗨️</div>
<p class="slogan"> <p class="slogan">
Build. Code. Hack. Learn. Discuss. Build • Code • Hack • Learn • Discuss
</p> </p>
<pre><a href="about">About</a> <a href="quickstart">Quickstart</a> <a href="explore">Explore</a> <a href="fuqs">FUQs</a></pre> <div>
<a href="about">About</a>&nbsp;&nbsp;&nbsp;
<a href="quickstart">Quickstart</a>&nbsp;&nbsp;&nbsp;
<a href="explore">Explore</a>&nbsp;&nbsp;&nbsp;
<a href="fuqs">FUQs</a>
</div>
<br> <br>
<div class="info"> <div class="info">
<b><a href="https://sfconservancy.org/blog/2022/jun/30/give-up-github-launch/">#GiveUpGitHub!</a></b> Join us for libre code hosting, or even better, contribute to <a href="https://nlnet.nl/project/Gitea/">forge federation development</a>. <em><a href="https://sfconservancy.org/blog/2022/jun/30/give-up-github-launch/">#GiveUpGitHub!</a></em> Join us for libre code hosting, or even better, contribute to <a href="https://nlnet.nl/project/Gitea/">forge federation development</a>.
</div> </div>
</body> </body>
</html> </html>

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif"> <source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp"> <source srcset="img/logo.webp" type="image/webp">
<source srcset="img/logo.png" type="image/png"> <source srcset="img/logo.png" type="image/png">
<img src="img/logo.png" alt="exozyme" height="360" width="360"> <img src="img/logo.png" alt="exozyme" height="360" width="360" class="logo">
</picture> </picture>
</a> </a>
<h1>Quickstart Guide</h1> <h1>Quickstart Guide</h1>
@ -22,8 +22,7 @@
</p> </p>
<h2>Logging in</h2> <h2>Logging in</h2>
<p> <p>
You can log into our server either using remote desktop or <a href="https://git.exozy.me/exoz You can log into our server either using remote desktop or <a href="https://git.exozy.me/exozyme/exozyme/wiki/SSH">SSH</a> if you emailed us your public key. For remote desktop, go to the <a href="https://desk.exozy.me">exodesk</a> web client (or any other <a href="https://git.exozy.me/exozyme/exozyme/wiki/Remote-desktop-clients">RDP client</a>). You should see a login screen, and type in your exozyme username and password. You'll be dropped into a desktop, which might take a few seconds to load.
yme/exozyme/wiki/SSH">SSH</a> if you emailed us your public key. For remote desktop, go to the <a href="https://desk.exozy.me">exodesk</a> web client (or any other <a href="https://git.exozy.me/exozyme/exozyme/wiki/Remote-desktop-clients">RDP client</a>). You should see a login screen, and type in your exozyme username and password. You'll be dropped into a desktop, which might take a few seconds to load.
</p> </p>
<p> <p>
In the bottom left corner you'll see the all-powerful application menu, which you can use to launch apps. <b>You should change your password now</b> using the <i>passwd</i> command. In your remote desktop, open the application menu and start the Konsole app, then type <i>passwd</i> to set a new password. You can install more apps using the Discover app store. Your remote desktop session will automatically be logged out after an hour of inactivity. In the bottom left corner you'll see the all-powerful application menu, which you can use to launch apps. <b>You should change your password now</b> using the <i>passwd</i> command. In your remote desktop, open the application menu and start the Konsole app, then type <i>passwd</i> to set a new password. You can install more apps using the Discover app store. Your remote desktop session will automatically be logged out after an hour of inactivity.

View file

@ -1,20 +1,6 @@
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #111111;
color: #cccccc;
}
a:link {
color: #3eab86;
}
a:visited {
color: #4bd1a3;
}
}
body { body {
font-family: DejaVu Sans Mono, Noto Sans Mono, Hack, monospace; font-family: DejaVu Sans Mono, Noto Sans Mono, Hack, monospace;
width: min(720px, 100%); width: min(720px, 90%);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
@ -33,6 +19,25 @@ p {
line-height: 150%; line-height: 150%;
} }
a:link {
color: green;
font-weight: bold;
}
a:visited {
color: darkgreen;
}
picture, img {
border-radius: 0.5em;
max-width: 100%;
}
.logo {
max-width: 360px;
width: 100%;
height: auto;
}
.emoji { .emoji {
font-size: 3em; font-size: 3em;
} }
@ -53,7 +58,26 @@ p {
margin: auto; margin: auto;
text-align: left; text-align: left;
background: lightgreen; background: lightgreen;
border-radius: 0.5em;
color: black; color: black;
padding: 1%; padding: 1em;
width: 50%; width: 50%;
} }
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #111111;
color: #cccccc;
}
a:link {
color: mediumaquamarine;
}
a:visited {
color: mediumseagreen;
}
.info {
background: darkslategray;
color: white;
}
}