Add Screenshot, update Readme, add @media css

This commit is contained in:
Octo Andri 2022-04-13 21:31:49 +00:00
parent 9673e48c52
commit 522500d86f
6 changed files with 23 additions and 5 deletions

View File

@ -3,6 +3,7 @@ image: alpine:latest
before_script:
- apk update
- apk add python3 py3-pip
- pip3 install -r Source/requirements.txt
pages:
stage: deploy
@ -10,7 +11,6 @@ pages:
- mkdir public
- cp -R Source/* public/
- cd public
- pip3 install -r requirements.txt
- python3 Generate.py
artifacts:
paths:

View File

@ -9,6 +9,13 @@ It works like this:
Right now, it requires no JavaScript, just some CSS for displaying everything on screen correctly.
(TODO: Make sure the generated page is at least readable on browsers without CSS3 support).
## Live demo
Live demo (which is also my personal board) is hosted in this repo and available on my website!
[octospacc.gitlab.io/WebPinBoard](https://octospacc.gitlab.io/WebPinBoard/)
![Screenshot](Source/Screenshot.png)
## Writing
The Markdown data file has a simple structure:

View File

@ -10,7 +10,7 @@ uwu links..
### My personal links!
- [Home](https://octospacc.gitlab.io) - Home page of this site!
- [Home](../) - Home page of this site!
- [Mastodon](https://mastodon.uno/@octo) - Microblog, 98% italian
- [Pixelfed](https://pixelfed.uno/@octo) - Where I post my pictures

View File

@ -35,7 +35,7 @@ BaseHTML = """
<meta name="description" content="Personal Static HTML Pinboard">
<meta property="og:description" content="Personal Static HTML Pinboard">
<meta property="og:url" content="https://octospacc.gitlab.io/WebPinBoard">
<!-- <meta property="og:image" content="Screenshot.jpg"> -->
<meta property="og:image" content="Screenshot.png">
</head>
<body>
<div id="Background"> <!-- https://pixelfed.uno/i/web/post/419157143827461664 (CC BY-SA 4.0) -->

BIN
Source/Screenshot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -30,7 +30,18 @@ Body {
.window {
Float: Left;
Margin: 8px;
Max-Width: 400px;
}
@Media (Min-Width: 796px) {
.window {
Max-Width: 360px;
}
}
@Media (Min-Width: 956px) {
.window {
Max-Width: 410px;
}
}
.InfoWindow {
@ -91,4 +102,4 @@ Body {
Min-Width: 100%;
Min-Height: 100%;
Z-Index: -8;
}
}