new chameleon; alien sword smears; website updates

This commit is contained in:
frank 2022-02-22 22:34:00 -05:00
parent ee8ef6e1d1
commit 0526507649
83 changed files with 751 additions and 301 deletions

1
.gitignore vendored
View File

@ -8,3 +8,4 @@ venv/
lib/fonts
favicon.ico
scrapeboard_new.webm
Scrapeboard_Gameplay_Demo_picture_in_picture.webp

120
NS.py
View File

@ -1,13 +1,14 @@
# -*- coding: utf-8 -*-
#
# Scrapeboard is an arcade game in development by Frank DeMarco (@diskmem) and Blake Andrews (@snakesandrews).
# It requires custom hardware to play, but it can be tested in keyboard mode with just the code in this
# repository. For more information on setting up and running the game, see the README. For more information
# on the game in general, visit https://scrape.nugget.fun
# [SCRAPEBOARD] is an arcade game in development by [@diskmem] and [@snakesandrews]
#
# It requires custom hardware to play but can be tested in keyboard mode without the hardware.
# For more information on setting up and running the game, see the README, or for the game in
# general, visit https://scrape.nugget.fun/
#
import argparse
import argparse, pathlib
from random import randint, choice, random
from math import pi
from copy import copy
@ -42,15 +43,19 @@ from lib.pgfw.pgfw.gfx_extension import aa_filled_polygon
class NS(Game, Animation):
"""
The main game object for Scrapeboard. It initializes and manages most of the other game objects that only have a single
object like the title screen, boss manager, platform, dialog manager, screen wipe manager, main character, and more (see
the objects initialized in __init__). It initializes and manages the serial input from the Arduino, and it listens for and
responds to keyboard input. Its update method is called once per frame by the PGFW code. In its update method it calls the
update methods of its child objects.
The main game object. It initializes and updates the title screen, boss manager, platform, dialog manager, screen wipe manager,
main character, and more (see the objects initialized in __init__). It initializes and watches the Arduino serial port and
listens for and responds to keyboard input.
"""
# Class variables that can be used to represent each of the four game pads. The L stands for "light", and the directions
# indicate which pad is being identified.
LNW, LNE, LSE, LSW = range(4)
# Class variables that can be used to represent each of the six possible orientations of the board on the four pads: the
# four sides of the square and the two diagonals.
N, NE, E, NW, S, W = range(6)
FRONT_WIDTH = 230
BACK_WIDTH = 500
LENGTH = 150
@ -1318,27 +1323,27 @@ class Chemtrails(Sprite):
else:
self.hide()
if edge == NS.N:
self.location.center = ds.get_width() / 2, NS.FRONT + 15 + dy
self.location.center = ds.get_width() / 2, NS.FRONT + dy
self.orientation = NS.N
elif edge == NS.E:
self.location.center = ds.get_width() / 2 + NS.FRONT_WIDTH / 2 - 115, \
NS.FRONT + NS.LENGTH * NS.STEP - 75 + dy
self.location.center = ds.get_width() / 2 + NS.FRONT_WIDTH / 2 - 85, \
NS.FRONT + NS.LENGTH * NS.STEP - 30 + dy
self.orientation = NS.E
elif edge == NS.S:
self.location.center = ds.get_width() / 2, \
NS.FRONT + NS.LENGTH - NS.LENGTH * NS.STEP - 110 + dy
NS.FRONT + NS.LENGTH - NS.LENGTH * NS.STEP - 50 + dy
self.orientation = NS.S
elif edge == NS.W:
self.location.center = ds.get_width() / 2 - NS.FRONT_WIDTH / 2 + 100, \
NS.FRONT + NS.LENGTH * NS.STEP - 85 + dy
self.location.center = ds.get_width() / 2 - NS.FRONT_WIDTH / 2 + 90, \
NS.FRONT + NS.LENGTH * NS.STEP - 30 + dy
self.orientation = NS.W
elif edge == NS.NW:
self.location.center = ds.get_width() / 2 + 5, \
NS.FRONT + NS.LENGTH * NS.STEP - 75 + dy
self.location.center = ds.get_width() / 2 - 15, \
NS.FRONT + NS.LENGTH * NS.STEP + dy - 45
self.orientation = NS.NW
elif edge == NS.NE:
self.location.center = ds.get_width() / 2 + 10, \
NS.FRONT + NS.LENGTH * NS.STEP - 80 + dy
self.location.center = ds.get_width() / 2 + 5, \
NS.FRONT + NS.LENGTH * NS.STEP - 45 + dy
self.orientation = NS.NE
else:
self.orientation = None
@ -1405,6 +1410,7 @@ class Boss(Animation):
animations that control attacks, effects, and dialog.
"""
Animation.__init__(self, parent)
hue_shift = 30
if self.get_configuration("display", "effects"):
self.kool_man = RainbowSprite(self, load(self.get_resource("Kool_man_waah.png")).convert_alpha(), hue_shift)
self.spoopy = RainbowSprite(self, load(self.get_resource("Spoopy.png")).convert_alpha(), hue_shift)
@ -1422,6 +1428,7 @@ class Boss(Animation):
self.register(self.brandish, self.cancel_flash, self.show_introduction_dialogue,
self.show_end_dialogue, self.end_dialogue)
self.kool_man.add_frameset([0], name="normal", switch=True)
# Set alien's normal frameset to an idle animation
self.visitor.add_frameset(list(range(0, len(self.visitor.frames))), name="normal", switch=True)
self.spoopy.add_frameset([0], name="normal", switch=True)
self.kool_man_avatar = load(self.get_resource("Kool_man_avatar.png")).convert()
@ -1433,6 +1440,58 @@ class Boss(Animation):
self.backgrounds[1].load_from_path(self.get_resource("bg/bg002.png"))
self.backgrounds[2].load_from_path(self.get_resource("bg/bg003.png"))
self.countdown = Countdown(self)
# Set the alien's arm to its own sprite
self.alien_arm = Sprite(self, 42)
# Map the strings used to indicate direction in the animations directory to the IDs defined in the script
name_map = {
"U": NS.N,
"DR": NS.NE,
"R": NS.E,
"DL": NS.NW,
"D": NS.S,
"L": NS.W,
}
# Set static frames for alien arms, one for each of the 6 board orientations
root = pathlib.Path(self.get_resource("alienAnimations/alienArms/Moving"))
static_arm_frame_map = {
"UtoDR/*05.png": NS.N,
"UtoDR/*10.png": NS.NE,
"RtoDL/*05.png": NS.E,
"RtoDL/*10.png": NS.NW,
"DtoL/*05.png": NS.S,
"DtoL/*10.png": NS.W
}
orientation_frame_indices = {}
for path, orientation in static_arm_frame_map.items():
self.alien_arm.load_from_path(list(root.glob(path))[0], True)
frame_index = len(self.alien_arm.frames) - 1
self.alien_arm.add_frameset([frame_index], name=str(orientation))
orientation_frame_indices[orientation] = frame_index
# Add sword smear animations to the alien's arm, one for each of the 30 possible combinations of 6 board orientations
for directory in pathlib.Path(self.get_resource("alienAnimations/alienArms/Moving")).iterdir():
if directory.is_dir():
frame_paths = list(sorted(directory.iterdir()))
# Extract board orientation IDs from the directory name
orientation_1, orientation_2 = [name_map[orientation] for orientation in directory.name.split("to")]
# Alien arm sprite frame indices for each orientation
frame_index_orientation_1 = orientation_frame_indices[orientation_1]
frame_index_orientation_2 = orientation_frame_indices[orientation_2]
# Add orientation_1 -> orientation_2 animation
frame_order = [frame_index_orientation_1]
for path in frame_paths[5:9]:
self.alien_arm.load_from_path(path, True)
frame_order.append(len(self.alien_arm.frames) - 1)
frame_order.append(frame_index_orientation_2)
self.alien_arm.add_frameset(frame_order, name=f"{orientation_1}_{orientation_2}")
# Add orientation_2 -> orientation_1 animation
frame_order = [frame_index_orientation_2]
for path in frame_paths[0:4]:
self.alien_arm.load_from_path(path, True)
frame_order.append(len(self.alien_arm.frames) - 1)
frame_order.append(frame_index_orientation_1)
self.alien_arm.add_frameset(frame_order, name=f"{orientation_2}_{orientation_1}")
self.alien_arm.location.center = self.visitor.location.center
self.alien_arm.hide()
def cancel_flash(self):
if self.level_index == 0:
@ -1790,6 +1849,7 @@ class Boss(Animation):
self.kool_man.update()
elif self.level_index == 1:
self.visitor.update()
self.alien_arm.update()
elif self.level_index == 2:
self.spoopy.update()
self.sword.update()
@ -1899,15 +1959,17 @@ class Sword(Animation):
surface = Surface((300, 300), SRCALPHA)
surface.fill((255, 255, 255, alpha))
masks.append(surface)
self.register(self.brandish, self.lower)
self.register(self.brandish, self.lower, self.swab)
def reset(self):
self.halt(self.brandish)
self.halt(self.lower)
self.halt(self.swab)
self.next_index = 0
self.sprites = []
def brandish(self):
level_index = self.parent.level_index
position = self.parent.unbrandished.pop(0)
offset = -self.SHIFT
for ii, queued in enumerate(self.parent.queue):
@ -1916,7 +1978,7 @@ class Sword(Animation):
break
dsr = self.get_display_surface().get_rect()
sprite = Sprite(self)
for frame in self.swords[self.parent.level_index][position]:
for frame in self.swords[level_index][position]:
sprite.add_frame(frame)
if position in (NS.W, NS.E):
sprite.location.centery = dsr.centery - 100 + offset
@ -1936,12 +1998,22 @@ class Sword(Animation):
self.get_audio().play_sfx("brandish")
self.play(self.lower, delay=400, play_once=True)
if len(self.parent.unbrandished) > 0:
self.play(self.brandish, delay=self.get_configuration("time", "sword-delay"),
play_once=True)
self.play(self.brandish, delay=self.get_configuration("time", "sword-delay"), play_once=True)
if level_index == 1:
self.parent.alien_arm.unhide()
self.parent.alien_arm.set_frameset(str(position))
if len(self.parent.unbrandished) > 0:
self.play(self.swab, delay=self.get_configuration("time", "sword-delay") - 42 * 4, play_once=True, position=position)
def swab(self, position):
if self.parent.level_index == 1:
self.parent.alien_arm.set_frameset(f"{position}_{self.parent.unbrandished[0]}")
def lower(self):
if len(self.parent.unbrandished) == 0:
self.parent.brandish_complete = True
if self.parent.level_index == 1:
self.parent.alien_arm.hide()
def block(self):
if len(self.sprites):

19
config
View File

@ -1,13 +1,14 @@
#
# Scrapeboard is an arcade game in development by Frank DeMarco (@diskmem) and Blake Andrews (@snakesandrews).
# It requires custom hardware to play, but it can be tested in keyboard mode with just the code in this
# repository. For more information on setting up and running the game, see the README. For more information
# on the game in general, visit https://scrape.nugget.fun
# [SCRAPEBOARD] is an arcade game in development by [@diskmem] and [@snakesandrews]
#
# It requires custom hardware to play but can be tested in keyboard mode without the hardware.
# For more information on setting up and running the game, see the README, or for the game in
# general, visit https://scrape.nugget.fun/
#
# This file contains configurable values that can adjust things like visual effects, performance, and audio.
# A lot of these values are closely tied to how the game is expected to run (for example, the screen resolution),
# but they can still be played around with. There are also a lot of values currently hardcoded in NS.py that
# should be moved into here eventually.
# This file contains configurable values that can adjust things like visual effects, performance,
# and audio. A lot of these values are closely tied to how the game is expected to run (for example,
# the screen resolution), so adjust at your own risk. There are also a lot of values currently
# hardcoded in NS.py that should be moved into here eventually.
#
[setup]
@ -29,7 +30,7 @@ effects = yes
[system]
# will force set display->effects to off
minimize-load-time = yes
minimize-load-time = no
[mouse]
visible = no

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -8,3 +8,6 @@
5999999
5999999
5999999
52586
54614
52434

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

92
www/blend_video.sh Executable file
View File

@ -0,0 +1,92 @@
#!/usr/bin/env bash
W=1920
H=1080
FILTER="[0:v]trim=start=0.0:end=0.734,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls0];"
FILTER+="[0:v]trim=start=0.734:end=4.478,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p0];"
FILTER+="[0:v]trim=start=4.478:end=9.784,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p1];"
FILTER+="[0:v]trim=start=9.784:end=11.451,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls1];"
FILTER+="[0:v]trim=start=11.451:end=15.589,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p2];"
FILTER+="[0:v]trim=start=15.589:end=18.526,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p3];"
FILTER+="[0:v]trim=start=18.526:end=21.825,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls2];"
FILTER+="[0:v]trim=start=21.825:end=24.765,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p4];"
FILTER+="[0:v]trim=start=24.765:end=27.201,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p5];"
FILTER+="[0:v]trim=start=27.201:end=29.369,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p6];"
FILTER+="[0:v]trim=start=29.369:end=34.174,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p7];"
FILTER+="[0:v]trim=start=34.174:end=43.517,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p8];"
FILTER+="[0:v]trim=start=43.517:end=47.754,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls3];"
FILTER+="[0:v]trim=start=47.754:end=53.961,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p9];"
FILTER+="[0:v]trim=start=53.961:end=61.401,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls4];"
FILTER+="[0:v]trim=start=61.401:end=78.385,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p10];"
FILTER+="[0:v]trim=start=78.385:end=85.526,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls5];"
FILTER+="[0:v]trim=start=85.526:end=118.326,scale=w=$W:h=$H,setpts=PTS-STARTPTS[p11];"
FILTER+="[0:v]trim=start=118.326,scale=w=$W:h=$H,setpts=PTS-STARTPTS[ls6];"
FILTER+="[ls0]split=3[ls0a][ls0b][ls0c];"
FILTER+="[ls0b]crop=w=800:h=450:x=194:y=527,boxblur=luma_radius=10:luma_power=5,scale=w=$W:h=$H[ls0bg];"
FILTER+="[ls0c]drawbox=color=white:thickness=fill,drawbox=color=black:y=75:h=931:thickness=fill[ls0mask];"
FILTER+="[ls0a][ls0bg][ls0mask]maskedmerge,setpts=PTS-STARTPTS[ls0merged];"
FILTER+="[p0]split=3[p0a][p0b][p0c];"
FILTER+="[p0b]crop=w=713:h=402:x=603:y=656,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p0bg];"
FILTER+="[p0c]drawbox=color=white:thickness=fill,drawbox=color=black:x=605:w=710:thickness=fill[p0mask];"
FILTER+="[p0a][p0bg][p0mask]maskedmerge,setpts=PTS-STARTPTS[p0merged];"
FILTER+="[p1]split=3[p1a][p1b][p1c];"
FILTER+="[p1b]crop=w=437:h=246:x=656:y=202,boxblur=luma_radius=6:luma_power=3,scale=w=$W:h=$H[p1bg];"
FILTER+="[p1c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p1mask];"
FILTER+="[p1a][p1bg][p1mask]maskedmerge,setpts=PTS-STARTPTS[p1merged];"
FILTER+="[ls0merged][p0merged][p1merged][ls1]concat=n=4[concat0];"
FILTER+="[p2]split=3[p2a][p2b][p2c];"
FILTER+="[p2b]crop=w=380:h=214:x=708:y=158,boxblur=luma_radius=6:luma_power=3,scale=w=$W:h=$H[p2bg];"
FILTER+="[p2c]drawbox=color=white:thickness=fill,drawbox=color=black:x=704:w=512:thickness=fill[p2mask];"
FILTER+="[p2a][p2bg][p2mask]maskedmerge,setpts=PTS-STARTPTS[p2merged];"
FILTER+="[p3]split=3[p3a][p3b][p3c];"
FILTER+="[p3b]crop=w=612:h=344:x=652:y=310,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p3bg];"
FILTER+="[p3c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p3mask];"
FILTER+="[p3a][p3bg][p3mask]maskedmerge,setpts=PTS-STARTPTS[p3merged];"
FILTER+="[concat0][p2merged][p3merged][ls2]concat=n=4[concat1];"
FILTER+="[p4]split=3[p4a][p4b][p4c];"
FILTER+="[p4b]crop=w=516:h=290:x=732:y=690,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p4bg];"
FILTER+="[p4c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p4mask];"
FILTER+="[p4a][p4bg][p4mask]maskedmerge,setpts=PTS-STARTPTS[p4merged];"
FILTER+="[p5]split=3[p5a][p5b][p5c];"
FILTER+="[p5b]crop=w=604:h=340:x=654:y=514,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p5bg];"
FILTER+="[p5c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p5mask];"
FILTER+="[p5a][p5bg][p5mask]maskedmerge,setpts=PTS-STARTPTS[p5merged];"
FILTER+="[p6]split=3[p6a][p6b][p6c];"
FILTER+="[p6b]crop=w=608:h=342:x=658:y=692,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p6bg];"
FILTER+="[p6c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p6mask];"
FILTER+="[p6a][p6bg][p6mask]maskedmerge,setpts=PTS-STARTPTS[p6merged];"
FILTER+="[p7]split=3[p7a][p7b][p7c];"
FILTER+="[p7b]crop=w=601:h=338:x=654:y=444,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p7bg];"
FILTER+="[p7c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p7mask];"
FILTER+="[p7a][p7bg][p7mask]maskedmerge,setpts=PTS-STARTPTS[p7merged];"
FILTER+="[p8]split=3[p8a][p8b][p8c];"
FILTER+="[p8b]crop=w=604:h=340:x=654:y=546,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p8bg];"
FILTER+="[p8c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p8mask];"
FILTER+="[p8a][p8bg][p8mask]maskedmerge,setpts=PTS-STARTPTS[p8merged];"
FILTER+="[concat1][p4merged][p5merged][p6merged][p7merged][p8merged][ls3]concat=n=7[concat2];"
FILTER+="[p9]split=3[p9a][p9b][p9c];"
FILTER+="[p9b]crop=w=480:h=270:x=720:y=664,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p9bg];"
FILTER+="[p9c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p9mask];"
FILTER+="[p9a][p9bg][p9mask]maskedmerge,setpts=PTS-STARTPTS[p9merged];"
FILTER+="[ls4]split=3[ls4a][ls4b][ls4c];"
FILTER+="[ls4b]crop=w=800:h=450:x=1194:y=527,boxblur=luma_radius=10:luma_power=5,scale=w=$W:h=$H[ls4bg];"
FILTER+="[ls4c]drawbox=color=white:thickness=fill,drawbox=color=black:y=75:h=931:thickness=fill[ls4mask];"
FILTER+="[ls4a][ls4bg][ls4mask]maskedmerge,setpts=PTS-STARTPTS[ls4merged];"
FILTER+="[p10]split=3[p10a][p10b][p10c];"
FILTER+="[p10b]crop=w=606:h=340:x=654:y=638,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p10bg];"
FILTER+="[p10c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p10mask];"
FILTER+="[p10a][p10bg][p10mask]maskedmerge,setpts=PTS-STARTPTS[p10merged];"
FILTER+="[concat2][p9merged][ls4merged][p10merged]concat=n=4[concat3];"
FILTER+="[ls5]split=3[ls5a][ls5b][ls5c];"
FILTER+="[ls5b]crop=w=800:h=450:x=1194:y=527,boxblur=luma_radius=10:luma_power=5,scale=w=$W:h=$H[ls5bg];"
FILTER+="[ls5c]drawbox=color=white:thickness=fill,drawbox=color=black:y=75:h=931:thickness=fill[ls5mask];"
FILTER+="[ls5a][ls5bg][ls5mask]maskedmerge,setpts=PTS-STARTPTS[ls5merged];"
FILTER+="[p11]split=3[p11a][p11b][p11c];"
FILTER+="[p11b]crop=w=444:h=250:x=794:y=780,boxblur=luma_radius=2:luma_power=1,scale=w=$W:h=$H[p11bg];"
FILTER+="[p11c]drawbox=color=white:thickness=fill,drawbox=color=black:x=657:w=602:thickness=fill[p11mask];"
FILTER+="[p11a][p11bg][p11mask]maskedmerge,setpts=PTS-STARTPTS[p11merged];"
FILTER+="[concat3][ls5merged][p11merged][ls6]concat=n=4[out]"
echo "$FILTER";
ffmpeg -i scrapeboard_new.webm -crf 17 -filter_complex "$FILTER" -map "[out]" -map 0:a -c:a copy out.webm

View File

@ -1,6 +1,22 @@
<!DOCTYPE html>
<html lang="en-US">
<!--
We have the technology to put you on a board which is a wireless electric
video game controller. Do you have the moves to skate through a gauntlet
of goons all the way to Tony Hawk?
-->
<head>
<script>
/* For the scroll button video overlay */
window.addEventListener(
"scroll", function() {
document.getElementById("scroll").style.visibility = "hidden";
});
</script>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@ -18,13 +34,51 @@
<meta name="twitter:creator" content="@diskmem">
<title>Scrapeboard</title>
<link rel="stylesheet" href="www/style.css" type="text/css" />
</head>
<body>
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true"
poster="www/scrapeboard_new_cover.jpg">
<!-- AUTOPLAY HEADER VIDEO -->
<style>
/* landscape */
@media (min-width: 800px)
{
div#scroll
{
visibility: visible;
}
}
/* portrait */
@media (max-width: 800px)
{
div#scroll
{
visibility: collapse;
}
}
</style>
<div id="scroll">🡃</div>
<script>
document.getElementById("scroll").addEventListener(
"click", function() {
window.scrollBy(0, window.innerHeight);
});
</script>
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true">
<source src="www/scrapeboard_new.webm">
</video>
<!-- ONE LINE DESCRIPTION -->
<style>
@media (min-width: 800px)
{
div#hero
@ -49,6 +103,7 @@
grid-area: 2 / 2 / 3 / 3;
}
}
@media (max-width: 800px)
{
div#hero
@ -65,23 +120,27 @@
div#hero img#head_1
{
/* width: 90%; */
grid-area: 2 / 1 / 3 / 2;
}
div#hero img#head_2
{
/* width: 90%; */
grid-area: 3 / 1 / 4 / 2;
}
}
</style>
<div id="hero">
<img id="head_0" src="www/ad_head_transparent_0.png" />
<img id="head_1" src="www/ad_head_transparent_1.png" />
<img id="head_2" src="www/ad_head_transparent_2.png" />
</div>
<!-- GIFS -->
<style>
@media (min-width: 800px)
{
div#boarding
@ -99,84 +158,357 @@
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5%;
width: 99%;
text-align: center;
}
div#boarding img#boarding_4
div#boarding a
{
padding: 10px 10px;
}
div#boarding a#boarding_4
{
grid-area: auto / 1 / auto / 3;
width: 50%;
margin: auto;
}
}
</style>
<div id="boarding">
<a href="www/Boarding_1.gif"><img src="www/Boarding_1_thumb.gif" /></a>
<a href="www/Boarding_0.gif"><img src="www/Boarding_0_thumb.gif" /></a>
<a href="www/Multiplay_Closing-Flan.gif"><img src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
<a href="www/Boarding_2.gif"><img src="www/Boarding_2_thumb.gif" /></a>
<a href="www/Boarding_3.gif" id="boarding_4"><img src="www/Boarding_3_thumb.gif" /></a>
</div>
<!-- HOW TO PLAY -->
<style>
/* landscape */
@media (min-width: 800px)
{
div#instructions
{
grid-template-columns: 46% 54%;
grid-template-rows: repeat(1, 1fr);
width: 75%;
}
img#safety
{
width: 50%;
}
img#pip
{
width: 40%;
}
div#demo
{
width: 40%;
}
}
/* portrait */
@media (max-width: 800px)
{
div#instructions
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(2, 1fr);
width: 90%;
}
div#instructions img
{
padding-top: 10px;
padding-bottom: 10px;
}
img#safety
{
width: 95%;
}
img#pip
{
width: 90%;
}
div#demo
{
width: 90%;
}
}
</style>
<div id="instructions">
<img src="www/ad_instructions_transparent_0.png" />
<img src="www/ad_instructions_transparent_1.png" />
</div>
<img id="safety" src="www/instructions.png" />
<a href="https://youtu.be/spzM9XGLwWk">
<img id="pip" src="www/Scrapeboard_Gameplay_Demo_picture_in_picture.webp" />
</a>
<div id="demo">
<div id="demo_title">
DEMO
</div>
<div id="demo_link">
watch on <a href="https://youtu.be/spzM9XGLwWk">YouTube</a>
</div>
</div>
<style>
/* landscape */
@media (min-width: 800px)
{
div#description
{
grid-template-columns: 49% 51%;
grid-template-rows: repeat(2, 1fr);
width: 75%;
}
}
/* portrait */
@media (max-width: 800px)
{
div#description
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 90%;
}
}
</style>
<div id="description">
<img src="www/ad_description_transparent_0.png" />
<img src="www/ad_description_transparent_1.png" />
<img src="www/ad_description_transparent_2.png" />
<img src="www/ad_description_transparent_3.png" />
</div>
<style>
/* landscape */
@media (min-width: 800px)
{
p.emotes
{
font-size: 34px;
}
form#mailing-list input
{
font-size: 34px;
}
div#calendar
{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
}
div#calendar p
{
grid-area: auto / 1 / auto / 4;
font-size: 26px;
}
div#calendar div.date
{
width: 70%;
margin: auto;
}
}
/* portrait */
@media (max-width: 800px)
{
p.emotes
{
font-size: 24px;
}
form#mailing-list input
{
font-size: 26px;
}
div#calendar
{
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
}
div#calendar p
{
width: 95%;
font-size: 22px;
}
div#calendar div.date
{
width: 75%;
margin: auto;
}
}
</style>
<div id="boarding">
<a href="www/Boarding_1.gif"><img id="boarding_0" src="www/Boarding_1_thumb.gif" /></a>
<a href="www/Boarding_0.gif"><img id="boarding_1" src="www/Boarding_0_thumb.gif" /></a>
<a href="www/Multiplay_Closing-Flan.gif"><img id="boarding_2" src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
<a href="www/Boarding_2.gif"><img id="boarding_3" src="www/Boarding_2_thumb.gif" /></a>
<a href="www/Boarding_3.gif"><img id="boarding_4" src="www/Boarding_3_thumb.gif" /></a>
<p class="emotes">
*^ワ^* o(〃^▽^〃)o (@⌒ー⌒@) (*⌒∇⌒*) (≧∇≦)/ (ノ´ヮ´)*: ・゚ ≧﹏≦ ( ´ ` )b
</p>
<div id="calendar">
<p>
Come play Scrapeboard at one of these events!
</p>
<div class="date upcoming current">
<div class="day-of-week">
Wed - Fri
</div>
<div class="day">
Mar. 23 - 25
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://gdconf.com">GDC, San Francisco</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Thu - Sun
</div>
<div class="day">
Jan. 6 - 9
</div>
<div class="year">
2022
</div>
<div class="location">
<a href="https://super.magfest.org">MAGFest, Maryland</a>
</div>
</div>
<div class="date past">
<div class="day-of-week">
Sunday
</div>
<div class="day">
Oct. 31
</div>
<div class="year">
2021
</div>
<div class="location">
<a href="https://wonderville.nyc">Wonderville, NYC</a>
</div>
</div>
<p>
<i>If you are interested in having Scrapeboard at your event, bar, arcade, office, school, or home,
contact <a href="mailto:scrape@nugget.fun">scrape@nugget.fun</a></i>
</p>
</div>
<!-- <div id="heading">
<div id="title">
<img id="plank" src="resource/Title_plank.png" />
<img id="board" src="resource/Introduction_skateboard.png" />
<img id="lizard" src="resource/littleSlimeGoop/1_downRight.png" />
</div>
<div id="question">
So you think you can skateboard, but can you <i>scrape</i>board, you slime bag?
</div>
</div> -->
<!-- <div id="blob">
<div id="detail">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail2">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail3">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail4">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail5">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
</div> -->
<div id="instructions">
<img id="line" src="www/hero_instructions_foreground.png" />
<img id="diagram" src="www/instructions.png" />
<div id="mailing-list-join">
<span style="background: #ffa; border-radius: 5px; padding-left: 10px; padding-right: 10px;">
Join the Scrapeboard events and news mailing list!
</div>
</div>
<img id="description" src="www/hero_description_foreground.png" />
<form id="mailing-list" method="post" action="https://nugget.fun/mailman/subscribe/scrapeboard">
<input style="width: 50%" name="email" value="Your e-mail"
onfocus="if(this.value=='Your e-mail') this.value='';"
onfocusout="if(this.value=='') this.value='Your e-mail';">
&nbsp;
<input style="cursor: pointer; background: #4f8; font-weight: bold" type="submit" name="email-button" value="Join">
</form>
<p class="emotes">
d(⌒ー⌒) (❁´◡`❁) ヽ(^Д^)ノ (。>‿‿<。 (*´∇`)ノ (●⌒v⌒●) ´・ᴗ・` (✿^-^) ヾ(^ヮ^)
</p>
<div id="comedy">
<iframe src="https://www.youtube.com/embed/ai9WlJdfbvI" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div id="comedy_credits">
video by <a href="http://twitter.com/beachethan">@beachethan</a>
</div>
<div class="credits">
Scrapeboard is created by <a href="http://twitter.com/diskmem">@diskmem</a> and
<a href="http://twitter.com/snakesandrews">@snakesandrews</a><br/>
with engineering by <a href="http://twitter.com/clementshimizu">@ClementShimizu</a><br/>
<style>
/* landscape */
@media (min-width: 800px)
{
div#credits
{
width: 80%;
}
div#credits p#links
{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
}
}
/* portrait */
@media (max-width: 800px)
{
div#credits
{
width: 50%;
}
div#credits p#links
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, 1fr);
}
div#credits p#links iframe
{
margin-top: 10px;
}
}
</style>
<p id="credits-heading">
Follow the developers!
</p>
<div id="credits">
<p id="links">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a href="https://twitter.com/diskmem?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
data-show-count="true">
Follow @diskmem
</a>
<a href="https://twitter.com/snakesandrews?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
data-show-count="true">
Follow @snakesandrews
</a>
<a href="https://twitter.com/ClementShimizu?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
data-show-count="true">
Follow @ClementShimizu
</a>
</p>
</div>
<div id="ink">
<img src="www/Ink.png">
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 390 KiB

After

Width:  |  Height:  |  Size: 506 KiB

View File

@ -22,6 +22,20 @@ body a:hover
text-decoration: none;
}
div#scroll
{
position: absolute;
left: 50%;
top: 90%;
background: #000;
color: #fff;
opacity: 0.9;
padding: 5px 20px 0px 20px;
border-radius: 5px;
font-size: 34px;
cursor: pointer;
}
video#landing_video
{
width: 100%;
@ -42,245 +56,177 @@ div#hero img
div#instructions
{
display: grid;
margin: auto;
width: 75%;
}
div#instructions img#line
div#instructions img
{
display: block;
width: 100%;
}
div#instructions img#diagram
{
display: block;
margin: auto;
width: 60%;
margin-top: 40px;
border-radius: 30px;
}
img#description
img#safety
{
display: block;
margin: 40px auto;
width: 75%;
border-radius: 30px;
}
/* div#description */
/* { */
/* width: 75%; */
/* margin: auto; */
/* margin-top: 20px; */
/* } */
img#pip
{
display: block;
margin: 40px auto 0px auto;
border-radius: 8px;
}
/* div#description */
/* { */
/* position: relative; */
div#demo
{
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 0px auto 40px auto;
}
/* } */
div#demo div#demo_title
{
color: red;
font-family: NotCourierSansBold;
}
/* div#description img */
/* { */
/* width: 100%; */
/* } */
div#demo div#demo_link
{
text-align: right;
}
/* div#description div.text */
/* { */
/* text-align: justify; */
/* text-align-last: center; */
/* } */
div#description
{
display: grid;
margin: auto;
margin-bottom: 40px;
}
/* div#description div.text:after */
/* { */
/* content: ""; */
/* display: inline-block; */
/* width: 100%; */
/* } */
div#description img
{
display: block;
width: 100%;
}
/* div#description div#first */
/* { */
/* font-size: 55px; */
/* font-weight: bold; */
/* } */
p.emotes
{
width: 100%;
padding: 10px 0px;
font-family: NotCourierSans;
overflow: hidden;
font-weight: bold;
background: #fff;
margin: 0px;
white-space: nowrap;
}
/* div#description div#second */
/* { */
/* font-size: 36px; */
/* } */
div#calendar
{
width: 100%;
background: #fff;
display: grid;
}
/* div#description div#third */
/* { */
/* font-size: 28px; */
/* } */
/* div#description div#fourth */
/* { */
/* font-size: 24px; */
/* } */
/* div#heading div#title */
/* { */
/* text-align: center; */
/* position: relative; */
/* margin-bottom: 40px; */
/* overflow: hidden; */
/* } */
/* div#heading div#title img#plank */
/* { */
/* border-top: 13px dotted lime; */
/* border-radius: 100px; */
/* border-bottom: 18px dashed lime; */
/* z-index: 0; */
/* } */
/* div#heading div#title img#board */
/* { */
/* width: 100px; */
/* transform: rotate(70deg); */
/* background-color: yellow; */
/* border: 3px groove pink; */
/* position: absolute; */
/* z-index: 1; */
/* top: 50px; */
/* left: 52%; */
/* border-radius: 40px; */
/* } */
/* div#heading div#title img#lizard */
/* { */
/* width: 1000px; */
/* background-color: rgba(255, 100, 100, .2); */
/* opacity: .9; */
/* position: absolute; */
/* top: 0px; */
/* z-index: 2; */
/* left: 40%; */
/* border-radius: 40px; */
/* } */
/* div#heading div#question */
/* { */
/* width: 65%; */
/* margin: auto; */
/* border: 5px double cyan; */
/* background: #B0D0D0E0; */
/* line-height: 28px; */
/* color: #282828; */
/* padding: 50px; */
/* border-radius: 18px; */
/* font-family: NotCourierSansBold; */
/* font-size: 34px; */
/* margin-bottom: 18px; */
/* position: absolute; */
/* top: -10px; */
/* z-index: 0; */
/* } */
/* div#blob */
/* { */
/* position: relative; */
/* width: 100%; */
/* overflow: hidden; */
/* word-break: break-all; */
/* } */
/* div#detail */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* } */
/* div#detail a */
/* { */
/* position: absolute; */
/* top: 80px; */
/* left: 30px; */
/* font-size: 12px; */
/* z-index: 3; */
/* } */
/* div#detail a#blake */
/* { */
/* top: 95px; */
/* } */
/* div#detail a#clement */
/* { */
/* top: 110px; */
/* } */
/* div#detail2 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 1px; */
/* left: 1px; */
/* } */
/* div#detail3 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 2px; */
/* left: 2px; */
/* } */
/* div#detail4 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 3px; */
/* left: 3px; */
/* /\* color: gray; *\/ */
/* /\* opacity: .5; *\/ */
/* } */
/* div#detail5 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 4px; */
/* left: 4px; */
/* /\* opacity: .3; *\/ */
/* } */
div#photo
div#calendar p
{
text-align: center;
margin-top: 20px;
width: 65%;
font-family: Cantarell;
margin: 30px auto;
}
div#photo img
div#calendar div.date
{
width: 300px;
border: 18px ridge pink;
border: 1px solid #000;
padding: 5px;
font-family: NotCourierSans;
}
div.credits
div#calendar div.upcoming
{
color: #000;
}
div#calendar div.past
{
color: #888;
background: #eee;
}
div#calendar div.current
{
background: #ffa;
}
div#calendar div.date div.day-of-week
{
font-size: 16px;
font-weight: bold;
}
div#calendar div.date div.day
{
font-size: 26px;
font-weight: bold;
}
div#calendar div.date div.year
{
font-size: 16px;
font-weight: bold;
}
div#calendar div.date div.location
{
font-size: 16px;
}
div#mailing-list-join
{
font-size: 34px;
font-family: Cantarell;
margin: 0px;
background: #fff;
text-align: center;
}
form#mailing-list
{
background: #fff;
margin: auto;
padding-top: 20px;
padding-bottom: 40px;
text-align: center;
}
form#mailing-list input
{
font-family: NotCourierSans;
font-size: 34px;
}
p#credits-heading
{
margin-top: 40px;
font-family: NotCourierSans;
font-size: 24px;
font-family: Cantarell;
font-size: 34px;
font-weight: bold;
text-align: center;
}
div.credits a
div#credits
{
font-weight: bold;
font-family: Cantarell;
font-size: 28px;
margin: auto;
}
div#credits p#links
{
display: grid;
width: 100%;
align-items: center;
}
div#boarding
@ -310,7 +256,6 @@ div#comedy
div#comedy iframe
{
/* border: 8px solid black; */
border-radius: 30px;
width: 100%;
height: 100%;
@ -320,6 +265,10 @@ div#comedy_credits
{
font-size: 16px;
text-align: center;
max-width: 889px;
width: 90vw;
text-align: right;
margin: auto;
}
div#ink