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

Simplify styling, add demo

pull/614/head
Wilfred Hughes 2023-12-27 11:54:50 +07:00
parent 2ef888a6d2
commit ec8d35cc38
1 changed files with 24 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
homepage/index.html
Unescape Escape View File

@ -19,10 +19,6 @@
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
rel="stylesheet"
/>
<style> <style>
body { body {
@ -44,17 +40,9 @@
background-color: #2e3436; background-color: #2e3436;
} }
object { /* Colours from Tango theme */
background-color: #f8f8f2; .red,
border-radius: 25% 25%; code {
padding: 5px;
}
/* Colours from https://spec.draculatheme.com/#sec-Color-Palette */
.white {
color: #f8f8f2;
}
.red {
color: #ef2929; color: #ef2929;
} }
.green, .green,
@ -73,38 +61,17 @@
} }
object { object {
background-color: #f8f8f2;
border-radius: 25% 25%;
padding: 5px;
box-shadow: 5px 5px #a09fa2; box-shadow: 5px 5px #a09fa2;
} }
img.screenshot {
box-shadow: none;
}
code {
color: #ff5555;
}
h3 {
line-height: 45px;
}
@media only screen and (min-width: 900px) {
.screenshot {
max-width: 800px;
}
}
</style> </style>
</head> </head>
<!-- simple project description website, in the style of
https://popper.js.org/ or
https://cdnjs.com/libraries/font-awesome TODO: Prefer a dark
theme. It feels more like code, and less like vanilla
boostrap. -->
<body> <body>
<div class="px-4 pt-5 text-center"> <div class="px-4 pt-5 text-center">
<h1 class="display-2 text-body-emphasis"> <h1 class="display-2">
<span class="red">diff</span><span class="green">tastic</span> <span class="red">diff</span><span class="green">tastic</span>
</h1> </h1>
@ -112,7 +79,7 @@
<h2 class="fs-4 lead"> <h2 class="fs-4 lead">
a structural diff tool that understands syntax a structural diff tool that understands syntax
</h2> </h2>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-3">
<a <a
class="btn btn-lg btn-light" class="btn btn-lg btn-light"
href="https://github.com/Wilfred/difftastic" href="https://github.com/Wilfred/difftastic"
@ -136,28 +103,28 @@
</div> </div>
<div class="container col-xxl-8 px-4"> <div class="container col-xxl-8 px-4">
<div class="container px-4"> <div class="container px-4 my-5">
<p class="px-5"> <p class="px-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Difftastic is a CLI diff tool that compares files based on their
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad syntax, not line-by-line. It supports over 40 programming languages.
minim veniam, quis nostrud exercitation.
</p> </p>
</div> </div>
<div class="card px-2 pt-2 mx-5"> <div class="card px-2 pt-2 mx-5">
<div class="card-body"> <div class="card-body">
<h2 class="card-heading"> <h2 class="card-heading">
Focus On <span class="green">Understand</span>
<span class="green">What Changed</span> What Actually Changed
</h2> </h2>
<div class="img-wrapper mb-4"> <div class="img-wrapper mb-4">
<img src="add_wrap.png" alt="screenshot" /> <img src="add_wrap.png" alt="screenshot" />
</div> </div>
<p> <p>
Difftastic parses your code with tree-sitter. Unlike a line-oriented Difftastic parses your code with
text diff, difftastic understands that the inner expression hasn't <a href="https://tree-sitter.github.io/tree-sitter/">tree-sitter</a
changed here. >. Unlike a line-oriented text diff, difftastic understands that the
inner expression hasn't changed here.
</p> </p>
</div> </div>
</div> </div>
@ -181,7 +148,7 @@
<div class="card px-2 pt-2 mx-5"> <div class="card px-2 pt-2 mx-5">
<div class="card-body"> <div class="card-body">
<h2 class="card-heading"> <h2 class="card-heading">
<span class="green">Understand</span> Wrapping Changes <span class="green">Visualise</span> Wrapping Changes
</h2> </h2>
<div class="img-wrapper mb-4"> <div class="img-wrapper mb-4">
@ -225,6 +192,12 @@
<h2 class="card-heading"> <h2 class="card-heading">
60 Second <span class="green">Demo</span> 60 Second <span class="green">Demo</span>
</h2> </h2>
<script
async
id="asciicast-480875"
src="https://asciinema.org/a/480875.js"
></script>
</div> </div>
</div> </div>