From 79ba13526377b1d3e3892f8a0e8bee6d70c24131 Mon Sep 17 00:00:00 2001 From: Charles Cabergs Date: Mon, 7 Dec 2020 19:00:22 +0100 Subject: Added slogan --- base.template.html | 5 ++-- generate | 3 +++ index.template.html | 15 +++++++++--- rundev | 2 ++ static/css/index.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++----- static/css/style.css | 30 ++++++++++++----------- 6 files changed, 99 insertions(+), 25 deletions(-) diff --git a/base.template.html b/base.template.html index f93b096..6f76652 100644 --- a/base.template.html +++ b/base.template.html @@ -18,8 +18,9 @@
home about - blog - utilities + blog + utilities + walks
diff --git a/generate b/generate index 649e0ff..d27992f 100755 --- a/generate +++ b/generate @@ -36,6 +36,9 @@ base_template < index.template.html | base_template < school.template.html | base_template_link 'static/img/favicon.png' | base_template_link 'static/css/style.css' > school.html +base_template < about.template.html | + base_template_link 'static/img/favicon.png' | + base_template_link 'static/css/style.css' > about.html cp rss.template.xml rss.xml diff --git a/index.template.html b/index.template.html index 1153c73..13c0fb1 100644 --- a/index.template.html +++ b/index.template.html @@ -1,5 +1,14 @@

cacharle

+
+
+
k
e
y
b
o
a
r
d
+
+
+
a
n
i
m
a
l
+
+
+
Email @@ -19,11 +28,11 @@

Blog posts

Utilities

diff --git a/rundev b/rundev index f7d3b6e..c50e7d6 100755 --- a/rundev +++ b/rundev @@ -1,5 +1,7 @@ #!/bin/sh +which inotifywait 2> /dev/null 1> /dev/null || { echo 'Could not found inotifywait'; exit 1; } + files=$(find . -name '*.template.*') ./generate diff --git a/static/css/index.css b/static/css/index.css index 607e8b5..3c8786d 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,11 +1,14 @@ +/*****************************************************************************/ +/* site title */ + @font-face { - font-family: Montserrat, sans-serif; + font-family: Montserrat-Light; font-weight: 100; - src: url(../font/Montserrat/Montserrat-ExtraLight.ttf); + src: url(../font/Montserrat/Montserrat-Thin.ttf); } #site-title { - font-family: Montserrat; + font-family: Montserrat-Light, sans-serif; font-size: 17vw; font-weight: 100; width: 100%; @@ -14,25 +17,79 @@ text-transform: uppercase; } -@media screen and (min-width: 1200px) { +@media screen and (min-width: 1100px) { #site-title { font-size: 10rem; } } +@media screen and (max-width: 500px) { + #site-title { + font-size: 15vw; + } +} + +/*****************************************************************************/ +/* solgan */ + +.slogan { + margin: 50px auto; + padding: 30px 20px; + background: black; + color: red; + text-transform: uppercase; + font-family: Montserrat, sans-serif; + font-weight: bold; + font-style: italic; + font-size: 2rem; + letter-spacing: 5px; +} + +@media screen and (min-width: 600px) { + .slogan { + font-size: 2.3rem; + padding: 30px 70px; + } +} + +.slogan-row { + display: flex; + justify-content: space-between; +} + +.slogan-row:first-child { + margin-bottom: 20px; +} + +.slogan:hover .slogan-row { + transition: 0.5s; + justify-content: center; +} + + +/*****************************************************************************/ +/* links */ + .links { display: flex; justify-content: space-between; - max-width: 320px; + max-width: 350px; margin: 10px auto 40px auto; } .links a.links-item { display: block; + background-color: var(--color-dark); + padding: 5px 15px; + border-radius: 10px; } .links a.links-item img { height: 30px; width: 30px; - filter: grayscale(1) invert(1); + filter: grayscale(1) invert(1) brightness(200%); +} + +.links-item:hover { + filter: invert(1); } diff --git a/static/css/style.css b/static/css/style.css index 35abb1b..35c5dfb 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5,6 +5,7 @@ --color-lighter-blue: #89D0F2; --color-grey: #2D3436; --color-light-grey: #636E72; + --color-white: #eee; } @font-face { @@ -47,12 +48,12 @@ body { /* header */ header { - padding: 10px; + padding: 0 10px; background-color: var(--color-darker); } header .header-container { - max-width: 300px; + max-width: 450px; margin: auto; display: flex; justify-content: space-between; @@ -60,26 +61,27 @@ header .header-container { a.header-link { display: block; + padding: 10px 5px; font-weight: bold; text-decoration: none; text-transform: capitalize; } -a.header-link:not(:last-child)::after { - content: '/'; - position: relative; - right: -10px; -} +/* a.header-link:not(:last-child)::after { */ +/* content: '/'; */ +/* position: relative; */ +/* right: -10px; */ +/* } */ a.header-link, a.header-link:visited { - color: #eee; + color: var(--color-white); + background-color: var(--color-darker); } -a.header-link:hover, -a.header-link:focus, -a.header-link:active { - color: var(--color-light-grey); +a.header-link:hover { + color: var(--color-white); + filter: invert(1); } /*****************************************************************************/ @@ -113,7 +115,7 @@ a:hover, a:focus, a:active { /* title */ @font-face { - font-family: Montserrat, sans-serif; + font-family: Montserrat-Bold, sans-serif; font-weight: bold; src: url(../font/Montserrat/Montserrat-Bold.ttf); } @@ -122,7 +124,7 @@ h1, h2, h3, h4 { margin: 10px 0 5px 0; line-height: 1.42; font-weight: bold; - font-family: Montserrat; + font-family: Montserrat-Bold; letter-spacing: 0.1rem; } -- cgit