Compare commits
No commits in common. "718fe4dfaaaf3ee64cd9bad5baba1460bf3c2a84" and "fdc885c8c1c6232a5df683a7bff2744b590579e8" have entirely different histories.
718fe4dfaa
...
fdc885c8c1
9 changed files with 0 additions and 145 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +0,0 @@
|
||||||
*.pdf
|
|
||||||
13
README.md
13
README.md
|
|
@ -1,13 +0,0 @@
|
||||||
## HTML5 based fliers
|
|
||||||
|
|
||||||
### Generating existing fliers
|
|
||||||
|
|
||||||
Make sure chromium is installed, in my case (on debian 13) I ran:
|
|
||||||
```
|
|
||||||
sudo apt intall chromium
|
|
||||||
```
|
|
||||||
|
|
||||||
Once you've verified the installation completed successfully, run a command like the one below to generate a pdf from the html files:
|
|
||||||
```
|
|
||||||
chromium --headless --disable-gpu --print-to-pdf="output.pdf" file:////home/<user>/git/html-fliers/<flier-folder>/index.html
|
|
||||||
```
|
|
||||||
0
sandbox-repair-day/.git-keep
Normal file
0
sandbox-repair-day/.git-keep
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
|
|
@ -1,67 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="styles.css" />
|
|
||||||
</head>
|
|
||||||
<style media="print">
|
|
||||||
@page {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body style="position: relative">
|
|
||||||
<div class="date">May 30th<br />12 - 5 pm</div>
|
|
||||||
<main>
|
|
||||||
Come to repair day @ Sandbox!<br /><br />
|
|
||||||
Repair days are community events where we help each other fix broken
|
|
||||||
items, anything from electronics to clothing.<br /><br />
|
|
||||||
Bring something to repair, tools, a friend, or just your own skills. All
|
|
||||||
are welcome.
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
483 Moreland Ave NE<br />
|
|
||||||
33°46'03.2"N, 84°20'55.7"W<br />
|
|
||||||
We're on the 3rd floor
|
|
||||||
</footer>
|
|
||||||
<img
|
|
||||||
src="image.png"
|
|
||||||
style="
|
|
||||||
filter: brightness(0) saturate(100%) invert(68%) sepia(36%)
|
|
||||||
saturate(6650%) hue-rotate(343deg) brightness(93%) contrast(85%);
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 2rem;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="image1.png"
|
|
||||||
style="
|
|
||||||
filter: brightness(0) saturate(100%) invert(90%) sepia(21%)
|
|
||||||
saturate(380%) hue-rotate(130deg) brightness(90%) contrast(91%);
|
|
||||||
transform: rotate(15deg);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 2rem;
|
|
||||||
width: 500px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="image2.png"
|
|
||||||
style="
|
|
||||||
filter: brightness(0) saturate(100%) invert(32%) sepia(25%)
|
|
||||||
saturate(1251%) hue-rotate(341deg) brightness(94%) contrast(88%);
|
|
||||||
transform: rotate(15deg);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 2rem;
|
|
||||||
width: 500px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
html {
|
|
||||||
background-color: transparent;
|
|
||||||
font-family: monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 95vh;
|
|
||||||
max-width: 100%;
|
|
||||||
background-color: #F1FAEE;
|
|
||||||
color: #2E1F27;
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: auto;
|
|
||||||
justify-self: end;
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
main {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
width: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
text-align: end;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Repair Day</title>
|
|
||||||
</head>
|
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: auto;
|
|
||||||
width: 800px;
|
|
||||||
aspect-ratio: 8.5/11;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Add table
Reference in a new issue