rhetenor/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some design and some content, Also Makefile

Browse Source
This commit is contained in:
Jonas Zeunert
2024-05-07 14:16:06 +02:00
parent 96d26b78ab
commit 49f1f015df
18 changed files with 349 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
dist
.idea

29
Makefile Normal file
View File

@@ -0,0 +1,29 @@
.PHONY: mkdist clean
all: clean index now links
rm -rf dist/template.html
watch:
while sleep 1 ; do \
find ./src -iname '*.html' -o -name "*.css" \
| entr -d make -f ./Makefile ; \
done
mkdist:
mkdir -p dist
template: mkdist src/start.html src/nav.html src/side.html
cp -r src/styles dist
cat src/start.html src/nav.html src/side.html > dist/template.html
index: template src/pages/index.html
cat dist/template.html src/pages/index.html src/end.html > dist/index.html
now: template src/pages/now.html
cat dist/template.html src/pages/now.html src/end.html > dist/now.html
links: template src/pages/links.html
cat dist/template.html src/pages/links.html src/end.html > dist/links.html
clean:
rm -rf dist

14
README.md
View File

@@ -1,3 +1,13 @@
# website
# Homepage
My own private website hosted at https://rhetenor.de .
Goal is to create an accessible homepage using only HTML5 + CSS .
The static generation works mainly with GNU utils (cat, make, sh) and the blog is written in markdown converted with pandoc.
## Usage
* `make` to create the homepage, requires GNU utils
* `make watch` to update the homepage whenever a file in `src/` changes. Requires `entr` for file watching
My own private website hosted at https://rhetenor.de

3
src/blog/test/1.md Normal file
View File

@@ -0,0 +1,3 @@
# hej
ein test
** toller blogpost **

4
src/blog/test/2.md Normal file
View File

@@ -0,0 +1,4 @@
# lol
another test
** with an even better english blogpost ** oO

2
src/blog/test/3.md Normal file
View File

@@ -0,0 +1,2 @@
i dont care about this

6
src/blog/test/out.html Normal file
View File

@@ -0,0 +1,6 @@
<h1 id="hej">hej</h1>
<p>ein test ** toller blogpost **</p>
<h1 id="lol">lol</h1>
<p>another test</p>
<p>** with an even better english blogpost ** oO</p>
<p>i dont care about this</p>

2
src/end.html Normal file
View File

@@ -0,0 +1,2 @@
</body>
</html>

10
src/nav.html Normal file
View File

@@ -0,0 +1,10 @@
<nav>
<ul>
<li><a href="/" aria-label="Main">main()</a></li>
<li><a href="/blog" aria-label="Blog">blog()</a></li>
<li><a href="/now" aria-label="Now">now()</a></li>
<li><a href="/links" aria-label="Links">links()</a></li>
<li><a href="/misc">misc()</a></li>
<li><a href="https://git.rhetenor.de" aria-label="External link to my git">git()</a></li>
</ul>
</nav>

29
src/pages/index.html Normal file
View File

@@ -0,0 +1,29 @@
<main>
<article>
<h1 id="mainHeading">$ mount /dev/home</h1>
<p>
Hej and welcome to my personal homepage.
</p>
<p>
Probably not the catchiest phrase but definitely nostalgic towards the early 2000s homepages.
Since I'd like to live in a world of small independent unique websites,
this site is my kind of contribution.
</p>
<p>
In here you'll find all kind of things I'm interested in and like to share.
(Stronger) opinions and beliefs in my <a href="/blog">blog()</a>,
things I'm doing right <a href="/now">now()</a>,
a more or less curated <a href="/link">link()</a> list
and a collection of my personal <a href="/philosophy">philosophy()</a> for whomever cares.
I also share some tools and their code for whomever they are useful to.
</p>
<p>
Just be awesome and excellent to each other :)
</p>
<p>
PS: If you're accessing this content from any sort of accessibility device and got
any problems please call out via mail to <a href="mailto:rhetenor@rhetenor.de">rhetenor@rhetenor.de</a>.
</p>
</article>
</main>

17
src/pages/links.html Normal file
View File

@@ -0,0 +1,17 @@
<main id="links">
<h1 id="mainHeading">mount /dev/links</h1>
A page with my personal categorized awesome list of links.
<h2>Link aggregators</h2>
<p>
<a href="https://news.ycombinator.com">Hackernews</a>
Quite common but mostly nice articles of CS/Math related things
</p>
<p><a href="https://lobste.rs">lobste.rs</a> More programming related links.</p>
<h2>Comics</h2>
<p>
<a href="https://xkcd.com">xkcd</a> The classic
</p>
</main>

18
src/pages/now.html Normal file
View File

@@ -0,0 +1,18 @@
<main>
<h1 id="mainHeading">mount /dev/now</h1>
This page contains all projects I'm working on right now. As a reminder and incentive to keep going!
<h2>Projects</h2>
<ul>
<li>This website</li>
<li>Colemak Split Keyboard <a href="https://git.rhetenor.de/rhetenor/tastarut">Git</a></li>
</ul>
<h2>Education</h2>
<ul>
<li>Colemak Keyboard Layout</li>
<li>French</li>
<li>Swedish</li>
</ul>
<span>Last updated: 01.05.2024</span>
</main>

27
src/side.html Normal file
View File

@@ -0,0 +1,27 @@
<aside>
<section aria-labelledby="updates_heading">
<h1 id="updates_heading">Updates</h1>
<ul class="outer_list">
<li>
<h2>2024-05-08:</h2>
<ul class="inner_list">
<li>Updated Style</li>
<li>main() Content</li>
<li>More links()</li>
<li>Added Misc</li>
</ul>
</li>
<li><h2>2024-04-28:</h2>Website created</li>
</ul>
</section>
<section aria-labelledby="tools_heading">
<h1 id="tools_heading">Tools</h1>
<ul class="outer_list">
<li><h2><a href="https://awesm.sh">awesm.sh</a></h2></li>
</ul>
</section>
</aside>

13
src/start.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rhetenors_homepage.index()</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/aside.css">
<link rel="stylesheet" href="styles/nav.css">
</head>
<body>

39
src/styles/aside.css Normal file
View File

@@ -0,0 +1,39 @@
aside {
max-width: 170px;
height: 100%;
overflow: hidden;
margin-right: 1vw;
margin-top: 3vh;
width: 18%;
border-right: solid;
& section {
padding: 0;
overflow: hidden;
}
.outer_list {
padding: 0;
display: flex;
flex-flow: column wrap;
overflow: hidden;
list-style: none;
}
.inner_list {
padding-left: 1em;
list-style: linear-gradient(90deg, #111111 10%, cornflowerblue 20%, white 95%);
}
& h1 {
text-align: center;
margin: 0;
}
& h2 {
text-align: center;
margin-top: 0.25em;
margin-bottom: 0;
font-size: 1em;
}
}

39
src/styles/main.css Normal file
View File

@@ -0,0 +1,39 @@
main {
margin: 1%;
width: 78%;
& h1 {
text-align: center;
}
#mainHeading {
color: #8ae234;
}
#mainHeading:after {
content: "";
width: .35em;
height: .9em;
margin-left: .07em;
margin-bottom: -0.05em;
background: floralwhite;
display: inline-block;
animation: cursor-blink 1.3s steps(2) infinite;
}
}
@keyframes cursor-blink {
0% {
opacity: 0;
}
}
#links {
& p {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
& a:after {
content: "/~"
}
}

42
src/styles/nav.css Normal file
View File

@@ -0,0 +1,42 @@
nav {
position: fixed;
top: 0;
width: 100%;
text-align: center;
overflow: hidden;
& ul {
margin: 0;
padding: 0;
//border-bottom: 1px solid cornflowerblue;
overflow: hidden;
background: linear-gradient(
45deg,
#222222 15%,
royalblue 15% 90%
),
linear-gradient(
-45deg,
#222222 15%,
transparent 15%
);
;
background-blend-mode: overlay;
display: flex;
gap: 3em;
justify-content: center;
list-style: none;
}
& li:hover {
background-color: blue;
}
& a {
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
}
& a:active {
background-color: green;
}
}

55
src/styles/style.css Normal file
View File

@@ -0,0 +1,55 @@
html {
height: 100%;
width: 100%;
}
body {
color: floralwhite;
height: 100%;
width: 100%;
margin: 0 0 0 0;
display: flex;
flex-flow: row wrap;
padding: 0;
background-image:
linear-gradient(
30deg,
#181a1b 7%,
white 7.3% 7.5%,
#000 7.8%
),
linear-gradient(
60deg,
#000123 7.2%,
white 7.3% 7.35%,
#000 7.45%
),
linear-gradient(
-20deg,
#181a1b 38%,
red 38.2% 38.3%,
#000 38.5%
),
linear-gradient(
12deg,
#181a1b 14%,
green 14.3% 14.5%,
#000 14.8%
),
linear-gradient(
11deg,
#181a1b 3%,
white 3.3% 3.5%,
#333333 3.8%
);
background-blend-mode: screen;
}
main > h1 {
color: green;
}
a {
color: dodgerblue;
text-decoration: none;
}