Skip to content

Various stylesheet improvements #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mnpn wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Various stylesheet improvements #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2422649
Use flex instead of hardcoding header sizing
Mnpn Jan 9, 2025
07208b0
Various a11y fixes
Mnpn Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions _layouts/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
{% endif %}
</nav>
</header>
<div class="content">
<main>
{{ content }}
</div>
</main>
</body>
</html>
32 changes: 25 additions & 7 deletions blog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,19 @@ body {
margin: 0;
}

.content {
main {
max-width: 50em;
padding: 0 20px 0 20px;
margin: 0 auto;
}

a {
text-decoration: none;
color: #85beff;
outline: 0;
}

a:hover, a:focus {
text-decoration: underline;
text-decoration: none;
}

header {
Expand All @@ -42,7 +41,14 @@ nav a {
font-size: 20px;
}

header a { color: white; }
header a {
color: white;
text-decoration: none;
}

header a:hover, header a:focus {
text-decoration: underline;
}

.title {
display: flex;
Expand Down Expand Up @@ -105,12 +111,12 @@ aside span { font-weight: bold }

.aside-update { border-left: 4px solid green }
.aside-warning { border-left: 4px solid orange }
.aside-disclaimer { border-left: 4px solid #eb152e }
.aside-disclaimer { border-left: 4px solid #ff354c }
.aside-fun-fact { border-left: 4px solid #34a8eb }

.aside-update span { color: #32a852 }
.aside-warning span { color: orange }
.aside-disclaimer span { color: #eb152e }
.aside-disclaimer span { color: #ff354c }
.aside-fun-fact span { color: #34a8eb }

hr {
Expand All @@ -132,6 +138,18 @@ hr {
}

aside {
background-color: #e5e5e5;
background-color: #fff;
}

.desc {
color: #505050;
}

.aside-update { border-left: 4px solid green }
.aside-disclaimer { border-left: 4px solid #de2e42 }
.aside-fun-fact { border-left: 4px solid #267cad }

.aside-update span { color: green }
.aside-disclaimer span { color: #de2e42 }
.aside-fun-fact span { color: #267cad }
}
20 changes: 10 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
<img src="/assets/icon.png" alt="{{ site.title }} icon" class="icon hhidden" />
<div class="title">
<h1>{{ site.title }}</h1>
<h2>The Linux shell for iOS.</h2>
<p class="slogan">The Linux shell for iOS.</p>
<div class="actions">
<a class="get" href="{{ site.links.appstore }}">
<img src="/assets/appstore.svg" alt="Apple App Store icon" />
<img src="/assets/appstore.svg" alt="" />
<p>Get on the App Store</p>
</a>
</div>
<div class="actions">
<a class="get" href="/altstore">
<img src="/assets/altstore.png" alt="AltStore icon" />
<img src="/assets/altstore.png" alt="" />
<p>Get {{ site.title }} on AltStore</p>
</a>
</div>
Expand All @@ -39,13 +39,13 @@ <h2>The Linux shell for iOS.</h2>
</section>

<section id="info" class="alt-section">
<h1><strong>Wait, what's {{ site.title }}?</strong></h1>
<h2><strong>Wait, what's {{ site.title }}?</strong></h2>
<p>
{{ site.title }} is a project to get a Linux shell environment running locally on your iOS device, using a usermode x86 emulator.
</p>
<div class="tidbits">
<div class="tidbit large">
<h2>iPadOS? You bet.</h2>
<h3>iPadOS? You bet.</h3>
<p>{{ site.title }} also runs on iPad, bringing a terminal to larger displays as well.</p>
<div class="growth"></div>
<picture>
Expand All @@ -58,7 +58,7 @@ <h2>iPadOS? You bet.</h2>
<div class="growth"></div>
</div>
<div class="tidbit">
<h2>BusyBox</h2>
<h3>BusyBox</h3>
<p>You can edit files with sed and cat, move them around, and more!</p>
<picture>
<source type="image/webp" media="(prefers-color-scheme: dark)" srcset="/assets/iphone-busybox-dark.webp">
Expand All @@ -69,7 +69,7 @@ <h2>BusyBox</h2>
</picture>
</div>
<div class="tidbit">
<h2>Keyboard CTRL</h2>
<h3>Keyboard CTRL</h3>
<p>{{ site.title }}'s keyboard addition makes navigation easier.</p>
<picture>
<source type="image/webp" srcset="/assets/iphone-keyboard.webp">
Expand All @@ -81,13 +81,13 @@ <h2>Keyboard CTRL</h2>
</section>

<section id="get">
<h1><strong>Sounds cool, can I get that?</strong></h1>
<h2><strong>Sounds cool, can I get that?</strong></h2>
<p>Of course, let's get started!</p>
<div class="getcontainer">
<div>
<div class="actions">
<a class="get" href="{{ site.links.appstore }}">
<img src="/assets/appstore.svg" alt="Apple App Store icon" />
<img src="/assets/appstore.svg" alt="" />
<p>Get on the App Store</p>
</a>
</div>
Expand All @@ -99,7 +99,7 @@ <h1><strong>Sounds cool, can I get that?</strong></h1>
<div>
<div class="actions">
<a class="get" href="/altstore">
<img src="/assets/altstore.png" alt="AltStore icon" />
<img src="/assets/altstore.png" alt="" />
<p>Get {{ site.title }} on AltStore</p>
</a>
</div>
Expand Down
60 changes: 28 additions & 32 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@ body {
font-size: 13pt;
}

h1, h2 { font-weight: 400; }
h1, h2, h3 { font-weight: 400; }

a {
color: var(--ish-blue);
text-decoration: none;
outline: 0;
}

a:hover, a:focus { text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

hr {
border: 0;
Expand All @@ -34,25 +33,27 @@ hr {
}

header {
height: 60px;
width: 100%;
line-height: 32px;
width: 100vw;
}

nav {
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}

nav { display: inherit; }

nav a {
flex-grow: 1;
background-color: rgba(255, 255, 255, 0.1);
padding: 0 8px 0 8px;
width: 140px;
margin: 0 12px 0 12px;
max-width: 140px;
line-height: 32px;
border-radius: 8px;
transition: background .05s ease-in-out, border-color .2s;
border: 2px solid rgba(255, 255, 255, 0.1);
color: white;
text-decoration: none;
}

nav a:hover, nav a:focus {
Expand Down Expand Up @@ -81,7 +82,7 @@ footer p {
justify-content: space-between;
align-items: center;
background: linear-gradient(180deg, var(--ish-primary), var(--ish-secondary));
height: 100vh;
min-height: 100vh;
}

/* Contains entire front page */
Expand Down Expand Up @@ -121,6 +122,8 @@ footer p {
transition: border-color .15s ease-in-out;
padding: 0.4em;
margin-bottom: 6px;
text-decoration: none;
color: #fff;
}

.get img {
Expand All @@ -134,7 +137,6 @@ footer p {
flex-grow: 1;
font-size: 15pt;
margin: 0;
color: #fff;
}

.get:hover, .get:focus {
Expand All @@ -153,7 +155,9 @@ footer p {
line-height: 48px;
}

.title h1, .title h2 { margin: 10px 0 10px 0; }
.title .slogan { font-size: 19pt }

.title h1, .title .slogan { margin: 10px 0 10px 0; }

.iphone {
height: auto;
Expand All @@ -167,7 +171,7 @@ footer p {
padding: 1px;
}

section > h1 {
section > h2 {
font-size: 22pt;
margin: 20px 0 0 0;
}
Expand Down Expand Up @@ -205,9 +209,10 @@ section > p {
}

.tidbit p { margin: 4px 0 12px 0; }
.tidbit h2 {
margin: 4px 0 0 0;
.tidbit h3 {
margin: 4px 0;
color: var(--ish-purple);
font-size: 19pt;
}

.tidbit img {
Expand Down Expand Up @@ -296,12 +301,6 @@ section > p {

/* Mobile optimisations */
@media only screen and (max-width: 750px) {
header { justify-content: space-around; }
nav a {
padding: 0 5px 0 5px;
width: 80px;
margin: 6px;
}
.front-container {
flex-direction: column;
margin: 0;
Expand Down Expand Up @@ -337,15 +336,6 @@ section > p {
.iphone { display: none; }
}

@media only screen and (max-width: 400px) {
nav a {
padding: 2px 8px 2px 8px;
width: auto;
margin: 4px;
font-size: 13.5pt;
}
}

/* AltStore page */
#altstore-container {
display: flex;
Expand Down Expand Up @@ -391,6 +381,12 @@ section > p {
}
body, .alt-section, #altstore-container { color: #000; }
#home { color: #fff; }
.getcontainer .get {
background-color: var(--background-alt);
color: black;
}
.getcontainer .get { border: 2px solid var(--accent); }
.getcontainer .get:hover, .getcontainer .get:focus { border: 2px solid var(--ish-blue); }
.tidbit {
border: 2px solid var(--accent);
background-color: var(--background);
Expand Down