-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcase-study-page.css
145 lines (131 loc) · 8.19 KB
/
case-study-page.css
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
:root {
--h:#636380;
--text:#585877;
--bg:white;
--bg-faint:#eaecf0;
--bg-header:#43436d;
--highlight:#d9ead3;
--link:black;
--divider:#aaa;
}
/* general styles */
.container {margin:30px auto 50px;max-width:810px;}
body {background-color:var(--bg);color:var(--text);font-family:Gelasio,serif;font-size:18px;margin:0;padding:60px 0 40px;}
p {line-height:1.6em;margin-top:0;}
a {color:inherit;text-decoration:none;}
a:hover {color:var(--link);text-decoration:underline;}
nav {display:flex;justify-content:space-between;padding:15px 60px;}
figure.citation {border-left:4px solid var(--text);margin:0;padding-left:1.5em;}
ol.references {padding-left:1.3em;}
ol.references li {margin-bottom:.8em;}
ol.references cite {font-weight:bold;text-decoration:italic;}
/* CASE STUDY ARTICLE */
body {padding:0;}
.case-study, .presentation {padding-bottom:50px;position:relative;}
.case-study > nav, .case-study > footer {border:none!important;box-shadow:none!important;padding:10px!important;}
@media (min-width:670px){
.case-study, .presentation {margin:0 auto;padding-bottom:unset;}
.case-study > nav, .case-study > footer {margin:unset;}
}
.case-study > * {background-color:var(--bg);padding:5%;margin:0 auto;}
.case-study > *:not(header) {padding:3% 5% 5%;}
.case-study > :last-child {margin-bottom:0;}
.case-study header {position:relative;background-color:var(--bg-header);color:white;}
.case-study header > * {position:relative;z-index:10;}
.case-study header img {max-width:140px;}
.case-study header h1 {font-size:2.2rem;margin-top:4.5rem;margin-bottom:.5rem;}
.case-study header p {border-bottom-width:1px;border-bottom-style:solid;padding-bottom:1.2rem;font-size:1.4rem;margin-top:.5rem;}
.case-study header time {font-size:1.2rem;display:block;margin-bottom:1.2rem;}
.case-study h2 {font-size:1.8em;border-bottom-width:1px;border-bottom-style:solid;padding-bottom:1rem;margin:0 0 1rem;clear:right;}
.case-study h2 ~ p:first-of-type {margin-top:2rem;}
.case-study h3 {font-size:1.2em;font-weight:bold;}
.case-study h3 + p:first-of-type {margin-top:0;}
.case-study a[href]:not(.btn) {text-decoration:none;cursor:pointer;border-bottom-width:1px;border-bottom-style:dotted;}
.case-study .list-header {margin:0;font-weight:bold;}
.case-study ul, .case-study ol {margin-top:0;}
.case-study .highlight {background-color:var(--highlight);background-clip:padding-box;-webkit-box-decoration-break:clone;box-decoration-break:clone;width:fit-content;position:relative;padding-right:5px;padding-left:3px;}
.case-study .highlight::before, .case-study .highlight::after {position:absolute;content:'';border:12px solid transparent;}
.case-study .highlight::before {border-top-color:var(--highlight);border-right-color:var(--highlight);border-left-width:1px;border-right-width:1px;left:-2px;}
.case-study .highlight::after {border-bottom-color:var(--highlight);border-left-color:var(--highlight);border-left-width:1px;border-right-width:1px;right:-1px;bottom:0;}
.case-study .highlight + .highlight {margin-top:3px;}
.case-study section :last-child, .case-study figure :last-child {margin-bottom:0;}
/* GALLERY */
.zoom.static {margin:0 auto;max-height:70vh;display:block;border:1px solid #bbb;}
.gallery {text-align:center;margin:15px 0 0;}
.gallery * {cursor:pointer;}
.gallery img {width:30%;margin-right:3%;border:1px solid #cfcfcf;background-color:white;box-shadow:2px 3px 4px -2px rgba(0,0,0,0.2);}
.gallery img:last-of-type {margin:0;}
.gallery span {display:none;}
.gallery + p {margin-top:1rem !important;}
.gallery.expand img.focus {border-color:black;cursor:zoom-out;}
@media (min-width:670px){.gallery img {max-width:28%;margin-right:2%;padding:8px;}}
@media (min-width:850px){
.gallery {position:relative;width:228px;height:210px;margin:33px -17px 20px 15px;float:right;transform:rotate(2.5deg);transition:all .3s;}
.gallery::before, .gallery::after {content:'';position:absolute;display:inline-block;z-index:10;top:65px;right:-9px;width:52px;height:15px;border:3px solid #aaa;border-radius:60px 0 0 60px;border-right-width:0;transform:rotate(16deg);box-shadow:inset 2px 2px 3px -1px rgba(0,0,0,0.4), -1px 2px 2px -1px rgba(0,0,0,0.4);transition:all .3s, rotate .45s;transform-origin:100% 50%;}
.gallery::after {top:70px;right:-25px;width:16px;height:12px;border-width:3px;border-radius:0 30px 30px 0;border-left-width:0;border-bottom-color:transparent;box-shadow:inset -1px 3px 3px -2px rgba(0,0,0,0.4);transition:all .3s, rotate 1s;transform-origin:100% 100%;}
.gallery + p {margin-top:2rem !important;}
.gallery img {position:absolute;top:0;left:0;max-width:inherit;width:228px;max-height:190px;margin:0;transition:all .3s, max-width 0ms;}
.gallery img:nth-of-type(2) {transform:rotate(3deg);top:-6px;}
.gallery img:nth-of-type(3) {transform:rotate(-3deg);top:5px;left:3px;}
.gallery:hover img {left:-8px;}
.gallery:hover img:nth-of-type(2) {transform:rotate(2deg);top:-13px;left:-4px;}
.gallery:hover img:nth-of-type(3) {transform:rotate(-4deg);top:13px;left:0px;}
.gallery.expand {transform:rotate(0deg);width:100%;text-align:right;margin:15px 0 0;}
.gallery.expand + * {clear:right;}
.gallery.expand + p {margin-top:0 !important;}
.gallery.expand::before, .gallery.expand::after {top:89px;right:-41px;transform:rotate(76deg);}
.gallery.expand::after {top:100px;right:-38px;}
.gallery.expand img {padding:0;top:0;left:494px;transform:rotate(0deg) !important;box-shadow:none;display:inline-block;border:3px solid #efefef;}
.gallery.expand:hover img {top:0;left:494px;}
.gallery.expand img.static {left:0;}
.gallery.expand img:nth-of-type(2).static {left:247px;}
.gallery.expand img:nth-of-type(3).static {left:494px;}
.gallery span {position:absolute;display:block;right:0;bottom:-1.7rem;left:35px;color:#888;font-size:.8rem;transform:rotate(-2.5deg);text-align:center;transition:opacity .3s, color 100ms, background-color 100ms;}
.gallery span.collapse {opacity:0;transform:rotate(0deg);z-index:-1;height:0;top:77px;right:auto;bottom:auto;left:0;display:inline-block;line-height:42px;transform:rotate(-90deg);font-size:.9rem;}
.gallery:hover span {opacity:0;}
.gallery.expand span {opacity:0;height:0;}
.gallery.expand span.collapse {opacity:1;left:-119px;height:auto;width:196px;}
.gallery.expand span.collapse:hover {color:#000;}
}
@media (min-width:670px){
.case-study > *, .case-study > *:not(header) {padding:5%;}
.case-study header {padding:50px 5% 10px;}
.case-study header br {display:none;}
}
@media (min-width:810px){.case-study {max-width:810px;margin:0 auto;}}
@media (min-width:850px){
.case-study {width:810px;box-shadow:none;border:none;}
.case-study > * {box-shadow:0 3px 15px -3px rgba(0,0,0,0.4);border:1px solid transparent;margin-bottom:2rem;min-width:670px;}
.case-study > *:not(header)::after {content:'';display:block;clear:both;}
.case-study header::after {content:"Case Study";color:#796c07;font-family:arial;position:absolute;top:85px;left:-78px;line-height:2rem;font-size:1.1rem;background-color:#ffe838;transform:rotate(-90deg);z-index:30;padding:0 15px;}
.case-study header + .overview {margin-top:-2rem;position:relative;}
}
pre {background-color:#00000014;margin:1em -5.5%;overflow-x:auto;padding:1.5em 5.5%;}
/* CAN-ZOOM IMAGE */
img.can-zoom, figure.can-zoom {max-width:30%;float:right;margin:1rem 0 10px 20px;transition:max-width .5s, border .3s, margin-left .3s;cursor:zoom-in;border:1px solid white;}
img.can-zoom:hover, figure.can-zoom:hover {border-color:grey;}
img.zoom, figure.zoom {max-width:100%;border-width:0;margin-left:0;cursor:zoom-out;}
img.can-zoom.zoom, figure.can-zoom.zoom {width:100%;}
figure.can-zoom img {max-width:100%;}
figure.can-zoom figcaption {text-align:center;}
/* TYPOGRAPHY */
h1 {font-family:Gelasio,sans-serif;font-weight:600;font-size:2.7em;letter-spacing:2.3px;line-height:1.1em;margin:0;}
h1 span {font-weight:700;font-size:0.79em;text-transform:uppercase;}
h3 {font-family:Gelasio,sans-serif;font-size:1.6em;font-weight:normal;margin-bottom:.3em;}
/* FOOTER */
footer {background-color:var(--bg);padding:60px;}
footer a {text-decoration:none;}
/* dark-mode colors */
@media (prefers-color-scheme:dark) {
pre {background-color:#ffffff14;}
:root {
--h:white;
--text:white;
--bg:#20202f;
--highlight:#7C7930;
--link:white;
--divider:black;
}}
@media (prefers-color-scheme:dark) and (min-width:850px) {
.case-study > * {box-shadow:none;border:1px solid var(--bg-header);}
}