From 954830a51fa906c6b16941fd39675c8439ba7351 Mon Sep 17 00:00:00 2001 From: luxagraf Date: Thu, 15 Oct 2015 21:01:17 -0400 Subject: polished up the books section a bit --- design/sass/_books.scss | 122 +++++++++++++++++++++++++++++++++-- design/sass/_queries.scss | 10 ++- design/templates/archives/books.html | 31 +++++---- design/templates/details/book.html | 14 ++-- 4 files changed, 150 insertions(+), 27 deletions(-) (limited to 'design') diff --git a/design/sass/_books.scss b/design/sass/_books.scss index 3ed8e2e..ec81b7e 100644 --- a/design/sass/_books.scss +++ b/design/sass/_books.scss @@ -1,3 +1,80 @@ +.book-list { + @extend %clearfix; + @include constrain_wide; +} + +.book-list-item { + margin: 2em 0; + h2 { + text-align: left; + margin: .25rem 4px; + font-weight: normal; + @include fontsize(24); + line-height: 1.2; + a { + color: $body_font; + text-decoration: none; + font-style: italic; + } + @include breakpoint(gamma) { + @include fontsize(22); + margin: .1rem 4px; + } + } + h4, { + @include fontsize(12); + @include smcaps; + font-weight: normal; + margin-top: 0; + margin-bottom: 0; + &:before { + content: "by " + } + } + @include breakpoint(alpha-2) { + text-align: left; + width: 45%; + float: left; + margin-right: 30px; + margin-top: 1em; + min-height: 500px; + .img-wrapper { + min-height: 350px; + } + } + @include breakpoint(gamma) { + width: 31%; + height: 650px; + float: left; + margin-right: 30px; + .img-wrapper { + min-height: 400px; + } + } + @include breakpoint(delta) { + width: 22%; + height: 550px; + } +} +.book-list .even { + @include breakpoint(alpha-2) { + margin-right: 0; + } + @include breakpoint(gamma) { + margin-right: 30px; + } +} +.book-list .tres { + @include breakpoint(gamma) { + margin-right: 0; + } + @include breakpoint(delta) { + margin-right: 30px; + } +} +.book-stars { + display: block; +} .book { margin-top: 2em; @include breakpoint(gamma) { @@ -14,7 +91,6 @@ } } .book-metadata { - @extend %clearfix; text-align: left; dd { display: inline; @@ -30,27 +106,65 @@ dt:after { content: ":"; } + @include breakpoint(gamma) { + margin-left: 80px; + } } .book-title { - @include constrain_narrow; + @include constrain_wide; line-height: 1.3; + @include breakpoint(gamma) { + max-width: 660px; + text-align: left; + position: relative; + left: 150px; + } + @include breakpoint(delta) { + left: 165px; + max-width: 850px; + } } -.book-cover { +.book-cover-wrapper { + @include breakpoint(gamma) { + display: block; + @include constrain_wide; + img { + float: left; + width: 250px; + margin-right: 32px; + } + } + @include breakpoint(delta) { + img { + max-width: 250px; + } + } } .thoughts, .highlights, .meta-cover { @include constrain_narrow; text-align: left; p { max-width: 100%; + @include breakpoint(gamma) { + margin-left: 80px; + } } } -.thoughts h5, .highlights h4, .meta-cover h5 { +.meta-cover { +} +.thoughts h5, .highlights h4 { font-weight: 500; letter-spacing: 1px; margin: 3em 0 .5em 0; @include generic_sans; @include smcaps; @include fontsize(14); + @include breakpoint(gamma) { + margin-left: 80px; + } +} +.highlights article:first-of-type { + margin-top: 1em; } .highlights .foot { @include fontsize(14); diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss index 1d7f3ef..8262c84 100644 --- a/design/sass/_queries.scss +++ b/design/sass/_queries.scss @@ -1,6 +1,7 @@ $breakpoint-alpha: 38em; +$breakpoint-alpha-2: 450px; $breakpoint-beta: 49em; -$breakpoint-book-beta: 620px; +$breakpoint-beta-2: 620px; $breakpoint-gamma: 56em; $breakpoint-delta: 73.125em; $breakpoint-epsilon: 79.625em; @@ -9,11 +10,14 @@ $breakpoint-epsilon: 79.625em; @if $point == "alpha" { @media screen and (min-width:$breakpoint-alpha ){ @content; } } + @if $point == "alpha-2" { + @media screen and (min-width:$breakpoint-alpha-2 ){ @content; } + } @else if $point == "beta" { @media screen and (min-width: $breakpoint-beta) { @content; } } - @else if $point == "book-beta" { - @media screen and (min-width: $breakpoint-book-beta) { @content; } + @else if $point == "beta-2" { + @media screen and (min-width: $breakpoint-beta-2) { @content; } } @else if $point == "gamma" { @media screen and (min-width: $breakpoint-gamma) { @content; } diff --git a/design/templates/archives/books.html b/design/templates/archives/books.html index f462a3a..980a4b7 100644 --- a/design/templates/archives/books.html +++ b/design/templates/archives/books.html @@ -3,7 +3,7 @@ {% load html5_datetime %} {% load pagination_tags %} {% block pagetitle %} Books | luxagraf {% endblock %} -{% block metadescription %}Books and thoughts on them. {% endblock %} +{% block metadescription %}Books I've read and thoughts on them. {% endblock %} {%block bodyid%}class="books" id="books-archive"{%endblock%} {% block primary %} @@ -11,24 +11,27 @@
  • →
  • Books
    • -
    -

    Books

    +
    {% autopaginate object_list 24 %} +

    Books

    +

    I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.

    -

    A few years ago, I realized I was forgetting the things I'd read. Forgetting the things they had made me think of, things I'd learned, bits I wanted to remember. So I started taking notes while reading, usually with a pen and paper, but sometimes just photographing a page and using OCR to save it to a text file. I wanted to remember, to recall.

    -

    And of course since I have all this stuff in text files I thought might as well put it online. Thanks to some APIs out there it isn't hard to get all the info you need about a book. And well, here you have it, books I've read and things I've thought about them.

    - {% autopaginate object_list 24 %}{% for object in object_list %} -
    - {% if object.image %}cover art: red horse, city in background{%endif%} -

    {{object.title|safe|amp|smartypants}}

    +

    I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.

    +
    + +
    {% for object in object_list %} +
    + {% if object.image %}
    cover art for {{object.title}} by {{object.author_name}}
    {%endif%} +

    {{object.title|amp|smartypants|widont|safe}}

    - {{object.isbn}}
    - {% if object.rating %}{{object.rating}}stars{%endif%} + {% if object.rating %}{% for i in ratings_range %}{% if i <= object.get_rating%}★{%else%}☆{%endif%}{%endfor%}{%endif%} - Read in: {{object.read_date|date:"F Y"}} -
    {{object.body_html|safe|amp|smartypants|urlizetrunc:45 }}
    + Read in: {{object.read_date|date:"F Y"}}
    -{% endfor %} + {% endfor %}
    +
    {% endblock %} diff --git a/design/templates/details/book.html b/design/templates/details/book.html index 46ac10b..6524885 100644 --- a/design/templates/details/book.html +++ b/design/templates/details/book.html @@ -3,22 +3,24 @@ {%block bodyid%}id="book-page"{%endblock%} {% block primary %}

    {{object.title|smartypants|widont|safe}}

    +
    {{object.title}} cover
    - {{object.title}} cover -
    Meta
    Author
    -
    {{object.author_name}}
    - {% if object.publish_place %}
    Published
    -
    {{object.publish_place}}{%endif%}{%if object.publish_date%}, {{object.publish_date}}
    {%endif%} +
    {{object.author_name}}
    + {% if object.publish_date %}
    Published
    +
    {%if object.publish_place%}{{object.publish_place}}, {%endif%}{{object.publish_date}}
    {%endif%} {% if object.pages %}
    Pages
    {{object.pages}}
    {%endif%} {% if object.isbn %}
    ISBN
    {{object.isbn}}
    {%endif%} + {% if object.isbn %}
    Borrow
    +
    WorldCat
    {%endif%} + {% if object.rating %}
    Rating
    {% for i in ratings_range %}{% if i <= object.get_rating%}★{%else%}☆{%endif%}{%endfor%}
    {%endif%} {% if object.read_in %}
    Read
    {{object.read_in}}
    {%endif%}
    -- cgit v1.2.3-70-g09d2