octospacc/WebPinBoard
1
0
Fork 0
mirror of https://gitlab.com/octospacc/WebPinBoard synced 2025-06-05 22:09:16 +02:00
Code Issues Projects Releases Wiki Activity

CSS for images and element margins

Browse Source
This commit is contained in:
Octo Andri
2022-04-13 14:54:15 +00:00
parent 7797306918
commit 7cce438ff0
6 changed files with 107 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Source/Data.md
View File

@@ -4,7 +4,7 @@ A collection of some of my saved links and resources,
neatly (I hope) categorized for everyone!
(and example for my [WebPinBoard](https://gitlab.com/octospacc/WebPinBoard) software)
- Data.md file License: [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
- Data.md file License: [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0)
uwu links..
@@ -12,6 +12,24 @@ uwu links..
- [Link 1](example.com)
- [Link 2](example.com)
### Finestra test 2
- [Link 1](google.com)
- [Link 2](example.com)
### Finestra test 2 :Closed
[Link 1](example.com)
![Img 1](https://i.imgur.com/5bdkMlg.gif)
[Link 1](example.com)
[Link 1](example.com)
### Finestra test 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus metus quis elit feugiat, blandit efficitur magna tincidunt. Proin feugiat ex ipsum, sed iaculis magna molestie a. Nam diam enim, pharetra in metus a, ultricies molestie eros. Vivamus vel metus ut dolor bibendum elementum. Curabitur sollicitudin quam vitae enim auctor, non porta leo faucibus. Cras mollis tellus sed ligula rhoncus fringilla. Nunc lacus erat, ultrices id tempor et, volutpat ac nisl. Aliquam erat volutpat. Sed vel ligula massa.
In et odio nisl. In dapibus dictum risus et aliquam. Cras ut libero congue, euismod mauris non, viverra orci. Nullam facilisis accumsan odio, nec lacinia metus luctus a. Pellentesque ac aliquam nunc. Vestibulum eu sagittis quam. Integer vitae semper sapien, vel vulputate magna. Aliquam pretium mauris risus, ut porttitor tellus pellentesque in. Duis nec finibus magna, id mattis ante. Quisque rutrum ultricies ex et congue. Cras sit amet metus eu diam suscipit dapibus non eu felis. Sed non tempor nisi. Duis porta ut sem vel commodo. Sed dui leo, porttitor non lobortis sit amet, porttitor a risus. Nam vestibulum elementum lacus, sit amet tincidunt ex tempus id.
Pellentesque et arcu mi. Integer bibendum feugiat maximus. Integer tristique ex quis mi ultricies hendrerit. Praesent mi ipsum, rhoncus eu est et, varius finibus quam. Ut pellentesque sem ut nisl congue, non posuere purus placerat. Ut gravida ligula non leo fringilla aliquam. Sed id felis id nibh blandit gravida nec nec odio. Nulla facilisi.
Pellentesque vel velit euismod, consequat leo vitae, ullamcorper ex. Aliquam aliquam velit erat, eu venenatis mauris eleifend quis. Aenean id nulla non est cursus aliquet. Proin porta purus quis ipsum tincidunt dignissim. Nam tincidunt, metus sollicitudin tincidunt tincidunt, nibh justo hendrerit turpis, nec porttitor nunc neque nec massa. Aenean eu neque ipsum. Donec in sem vel urna venenatis molestie.
In sodales dui tristique neque suscipit aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer luctus sollicitudin lorem vel blandit. Ut dictum metus vitae mi venenatis pharetra. Nam magna felis, pretium sit amet maximus et, porttitor sed risus. Fusce mi mauris, luctus vel condimentum at, lacinia imperdiet ex. Sed sodales, tellus vel venenatis cursus, nibh enim ultricies sapien, a venenatis lacus sapien eu ligula. Curabitur metus justo, fringilla et aliquet eget, interdum in ante. In hac habitasse platea dictumst. Vestibulum feugiat purus interdum sollicitudin aliquet.
- [Link 2](example.com)

30
Source/Generate.py
View File

@@ -28,15 +28,17 @@ BaseHTML = """
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{TITLE}</title>
<link rel="stylesheet" href="https://unpkg.com/98.css"> <!-- Credits: https://github.com/jdan/98.css -->
<link rel="stylesheet" href="https://unpkg.com/98.css">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="Background"> <!-- https://pixelfed.uno/i/web/post/419157143827461664 (CC BY-SA 4.0) -->
<img src="https://i.imgur.com/GwCgSFC.png"> <!-- https://i.imgur.com/5bdkMlg.gif -->
</div>
{INFO}
{BOARDS}
<div class="BoardsContainer">
{INFO}
{BOARDS}
</div>
</body>
</html>
"""
@@ -71,14 +73,6 @@ BoardHTML = """
from markdown import Markdown
"""
MainHeading = ''
def SetMainHeading(HTML):
global MainHeading
MainHeading = 'h' + HTML.split('<h')[1].split('>')[0]
"""
def SplitPop(String, Key):
List = String.split(Key)
for i,s in enumerate(List):
@@ -99,11 +93,9 @@ def GetDataHTML():
exit(1)
def GetBoards(Data):
print(Data)
Boards = SplitPop(Data, '<h') #SplitPop(Data, '<{}>'.format(GetHeading(Data)))
print(Boards)
Boards = SplitPop(Data, '<h')
for i,b in enumerate(Boards):
Boards[i] = '<h' +b #'<{}>'.format(GetHeading(Data)) + b
Boards[i] = '<h' +b
return Boards
def GetBoardParams(Title):
@@ -116,7 +108,7 @@ def GetBoardParams(Title):
def GenBoard(Data, Template):
Heading = GetHeading(Data)
print(Heading)
Elements = SplitPop(
SplitPop(
Data,
@@ -167,9 +159,9 @@ def WriteHTML(Info, Boards):
exit(1)
def Main():
Data = GetDataHTML()
# SetMainHeading(Data)
Boards = GetBoards(Data)
Boards = GetBoards(
GetDataHTML().replace(
'<img', '<img loading="lazy"'))
Info = Boards[0]
Boards.pop(0)
WriteHTML(Info, Boards)

32
Source/Style.css
View File

@@ -27,6 +27,12 @@ Body {
Font-Size: Large;
}
.window {
Float: Left;
Margin: 8px;
Max-Width: 400px;
}
.InfoWindow {
Float: Left;
Margin: 12px;
@@ -44,19 +50,35 @@ Body {
Float: Right;
}
.window {
Float: Left;
Margin: 8px;
}
.window-body, .InfoWindowBody {
Display: Block;
}
.window-body *, .InfoWindowBody * {
Margin-Top: 6px;
Margin-Bottom: 6px;
}
.window-body li, .InfoWindowBody li {
Margin-Top: 2px;
Margin-Bottom: 2px;
}
.window-body h1, .window-body h2, .window-body h3, .window-body h4, .window-body h5, .window-body h6,
.InfoWindowBody h1, .InfoWindowBody h2, .InfoWindowBody h3, .InfoWindowBody h4, .InfoWindowBody h5, .InfoWindowBody h6 {
Margin-Top: 12px;
Margin-Bottom: 12px;
}
:Checked + .window-body, :Checked + .InfoWindowBody {
Display: None;
}
.window-body img, .InfoWindowBody img {
Max-Width: 100%;
Max-Height: 100%;
}
.title-bar {
Background: Linear-Gradient(90deg, #3413D9, #5812DA);
}

77
Source/index.html
View File

@@ -1,77 +0,0 @@
<!DOCTYPE html>
<!--
WebPinBoard
Copyright (C) 2022, OctoSpacc
https://gitlab.com/octospacc
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bachecoctt</title>
<link rel="stylesheet" href="https://unpkg.com/98.css"> <!-- Credits: https://github.com/jdan/98.css -->
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="Background"> <!-- https://pixelfed.uno/i/web/post/419157143827461664 (CC BY-SA 4.0) -->
<img src="https://i.imgur.com/GwCgSFC.png"> <!-- https://i.imgur.com/5bdkMlg.gif -->
</div>
<div class="InfoWindow">
<label for="Bachecoctt-Toggle"><p>Info Open/Close</p></label>
<input type="checkbox" id="Bachecoctt-Toggle" checked>
<div class="InfoWindowBody">
<h2>Bachecoctt</h2>
<p>A collection of some of my saved links and resources,<br />neatly (I hope) categorized for everyone!<br />(and example for my <a href="https://gitlab.com/octospacc/WebPinBoard">WebPinBoard</a> software)</p><ul><li>Data.md file License: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></li></ul><p>uwu links..</p>
</div>
</div>
<div class="window">
<div class="title-bar">
<div class="title-bar-text">
Finestra test
</div>
<div class="title-bar-controls">
<label for="Finestra test-Toggle"><pre></pre></label>
</div>
</div>
<input type="checkbox" id="Finestra test-Toggle" >
<div class="window-body">
<ul><li><a href="example.com">Link 1</a></li><li><a href="example.com">Link 2</a></li></ul>
</div>
</div>
<div class="window">
<div class="title-bar">
<div class="title-bar-text">
Finestra test 2
</div>
<div class="title-bar-controls">
<label for="Finestra test 2-Toggle"><pre></pre></label>
</div>
</div>
<input type="checkbox" id="Finestra test 2-Toggle" >
<div class="window-body">
<ul><li><a href="google.com">Link 1</a></li><li><a href="example.com">Link 2</a></li></ul>
</div>
</div>
</body>
</html>