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

Cards and dark theme

pull/614/head
Wilfred Hughes 2023-12-23 11:38:24 +07:00
parent 434f6f5d86
commit f3e9209db5
1 changed files with 446 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
homepage/index.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -25,18 +25,7 @@
<style>
body {
--bs-body-font-size: 18px;
}
html,
body,
.fw-bold,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #f8f8f2 !important;
--bs-border-radius: 0.5rem;
}
h1 {
@ -82,7 +71,9 @@
}
img {
box-shadow: 10px 10px #1d1b22;
/* box-shadow: 10px 10px #1d1b22; */
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: var(--bs-border-radius);
}
object {
@ -101,6 +92,10 @@
line-height: 45px;
}
<!-- .card h2 { -->
<!-- text-align: center; -->
<!-- } -->
@media only screen and (min-width: 900px) {
.screenshot {
max-width: 800px;
@ -148,8 +143,15 @@
</div>
<div class="container col-xxl-8 px-4">
<div class="container px-4 pb-5">
<h2>
<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.
</p>
<div class="card p-4 mx-5 my-4">
<div class="card-body">
<h2 class="card-heading">
Focus On
<span class="green">What Changed</span>
</h2>
@ -162,8 +164,10 @@
changed here.
</p>
</div>
</div>
<div class="container px-4 pb-5">
<div class="card p-4 mx-5 my-4">
<div class="card-body">
<h2><span class="green">Ignore</span> Formatting Changes</h2>
<img src="reformat.png" class="img-fluid mb-4" alt="screenshot" />
@ -172,13 +176,16 @@
lines? Difftastic can show what has actually changed.
</p>
</div>
</div>
<div class="container px-4 pb-5">
<div class="card p-4 mx-5 my-4">
<div class="card-body">
<h2><span class="green">Understand</span> Wrapping Changes</h2>
<img src="wrap_struct.png" class="img-fluid mb-4" alt="screenshot" />
<p>
Have you added a wrapper? Difftastic can match the delimiters exactly.
Have you added a wrapper? Difftastic can match the delimiters
exactly.
</p>
<img src="change_wrap.png" class="img-fluid mb-4" alt="screenshot" />
@ -187,8 +194,10 @@
the additional wrapper.
</p>
</div>
</div>
<div class="container px-4 pb-5">
<div class="card p-4 mx-5 my-4">
<div class="card-body">
<h2>
<span class="green">Real</span>
Line Numbers
@ -197,13 +206,15 @@
<img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
<p>
Do you know how to read
<code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual line
numbers from your files, both before and after.
<code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual
line numbers from your files, both before and after.
</p>
</div>
</div>
<!-- https://devicon.dev/ provides SVG logos. -->
<div class="container px-4 pb-5">
<div class="card p-4 mx-5 my-4">
<div class="card-body">
<h2>Programming Languages</h2>
<div
@ -269,7 +280,7 @@
<div>
<h3 class="fw-bold mb-0 fs-4">
Common Lisp
Lisp
</h3>
</div>
</div>
@ -540,8 +551,10 @@
in the manual.
</p>
</div>
</div>
<div class="container px-4 pb-5">
<div class="card p-4 mx-5 my-4">
<div class="card-body">
<h2>File Formats</h2>
<div
@ -623,8 +636,10 @@
in the manual.
</p>
</div>
</div>
<div class="container px-4 pb-5">
<div class="card p-4 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" />
<p>
@ -635,8 +650,9 @@
in the manual.
</p>
</div>
</div>
<div class="container px-4 pb-5">
<div class="card p-4 mx-5 my-4">
<h2>Fully <span class="green">Open Source</span></h2>
<p>
Difftastic is
@ -647,7 +663,7 @@
</div>
<div class="container px-4">
<p>
<p class="px-5">
<em
>Made with Emacs and coffee by
<a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em