Fix content overflow on mobile, style tweaks #16
7 changed files with 56 additions and 27 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
13
index.html
13
index.html
|
@ -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.
|
||||
</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>
|
||||
<a href="quickstart">Quickstart</a>
|
||||
<a href="explore">Explore</a>
|
||||
<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>
|
||||
|
|
|
@ -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.
|
||||
|
|
57
style.css
57
style.css
|
@ -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: seagreen;
|
||||
}
|
||||
|
||||
picture, img {
|
||||
border-radius: 0.5em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
@ -43,6 +48,7 @@ p {
|
|||
}
|
||||
|
||||
.icon {
|
||||
border-radius: unset;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
float: left;
|
||||
|
@ -53,7 +59,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;
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue