diff options
| -rw-r--r-- | base.template.html | 5 | ||||
| -rwxr-xr-x | generate | 3 | ||||
| -rw-r--r-- | index.template.html | 15 | ||||
| -rwxr-xr-x | rundev | 2 | ||||
| -rw-r--r-- | static/css/index.css | 69 | ||||
| -rw-r--r-- | 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 @@ <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> + <a class="header-link" href="#">blog</a> + <a class="header-link" href="#">utilities</a> + <a class="header-link" href="#">walks</a> </div> </header> @@ -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 @@ <h1 id="site-title">cacharle</h1> +<div class="slogan"> + <div class="slogan-row"> + <div>k</div><div>e</div><div>y</div><div>b</div><div>o</div><div>a</div><div>r</div><div>d</div> + </div> + <div class="slogan-row"> + <div>a</div><div>n</div><div>i</div><div>m</div><div>a</div><div>l</div> + </div> +</div> + <div class="links"> <a class="links-item"title="Email me" href="mailto:me@cacharle.xyz"> <img alt="Email" src="static/img/email.png"/></a> @@ -19,11 +28,11 @@ <h2>Blog posts</h2> <ul> - <!-- BLOGINDEX --> + <!-- BLOGINDEX --> </ul> <h2>Utilities</h2> <ul> - <!-- <li><a href="https://chat.cacharle.xyz">chat</a></li> --> - <!-- UTILSINDEX --> + <!-- <li><a href="https://chat.cacharle.xyz">chat</a></li> --> + <!-- UTILSINDEX --> </ul> @@ -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; } |