nindwen.blue

my home page
git clone https://git.nindwen.blue/nindwen.blue.git
README | Files | Log | Refs

commit f02619348cebdb0170936f50b5e56c7f3d14e6e0
parent 4264945a0f51a340d2876e1fed96a9c46d1e2eee
Author: nindwen <me@nindwen.blue>
Date:   Wed, 29 Aug 2018 23:56:19 +0300

Looks refining

Diffstat:
Makefile | 4++--
build_index.rb | 4++--
style/main.scss | 13+++++++++++++
style/notes.scss | 113+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------
template/foot.html | 9++++++++-
template/head3.html | 2+-
template/notes-template.html | 7+------
7 files changed, 115 insertions(+), 37 deletions(-)

diff --git a/Makefile b/Makefile @@ -9,8 +9,8 @@ output/index.html: index.md output/main.css template/head.html template/head2.ht output/%.css: style/%.scss sass --sourcemap=none --style compressed $< $@ -output/notes/%.html: notes/%.md output/notes.css - pandoc --highlight-style=breezedark --template=template/notes-template.html $< > $@ +output/notes/%.html: notes/%.md output/notes.css template/foot.html template/notes-template.html + pandoc --highlight-style=breezedark --template=template/notes-template.html -A template/foot.html $< > $@ .PHONY: notes notes: $(OUT_NOTES) output/notes.css template/head.html template/head3.html template/foot.html diff --git a/build_index.rb b/build_index.rb @@ -15,7 +15,7 @@ puts "<ul>" files.sort {|x,y| y["date"] <=> x["date"] } .each do |file| print "<li><a href='#{file["filename"]}.html'>" - print "<span class='date'>#{file["date"]}</span>" - puts "<span class='title'>#{file["title"]}</span></a></li>" + print "<span class='title'>#{file["title"]}</span>" + puts "<span class='date'>#{file["date"]}</span></a></li>" end puts "</ul>" diff --git a/style/main.scss b/style/main.scss @@ -25,6 +25,10 @@ html, body { text-align: left; line-height: 1.5; + @media only screen and (max-width: 640px) { + padding: 10px; + } + em { color: $accent; font-style: normal; @@ -82,6 +86,11 @@ header { img { max-width: 100%; + @media only screen and (max-width: 640px) { + float: right; + max-width: 50%; + margin-right: -50%; + } } } @@ -101,5 +110,9 @@ footer { color: grey; margin: 20px; font-size: 90%; + + a, a:visited { + color: grey; + } } diff --git a/style/notes.scss b/style/notes.scss @@ -2,6 +2,7 @@ $faint: #bbb; $front: #333333; $back: #fefefe; +$accent: #66006f; body { background: $back; @@ -10,9 +11,9 @@ body { #content, header, footer { max-width: 33em; margin: auto; - font-size: 16pt; + font-size: 14pt; font-family: Helvetica, Arial, sans-serif; - line-height: 1.6em; + line-height: 1.5em; color: $front; img { @@ -28,52 +29,95 @@ body { color: grey; font-size: 80%; } -} -header, footer, -header a, -header a:visited { - color: $faint; - text-decoration: none; + b { + color: $accent; + } + + p { + line-height: 1.5; + margin-top: 1.5em; + margin-bottom: 1.5em; + + a, a:hover, a:visited { + color: $accent; + } + } + + @media only screen and (max-width: 640px) { + padding-left: 10px; + padding-right: 10px; + font-size: 12pt; + } } header { margin-bottom: 60px; - margin-top: 20px; + margin-top: 10px; + color: $faint; + + a, a:visited { + text-decoration: none; + color: $front; + } + a.breadcrumb { + color: $accent; + } .date { float: right; + @media only screen and (max-width: 640px) { + float: none; + display: block; + } + } + @media only screen and (max-width: 640px) { + margin-bottom: 20px; + margin-top: 0px; } } footer { border-top: 1px solid $faint; + text-align: center; + color: $faint; + + a, a:visited { + color: $faint; + } + + #links { + float: left; + } + #copyright { + float: right; + } } h1 { border-bottom: 1px solid $faint; font-size: 150%; - line-height: 1; - margin-top: 1em; - margin-bottom: 1em; + line-height: 1.3333; + margin-top: 1.3333; + margin-bottom: 1.3333; } h2, h3, h4, h5 { font-size: 120%; - line-height: 1.25; - margin-top: 1.25em; - margin-bottom: 1.25em; + line-height: 1.66666; + margin-top: 1.66666; + margin-bottom: 1.66666; } h1:before { content: '# '; - color: $faint; + color: $accent; } h2:before { content: '## '; - color: $faint; + color: $accent; } h3:before { @@ -89,18 +133,28 @@ div.sourceCode { margin: 10px; font-size: 80%; box-shadow: 1px 1px 10px $front; + + a, a:visited { + } } blockquote { font-style: italic; - border-left: solid $faint 4px; + border-left: solid $accent 4px; padding-left: 20px; color: grey; + + cite { + display: block; + padding-left: 1em; + font-style: italic; + font-size: 80%; + } } ul { padding: 50px; - border: 1px solid $faint; + border: 1px solid $accent; border-radius: 10px; a { @@ -109,20 +163,29 @@ ul { li { list-style-type: none; + margin-bottom: 5px; } .date { color: $faint; + float: right; + + @media only screen and (max-width: 640px) { + font-size:90%; + display: block; + float: none; + margin-bottom: 20px; + } } .title { - padding-left: 30px; + padding-right: 30px; color: $front; text-decoration: underline; + text-decoration-color: $accent; } -} -p { - line-height: 1.5; - margin-top: 1.5em; - margin-bottom: 1.5em; + @media only screen and (max-width: 640px) { + padding: 20px; + } } + diff --git a/template/foot.html b/template/foot.html @@ -1,4 +1,11 @@ </div> - <footer>© laura ketola 2018</footer> + <footer> + <div id="links"> + <a href="/">home</a> ⬡ + <a href="/notes">notes</a> ⬡ + <a href="https://git.nindwen.blue">git</a> + </div> + <div id="copyright">© laura ketola 2018</div> + </footer> </body> </html> diff --git a/template/head3.html b/template/head3.html @@ -2,6 +2,6 @@ </head> <body> <header> - <a href="/">nindwen.blue</a> » <a href="/notes">notes</a> + <a href="/" class="breadcrumb">nindwen.blue</a> » <a href="/notes">notes</a> </header> <div id="content"> diff --git a/template/notes-template.html b/template/notes-template.html @@ -19,7 +19,7 @@ $for(include-before)$ $include-before$ $endfor$ <header> -<a href="/">nindwen.blue</a> » <a href="/notes">notes</a> » $title$ + <a href="/" class="breadcrumb">nindwen.blue</a> » <a href="/notes">notes</a> » <a href="#">$title$</a> $if(date)$ <span class="date">$date$</span> $endif$ @@ -31,11 +31,6 @@ $table-of-contents$ $endif$ <div id="content"> $body$ -</div> $for(include-after)$ $include-after$ $endfor$ -<footer> -</footer> -</body> -</html>