WordPress-Medium-style-page-transitions/article-transition.css at master · R3IDV3/WordPress-Medium-style-page-transitions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
.hidden {
	display: none;
}

.article-content {
	display: block;
}

.content-hidden .article-content {
	display: none !important;
}

.fade-up-out {
	opacity: 0;
	-webkit-transform: scale(0.8) translate3d(0, -10%, 0);
			transform: scale(0.8) translate3d(0, -10%, 0);
	-webkit-transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    		transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.easing-upward {
	-webkit-transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.easing-upward .read-next {
	opacity: 0 !important;
}

.post-thumbnail {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	display: block;
	height: 420px;
	overflow: hidden;
	position: relative;
	width: 100vw;
}

.post-thumbnail .read-next {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	text-align: center;
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
	top: 0;
	width: 100vw !important;
	z-index: 1;
	-webkit-transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

	/* To vertically center it's children */
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-pack:center;
	-webkit-justify-content:center;
	-moz-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
    -webkit-flex-line-pack:center;
	-ms-flex-line-pack:center;
	-webkit-align-content:center;
	align-content:center;
    -webkit-flex-direction:column;
	-moz-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
}

.post-thumbnail .read-next p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.1rem;
	font-style: italic;
	padding: 0;
	text-decoration: underline;
	margin: 0;
	margin-bottom: 10px;
}

.post-thumbnail .read-next h1.entry-title {
	color: rgba(255, 255, 255, 0.9);
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}

.post-thumbnail img {
	display: none; /* because it is being used for the background image */
}