From 15c7a862bcf83aad0a369c84a0cb9cc323b64c47 Mon Sep 17 00:00:00 2001 From: Charles Cabergs Date: Mon, 7 Dec 2020 05:08:54 +0100 Subject: Updated topbar, Added links icons, Added big title --- README.md | 6 +++++ about.template.html | 5 +++++ base.template.html | 16 ++++++------- generate | 3 +++ index.template.html | 27 ++++++++++++---------- rundev | 6 ++++- static/css/blog.css | 3 +++ static/css/index.css | 38 +++++++++++++++++++++++++++++++ static/css/style.css | 62 ++++++++++++++++++++++++++++++++------------------- static/img/email.png | Bin 0 -> 9922 bytes static/img/key.png | Bin 0 -> 13517 bytes 11 files changed, 121 insertions(+), 45 deletions(-) create mode 100644 about.template.html create mode 100644 static/css/blog.css create mode 100644 static/css/index.css create mode 100644 static/img/email.png create mode 100644 static/img/key.png 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 @@ + +

About me

I'm a computer science student currently at s19, a summary of my progress can be found here

This site is an experiment to host some of the services I use every day like a mail server and a git server and becoming more independant in general.

Inspired by a serie of videos posted by Luke Smith.

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 @@

- - - - -

+ 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

' -e '$a

' | 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 @@ -

Charles's website

cacharle

- -

About me

I'm a computer science student currently at s19, a summary of my progress can be found here

This site is an experiment to host some of the services I use every day like a mail server and a git server and becoming more independant in general.

Inspired by a serie of videos posted by Luke Smith.

+ +

+ +

+ +

+ +

+ +

@@ -18,9 +27,3 @@ - -

Links

github
GPG public key

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 Binary files /dev/null and b/static/img/email.png differ diff --git a/static/img/key.png b/static/img/key.png new file mode 100644 index 0000000..19759c3 Binary files /dev/null and b/static/img/key.png differ -- cgit