sascha
/
difftastic
mirror of https://github.com/Wilfred/difftastic/
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
homepage/home_static/style.css
Unescape Escape View File

@ -24,6 +24,14 @@ h3 {
line-height: 45px; 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 { .container h2 {
padding-bottom: 1rem; padding-bottom: 1rem;
} }

50
homepage/index.html
Unescape Escape View File

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