aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md6
-rw-r--r--about.template.html5
-rw-r--r--base.template.html16
-rwxr-xr-xgenerate3
-rw-r--r--index.template.html27
-rwxr-xr-xrundev6
-rw-r--r--static/css/blog.css3
-rw-r--r--static/css/index.css38
-rw-r--r--static/css/style.css62
-rw-r--r--static/img/email.pngbin0 -> 9922 bytes
-rw-r--r--static/img/key.pngbin0 -> 13517 bytes
11 files changed, 121 insertions, 45 deletions
diff --git a/README.md b/README.md
index 2521478..5a50488 100644
--- a/README.md
+++ b/README.md
@@ -15,3 +15,9 @@ Clean the generated files:
```sh
./clean
```
+
+Rebuild the site on file modification (development):
+
+```sh
+./rundev
+```
diff --git a/about.template.html b/about.template.html
new file mode 100644
index 0000000..f66c344
--- /dev/null
+++ b/about.template.html
@@ -0,0 +1,5 @@
+
+<h2>About me</h2>
+<p>I'm a computer science student currently at <a href="https://www.s19.be/">s19</a>, a summary of my progress can be found <a href="school.html">here</a></p>
+<p>This site is an experiment to host some of the services I use every day like a mail server and a <a href="https://git.cacharle.xyz">git server</a> and becoming more independant in general.</p>
+<p>Inspired by a serie of <a href="https://www.youtube.com/watch?v=bdKZVIGRAKQ&list=PL-p5XmQHB_JRRnoQyjOfioJdDmu87DIJc">videos</a> posted by <a href="https://lukesmith.xyz">Luke Smith</a>.</p>
diff --git a/base.template.html b/base.template.html
index 9aecb5b..f93b096 100644
--- a/base.template.html
+++ b/base.template.html
@@ -15,19 +15,17 @@
<body>
<header>
- <!-- <img width="30" height="30" src="static/img/git.png"> -->
- <!-- <img width="30" height="30" src="static/img/git.png"> -->
- <!-- <img width="30" height="30" src="static/img/git.png"> -->
- <!-- <img width="30" height="30" src="static/img/git.png"> -->
- <div><a class="header-link" href="/">Home</a></div>
- <div><a class="header-link" href="/rss.xml">RSS</a></div>
- <div><a class="header-link" href="mailto:me@cacharle.xyz">Contact</a></div>
- <div><a class="header-link" href="https://git.cacharle.xyz">git</a></div>
- <div><a class="header-link" href="https://searx.cacharle.xyz">searx</a></div>
+ <div class="header-container">
+ <a class="header-link" href="/">home</a>
+ <a class="header-link" href="/about.html">about</a>
+ <a class="header-link" href="/blog">blog</a>
+ <a class="header-link" href="/utilities/">utilities</a>
+ </div>
</header>
<main>
<!-- BODY -->
</main>
+ <!-- <div><a class="header&#45;link" href="mailto:me@cacharle.xyz">Contact</a></div> -->
</body>
</html>
diff --git a/generate b/generate
index f1f3378..649e0ff 100755
--- a/generate
+++ b/generate
@@ -31,6 +31,7 @@ blog_path=blog
mkdir -p "$blog_path"
base_template < index.template.html |
base_template_link 'static/img/favicon.png' |
+ base_template_link 'static/css/index.css' |
base_template_link 'static/css/style.css' > index.html
base_template < school.template.html |
base_template_link 'static/img/favicon.png' |
@@ -44,8 +45,10 @@ do
post_dst_path=$(echo "$post_path" | sed 's_.md_.html_')
pandoc -f markdown -t html < "$post_path" |
+ sed -e '1i<div class="article">' -e '$a</div>' |
base_template |
base_template_link '../static/img/favicon.png' |
+ base_template_link '../static/css/blog.css' |
base_template_link '../static/css/style.css' > "$post_dst_path"
# Add blog artcle link to the index.html
diff --git a/index.template.html b/index.template.html
index 3a2faa8..1153c73 100644
--- a/index.template.html
+++ b/index.template.html
@@ -1,10 +1,19 @@
-<h1 id="site-title">Charles's website</h1>
+<h1 id="site-title">cacharle</h1>
-
-<h2>About me</h2>
-<p>I'm a computer science student currently at <a href="https://www.s19.be/">s19</a>, a summary of my progress can be found <a href="school.html">here</a></p>
-<p>This site is an experiment to host some of the services I use every day like a mail server and a <a href="https://git.cacharle.xyz">git server</a> and becoming more independant in general.</p>
-<p>Inspired by a serie of <a href="https://www.youtube.com/watch?v=bdKZVIGRAKQ&list=PL-p5XmQHB_JRRnoQyjOfioJdDmu87DIJc">videos</a> posted by <a href="https://lukesmith.xyz">Luke Smith</a>.</p>
+<div class="links">
+ <a class="links-item"title="Email me" href="mailto:me@cacharle.xyz">
+ <img alt="Email" src="static/img/email.png"/></a>
+ <a class="links-item" title="RSS feed" href="rss.xml">
+ <img alt="rss" src="static/img/rss.png"/></a>
+ <a class="links-item" title="github" href="https://github.com/cacharle">
+ <img alt="github" src="static/img/github.png"/></a>
+ <a class="links-item" title="git server" href="https://git.cacharle.xyz">
+ <img alt="git" src="static/img/git.png"/></a>
+ <a class="links-item" title="searx search" href="https://searx.cacharle.xyz">
+ <img alt="searx" src="static/img/searx.png"/></a>
+ <a class="links-item"title="GPG public key" href="charlescabergspublic.gpg">
+ <img alt="GPG public key" src="static/img/key.png"/></a>
+</div>
<hr/>
@@ -18,9 +27,3 @@
<!-- <li><a href="https://chat.cacharle.xyz">chat</a></li> -->
<!-- UTILSINDEX -->
</ul>
-
-<h2>Links</h2>
-<ul>
- <li><a href="https://github.com/cacharle">github</a></li>
- <li><a href="charlescabergspublic.gpg">GPG public key</a></li>
-</ul>
diff --git a/rundev b/rundev
index 7fab532..f7d3b6e 100755
--- a/rundev
+++ b/rundev
@@ -1,7 +1,11 @@
#!/bin/sh
+files=$(find . -name '*.template.*')
+
+./generate
+
while true
do
- inotifywait -q -r -e modify .
+ inotifywait -q -e modify $files
./generate
done
diff --git a/static/css/blog.css b/static/css/blog.css
new file mode 100644
index 0000000..772bd5b
--- /dev/null
+++ b/static/css/blog.css
@@ -0,0 +1,3 @@
+.article {
+ margin-top: 4rem;
+}
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..607e8b5
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,38 @@
+@font-face {
+ font-family: Montserrat, sans-serif;
+ font-weight: 100;
+ src: url(../font/Montserrat/Montserrat-ExtraLight.ttf);
+}
+
+#site-title {
+ font-family: Montserrat;
+ font-size: 17vw;
+ font-weight: 100;
+ width: 100%;
+ margin: 0px auto;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+@media screen and (min-width: 1200px) {
+ #site-title {
+ font-size: 10rem;
+ }
+}
+
+.links {
+ display: flex;
+ justify-content: space-between;
+ max-width: 320px;
+ margin: 10px auto 40px auto;
+}
+
+.links a.links-item {
+ display: block;
+}
+
+.links a.links-item img {
+ height: 30px;
+ width: 30px;
+ filter: grayscale(1) invert(1);
+}
diff --git a/static/css/style.css b/static/css/style.css
index a8142fb..e9ca6b3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -10,20 +10,20 @@
@font-face {
font-family: OpenSans;
font-weight: normal;
- src: url(font/OpenSans/OpenSans-Regular.ttf);
+ src: url(../font/OpenSans/OpenSans-Regular.ttf);
}
@font-face {
font-family: OpenSans;
font-weight: bold;
- src: url(font/OpenSans/OpenSans-Bold.ttf);
+ src: url(../font/OpenSans/OpenSans-Bold.ttf);
}
@font-face {
font-family: OpenSans;
font-weight: normal;
font-style: italic;
- src: url(font/OpenSans/OpenSans-Italic.ttf);
+ src: url(../font/OpenSans/OpenSans-Italic.ttf);
}
html {
@@ -47,25 +47,39 @@ body {
/* header */
header {
- display: flex;
- margin-bottom: 20px;
- background-color: #191919;
padding: 10px;
+ background-color: var(--color-darker);
}
-header div {
- margin-right: 30px;
- color: #ccc;
+header .header-container {
+ max-width: 300px;
+ margin: auto;
+ display: flex;
+ justify-content: space-between;
}
a.header-link {
- color: #ccc;
- text-decoration: none;
+ display: block;
font-weight: bold;
+ text-decoration: none;
+ text-transform: capitalize;
+}
+
+a.header-link:not(:last-child)::after {
+ content: '/';
+ position: relative;
+ right: -10px;
+}
+
+a.header-link,
+a.header-link:visited {
+ color: #eee;
}
-a.header-link:hover {
- color: #fff;
+a.header-link:hover,
+a.header-link:focus,
+a.header-link:active {
+ color: var(--color-light-grey);
}
/*****************************************************************************/
@@ -74,9 +88,9 @@ a.header-link:hover {
main {
color: #fafafa;
line-height: 1.80;
- margin: 2rem auto 1rem;
+ margin: 0 auto;
max-width: 55rem;
- padding: 1.5rem;
+ padding: 1rem 1.5rem;
}
/*****************************************************************************/
@@ -101,7 +115,7 @@ a:hover, a:focus, a:active {
@font-face {
font-family: Montserrat, sans-serif;
font-weight: bold;
- src: url(font/Montserrat/Montserrat-Bold.ttf);
+ src: url(../font/Montserrat/Montserrat-Bold.ttf);
}
h1, h2, h3, h4 {
@@ -114,24 +128,25 @@ h1, h2, h3, h4 {
h1 {
margin-top: 0;
- font-size: 2.3rem;
+ font-size: 2.5rem;
}
-h2 { font-size: 2.0rem; }
-h3 { font-size: 1.7rem; }
-h4 { font-size: 1.5rem; }
-h5 { font-size: 1.3rem; }
-h6 { font-size: 1.1rem; }
+h2 { font-size: 2.1rem; }
+h3 { font-size: 1.8rem; }
+h4 { font-size: 1.6rem; }
+h5 { font-size: 1.4rem; }
+h6 { font-size: 1.2rem; }
/* code */
@font-face {
font-family: FiraMono;
font-weight: normal;
- src: url(font/FiraMono/FiraMono-Regular.ttf);
+ src: url(../font/FiraMono/FiraMono-Regular.ttf);
}
pre, code {
+ white-space: pre;
font-family: FiraMono, "Courier New", monospace;
}
@@ -140,6 +155,7 @@ code {
padding: 0.2rem 0.3rem;
border: 1px solid var(--color-light-grey);
font-size: 82%;
+ margin: 0 1px;
}
pre {
diff --git a/static/img/email.png b/static/img/email.png
new file mode 100644
index 0000000..d6ce93f
--- /dev/null
+++ b/static/img/email.png
Binary files differ
diff --git a/static/img/key.png b/static/img/key.png
new file mode 100644
index 0000000..19759c3
--- /dev/null
+++ b/static/img/key.png
Binary files differ
generated by cgit (git 2.34.1) at 2026-05-16 05:45:31 +0000