Improve styling on phones

pull/614/head
Wilfred Hughes 2023-12-28 00:04:30 +07:00
parent a463edc869
commit 7222184024
2 changed files with 31 additions and 27 deletions

@ -24,6 +24,14 @@ h3 {
line-height: 45px;
}
/* Constrain container width even more than container-sm.
https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work */
@media (min-width: 992px) {
.container {
max-width: 960px !important;
}
}
.container h2 {
padding-bottom: 1rem;
}

@ -64,17 +64,15 @@
</div>
</div>
<div class="container col-xxl-8 px-4">
<div class="container px-4 my-5">
<p class="px-5">
Difftastic is a CLI diff tool that compares files based on their
syntax, not line-by-line. Difftastic produces accurate diffs that are
easier for humans to read.
</p>
</div>
<div class="container">
<p class="my-5 px-4">
Difftastic is a CLI diff tool that compares files based on their syntax,
not line-by-line. Difftastic produces accurate diffs that are easier for
humans to read.
</p>
<div class="card-set">
<div class="card px-2 pt-2 mx-5">
<div class="card px-2 pt-2">
<div class="card-body">
<h2>
<span class="green">Understand</span>
@ -94,7 +92,7 @@
</div>
</div>
<div class="card px-2 pt-2 mx-5">
<div class="card px-2 pt-2">
<div class="card-body">
<h2><span class="green">Ignore</span> Formatting Changes</h2>
@ -108,7 +106,7 @@
</div>
</div>
<div class="card px-2 pt-2 mx-5">
<div class="card px-2 pt-2">
<div class="card-body">
<h2><span class="green">Visualise</span> Wrapping Changes</h2>
@ -134,7 +132,7 @@
</div>
</div>
<div class="card px-2 pt-2 mx-5">
<div class="card px-2 pt-2">
<div class="card-body">
<h2>
<span class="green">Real</span>
@ -157,7 +155,7 @@
</div>
</div>
<div class="card px-2 py-2 mx-5 mt-5">
<div class="card px-2 py-2 mt-5">
<div class="card-body">
<h2>60 Second <span class="green">Demo</span></h2>
@ -167,12 +165,12 @@
<!-- https://devicon.dev/ provides SVG logos. -->
<div class="card-set">
<div class="card px-2 pt-2 mx-5 mt-5">
<div class="card px-2 pt-2 mt-5">
<div class="card-body">
<h2>Programming Languages</h2>
<div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
>
<div class="col d-flex align-items-start">
<object
@ -504,12 +502,12 @@
</div>
</div>
<div class="card px-2 pt-2 mx-5">
<div class="card px-2 pt-2">
<div class="card-body">
<h2>File Formats</h2>
<div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
>
<div class="col d-flex align-items-start">
<!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
@ -590,7 +588,7 @@
</div>
</div>
<div class="card px-2 pt-2 mx-5 mt-5">
<div class="card px-2 pt-2 mt-5">
<div class="card-body">
<h2>Works With <span class="green">Git</span></h2>
<div class="img-wrapper mb-4">
@ -606,7 +604,7 @@
</div>
</div>
<div class="card px-2 pt-2 mx-5 mt-5">
<div class="card px-2 pt-2 mt-5">
<div class="card-body">
<h2>Fully <span class="green">Open Source</span></h2>
<p>
@ -618,14 +616,12 @@
</div>
</div>
<div class="container px-4 mt-5">
<p class="px-5">
<em
>Made with Emacs and coffee by
<a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em
>
</p>
</div>
<p class="px-4 mt-5">
<em
>Made with Emacs and coffee by
<a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em
>
</p>
</div>
<link