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

Better image styling

pull/614/head
Wilfred Hughes 2023-12-23 12:39:37 +07:00
parent f3e9209db5
commit 7e53a82e9f
1 changed files with 100 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
homepage/index.html
Unescape Escape View File

@ -34,12 +34,12 @@
}
.container h2 {
padding-bottom: 1.5rem;
padding-bottom: 1rem;
}
html,
body {
background-color: #282a36;
background-color: #2e3436;
}
object {
@ -53,27 +53,21 @@
color: #f8f8f2;
}
.red {
color: #ff5555;
}
.green {
color: #50fa7b;
color: #ef2929;
}
.cyan {
color: #8be9fd;
}
.green,
a {
color: #50fa7b;
color: #8ae234;
}
.btn {
box-shadow: 5px 5px #1d1b22;
}
img {
/* box-shadow: 10px 10px #1d1b22; */
.img-wrapper {
width: atuo;
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: var(--bs-border-radius);
background-color: #2e3436;
}
.img-wrapper img {
max-width: 100%;
}
object {
@ -92,10 +86,6 @@
line-height: 45px;
}
<!-- .card h2 { -->
<!-- text-align: center; -->
<!-- } -->
@media only screen and (min-width: 900px) {
.screenshot {
max-width: 800px;
@ -121,43 +111,46 @@
</h2>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<a
class="btn btn-lg btn-light"
href="https://github.com/Wilfred/difftastic"
class="fs-4 px-2 white"
role="button"
>GitHub</a
>
GitHub
</a>
<a
href="https://difftastic.wilfred.me.uk/introduction"
class="fs-4 px-2 red"
class="btn btn-lg btn-light"
href="https://difftastic.wilfred.me.uk/introduction.html"
role="button"
>Manual</a
>
Manual
</a>
<a
class="btn btn-lg btn-light"
href="https://difftastic.wilfred.me.uk/installation.html"
class="fs-4 px-2 green"
role="button"
>Install</a
>
Install
</a>
</div>
</div>
</div>
<div class="container col-xxl-8 px-4">
<div class="container px-4">
<p class="px-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation.
</p>
</div>
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2 class="card-heading">
Focus On
<span class="green">What Changed</span>
</h2>
<!-- screenshot from difftastic commit e472acb8050e84c671470421f4fd5c74a9d3b2bd -->
<img src="add_wrap.png" class="img-fluid mb-4" alt="screenshot" />
<div class="img-wrapper mb-4">
<img src="add_wrap.png" alt="screenshot" />
</div>
<p>
Difftastic parses your code with tree-sitter. Unlike a line-oriented
text diff, difftastic understands that the inner expression hasn't
@ -166,11 +159,15 @@
</div>
</div>
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2><span class="green">Ignore</span> Formatting Changes</h2>
<h2 class="card-heading">
<span class="green">Ignore</span> Formatting Changes
</h2>
<img src="reformat.png" class="img-fluid mb-4" alt="screenshot" />
<div class="img-wrapper mb-4">
<img src="reformat.png" alt="screenshot" />
</div>
<p>
Has your code formatter decided to split something over multiple
lines? Difftastic can show what has actually changed.
@ -178,17 +175,23 @@
</div>
</div>
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2><span class="green">Understand</span> Wrapping Changes</h2>
<h2 class="card-heading">
<span class="green">Understand</span> Wrapping Changes
</h2>
<img src="wrap_struct.png" class="img-fluid mb-4" alt="screenshot" />
<div class="img-wrapper mb-4">
<img src="wrap_struct.png" alt="screenshot" />
</div>
<p>
Have you added a wrapper? Difftastic can match the delimiters
exactly.
</p>
<img src="change_wrap.png" class="img-fluid mb-4" alt="screenshot" />
<div class="img-wrapper mb-4">
<img src="change_wrap.png" class="mb-4" alt="screenshot" />
</div>
<p>
Even if you change the inner content, difftastic can still show you
the additional wrapper.
@ -196,14 +199,16 @@
</div>
</div>
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2>
<h2 class="card-heading">
<span class="green">Real</span>
Line Numbers
</h2>
<img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
<div class="img-wrapper mb-4">
<img src="line_numbers.png" class="mb-4" alt="screenshot" />
</div>
<p>
Do you know how to read
<code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual
@ -213,15 +218,14 @@
</div>
<!-- https://devicon.dev/ provides SVG logos. -->
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2>Programming Languages</h2>
<h2 class="card-heading">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"
>
<div class="col d-flex align-items-start">
<div class="foo">
<object
class="me-3"
width="45px"
@ -229,7 +233,6 @@
data="cplusplus.svg"
type="image/svg+xml"
></object>
</div>
<div>
<h3 class="fw-bold mb-0 fs-4">
@ -269,22 +272,6 @@
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="lisp.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Lisp
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
@ -397,6 +384,22 @@
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="lisp.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Lisp
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
@ -553,9 +556,9 @@
</div>
</div>
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2>File Formats</h2>
<h2 class="card-heading">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"
@ -638,10 +641,14 @@
</div>
</div>
<div class="card p-4 mx-5 my-4">
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2>Works With <span class="green">Git</span></h2>
<img src="git_difftool.png" class="img-fluid mb-4" alt="screenshot" />
<h2 class="card-heading">
Works With <span class="green">Git</span>
</h2>
<div class="img-wrapper mb-4">
<img src="git_difftool.png" alt="screenshot" />
</div>
<p>
See the
<a href="https://difftastic.wilfred.me.uk/git.html"
@ -652,8 +659,11 @@
</div>
</div>
<div class="card p-4 mx-5 my-4">
<h2>Fully <span class="green">Open Source</span></h2>
<div class="card px-2 pt-2 mx-5 my-4">
<div class="card-body">
<h2 class="card-heading">
Fully <span class="green">Open Source</span>
</h2>
<p>
Difftastic is
<a href="https://github.com/Wilfred/difftastic/blob/master/LICENSE"
@ -661,6 +671,7 @@
>. Download it, modify it, share it with your friends!
</p>
</div>
</div>
<div class="container px-4">
<p class="px-5">