diff --git a/_subcount.scss b/_subcount.scss index d7422928..03757fe0 100644 --- a/_subcount.scss +++ b/_subcount.scss @@ -1,6 +1,6 @@ // Subscriber and current user flavor texts //.titlebox .number:before {content: ""} -.titlebox .number:after {content: " traveling merchants"} +.titlebox .number:after {content: " Trumpets"} //.titlebox .users-online span.number:before {content: ""} -.titlebox .users-online span.number:after {content: " counting Trenni silver coins"} +.titlebox .users-online span.number:after {content: " Auditioning Euphoniums"} diff --git a/images/cf-animated-006.jpg b/images/cf-animated-006.jpg index 17a9e153..768bed0d 100644 Binary files a/images/cf-animated-006.jpg and b/images/cf-animated-006.jpg differ diff --git a/images/cf-animated-038.jpg b/images/cf-animated-038.jpg deleted file mode 100644 index 74e26231..00000000 Binary files a/images/cf-animated-038.jpg and /dev/null differ diff --git a/images/cf-static-038.jpg b/images/cf-static-038.jpg new file mode 100644 index 00000000..55963e34 Binary files /dev/null and b/images/cf-static-038.jpg differ diff --git a/images/cf-static-039.jpg b/images/cf-static-039.jpg index 7ea1560e..c2c91509 100644 Binary files a/images/cf-static-039.jpg and b/images/cf-static-039.jpg differ diff --git a/images/cf-static-046.jpg b/images/cf-static-046.jpg index c1727512..1c170310 100644 Binary files a/images/cf-static-046.jpg and b/images/cf-static-046.jpg differ diff --git a/images/sidebar.png b/images/sidebar.png index d51b31ae..56cf20f2 100644 Binary files a/images/sidebar.png and b/images/sidebar.png differ diff --git a/images/sidebar2.png b/images/sidebar2.png index 0ba779fb..73f50161 100644 Binary files a/images/sidebar2.png and b/images/sidebar2.png differ diff --git a/images/sidebar3.png b/images/sidebar3.png new file mode 100644 index 00000000..11c9fb0a Binary files /dev/null and b/images/sidebar3.png differ diff --git a/src/_commentfaces-animated.scss b/src/_commentfaces-animated.scss index bf5d10f0..e18620aa 100644 --- a/src/_commentfaces-animated.scss +++ b/src/_commentfaces-animated.scss @@ -16,7 +16,9 @@ $animated-comment-faces: ( "headshake": ("height": 104, "width": 184, "from-position": 1893, "to-position": 2725, "frames": 8, "duration": 0.34, "loop": true))), "cf-animated-006": ("items": ("peasants": ("height": 105, "width": 190, "from-position": -2725, "to-position": -3565, "frames": 9, "duration": 1.54, "loop": false), "rerorero": ("height": 105, "width": 191, "from-position": 9340, "to-position": 2725, "frames": 63, "duration": 4.4, "loop": true), - "nuidideverythingright": ("height": 105, "width": 191, "from-position": 2095, "to-position": 2725, "frames": 7, "duration": 0.5, "loop": false))), + "nuidideverythingright": ("height": 105, "width": 191, "from-position": 2095, "to-position": 2725, "frames": 7, "duration": 0.5, "loop": false), + "pigeonbeats": ("height": 121, "width": 191, "from-position": 1649, "to-position": 560, "frames": 9, "duration": 0.5, "loop": true), + "seasonalhype": ("height": 107, "width": 190, "from-position": 538, "to-position": 110, "frames": 4, "duration": 0.25, "loop": true))), "cf-animated-007": ("items": ("curious": ("height": 105, "width": 191, "from-position": -1570, "to-position": -3565, "frames": 20, "duration": 1.6, "loop": false), "budgetsmile": ("height": 105, "width": 190, "from-position": 9235, "to-position": 2725, "frames": 63, "duration": 3.78, "loop": false), "slapbet": ("height": 105, "width": 191, "from-position": 1780, "to-position": 2725, "frames": 9, "duration": 0.72, "loop": true))), @@ -125,6 +127,5 @@ $animated-comment-faces: ( "therethere": ("height": 116, "width": 176, "from-position": 1681, "to-position": 2725, "frames": 9, "duration": 0.72, "loop": true), "breakingnews": ("height": 133, "width": 176, "from-position": 18, "to-position": 949, "frames": 7, "duration": 0.5, "loop": true))), "cf-animated-037": ("items": ("shakeit": ("height": 104, "width": 184, "from-position": 11440, "to-position": 6240, "frames": 50, "duration": 2.08, "loop": true), - "floweryhug": ("height": 104, "width": 184, "from-position": 104, "to-position": 6240, "frames": 60, "duration": 2.5, "loop": false))), - "cf-animated-038": ("items": ("headpat": ("height": 98, "width": 235, "from-position": 9604, "to-position": 0, "frames": 98, "duration": 7.76, "loop": true))) + "floweryhug": ("height": 104, "width": 184, "from-position": 104, "to-position": 6240, "frames": 60, "duration": 2.5, "loop": false))) ); diff --git a/src/_commentfaces-static.scss b/src/_commentfaces-static.scss index a27edf5e..7adb471b 100644 --- a/src/_commentfaces-static.scss +++ b/src/_commentfaces-static.scss @@ -323,7 +323,41 @@ $static-comment-faces: ( "harukathink": ("height": 160, "width": 112, "position": 8139), "kannathumbs": ("height": 162, "width": 150, "position": 8289), "konosubawot4": ("height": 166, "width": 129, "position": 8418))), - 33: ("sprite-sheet": "cf-static-046", "total-width": 5549, "items": ("araragi-1": ("height": 50, "width": 100, "position": 100), + + 33: ("sprite-sheet": "cf-static-038", "total-width": 5023, "items": ( + "aidoru": ("height": 121, "width": 193, "position": 193), + "bgataxmas": ("height": 121, "width": 193, "position": 386), + "bored": ("height": 121, "width": 193, "position": 579), + "brightidea": ("height": 121, "width": 193, "position": 772), + "brothersinarms": ("height": 121, "width": 193, "position": 965), + "chilly": ("height": 121, "width": 121, "position": 1086), + "gorigori": ("height": 121, "width": 193, "position": 1279), + "happycake": ("height": 121, "width": 193, "position": 1472), + "hornyjail": ("height": 121, "width": 193, "position": 1665), + "itsnotfair": ("height": 121, "width": 134, "position": 1799), + "kannainspect": ("height": 121, "width": 135, "position": 1934), + "kanpai": ("height": 121, "width": 193, "position": 2127), + "missingpiece": ("height": 121, "width": 193, "position": 2320), + "myjobhereisdone": ("height": 121, "width": 161, "position": 2481), + "needac": ("height": 121, "width": 193, "position": 2674), + "needit": ("height": 121, "width": 193, "position": 2867), + "notlistening": ("height": 121, "width": 142, "position": 3009), + "objection": ("height": 121, "width": 193, "position": 3202), + "riskyclick": ("height": 121, "width": 193, "position": 3395), + "runningLate": ("height": 121, "width": 174, "position": 3569), + "sakuraconcern": ("height": 121, "width": 173, "position": 3742), + "shhh": ("height": 121, "width": 133, "position": 3875), + "sillyme": ("height": 121, "width": 182, "position": 4057), + "singalong": ("height": 121, "width": 193, "position": 4250), + "stardriving": ("height": 121, "width": 193, "position": 4443), + "tsundereblush": ("height": 121, "width": 193, "position": 4636), + "wakarimasu": ("height": 121, "width": 193, "position": 4829), + "attentivenote": ("height": 131, "width": 79, "position": 4908), + "diy": ("height": 135, "width": 115, "position": 5023) + )), + + 34: ("sprite-sheet": "cf-static-046", "total-width": 6603, "items": ( + "araragi-1": ("height": 50, "width": 100, "position": 100), "yui-crying": ("height": 80, "width": 78, "position": 178), "facepalm": ("height": 80, "width": 80, "position": 258), "gununu": ("height": 80, "width": 107, "position": 365), @@ -358,29 +392,34 @@ $static-comment-faces: ( "sideeyes": ("height": 161, "width": 129, "position": 4382), "konosubawot": ("height": 167, "width": 129, "position": 4511))), - 34: ("sprite-sheet": "cf-static-046", "total-width": 5549, "items": ( + 35: ("sprite-sheet": "cf-static-046", "total-width": 6603, "items": ( "michaelwink": ("height": 137, "width": 189, "position": 4700), "listen": ("height": 115, "width": 204, "position": 4904), "bocchitheshock": ("height": 121, "width": 215, "position": 5119), "angryvampire": ("height": 121, "width": 215, "position": 5334), - "tomboyshades": ("height": 121, "width": 215, "position": 5549))), + "tomboyshades": ("height": 121, "width": 215, "position": 5549), + "trololol": ("height": 121, "width": 215, "position": 5764), + "skyhype": ("height": 121, "width": 215, "position": 5979), + "ohoho": ("height": 121, "width": 215, "position": 6194), + "unamusedfern": ("height": 121, "width": 215, "position": 6409), + "headpat": ("height": 121, "width": 194, "position": 6603))), - 35: ("sprite-sheet": "cf-static-039", "total-width": 3575, "items": ( - "seasonalapproval": ("height": 121, "width": 215, "position": 215), - "seasonalblush": ("height": 121, "width": 215, "position": 430), - "seasonalconfused": ("height": 121, "width": 215, "position": 645), - "seasonaldepression": ("height": 121, "width": 215, "position": 860), - "seasonaldisapproval": ("height": 121, "width": 215, "position": 1075), - "seasonaldisdain": ("height": 121, "width": 215, "position": 1290), - "seasonalfoodie": ("height": 121, "width": 215, "position": 1505), - "seasonalhype": ("height": 121, "width": 215, "position": 1720), - "seasonallaugh": ("height": 121, "width": 215, "position": 1935), - "seasonallisten": ("height": 121, "width": 215, "position": 2150), - "seasonallove": ("height": 121, "width": 215, "position": 2365), - "seasonalneat": ("height": 121, "width": 215, "position": 2580), - "seasonalpout": ("height": 121, "width": 215, "position": 2795), - "seasonalshock": ("height": 121, "width": 215, "position": 3010), - "seasonalthink": ("height": 121, "width": 215, "position": 3225), - "seasonaltired": ("height": 121, "width": 215, "position": 3440), - "seasonalcool": ("height": 135, "width": 135, "position": 3575))) + 36: ("sprite-sheet": "cf-static-039", "total-width": 3561, "items": ( + "seasonalapproval": ("height": 121, "width": 184, "position": 184), + "seasonalblush": ("height": 121, "width": 215, "position": 399), + "seasonalconfused": ("height": 121, "width": 215, "position": 614), + "seasonalcool": ("height": 121, "width": 215, "position": 829), + "seasonaldepression": ("height": 121, "width": 190, "position": 1019), + "seasonaldisapproval": ("height": 121, "width": 215, "position": 1234), + "seasonaldisdain": ("height": 121, "width": 215, "position": 1449), + "seasonalfoodie": ("height": 121, "width": 215, "position": 1664), + "seasonallaugh": ("height": 121, "width": 215, "position": 1879), + "seasonallisten": ("height": 121, "width": 170, "position": 2049), + "seasonallove": ("height": 121, "width": 215, "position": 2264), + "seasonalneat": ("height": 121, "width": 222, "position": 2486), + "seasonalpout": ("height": 121, "width": 215, "position": 2701), + "seasonalsecret": ("height": 121, "width": 215, "position": 2916), + "seasonalshock": ("height": 121, "width": 215, "position": 3131), + "seasonalthink": ("height": 121, "width": 215, "position": 3346), + "seasonaltired": ("height": 121, "width": 215, "position": 3561))) ); diff --git a/src/_sidebar.scss b/src/_sidebar.scss index 480b8081..04aa694a 100644 --- a/src/_sidebar.scss +++ b/src/_sidebar.scss @@ -1,7 +1,3 @@ -// Set both to 300px with 2 images, set $sidebar-image-other-height to 0 with only 1 -$sidebar-image-height: 300px; -$sidebar-image-other-height: 300px; - // Align the search icon better with our search style .side #search input[type="submit"] { margin-left: -25px; diff --git a/src/_sidebarimages.scss b/src/_sidebarimages.scss index 32d04b9e..968b409e 100644 --- a/src/_sidebarimages.scss +++ b/src/_sidebarimages.scss @@ -1,95 +1,107 @@ // Sidebar images -// TODO: some stuff is still hardcoded, also can 100% rewrite this to accept -// an arbitrary number of images -// Leave appropriate room at the top of the sidebar for the -// image + the absolutely-positioned search bar -.side { - @if $sidebar-image-other-height == 0 { - padding-top: - $sidebar-section-margin-vertical + - $sidebar-search-height + - $sidebar-section-margin-vertical + - $sidebar-image-height; - } @else { - padding-top: - $sidebar-section-margin-vertical + - $sidebar-search-height + - $sidebar-section-margin-vertical + - $sidebar-image-height + - $sidebar-section-margin-vertical + - $sidebar-image-other-height; - } -} +/* +$sidebar-images: ( + // Map keys are identifiers used at the end of links in the sidebar markdown + // e.g. this image would use the markdown [](https://example.com#some_img) + "some_img": ( + // The height of the image, in CSS pixels - all images are 300 CSS + // pixels wide. Actual image file dimensions should be doubled for HiDPI + // support, i.e. 600px wide and (2x this value) tall + "height": 300px, + // Reference to the image - make sure you put it in the images folder! + "image": url("images/sidebar.png"), + ), -// Search bar isn't there on search pages, it's moved to #content. Also, on -// search pages, the submit buttons are the first `.spacer`s which means they -// don't have the normal top margin, which means we need to add that back. -.search-page .side { - @if $sidebar-image-other-height == 0 { - padding-top: - $sidebar-section-margin-vertical + - $sidebar-image-height + - $sidebar-section-margin-vertical; - } @else { - padding-top: - $sidebar-section-margin-vertical + - $sidebar-image-height + - $sidebar-section-margin-vertical + - $sidebar-image-other-height + - $sidebar-section-margin-vertical; - } -} + // ... etc for more images +); +*/ -// Position the first image and also set some stuff for both images -.side [href*='#sidebarimg'] { - position: absolute; - top: $header-height + $sidebar-section-margin-vertical + $sidebar-search-height + $sidebar-section-margin-vertical; - right: $sidebar-padding; - width: 300px; - height: $sidebar-image-height; - border-radius: $sidebar-section-border-radius; - background: url("images/sidebar.png") center/contain; +$sidebar-images: ( + "sidebarimg": ( + "height": 300px, + "image": url("images/sidebar.png"), + ), + "sidebarimg2": ( + "height": 300px, + "image": url("images/sidebar2.png"), + ), + "sidebarimg3": ( + "height": 200px, + "image": url("images/sidebar3.png"), + ), +); - // Again, search bar isn't there on search pages - .search-page & { - top: $header-height + $sidebar-section-margin-vertical; - } +// The distance from the top of the page sidebar images need to be positioned - +// this accounts for the height of the header as well as the height of the +// search box and additional margins +$sidebar-content-top: + $header-height + + $sidebar-section-margin-vertical; + +// On most pages, the search bar is displayed above the images, so we need to +// move them down further to accomodate +$sidebar-content-top-with-search: + $sidebar-search-height + + $sidebar-section-margin-vertical + + $sidebar-content-top; + +// Move the search bar to the very top of the sidebar, if it's here +.side #search { + position: absolute; + top: $sidebar-content-top; } -// Position the second image -.side [href*="#sidebarimg2"] { - top: - $header-height + - $sidebar-padding + - $sidebar-search-height + - $sidebar-section-margin-vertical + - $sidebar-image-height + - $sidebar-section-margin-vertical; - height: $sidebar-image-other-height; - background-image: url("images/sidebar2.png"); - background-size: cover; +// Total padding left at the top of the sidebar to make room for the absolutely +// positioned sidebar images - the extra height of each image is added each +// iteration +$images-height-cumulative: 0px; - // rotating sidebar - wouldn't go under 40 seconds since it gets annoying to look at - animation: sidb 33s steps(2, end) infinite; +// Iterate over all images and position them progressively +@each $anchor, $details in $sidebar-images { + // The height of this image + $height: map-get($details, "height"); + // The source of this image + $image: map-get($details, "image"); - // you get the idea - .search-page & { - top: - $header-height + - $sidebar-section-margin-vertical + - $sidebar-image-height + - $sidebar-section-margin-vertical; + // Render this image in the correct location + .side [href*="##{$anchor}"] { + position: absolute; + top: $sidebar-content-top-with-search + $images-height-cumulative; + right: $sidebar-padding; + width: 300px; + height: $height; + border-radius: $sidebar-section-border-radius; + background: $image center/contain; + + // Again, search bar isn't there on search pages + .search-page & { + top: $sidebar-content-top + $images-height-cumulative; + } } -} -// Move the search bar above the images -.side #search { - position: absolute; - top: $header-height + $sidebar-section-margin-vertical; + // Add this image to the cumulative height + $images-height-cumulative: + $images-height-cumulative + $height + $sidebar-section-margin-vertical; } -@keyframes sidb { - from { background-position: 0 0px; } - to { background-position: -600px 0px;} +// Leave appropriate room at the top of the sidebar for all the +// absolutely-positioned images + the search bar +.side { + padding-top: + $sidebar-section-margin-vertical + + $sidebar-search-height + + $images-height-cumulative; + + // no sidebar search bar on search pages - move up + .search-page & { + padding-top: + $images-height-cumulative; + } } + +// old and unused - previously used for a carousel effect with two images +// @keyframes sidb { +// from { background-position: 0 0px; } +// to { background-position: -600px 0px;} +// }