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.webp" type="image/webp">
<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>
</a>
<h1>About</h1>

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp">
<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>
</a>
<h1>Explore</h1>

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp">
<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>
</a>
<h1>Frequently Unasked Questions</h1>

View file

@ -6,6 +6,6 @@ for old in *; do
rsvg-convert "$old" -h 1440 -f svg -o "$new"
done
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
rm icons/*-large.svg

View file

@ -13,18 +13,23 @@
<source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp">
<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>
</a>
<h1>The exozyme project</h1>
<div class="emoji">🏗️ 💻 👾 📖 🗨️ </div>
<div class="emoji">🏗️ 💻 👾 📖 🗨️</div>
<p class="slogan">
Build. Code. Hack. Learn. Discuss.
Build • Code • Hack • Learn • Discuss
</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>
<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>
</body>
</html>

View file

@ -12,7 +12,7 @@
<source srcset="img/logo.avif" type="image/avif">
<source srcset="img/logo.webp" type="image/webp">
<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>
</a>
<h1>Quickstart Guide</h1>
@ -22,8 +22,7 @@
</p>
<h2>Logging in</h2>
<p>
You can log into our server either using remote desktop or <a href="https://git.exozy.me/exoz
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.
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.
</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.

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 {
font-family: DejaVu Sans Mono, Noto Sans Mono, Hack, monospace;
width: min(720px, 100%);
width: min(720px, 90%);
margin-left: auto;
margin-right: auto;
text-align: center;
@ -33,6 +19,25 @@ p {
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 {
font-size: 3em;
}
@ -53,7 +58,26 @@ p {
margin: auto;
text-align: left;
background: lightgreen;
border-radius: 0.5em;
color: black;
padding: 1%;
padding: 1em;
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;
}
}