diff options
| -rw-r--r-- | templates/styles.css | 36 | ||||
| -rw-r--r-- | templates/template-album.tmpl | 20 | ||||
| -rw-r--r-- | templates/template-index.tmpl | 28 |
3 files changed, 53 insertions, 31 deletions
diff --git a/templates/styles.css b/templates/styles.css index 6d14e38..8a303da 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -184,7 +184,13 @@ div.album_thumbs { font-size: 90%; } -a.album_item { +div.album_item { + float: left; + width: 19.9em; + height: 21.4em; +} + +div.album_item a { position: relative; /* CSS positioning sucks */ float: left; width: 19em; @@ -195,22 +201,23 @@ a.album_item { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; background-color: #232729; - margin: 4px; /* Needs to be changed below in a.album_item:hover */ + margin: 1px; /* Needs to be changed below in a.album_item:hover */ border: 1px solid #6b6c69; /* Cannot use em units here otherwise the box will become jumpy */ } -a.album_item:hover { + +div.album_item a:hover { background-color: #32332F; - margin: 3px; /* a.album_item->margin - 1px */ + margin: 0px; /* a.album_item->margin - 1px */ border: 2px solid #A3BED4; } -a.album_item img { +div.album_item img { /* landscape */ padding-top: 2.25em; } -a.album_item img.portrait { +div.album_item img.portrait { /* portrait */ padding-top: 1em; } @@ -264,7 +271,14 @@ div.index_thumbs { font-size: 90%; } -a.index_item { +div.index_item { + float: left; + width: 53.5em; + height: 20em; + margin: 0.7em; +} + +div.index_item a { position: relative; /* CSS positioning sucks */ float: left; width: 53em; @@ -275,19 +289,19 @@ a.index_item { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; background-color: #232729; - margin: 9px; /* Needs to be changed below in a.index_item:hover */ + margin: 1px; /* Needs to be changed below in a.index_item:hover */ border: 1px solid #6b6c69; /* Cannot use em units here otherwise the box will become jumpy */ color: #BABDB6; } -a.index_item:hover { +div.index_item a:hover { background-color: #32332F; - margin: 8px; /* a.index_item->margin - 1px */ + margin: 0px; /* a.index_item->margin - 1px */ border: 2px solid #A3BED4; color: #A3BED4; } -a.index_item img { +div.index_item img { position: absolute; left: 1.4em; top: 1.4em; diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl index 0e5eec3..7123b5a 100644 --- a/templates/template-album.tmpl +++ b/templates/template-album.tmpl @@ -34,16 +34,20 @@ <div class="album_thumbs"> <!-- $(BEGIN_IMG_LIST) --> <!-- $(BEGIN_IMG_LIST_LANDSCAPE) --> - <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->"> - <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /> - <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span> - </a> + <div class="album_item" id="<!-- $(IMG_LIST_ID) -->"> + <a href="<!-- $(IMG_SUBPAGE) -->"> + <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /> + <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span> + </a> + </div> <!-- $(END_IMG_LIST_LANDSCAPE) --> <!-- $(BEGIN_IMG_LIST_PORTRAIT) --> - <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->"> - <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" /> - <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span> - </a> + <div class="album_item" id="<!-- $(IMG_LIST_ID) -->"> + <a href="<!-- $(IMG_SUBPAGE) -->"> + <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" /> + <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span> + </a> + </div> <!-- $(END_IMG_LIST_PORTRAIT) --> <!-- $(BEGIN_LIST_SEPARATOR) --> <div class="separators"> diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl index 0545fe2..22a8ad3 100644 --- a/templates/template-index.tmpl +++ b/templates/template-index.tmpl @@ -34,20 +34,24 @@ <div class="index_thumbs"> <!-- $(BEGIN_IMG_LIST) --> <!-- $(BEGIN_IMG_LIST_LANDSCAPE) --> - <a class="index_item" href="<!-- $(ALBUM_SUBPATH) -->" id="<!-- $(IMG_LIST_ID) -->"> - <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /> - <span class="album_text"><!-- $(IMG_TITLE) --></span><br /> - <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span> - <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span> - </a> + <div class="index_item" id="<!-- $(IMG_LIST_ID) -->"> + <a href="<!-- $(ALBUM_SUBPATH) -->"> + <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /> + <span class="album_text"><!-- $(IMG_TITLE) --></span><br /> + <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span> + <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span> + </a> + </div> <!-- $(END_IMG_LIST_LANDSCAPE) --> <!-- $(BEGIN_IMG_LIST_PORTRAIT) --> - <a class="index_item" href="<!-- $(ALBUM_SUBPATH) -->" id="<!-- $(IMG_LIST_ID) -->"> - <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /> - <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br /> - <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span> - <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span> - </a> + <div class="index_item" id="<!-- $(IMG_LIST_ID) -->"> + <a href="<!-- $(ALBUM_SUBPATH) -->"> + <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /> + <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br /> + <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span> + <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span> + </a> + </div> <!-- $(END_IMG_LIST_PORTRAIT) --> <!-- $(BEGIN_LIST_SEPARATOR) --> <div class="separators"> |