diff options
| -rwxr-xr-x | gen | 34 | ||||
| -rwxr-xr-x | ssg5 | 8 | ||||
| -rw-r--r-- | wpisy/assets/default_tree.jpg | bin | 0 -> 197221 bytes | |||
| -rw-r--r-- | wpisy/assets/naszywka.png | bin | 0 -> 60591 bytes | |||
| -rw-r--r-- | wpisy/kronika.css | 55 | ||||
| -rw-r--r-- | wpisy/style.css | 10 |
6 files changed, 100 insertions, 7 deletions
diff --git a/gen b/gen index 9d7f8d3..fbabfdf 100755 --- a/gen +++ b/gen @@ -8,16 +8,46 @@ mkdir dest export PATH="$PWD/.jekyll-cache:$PATH" ./tools/compile + +function post_link() { + path=$1 + title=$2 + photo=$3 + description=$4 + cat << EOF +<div class="post-link"> + <a href="$path"> + <div> + <div class="image" style="background-image: url('$photo')"></div> + <div class="post-container"> + <h4 class="post-title">$title</h4> + <p class="post-description">$description</p> + </div> + </div> + </a> +</div> +EOF +} + cat > wpisy/kronika.html << EOF +<link href="/kronika.css" rel="stylesheet"> <h2>Ostatnie wpisy</h2> <a href="rss.xml"><img alt="" src="/assets/rss.svg" style="height:1em">RSS</a> -<div> +<div class="content post-list"> EOF +i=0 for f in `find wpisy/kronika/20* -name '*.md' | sort -r`; do path=`echo $f | sed 's/wpisy//;s/.md//'` - echo "<a href=\"$path\"><div>$path</div></a>" >> wpisy/kronika.html + title=`grep "^# " $f | head -n 1 | cut -c 2-` + photo=`grep "!\[.*\]\(.*\)" $f | head -n 1 | cut -d "(" -f2 | cut -d ")" -f1` + [ -z $photo ] && photo="/assets/default_tree.jpg" + description=`grep -E "^[A-Z]" $f | grep -v "|" | head -n 1 | cut -d" " -f1-30` + post_link "$path" "$title" "$photo" "$description" >> wpisy/kronika.html + [ $i -lt 4 ] && \ + # post_link "$path" "$title" "$photo" "$description" >> wpisy/index.md && \ + i=$(($i+1)) done echo "</div>" >> wpisy/kronika.html diff --git a/ssg5 b/ssg5 index d011fbd..84311e4 100755 --- a/ssg5 +++ b/ssg5 @@ -197,12 +197,14 @@ render_md_files_lowdown() { out="$2/${f%\.md}/index.html" fi - echo "" > $in - [ "$(echo $f | cut -d'/' -f 2)" = "kronika" ] && echo "<article>" > $in + [ "$(echo $f | cut -d'/' -f 2)" = "kronika" ] && \ + echo "<article class="kronika">" > $in || \ + echo "<article>" > $in + # Filter out frontmatter tail -n +$(($(sed -n '/---/,/---/p' $1/$f | wc -l)+1)) $1/$f | \ lowdown --html-no-skiphtml --html-no-escapehtml >> $in && \ - [ "$(echo $f | cut -d'/' -f 2)" = "kronika" ] && echo "</article>" >> $in + echo "</article>" >> $in cat "$in" | render_html_file "$3" \ diff --git a/wpisy/assets/default_tree.jpg b/wpisy/assets/default_tree.jpg new file mode 100644 index 0000000..5aebb47 --- /dev/null +++ b/wpisy/assets/default_tree.jpg Binary files differdiff --git a/wpisy/assets/naszywka.png b/wpisy/assets/naszywka.png new file mode 100644 index 0000000..8547407 --- /dev/null +++ b/wpisy/assets/naszywka.png Binary files differdiff --git a/wpisy/kronika.css b/wpisy/kronika.css new file mode 100644 index 0000000..32f7860 --- /dev/null +++ b/wpisy/kronika.css @@ -0,0 +1,55 @@ +.post-link { + margin: 20px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); + background: #ffffff; + text-align: left; + transition: all 300ms ease-in-out; +} + +.post-link > a > div { + display: grid; + grid-template-columns: 1fr 2fr; +} + +.post-link:hover { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + transform: scale(1.02); +} + +.post-link > a { + text-decoration: none; +} + +.post-link .post-container { + padding: 20px; + padding-top: 0; +} + +.post-link .post-title { + color: #181818; + font-size: 1.3em; +} + +.post-link .post-description { + color: #484848; + font-size: 0.9em; +} + +.post-link .image { + background-repeat: no-repeat; + background-size: cover; + background-position: center; + box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.25); +} + +.post-list { + width: 100%; + margin: 15px auto; +} + +@media (max-width: 550px) { + .post-link > a > div { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + } +} diff --git a/wpisy/style.css b/wpisy/style.css index 91a590a..905b566 100644 --- a/wpisy/style.css +++ b/wpisy/style.css @@ -74,12 +74,18 @@ main img { width: 100%; } -article { +article.kronika { text-align: left; } +article, +.content { + max-width: 80ex; + line-height: 1.5em; +} + header > *, -main, +article, footer > * { max-width: 80ex; margin: 0 auto; |
