post_dict["category"] = cat
post_dict["word_count"] = utils.word_count (html.unescape (utils.strip_tags (post_dict ["contents"])))
if "auto_paragraphs" in post_dict:
post_dict ["contents"] = utils.auto_paragraphs (post_dict ["contents"])
if cat == 'blog':
post_dict['contents'] += signature
for name,story in long_stories.items():
story["word_count"] = 0
for post_dict in story["pages"]:
story["word_count"] = story["word_count"] + post_dict["word_count"]
css.insert ('''
a.small_story {display: block; padding: 0.8em 0; color: black; text-decoration: none;}
a.small_story h2 {font-weight: bold; color: black;}
a.small_story .blurb {font-size:71%;}
.big_story .index_entry {padding-top: 0.8em; padding-bottom: 0.1em; font-weight: bold; font-size: 100%;}
''')
def stories_index (full):
import blog
import category_pages
def info (story):
words = story["word_count"]
return " [" + (story ["word_count_override"] if "word_count_override" in story else str(((words + 50)//100)*100) + " words") + "]"
def big_story (story):
if story in stories_map:
story = stories_map [story]
story ["listed"] = True
def do_css_for_comic(comic_id):
comic_width = comics_metadata[comic_id]["image_width"]
ancestor_str = 'html.'+comics_metadata[comic_id]["html_class"]
transcript_at_side_width = comic_width + 3*sideways_space + min_transcript_width
transcript_maximized_width = comic_width + 3*sideways_space + max_transcript_width
comics_metadata[comic_id]["transcript_at_side_width"] = transcript_at_side_width
nav_margin = comic_width // 30
navigation_width =comic_width - nav_margin*2
navhalf_wid = (navigation_width ) // 2
navbut_inner_margin = comic_width // 15
navbut_wid = navhalf_wid - navbut_inner_margin*2
css.insert('''
'''+ancestor_str+''' div.comic_and_nav {
width: '''+str(comic_width)+'''px; }
'''+ancestor_str+''' img.comic_image {
width: '''+str(comic_width)+'''px; }
'''+ancestor_str+''' div.comic_nav_bar {
width: 94%;
margin: 0 3%;}
'''+ancestor_str+''' .comic_nav_button_main {
width: '''+str(navbut_wid)+'''px;
margin: 0 auto;}
@media screen and (max-width:'''+str( comic_width - 1) +'''px) {
'''+ancestor_str+''' div.comic_and_nav {
width: 100%; }
'''+ancestor_str+''' img.comic_image {
width: 100%; }
'''+ancestor_str+''' .comic_nav_button_main {
width: '''+str(navbut_wid*100//navhalf_wid )+'''%;}
}
'''+('' if "no_transcript" in comics_metadata[comic_id] else '''
@media screen and (min-width: '''+str(transcript_at_side_width)+'''px) {
'''+ancestor_str+''' div.comic_and_nav {
width: auto;
padding-left: '''+str(sideways_space)+'''px; }
'''+ancestor_str+''' div.comic_image {
padding-bottom: 0;
margin-right: -'''+str(comic_width)+'''px; }
'''+ancestor_str+''' div.comic_nav_bar {
width: '''+str(navigation_width )+'''px;
margin: 0 '''+str(nav_margin )+'''px;}
'''+ancestor_str+''' div.comic_metabar {
width: '''+str(comic_width)+'''px; }
'''+ancestor_str+''' div.comic_annotation_outer {
width: '''+str(comic_width)+'''px; }
'''+ancestor_str+''' div.comic_transcript_outer {
display: inline-block;
vertical-align: top;
width: auto;
margin-left: '''+str(comic_width)+'''px; }
'''+ancestor_str+'''.transcripts_hidden div.comic_and_nav {
width: '''+str((transcript_at_side_width+comic_width)/2)+'''px;
padding-left: '''+str((transcript_at_side_width-comic_width)/2)+'''px; }
'''+ancestor_str+'''.transcripts_hidden div.comic_transcript_outer {
width: '''+str((transcript_at_side_width-comic_width)/2)+'''px; }
}
@media screen and (min-width: '''+str(transcript_maximized_width)+'''px) {
'''+ancestor_str+''' div.comic_and_nav {
width: '''+str(transcript_maximized_width)+'''px; }
'''+ancestor_str+''' div.comic_transcript_outer {
width: '''+str(transcript_maximized_width-comic_width)+'''px; }
}
''')+'''
''')
css.insert('''
div.blog_page_limits {
position: relative;
display: table;
table-layout: fixed;
margin-left:auto; margin-right:auto;
width:'''+str(post_padded_max_width+4*nice_narrow_margin+2*right_bar_padded_width)+'''em; }
div.blog_left_margin {
display: table-cell; }
div.blog_stream {
display: table-cell;
width: '''+str(post_padded_max_width)+'''em; }
div.blog_middle_margin {
display: table-cell;
width: '''+str(nice_narrow_margin)+'''em; }
div.blog_right_bar {
display: table-cell;
vertical-align: top;
width: '''+str(right_bar_padded_width)+'''em; }
div.blog_right_bar_inner {
margin-top: 1.5em;
padding: '''+str(text_padding_width)+'''em;
background-color: '''+metacontent_color_IE8+''';
background-color: '''+metacontent_color+'''; }
div.blog_right_margin {
display: table-cell;
width: '''+str(nice_narrow_margin)+'''em; }
div.stream_media_reference_outer {
margin-top:'''+str(post_vertical_separation)+'''em;
text-align: center; }
div.stream_media_reference_outer + div.stream_media_reference_outer {
margin-top: 0.125em; }
a.stream_media_reference {
display: block;
font-weight: bold;
text-decoration: none;
background-color: '''+metacontent_color_IE8+''';
background-color: '''+metacontent_color+''';
text-align: center;
display: inline-block;
padding:0 0.6em;
border-radius:0.7em;
height: 1.2em;
overflow: hidden;
vertical-align: top; }
a.stream_media_reference img {
width: 8.2em;
vertical-align: top; }
a.stream_media_reference:hover {text-decoration: underline;}
div.post_content_section {
margin-top:'''+str(post_vertical_separation)+'''em;
padding:'''+str(text_padding_width)+'''em;
background-color: white; }
div.skip_to_demoted_sidebar {display: none;
background-color: '''+metacontent_color_IE8+''';
background-color: '''+metacontent_color+''';
margin-top:'''+str(post_vertical_separation)+'''em;
padding:0.6em;
font-weight: bold;
margin-left: 1.5em;
margin-right: 1.5em;
text-align: center;}
@media screen and (max-width: '''+str(post_padded_max_width+4*nice_narrow_margin+2*right_bar_padded_width)+'''em) {
div.blog_page_limits { width: 100%; }
}
@media screen and (max-width: '''+str(post_padded_max_width+3*nice_narrow_margin+right_bar_padded_width)+'''em) {
div.blog_stream { width: auto; }
div.blog_left_margin { width: '''+str(nice_narrow_margin)+'''em; }
div.blog_post h1 { font-size: 200%;}
}
@media screen and (max-width: '''+str(post_padded_min_width+3*nice_narrow_margin+right_bar_padded_width)+'''em) {
div.blog_left_margin { width: auto; }
div.blog_stream { width: '''+str(post_padded_min_width)+'''em; }
}
@media screen and (max-width: '''+str(post_padded_min_width+2*nice_narrow_margin+right_bar_padded_width)+'''em) {
div.blog_left_margin { display: none; }
div.blog_right_margin { width: auto; }
}
@media screen and (max-width: '''+str(post_padded_min_width+1*nice_narrow_margin+right_bar_padded_width)+'''em) {
div.blog_right_margin { display: none; }
div.blog_middle_margin { width: auto; }
}
@media screen and (max-width: '''+str(post_padded_min_width+narrowest_margin+right_bar_padded_width)+'''em) {
div.blog_middle_margin { display: none; }
div.blog_page_limits { display: block; }
div.blog_stream { display: block; width: auto; }
div.blog_right_bar { display: block; width: auto; }
div.post_content_section { padding:'''+str(text_padding_width_narrow)+'''em; }
div.blog_right_bar_inner { padding:'''+str(text_padding_width_narrow)+'''em; }
div.skip_to_demoted_sidebar {display: block;}
}
a.post_title_link { color:black; text-decoration:none; }
div.blog_post h2 {
font-size: 180%;
font-weight: bold;
padding: 0.1em;
padding-left: 1em; }
div.blog_post h3 {
font-size: 140%;
font-weight: bold;
padding: 0.1em;
padding-left: 1em; }
div.blog_post h4 {
font-size: 120%;
font-weight: bold;
padding: 0.1em;
padding-left: 1em; }
div.blog_post p {
text-indent: 2em; }
div.blog_post_metadata_outer {
padding: 0 0.8em;
margin-bottom:'''+str(post_vertical_separation)+'''em; }
div.blog_post_metadata {
font-size: 90%;
padding: 0.75em;
background-color:'''+metacontent_color_IE8+''';
background-color:'''+metacontent_color+'''; }
a.continue_reading {
}
h2.comments_title {
font-size: 200%;
font-weight: bold;
padding-top: 0.2em;
text-align: center; }
div.comment_body_outer {
padding-top:0.5em;
/*padding-left: '''+str(comment_indent_width)+'''em;*/ }
div.user_comment.indent_children>div.comment_hover_box { border-left:0.2em solid #333333;
padding-left:0.4em;
margin-left: '''+str(comment_indent_width-0.6)+'''em; }
div.comment_body {
font-size: 111%;
text-align: left;
background-color: white;
padding:0.5em 0.9em; }
div.comment_header {
padding-bottom: 0.5em; }
span.reply_to_comment {
display: none; }
html.javascript_enabled span.reply_to_comment {
display: inline; }
div.make_reply_box {
padding-left: '''+str(comment_indent_width)+'''em; }
a.direct_comment {
display: none;
font-size: 150%;
font-weight: bold;
padding-top: 0.4em;
text-align: center; }
html.javascript_enabled a.direct_comment {
display: block; }
textarea.make_reply_input {
width: 90%; }
/*div.comments_section:hover>h2.comments_title:not(:hover) {
border-left: '''+comment_hover_border_width+''' solid red;
margin-left: -'''+comment_hover_border_width+''';
border-top-left-radius: 5% 100%; }
div.comment_hover_box:hover>div.whole_comment_hover_marker:not(:hover) {
border-left: '''+comment_hover_border_width+''' solid red;
margin-left: -'''+comment_hover_border_width+'''; }
div.user_comment:hover>div.comment_body_hover_marker {
border-left: '''+comment_hover_border_width+''' solid red;
margin-left: -'''+comment_hover_border_width+'''; }
div.all_comments:hover div.comment_body {
background-color: #dddddd; }
div.user_comment:hover>div.comment_body_hover_marker>*>div.comment_body {
background-color: white;
border: '''+comment_hover_border_width+''' solid red;
margin: -'''+comment_hover_border_width+''';
border-left: '''+str(comment_indent_width)+'''em solid red;
margin-left: -'''+str(comment_indent_width)+'''em; }*/
a:link.blog_end_link { color:yellow; }
a:visited.blog_end_link { color:orange; }
div.blog_end_links_2 {
clear:both;
margin-top:'''+str(post_vertical_separation/4)+'''em;
text-align:center; }
a.blog_end_link.nav {
display: inline-block;
font-size: 200%;
padding: 0.4em 0.2em; }
a.blog_end_link.nav.right {
float:right; }
div.blog_index {
padding: 0.4em 0; }
div.index_entry {
font-size: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
div.blog_right_bar a {
text-decoration: none; }
div.blog_right_bar a:hover {
text-decoration: underline; }
div.index_page_entry {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding-top: 0.8em;
padding-left:0.4em;
padding-bottom:0.1em; }
a.sidebar_standalone_link {
padding: 0.4em 0;
display: block; }
a.random_post {
display: none; }
a.random_post.enabled {
display: block; }
a.Patreon_link,.MailChimp_form {
padding: 0.6em 0.8em;
background-color: white;
border-radius:0.6em;
border:0.15em solid #555;
position: relative;}
.blog_right_bar a.Patreon_link, .blog_right_bar .MailChimp_form {
margin:0.5em -0.65em;}
a.Patreon_link img {
display: inline-block;
margin-right:-2em;
vertical-align: middle;
width:2em; }
a.Patreon_link span {
display: inline-block;
vertical-align: middle;
padding-left:2.4em;}
a.Patreon_link:hover {
background-color:#ff7;
border-color:#442;}
a.Patreon_link:hover span {text-decoration: underline;}
a.blog_Patreon_appeal {
display: block;
padding-top: 0.2em;
padding-bottom: 1.0em;
padding-left: 1.4em;
padding-right: 1.4em;
font-size: 111%;
}
.MailChimp_form input {width: 100%; margin: 0.2em 0;}
.MailChimp_form .button {border: 0 none; border-radius:0.25em; height: 2em; cursor: pointer; transition: all 0.23s ease-in-out 0s; background-color: #777; color: white;}
.MailChimp_form .button:hover {background-color: #444;}
div.transcript_block {border: 1px solid black;}
div.transcript_header {padding:0.5em;}
div.transcript_content {padding:0.5em; border-top:1px dashed black;}
span.inline_quote {background-color:#f0f0f0; color:#404040; border-radius:0.5em; }
div.block_quote_outer {margin:0.9em 0;}
blockquote {padding: 0.25em; background-color:#f0f0f0; color:#404040; margin-left: 2.5em; margin-right: 2.8em; margin-top: 0; margin-bottom: 1em; }
p.reply_input_info { padding-left: 0.5em; }
span.big_quote_mark_outer { width: 2.5em; height: 0; float: left; margin-top: -0.5em; }
span.big_quote_mark_inner { font-size: 5em; color: #d0d0d0; }
div.footnotes { margin-top: 2em; }
a.footnote_link { color: black; }
.scrutiny { background-color: #c0ffff; color: black; text-decoration: underline; }
.skepticism { background-color: #ffc0c0; }
html.restricted_user .hidden_from_restricted_users {display: none;}
''')
css.insert('''
html.voldemorts_children div.comic_archive {
color: #'''+arrow_color_bright+'''; }
html.voldemorts_children a.comic_archive_entry {
border: 1px solid transparent; }
html.voldemorts_children a.comic_archive_entry:hover {
border-color: #ddaa00; }
html.voldemorts_children div.comic_content_warning_text {
color: white; }
html.voldemorts_children .meta_controls_coloring {
color: #e09d00; }
html.voldemorts_children .comic_metabar {
color: #ccc19a; }
html.voldemorts_children .metabar_content_warnings_enabled {
color: #fff1c0; }
html.voldemorts_children .metabar_content_warnings_enabled.content_warning {
color: #'''+active_cw_color+'''; }
html.voldemorts_children .metabar_content_warnings_disabled {
color: #989073; }
html.voldemorts_children img.comic_nav_button_main {
background-color: #'''+arrow_color_dull+''';
border-color: black; }
html.voldemorts_children div.comic_nav_button:hover img.comic_nav_button_main {
background-color: #'''+arrow_color_bright+''';
border-color: black; }
html.voldemorts_children img.comic_nav_button_main.content_warning { background-color: #'''+active_cw_color_dull+'''; }
html.voldemorts_children div.comic_nav_button:hover img.comic_nav_button_main.content_warning { background-color: #'''+active_cw_color +'''; }
html.voldemorts_children.content_warnings_disabled img.comic_nav_button_main.content_warning { background-color: #'''+arrow_color_dull +'''; }
html.voldemorts_children.content_warnings_disabled div.comic_nav_button:hover img.comic_nav_button_main.content_warning { background-color: #'''+arrow_color_bright +'''; }
html.voldemorts_children .comic_nav_content_warning {
color: #'''+active_cw_color+'''; }
html.voldemorts_children div.comic_nav_button:hover .comic_nav_content_warning {
color: #'''+active_cw_color+'''; }
html.voldemorts_children div.comic_transcript_inner {
/*border: 1px dashed white;*/
color: #ccc19a; }
html.voldemorts_children div.comic_transcript_inner a {
color: #e09d00; }
html.voldemorts_children .post_content_section {
background-color: #cccccc }
html.voldemorts_children .comment_body {
background-color: #cccccc }
html.voldemorts_children span.big_quote_mark_inner {color: #f0f0f0;}
/*html.voldemorts_children div.all_comments:hover div.comment_body {
background-color: #aaaaaa; }
html.voldemorts_children div.user_comment:hover>div.comment_body_hover_marker>*>div.comment_body {
background-color: #cccccc; }*/
html.voldemorts_children .blog_post_metadata {
background-color: rgba(204,204,204,.7) }
html.voldemorts_children .MailChimp_form {
background-color: black;
border-color: #'''+arrow_color_dull+''';
color: #'''+ arrow_color_bright +''';
}
html.voldemorts_children .MailChimp_form .email {
border-color: #'''+arrow_color_bright +''';
background-color: black; color: white;}
html.voldemorts_children .MailChimp_form .button {
background-color:#'''+arrow_color_dull+''';}
html.voldemorts_children .MailChimp_form .button:hover {
background-color:#'''+arrow_color_bright +''';}
''')
css.insert('''
div.comic_content_warning_box {
height: 100%; }
html.content_warnings_disabled div.comic_content_warning_box {
height: auto; }
html.content_warning_dismissed div.comic_content_warning_box {
height: auto; }
div.comic_content_warning_text {
margin: 0 auto;
padding: 6.5em 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center; }
.content_warnings_disabled div.comic_content_warning_text {
display: none; }
.content_warning_dismissed div.comic_content_warning_text {
display: none; }
div.comic_content_warning_main_text {
font-size: 120%;
margin: 0 auto;
max-width: 35em;
border: 3px solid white;
border-radius: 2em; }
div.comic_content_warning_details {
margin: 0 auto;
max-width: 35em; }
a.dismiss_content_warning {
display: block;
font-size: 200%;
margin-top: 0.6em;
padding: 0.15em;
font-weight: bold; }
.metabar_content_warnings_disabled {
display: none; }
html.content_warnings_disabled .metabar_content_warnings_disabled {
display: inline; }
html.content_warnings_disabled .metabar_content_warnings_enabled {
display: none; }
a.comic_disable_content_warnings {
font-family: Arial, Helvetica, sans-serif;
display: block;
padding: 0.5em; }
html.content_warnings_disabled a.comic_disable_content_warnings {
display: none; }
div.comic_box_after_content_warning {
position: relative; }
.remove_if_content_warnings_enabled {
display: none; }
html.content_warnings_disabled .remove_if_content_warnings_enabled {
display: block; }
html.content_warnings_disabled .remove_if_content_warnings_disabled {
display: none; }
div.comic_and_nav {
margin: 2em auto; }
div.comic_image {
padding-bottom: 3em;
display: inline-block; }
div.comic_transcript_inner {
padding: 0 '''+str(sideways_space)+'''px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold; }
div.comic_transcript_label {
padding-bottom: 1.1em; }
.show_comic_transcript_button {
display: none; }
.transcripts_hidden .show_comic_transcript_button {
display: inline; }
.transcripts_hidden .hide_comic_transcript_button {
display: none; }
.transcripts_hidden div.comic_transcript_box { min-height: 0; }
.transcripts_hidden p.comic_transcript_line { display: none; }
p.comic_transcript_line {
margin: 0;
padding-bottom: 0.9em;
line-height: 1.2em; }
div.comic_annotation {
max-width: 36.75em;
margin: 3em auto;
}
div.comic_nav_bar {
font-family: Arial, Helvetica, sans-serif; }
div.comic_nav_button {
position: relative;
display: inline-block;
text-align: center;
vertical-align: top;
width: 50%; }
div.comic_nav_button a {
display: block; }
div.comic_nav_button.content_warning { margin-bottom: 3em; }
html.content_warnings_disabled div.comic_nav_button.content_warning { margin-bottom: 0; }
.comic_nav_button_main {
display: block;
border-style: solid;
border-color: transparent;
border-top-width: 40px;
border-bottom-width: 40px;
}
span.comic_nav_button_main {
font-size: 300%;
font-weight: bold; }
span.comic_nav_content_warning {
position: absolute;
left: 9%;
right: 9%;
top: 100%;
margin-top: -34px;
font-family: Arial, Helvetica, sans-serif;
font-size: 110%; }
.content_warnings_disabled span.comic_nav_content_warning {
display: none; }
img.small_inline_image {height:1em; width: auto;}
.complete_comic {font-size: 140%; font-weight: bold;
border-style: solid; border-color: transparent; border-top-width: 59px;}
div.comic_metabar {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0.5em 0;
text-align: center; }
div.comic_archive {
text-align: center; }
div.comic_archive h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
padding: 0.2em; }
div.comic_archive p {
padding-left: 5%;
padding-right: 5%; }
div.comic_archive h2 {
font-size: 200%;
padding: 0.2em; }
div.comic_archive_chapter {
padding: 1em 0; }
a.comic_archive_entry {
display: inline-block; }
div.hidden_cw_box {
border: 1px dashed black;
padding: 0.5em; }
html.content_warnings_disabled div.hidden_cw_box.secondary {
display: none; }
html.hidden_cws_revealed div.hidden_cw_box.secondary {
display: block; }
a.reveal_cw_button, .fake_reveal_warning_button {
font-size: 150%;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display:none; }
html.content_warnings_disabled a.reveal_cw_button { display:block; }
html.content_warnings_disabled div.hidden_cws { display:none; }
''')
#!/usr/bin/python
# -*- coding: utf-8 -*-
from __future__ import division
import re
import html
import css
import html_pages
css.insert('''
span.inline_separator {
margin: 0 0.3em; }
''')
inline_separator = '<span class="inline_separator"> · </span>'
canonical_scheme_and_domain = 'https://www.elidupree.com'
def background_image (name ='colorful-background.jpg'):
return '<div><img role="presentation" alt="" class="background" src="/media/' + name + '?rr" /></div>'
def capitalize_string(string):
if len(string) == 0:
return string
return string[0].upper()+string[1:]
def strip_tags(string):
return re.sub(r"<.+?>","",string)
css.insert('''
div.bars_outer_box {
min-height: 100%;
position: relative;
}
div.bars_inner_box {
padding-bottom: 5em;
}
@media screen and (max-width: 30em) {
div.bars_inner_box { padding-bottom: 6em; } }
@media screen and (max-width: 20em) {
div.bars_inner_box { padding-bottom: 7em; } }
@media screen and (max-width: 14em) {
div.bars_inner_box { padding-bottom: 8em; } }
@media screen and (max-width: 13em) {
div.bars_inner_box { padding-bottom: 9em; } }
@media screen and (max-width: 12em) {
div.bars_inner_box { padding-bottom: 10em; } }
div.bottom_bar {
position: absolute;
bottom: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background-color: black;
background-image: url("/media/top-bar-background.png?rr");
background-size: 100% 100%; }
.voldemorts_children div.bottom_bar {
background-image: url("/media/top-bar-background-vc.png?rr"); }
div.bottom_bar_inner {
padding: 0.25em;
}
.bottom_bar_short {
white-space: nowrap; }
address.eli_exmxaxixl {
display: inline;
font-style: normal; }
div.home_page_outer span.top_bar_category.games {
background-image: url("/media/green-caves-screenshot.png?rr");
background-size: 24em 24em;
background-position: center center;}
div.home_page_outer span.top_bar_category.comics {
background-image: url("/media/comics-thumbnail.png?rr");
background-size: auto;
background-position: center center;}
div.home_page_buffer {
position: relative;
height: 50%; }
div.home_page_outer {
position: relative;
font-family: Arial, Helvetica, sans-serif;
margin-top: -'''+str(home_page_contents_height/2)+'''em;
height: '''+str(home_page_contents_height)+'''em;
max-width: '''+str(top_bar.categories_get_squished_width)+'''em;
margin-left: auto;
margin-right: auto; }
div.home_page_categories {
margin-left:auto; margin-right:auto;
max-width:'''+str(top_bar.all_categories_width)+'''em; }
div.home_page_bottom {
margin-top: 0.5em;
height: 4.5em;
text-align: center; }
div.home_page_outer span.top_bar_category {
height: '''+str(home_page_category_height)+'''em;
background-size: 100% 100%; }
div.home_page_outer span.top_bar_category_text {
font-size: 160%; }
div.home_page_buffer div.top_bar_home {
top: 50%;
margin-top: -'''+str(4+home_page_contents_height/4)+'''em;
width: 100%; }
div.home_page_buffer img.top_bar_home_image {
display: block;
margin: 0 auto;
width:'''+str(top_bar.home_image_width*2)+'''em; height:'''+str(top_bar.bar_height*2)+'''em; }
div.home_page_buffer span.top_bar_home_text {
width: 100%;
text-align: center;
font-size: 150%;
padding: 0; }
div.home_page_outer h2 {color: #776;font-size: 150%; font-weight: bold; margin-bottom: -0.2em;}
div.home_page_recent_updates {display: inline-block; font-size: 75%; background-color:#ffc; padding: 0.7em;border-radius:1.3em; margin-top:4em;}
div.home_page_outer div.stream_media_reference_outer {text-align: left; }
div.home_page_outer a.stream_media_reference {text-align: left; background-color: transparent; font-weight: normal;}
.feed_icon_14x14 {width:14px; height:14px;}
@media screen and (max-height: 34em) {
div.home_page_buffer div.top_bar_home {
top: 100%;
margin-top: -'''+str(34/4 + 4+home_page_contents_height/4)+'''em; }
div.home_page_buffer {
height: 17em; }
}
@media screen and (max-height: 26em) {
div.home_page_buffer {
position: absolute;
height: 100%; }
div.home_page_outer {
position: absolute;
bottom: 0; }
div.home_page_buffer div.top_bar_home {
position: relative;
top: 0;
margin-top: 0.3em; }
div.home_page_buffer img.top_bar_home_image {
display: inline-block;
padding-left: 0.8em; }
div.home_page_buffer span.top_bar_home_text {
padding-left: 0.8em;
width: inherit; }
}
@media screen and (max-height: 19.2em) {
div.home_page_buffer div.top_bar_home {
display: none; }
}
@media screen and (min-height: 20.8em) and (max-height: 26em) and (max-width: 19em) {
div.home_page_buffer span.top_bar_home_text {
width: 6em;
text-align: left; }
}
@media screen and (max-height: 20.8em) and (max-width: 19em) {
div.home_page_buffer img.top_bar_home_image {
display: none; }
}
@media screen and (max-width: 15.5em) {
div.home_page_buffer img.top_bar_home_image {
display: none; }
}
@media screen and (max-width: '''+str(top_bar.categories_get_squished_width)+'''em) {
div.home_page_categories {
margin-left:'''+str(100 * top_bar.category_border_width / top_bar.categories_get_squished_width)+'''%; }
div.home_page_outer span.top_bar_category_text {
width: 100%;
border-top-left-radius:0;
border-bottom-left-radius:'''+str(top_bar.button_border_radius)+'''em; }
}
@media screen and (max-width: 28em) {
div.home_page_outer span.top_bar_category_text {
font-size: 120%;
font-size: 5.6vw; }
div.home_page_bottom_inner {
font-size: 80%;
font-size: 4vw; }
}
@media screen and (min-height: '''+str(home_page_contents_height)+'''em) {
div.home_page_outer div.bars_inner_box {
padding-bottom: 0; }
}
@media screen and (max-height: '''+str(home_page_contents_height)+'''em) {
div.home_page_buffer {
display: none; }
div.home_page_outer {
margin-top: 0;
height: 100%;
width: 100%; }
div.home_page_categories {
position: absolute;
top: 0;
bottom: 5em;
right: 0;
left: 0; }
div.home_page_outer a.top_bar_category_link {
height: 100%; }
div.home_page_outer span.top_bar_category {
height: 100%; }
div.home_page_bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0; }
}
''')
#!/usr/bin/python
# -*- coding: utf-8 -*-
from __future__ import division
import css
css.insert('''
html.acobs div.bars_outer_box {
background-color: #909090 /*#a00000*/; }
html.acobs div.comic_content_warning_text {
color: black; }
html.acobs .meta_controls_coloring {
color: blue; }
html.acobs div.comic_toggle_content_warnings {
color: black; }
html.acobs div.comic_transcript_inner {
color: black; }
''')
#!/usr/bin/python
# -*- coding: utf-8 -*-
from __future__ import division
import css
css.insert('''
html.paws div.bars_outer_box {
background-color: #ffffff; }
html.paws div.comic_content_warning_text {
color: black; }
html.paws .meta_controls_coloring {
color: #55f; }
html.paws .comic_metabar {color:#555;}
html.paws div.comic_toggle_content_warnings {
color: black; }
html.paws div.comic_transcript_inner {
color: black; }
html.paws .complete_comic {color:#999;}
''')
css.insert('''
div.top_bar {
position: relative;
display: inline-block;
width: 100%; min-height:'''+str(bar_height)+'''em;
font-family: Arial, Helvetica, sans-serif;
background-color: black;
background-image: url("/media/top-bar-background.png?rr");
background-size: 100% 100%; }
.voldemorts_children div.top_bar {
background-image: url("/media/top-bar-background-vc.png?rr"); }
div.top_bar_home {
position:absolute;
width:'''+str(home_width)+'''em; height:'''+str(bar_height)+'''em; }
img.top_bar_home_image {
vertical-align:top;
display:inline-block;
width:'''+str(home_image_width)+'''em; height:'''+str(bar_height)+'''em;
padding:0 '''+str(home_image_padding_on_each_side)+'''em }
span.top_bar_home_text {
padding: 0.25em 0em;
display:inline-block;
width:'''+str(home_text_width_twolines - 1)+'''em; height:'''+str(bar_height - 0.5)+'''em;
color:black; }
div.top_bar_categories {
margin-left:auto; margin-right:auto;
max-width:'''+str(all_categories_width)+'''em;
background-color: transparent; }
a.top_bar_category_link {
display:inline-block;
border-top:''' +str(category_border_width / 2)+'''em solid transparent;
border-bottom: '''+str(category_border_width / 2)+'''em solid transparent;
border-right:'''+str(category_border_width)+'''em solid transparent; }
a.top_bar_category_link.far_right {
border-right:0; }
a:link.top_bar_category_link{ color:yellow }
a:visited.top_bar_category_link{ color:orange }
.voldemorts_children a:link.top_bar_category_link{ color:#b3921c }
.voldemorts_children a:visited.top_bar_category_link{ color:#9a5419 }
span.top_bar_category {
position:relative; display:inline-block;
width:'''+str(category_button_width)+'''em; height:'''+str(category_button_height)+'''em;
text-align:center;
background-color: #444444;
border-radius:'''+str(button_border_radius)+'''em;
vertical-align: bottom; } /* since it's an inline-block, we need this to stop it from creating a gutter for potential descenders */
span.top_bar_category.games {
background-image: url("/media/green-caves-thumbnail.png?rr");
background-size:'''+str(category_button_width)+'''em '''+str(category_button_height)+'''em; }
span.top_bar_category.stories {
background-image: url("/media/NWIA_thumbnail.png?rr");
background-size:'''+str(category_button_width)+'''em '''+str(category_button_height)+'''em; }
span.top_bar_category.comics {
background-image: url("'''+comics.last_comic_thumbnail_url()+'''");
background-size:'''+str(category_button_width)+'''em '''+str(category_button_height)+'''em; }
span.top_bar_category.misc {
background-image: url("/media/voice-practice-tool-screenshot.png?rr");
background-size:'''+str(category_button_width)+'''em '''+str(category_button_height)+'''em; }
span.top_bar_category_text {
position:absolute; display:block;
bottom:0; right:0; width:'''+str(category_text_width_modified_ems)+'''em;
background-color:black;
border-bottom-right-radius:'''+str(button_border_radius)+'''em;
border-top-left-radius:'''+str(button_border_radius)+'''em;
font-size:120%; font-weight:bold; text-decoration:underline; }
span.top_bar_blog_preview_text {
border-radius:'''+str(button_border_radius)+'''em;
display:block;
height: 100%;
width: 100%;
padding: 0.1em 0.25em;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight:bold;
overflow: hidden;
text-align: left;
background-color: #ddb;
border-top: 0.25em solid #886;
border-left: 0.25em solid #886;
color: #886; }
.voldemorts_children span.top_bar_blog_preview_text {
background-color: #777060;
border-top: 0.25em solid #432;
border-left: 0.25em solid #432;
color: #432;
}
@media screen and (max-width: '''+str(categories_hit_home_width)+'''em) {
div.top_bar_categories {
margin-left:'''+str(home_width)+'''em; margin-right:auto;
}
}
@media screen and (max-width: '''+str(categories_hit_right_width)+'''em) {
div.top_bar_categories {
margin-left:auto; margin-right:'''+str(category_border_width)+'''em;
}
div.top_bar_home {
width: '''+str(home_image_padded_width)+'''em; }
span.top_bar_home_text {
display: none; }
}
@media screen and (max-width: '''+str(categories_hit_home_image_width)+'''em) {
img.top_bar_home_image {
width:'''+str(home_image_width/2)+'''em; height:'''+str(bar_height/2)+'''em;
padding:'''+str(bar_height/4)+'''em '''+str(home_image_padding_on_each_side/2)+'''em }
}
@media screen and (max-width: '''+str(categories_get_squished_width)+'''em) {
div.top_bar_categories {
margin-left:'''+str(home_image_padded_width/2)+'''em;
margin-right:0;
max-width:none; }
a.top_bar_category_link {
width:'''+str(100 / (num_categories))+'''%;
border-right:0 }
span.top_bar_category {
width:'''+str(100 * category_button_width / (category_button_width + category_border_width))+'''%; }
}
@media screen and (max-width: '''+str(categories_get_very_squished_width)+'''em) {
span.top_bar_category_text {
font-size: 100%;
font-size: '''+ str(24/num_categories) +'''vw;
width: 100%;
border-top-left-radius:0;
border-bottom-left-radius:'''+str(button_border_radius)+'''em;
}
}
''')
css.insert('''
div.category_page_bottom { clear:both; }
a.exhibit, div.exhibit {
display: block;
clear:both;
background: white;
background: rgba(255,255,255,0.9);
margin: 3em 1em;
margin-top: 7em;
text-align: center;
text-decoration: none; }
.exhibit.no_image {margin-top:4em;}
a.exhibit.fadeout {
position: relative;
overflow: hidden; }
a.exhibit.fadeout:link { color:#4488ff; }
a.exhibit.fadeout:visited { color:#aa33ff; }
img.exhibit_fadeout {
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0; }
div.exhibit_blurb {
position: relative;
padding: 0.5em;
color: black;
font-size: 140%; }
div.exhibit_blurb>h1 {
font-size: 180%;
font-weight: bold; }
div.exhibit_start_reading {
position: relative;
display: block;
padding-bottom: 0.6em;
padding-top: 0.2em;
font-size: 250%;
white-space: nowrap;
text-decoration: underline; }
a.exhibit.fadeout>div.exhibit_start_reading {
margin-top: -2em; }
.exhibit p {margin: 0 0; padding:0.3em 0;}
img.exhibit {
display: block;
position: relative;
z-index: 1;
padding: 1em;
background-color: rgba(255,255,255,0.3);
margin-top: -6em;
margin-bottom: 2em; }
img.exhibit.left {
margin-left: 2em;
float: left; }
img.exhibit.right {
margin-right: 2em;
float: right; }
img.exhibit.vc {
width: 300px;
height: 400px;
border-radius: 2em 8em; }
img.exhibit.paws {
border-radius: 1.5em 1.5em; }
img.exhibit.acobs {
border-radius: 1.5em 1.5em;
margin-left: 1em; }
img.exhibit.nwia {
width: 20em;
height: 10em;
margin-top: -3em;
border-radius: 2em 4em; }
img.exhibit.generic.left {
width: 300px;
height: 300px;
border-radius: 2em 8em; }
img.exhibit.generic.right {
width: 300px;
height: 300px;
border-radius: 8em 2em; }
@media screen and (max-width: 45em) {
a.exhibit, div.exhibit {
margin-bottom: 2em;
margin-left: 0;
margin-right: 0; }
img.exhibit {
padding: 0.8em;
margin-bottom: 1em; }
img.exhibit.left { margin-left: 0; }
img.exhibit.right { margin-right: 0; }
div.exhibit_start_reading {
font-size: 200%; }
}
@media screen and (max-width: 33em) {
img.exhibit { padding: 0.5em; margin: -0.5em; }
img.exhibit.left { display: inline; float: none; margin: 0; }
img.exhibit.right { display: inline; float: none; margin: 0; }
a.exhibit, div.exhibit { margin-top: 2em; }
}
@media screen and (max-width: 25em) {
img.exhibit.left { width: 95%; height: auto; }
img.exhibit.right { width: 95%; height: auto; }
}
span.title { font-style: italic; }
.orphaned_page_link {display: block}
.fake_warning_link {font-size: 71%; margin:0.4em 0; position: relative; z-index: 0;}
.fake_reveal_warning_button {color: blue; text-decoration: underline;}
html.javascript_enabled .fake_warning_link {display: inline-block;}
html.javascript_enabled .fake_reveal_warning_button {display: block;}
html.javascript_enabled .comic_warnings_list {display: none;}
.debug {display: none;}
html.debug_mode .debug {display: block; display: initial;}
html.debug_mode .not_debug {display: none;}
''')
blurb = "A collection of drawings I did for a studio art class."
blurb_big = '''<p>In AP Studio Art, each student makes a portfolio of 24 drawings. 12 are "breadth" drawings, where you try to show your expertise with as many different materials and subjects as you can. The other 12 are "concentration" drawings. You pick a single concept to focus on, and make 12 drawings exploring that theme, whatever it is.</p>
<p>For my concentration, I chose "bringing meaning to empty spaces". I felt like it would help me learn the craft of arranging an image on a page – so that I could draw attention to a space and make it meaningful, even if there was nothing there.</p>
<p>Click on each image to get a closer view, and see my notes on each one.</p>'''
css.insert('''
html.studio_art div.comic_image {padding-bottom: 0;}
html.studio_art div.bars_outer_box {
background-color: #dddddd; }
html.studio_art div.comic_content_warning_text {
color: black; }
html.studio_art .meta_controls_coloring {
color: #55f; }
html.studio_art .comic_metabar {color:#555;}
html.studio_art div.comic_toggle_content_warnings {
color: black; }
html.studio_art div.comic_transcript_inner {
color: black; }
html.studio_art .complete_comic {color:#999;}
''')
pages = [
{"source": "postage_stamp.jpg", "chapter_start": "Breadth", "annotation":'''Pencil on paper. This is a self-portrait as a postage stamp, at the actual size of a postage stamp, drawn on an actual envelope.
I used a mechanical pencil for this, as I do for almost all my pencil drawings. When I draw with mechanical pencil, I alternate drawing with scribbling at an angle on a piece of scrap paper, to wear down the lead in a specific pattern. One side of the lead becomes a wide flat surface, suitable for shading. The other side becomes a very fine point. This fine point was what I used to make the tiny, precise lines of this drawing.'''},
{"source": "fiery_stuff.jpg", "annotation":'''Oil pastel on black paper, if I remember right. (I have the original artwork stored somewhere in my house, but I'm only looking at the digital versions as I write this.)
