pages/anime/anime.scarlet

.anime
	vertical

.anime-main-column
	vertical
	flex 1

.anime-side-column
	vertical
	margin-left 0
	margin-top 1rem

> 1250px
	.anime
		horizontal

	.anime-side-column
		margin-left content-padding
		margin-top 0
		flex-basis 270px

> 1400px
	.anime-side-column
		flex-basis 300px

.anime-header
	vertical

.anime-title
	text-align center
	margin-bottom 0.5rem

> 800px
	.anime-header
		horizontal
		padding-bottom content-padding
		border-bottom 1px solid rgba(0, 0, 0, 0.05)

	.anime-title
		text-align left

	.anime-alternative-title
		text-align left

	.anime-actions
		flex 1
		justify-content flex-end
		align-items flex-end

		button,
		.button
			margin-right 0
			margin-bottom 0

.anime-info-table
	margin 0
	// width 100%
	// max-width 600px

.anime-info-value
	text-align right

.anime-soundtracks
	vertical
	margin-top 1rem

.anime-soundtrack
	vertical
	// flex-basis 100%
	flex-grow 1
	margin-bottom 0.5rem
	min-width 200px

> 500px
	.anime-soundtracks
		horizontal-wrap
		justify-content flex-start
		margin-top 0

	.anime-soundtrack
		max-width 200px
		margin calc(content-padding / 2)

// .anime-soundtracks
// 	horizontal-wrap

// .anime-soundtrack
// 	flex-basis 400px
// 	padding-bottom video-padding

.anime-section
	margin-top 1rem

	:first-child
		margin-top 0 !important

.anime-section-name
	font-weight bold

.anime-image-container
	vertical
	justify-content flex-start
	align-items center

.anime-start-date
	font-size 0.7rem
	line-height 1.7em
	opacity 0.65
	margin-top 0.5rem

.anime-cover-image
	width 250px
	height auto
	border-radius 3px

	default-transition
	object-fit cover

	saturate-up
	shadow-up

.anime-summary
	// ...

.anime-info
	vertical
	flex 1

.space
	width content-padding
	height content-padding

.anime-alternative-title
	font-size 0.9em
	margin-top 0
	margin-bottom 0.5rem
	text-align center
	font-weight normal
	line-height content-line-height

	.japanese
		color anime-alternative-title-color !important

.anime-actions
	horizontal
	justify-content center

	// Action button margin
	// margin calc(content-padding - 0.5rem) -0.5rem

	// Setting z-index requires setting a background as well
	// z-index 10

// > 1450px
// 	.anime-actions
// 		position fixed
// 		bottom 0
// 		right content-padding

// .anime-rating-categories
// 	horizontal
// 	width 100%

// .anime-rating-category
// 	ui-element
// 	flex 1
// 	text-align center
// 	margin 0.5rem

// .anime-rating-category-name
// 	font-size 1.3rem
// 	margin-top 0.5rem

// .anime-rating
// 	margin 0.5rem
// 	letter-spacing 3px
// 	font-size 1.3rem
// 	color link-color

.anime-widget
	margin-top 0.6rem
	margin-bottom 0.4rem

< 800px
	.anime-rating-categories
		vertical

.anime-friends
	.user-avatars
		justify-content flex-start

.relations
	horizontal-wrap

.relation
	vertical
	align-items center
	padding 0.5rem

.relation-type
	font-size 0.7rem
	margin-top 0.1rem

.relation-image
	width 100px
	height 141px
	border-radius 3px
	object-fit cover
	default-transition
	shadow-up
Redesign 2017-11-03 17:10:31 +00:00			`.anime`
Redesign 2017-11-04 07:45:39 +00:00			`vertical`

			`.anime-main-column`
			`vertical`
			`flex 1`

			`.anime-side-column`
			`vertical`
			`margin-left 0`
			`margin-top 1rem`

Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00			`> 1250px`
Redesign 2017-11-04 07:45:39 +00:00			`.anime`
			`horizontal`

			`.anime-side-column`
			`margin-left content-padding`
			`margin-top 0`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00			`flex-basis 270px`

			`> 1400px`
			`.anime-side-column`
			`flex-basis 300px`
Redesign 2017-11-03 17:10:31 +00:00
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.anime-header`
Redesign 2017-11-03 17:10:31 +00:00			`vertical`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Redesign 2017-11-03 17:10:31 +00:00			`.anime-title`
			`text-align center`
			`margin-bottom 0.5rem`

			`> 800px`
Everything is scarlet now 2016-12-01 15:27:53 +00:00			`.anime-header`
Redesign 2017-11-03 17:10:31 +00:00			`horizontal`
Redesign 2017-11-05 10:02:31 +00:00			`padding-bottom content-padding`
			`border-bottom 1px solid rgba(0, 0, 0, 0.05)`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
Redesign 2017-11-03 17:10:31 +00:00			`.anime-title`
			`text-align left`
Everything is scarlet now 2016-12-01 15:27:53 +00:00
Redesign 2017-11-04 07:45:39 +00:00			`.anime-alternative-title`
			`text-align left`

Redesign 2017-11-05 10:02:31 +00:00			`.anime-actions`
			`flex 1`
			`justify-content flex-end`
			`align-items flex-end`

			`button,`
			`.button`
			`margin-right 0`
			`margin-bottom 0`

Redesign 2017-11-04 07:45:39 +00:00			`.anime-info-table`
			`margin 0`
Redesign 2017-11-04 10:09:19 +00:00			`// width 100%`
			`// max-width 600px`

			`.anime-info-value`
			`text-align right`
Redesign 2017-11-04 07:45:39 +00:00
Redesign 2017-11-04 16:11:47 +00:00			`.anime-soundtracks`
			`vertical`
			`margin-top 1rem`

			`.anime-soundtrack`
			`vertical`
Soundtrack fix for Safari 2017-11-07 07:51:28 +00:00			`// flex-basis 100%`
Style fixes for Safari 2017-11-07 07:43:54 +00:00			`flex-grow 1`
Redesign 2017-11-04 16:11:47 +00:00			`margin-bottom 0.5rem`
Minor fix 2017-11-07 13:37:25 +00:00			`min-width 200px`
Redesign 2017-11-04 16:11:47 +00:00
			`> 500px`
			`.anime-soundtracks`
			`horizontal-wrap`
			`justify-content flex-start`
			`margin-top 0`

			`.anime-soundtrack`
			`max-width 200px`
			`margin calc(content-padding / 2)`

			`// .anime-soundtracks`
			`// horizontal-wrap`

			`// .anime-soundtrack`
			`// flex-basis 400px`
			`// padding-bottom video-padding`

Redesign 2017-11-04 07:45:39 +00:00			`.anime-section`
			`margin-top 1rem`

			`:first-child`
			`margin-top 0 !important`

Everything is scarlet now 2016-12-01 15:27:53 +00:00			`.anime-section-name`
			`font-weight bold`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.anime-image-container`
Implemented anime relations 2017-10-17 14:58:28 +00:00			`vertical`
			`justify-content flex-start`
			`align-items center`

			`.anime-start-date`
			`font-size 0.7rem`
			`line-height 1.7em`
			`opacity 0.65`
			`margin-top 0.5rem`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Improved scarlet styles 2016-11-29 15:50:50 +00:00			`.anime-cover-image`
Redesign 2017-11-04 07:45:39 +00:00			`width 250px`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`height auto`
			`border-radius 3px`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
Improved styles 2016-11-30 15:29:36 +00:00			`default-transition`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`object-fit cover`

Improved styles 2016-11-30 12:33:11 +00:00			`saturate-up`
			`shadow-up`
Redesign 2017-11-03 17:10:31 +00:00
			`.anime-summary`
			`// ...`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.anime-info`
Using mixins now 2016-11-29 03:37:36 +00:00			`vertical`
Improved styles 2016-11-30 12:33:11 +00:00			`flex 1`
Improved styles 2016-11-30 15:29:36 +00:00
			`.space`
			`width content-padding`
			`height content-padding`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
			`.anime-alternative-title`
			`font-size 0.9em`
Improved meta data 2017-07-06 19:38:19 +00:00			`margin-top 0`
Improved anime page styles 2016-12-02 06:31:09 +00:00			`margin-bottom 0.5rem`
Redesign 2017-11-04 07:45:39 +00:00			`text-align center`
Improved meta data 2017-07-06 19:38:19 +00:00			`font-weight normal`
			`line-height content-line-height`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
Japanese title tokenizer 2017-07-11 14:54:17 +00:00			`.japanese`
Redesign 2017-11-04 07:45:39 +00:00			`color anime-alternative-title-color !important`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Implemented anime list basics 2017-06-08 19:54:39 +00:00			`.anime-actions`
Improved search results 2017-11-05 08:55:42 +00:00			`horizontal`
Redesign 2017-11-05 10:02:31 +00:00			`justify-content center`
Redesign 2017-11-03 17:10:31 +00:00
Improved search results 2017-11-05 08:55:42 +00:00			`// Action button margin`
Redesign 2017-11-04 07:45:39 +00:00			`// margin calc(content-padding - 0.5rem) -0.5rem`
General improvements 2017-06-20 12:16:23 +00:00
Improved search results 2017-11-05 08:55:42 +00:00			`// Setting z-index requires setting a background as well`
Redesign 2017-11-04 07:45:39 +00:00			`// z-index 10`
Implemented anime list basics 2017-06-08 19:54:39 +00:00
Improved search results 2017-11-05 08:55:42 +00:00			`// > 1450px`
			`// .anime-actions`
			`// position fixed`
			`// bottom 0`
			`// right content-padding`
Implemented anime list basics 2017-06-08 19:54:39 +00:00
Redesign 2017-11-04 10:09:19 +00:00			`// .anime-rating-categories`
			`// horizontal`
			`// width 100%`

			`// .anime-rating-category`
			`// ui-element`
			`// flex 1`
			`// text-align center`
			`// margin 0.5rem`

			`// .anime-rating-category-name`
			`// font-size 1.3rem`
			`// margin-top 0.5rem`

			`// .anime-rating`
			`// margin 0.5rem`
			`// letter-spacing 3px`
			`// font-size 1.3rem`
			`// color link-color`
Implemented ratings UI 2017-06-08 09:51:34 +00:00
Added stylish mountable effect 2017-06-20 18:13:04 +00:00			`.anime-widget`
			`margin-top 0.6rem`
			`margin-bottom 0.4rem`

Implemented ratings UI 2017-06-08 09:51:34 +00:00			`< 800px`
			`.anime-rating-categories`
			`vertical`

Show friends on anime 2017-07-21 09:25:53 +00:00			`.anime-friends`
			`.user-avatars`
			`justify-content flex-start`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.relations`
Using mixins now 2016-11-29 03:37:36 +00:00			`horizontal-wrap`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
			`.relation`
Using mixins now 2016-11-29 03:37:36 +00:00			`vertical`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`align-items center`
			`padding 0.5rem`

Using mixins now 2016-11-29 03:37:36 +00:00			`.relation-type`
			`font-size 0.7rem`
			`margin-top 0.1rem`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.relation-image`
			`width 100px`
Improved styles 2016-11-30 15:29:36 +00:00			`height 141px`
			`border-radius 3px`
			`object-fit cover`
			`default-transition`
Everything is scarlet now 2016-12-01 15:27:53 +00:00			`shadow-up`