change to jekyll page engine

This commit is contained in:
Hiajen Hiajen 2022-01-15 22:29:17 +01:00
parent ba8b789f12
commit 74cfbc1488
19 changed files with 353 additions and 258 deletions

7
.gitignore vendored Normal file
View file

@ -0,0 +1,7 @@
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
# Ignore folders generated by Bundler
.bundle/
vendor/

17
Gemfile Normal file
View file

@ -0,0 +1,17 @@
# frozen_string_literal: true
source "https://rubygems.org"
gem "jekyll"
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", "~> 1.2"
gem "tzinfo-data"
end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
gem "webrick", "~> 1.7"

78
Gemfile.lock Normal file
View file

@ -0,0 +1,78 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.8.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.9)
em-websocket (0.5.3)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7-x64-mingw32)
ffi (1.15.5-x64-mingw32)
forwardable-extended (2.6.0)
http_parser.rb (0.8.0)
i18n (1.8.11)
concurrent-ruby (~> 1.0)
jekyll (4.2.1)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.3)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.4.0)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 2.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.3.1)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.7.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.6)
rb-fsevent (0.11.0)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.5)
rouge (3.27.0)
safe_yaml (1.0.5)
sassc (2.4.0-x64-mingw32)
ffi (~> 1.9)
terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1)
thread_safe (0.3.6)
tzinfo (1.2.9)
thread_safe (~> 0.1)
tzinfo-data (1.2021.5)
tzinfo (>= 1.0.0)
unicode-display_width (1.8.0)
wdm (0.1.1)
webrick (1.7.0)
PLATFORMS
x64-mingw32
DEPENDENCIES
jekyll
tzinfo (~> 1.2)
tzinfo-data
wdm (~> 0.1.1)
webrick (~> 1.7)
BUNDLED WITH
2.3.5

10
_data/navigation.yml Normal file
View file

@ -0,0 +1,10 @@
- name: Home
link: /
- name: Services
link: /services.html
- name: Kontakt
link: /kontakt.html
- name: Social
link: /social.html
- name: DO NOT CLICK!
link: https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1

View file

@ -0,0 +1,9 @@
<div class="col-3 col-s-3 menu">
<ul>
{% for item in site.data.navigation %}
<a href="{{ item.link }}">
<li {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</li>
</a>
{% endfor %}
</ul>
</div>

31
_layouts/defaults.html Normal file
View file

@ -0,0 +1,31 @@
---
---
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/styles.css">
<title>Hiajen - {{ page.title }}</title>
</head>
<body>
<div class="main-container">
<div class="header">
<h1>>> Hiajen</h1>
</div>
<div class="row">
{% include navigation.html %}
<div class="col-9 col-s-9">
<h1>{{ page.title }}</h1>
<p>{{ content | markdownify }}</p>
</div>
</div>
<div class="footer">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
<p>made with <a href="https://jekyllrb.com/">Jekyll</a></p>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,7 @@
:root {
--gray0: #282a36; /*background, font-colour*/
--gray1: #282a36; /*current menu*/
--gray2: #44475a; /*header, footer, menu*/
--gray3: #6272a4; /*hover, links*/
--background: #f8f8f2 /*container background, font-colour on dark*/
}

View file

@ -0,0 +1,7 @@
:root {
--gray0: #002b36; /*background, font-colour*/
--gray1: #073642; /*current menu*/
--gray2: #586e75; /*header, footer, menu*/
--gray3: #93a1a1; /*hover*/
--background: #eee8d5 /*container background, font-colour on dark*/
}

126
_sass/main.scss Normal file
View file

@ -0,0 +1,126 @@
* {
box-sizing: border-box;
color: var(--gray0);
}
a {
color: var(--gray3);
}
div {
background-color: var(--background);
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
background-color: var(--gray0);
}
.header {
background-color: var(--gray2);
padding: 15px;
}
.header * {
color: var(--background);
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul a {
text-decoration: none;
}
.menu a li {
padding: 8px;
margin-bottom: 7px;
background-color: var(--gray2);
color: var(--background);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu a li:hover {
background-color: var(--gray3);
}
.menu a li.current {
background-color: var(--gray1);
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: var(--background);
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: var(--gray2);
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
.footer * {
color: var(--background);
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.main-container {
width: 768px;
margin-left: auto;
margin-right: auto;
clear: both;
}
}

5
assets/css/styles.scss Normal file
View file

@ -0,0 +1,5 @@
---
---
@import "colours_drakula";
@import "main";

View file

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 166 KiB

4
home.md Normal file
View file

@ -0,0 +1,4 @@
---
layout: defaults
title: Home
---

View file

@ -1,35 +1,11 @@
<!DOCTYPE html> ---
<html lang="en"> layout: defaults
<head> title: Home
<meta charset="UTF-8"> ---
<link rel="stylesheet" href="style/main.css">
<title>Hiajens Infrastructure</title>
</head>
<body style="background-color: #002b36">
<div id="main-container"> Halloa, Ansgar oder im Neuland auch Hiajen hier. Wer sich beides nicht merken kann, einfach Meep.
<div id="head-container">
<h1>Hiajens Infrastructure</h1> Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul mir was sinnvolles auszudenken.
<h2>>> Start <<</h2> Also hier mein Avatar.
</div>
<div class="clearfix" id="wrapper-container"> ![Avatar of Hiajen](assets/images/avatar.png "Avatar of Hiajen")
<div id="left-container">
<ul class="menu">
<li><a href="index.html">Start</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
</ul>
</div>
<div id="right-container" >
<p>Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul.<br>Also hier mein Avatar.</p>
<img src="img/avatar.png" height="480" width="480" alt="avatar Image from Hiajen"/>
</div>
</div>
<div id="footer-container">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
</div>
</div>
</body>
</html>

View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>Hiajens Infrastructure</title>
</head>
<body style="background-color: #002b36">
<div id="main-container">
<div id="head-container">
<h1>Hiajens Infrastructure</h1>
<h2>>> Kontakt <<</h2>
</div>
<div class="clearfix" id="wrapper-container">
<div id="left-container">
<ul class="menu">
<li><a href="index.html">Start</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
</ul>
</div>
<div id="right-container" >
<p>Du findest mich fast überall unter dem Nutzername <i>Hiajen</i> hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:</p>
<ul>
<li>Matrix: <a href="https://matrix.to/#/@hiajen:matrix.hiajen.de" target="_blank"> @hiajen:matrix.hiajen.de </a></li>
<li>E-Mail: <a href="https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index" target="_blank"> info (at) hiajen (dot) de </a>
<br>Fingerprint: F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01</li>
</ul>
</div>
</div>
<div id="footer-container">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
</div>
</div>
</body>
</html>

9
kontakt.md Normal file
View file

@ -0,0 +1,9 @@
---
layout: defaults
title: Kontakt
---
Du findest mich fast überall unter dem Nutzername `Hiajen` hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:
* Matrix: [@hiajen:matrix.hiajen.de](https://matrix.to/#/@hiajen:matrix.hiajen.de){:target="_blank"}
* E-Mail: [info (at) hiajen (dot) de](https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index){:target="_blank"}
* Fingerprint: `F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01`

View file

@ -1,74 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>Hiajens Infrastructure</title>
</head>
<body style="background-color: #002b36">
<div id="main-container">
<div id="head-container">
<h1>Hiajens Infrastructure</h1>
<h2>>> Services <<</h2>
</div>
<div class="clearfix" id="wrapper-container">
<div id="left-container">
<ul class="menu">
<li><a href="index.html">Start</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
</ul>
</div>
<div id="right-container" >
<p>
Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
</p>
<hr style="margin-top: 35px; color: #002b36">
<p>
<b><del>Accountverwaltung (LDAP):</del></b>
Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
</p>
<p>
<b><del>Jenkins:</del></b>
Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
</p>
<p>
<b><a href="https://bbb.hiajen.de" target="_blank">BigBlueButton:</a></b>
OpenSource Videokonferenz-Tool
</p>
<p>
<b><a href="https://git.hiajen.de" target="_blank">GIT (Gitea):</a></b>
OpenSource Versionsverwaltungstool für deinen Quellcode
</p>
<p>
<b>Matrix:</b>
OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client <a href="https://element.io/" target="_blank">Element</a>. Die Home-Server URL lautet: <i>matrix.hiajen.de</i>
</p>
<p>Matrix-Bots via: <a href="https://matrix.hiajen.de/_maubot/maubot" target="_blank">MauBot</a></p>
<p>
<b><a href="https://cryptpad.hiajen.de/" target="_blank">CryptPad:</a></b>
OpenSource online Tool zur kollaborativen Zusammenarbeit
</p>
<p>
<b><a href="https://cloud.hiajen.de" target="_blank">Cloud (NextCloud):</a></b>
OpenSource Cloud-Speicher
</p>
<p>
<b><a href="https://push.hiajen.de" target="_blank">UnifiedPush / Gothify:</a></b>
OpenSource PUSH service
</p>
<p>
<b><a href="https://wiki.hiajen.de" target="_blank">Knowledgebase / Wiki:</a></b>
OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen
</p>
</div>
</div>
<div id="footer-container">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
</div>
</div>
</body>
</html>

25
services.md Normal file
View file

@ -0,0 +1,25 @@
---
layout: defaults
title: Services
---
Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
* ~~Accountverwaltung (LDAP):~~ Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
* ~~Jenkins:~~ Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
* **[BigBlueButton](https://bbb.hiajen.de){:target="_blank"}:** OpenSource Videokonferenz-Tool
* **[GIT (Gitea)](https://git.hiajen.de){:target="_blank"}:** OpenSource Versionsverwaltungstool für deinen Quellcode
* **Matrix:** OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client Element. Die Home-Server URL lautet: `matrix.hiajen.de`
* Matrix-Bots via: [MauBot](https://github.com/maubot/maubot){:target="_blank"}
* **[CryptPad](https://cryptpad.hiajen.de){:target="_blank"}:** OpenSource online Tool zur kollaborativen Zusammenarbeit
* **[Cloud (NextCloud)](https://cloud.hiajen.de){:target="_blank"}:** OpenSource Cloud-Speicher
* ~~UnifiedPush / Gothify:~~ OpenSource PUSH service
* **[Knowledgebase / Wiki](https://wiki.hiajen.de){:target="_blank"}:** OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen

8
social.md Normal file
View file

@ -0,0 +1,8 @@
---
layout: defaults
title: Social
---
Ich betreibe folgende Social-Media Kanäle:
* Mastodon: [@Hiajen@chaos.social](https://chaos.social/@Hiajen){:target="_blank"}
* Pixelfed: [@hiajen](https://pixelfed.de/Hiajen){:target="_blank"}

View file

@ -1,111 +0,0 @@
* {
font-family: Arial, serif;
color: #002b36;
}
div {
background-color: #eee8d5;
}
p {
padding: 20px 20px;
}
#main-container h1, h2{
text-align: center;
margin: auto;
padding-top: 12px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.content {
padding: 0 25px;
}
ul.menu {
padding-inline: 20px;
#display: block;
}
.menu li {
list-style-type: none;
text-align: center;
#display: inline-block;
padding: 8px;
margin-bottom: 8px;
background-color: #586e75;
color: #eee8d5;
}
.menu li:hover {
background-color: #93a1a1;
}
.menu li a {
display: block;
color: inherit;
text-decoration: none;
height: 100%;
width: 100%;
}
#main-container {
width: 800px;
#height: 90%;
margin-left: auto;
margin-right: auto;
#background-color: aqua;
clear: both;
#box-shadow: 1px 1px 10px 5px #eee8d5;
}
#head-container{
background-color: #586e75;
width: 100%;
height: 100px;
clear: both;
}
#wrapper-container {
height: 600px;
}
#left-container{
#background-color: blueviolet;
height: 100%;
width: 25%;
float: left;
}
#right-container{
#background-color: brown;
height: 100%;
width: 75%;
float: right;
}
#right-container p {
margin: 0;
padding: 25px 0 0 0;
}
#right-container a {
text-decoration: #859900;
color: #859900;
}
#footer-container{
background-color: #586e75;
padding-top: 20px;
height: 50px;
width: 100%;
}