Skip to content

Commit b808a4b

Browse files
Link7808Link7808
committed
init biocap project page
0 parents  commit b808a4b

16 files changed

Lines changed: 4340 additions & 0 deletions

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# BioCLIP Website
2+
3+
This branch contains the source code for building the BioCAP website.

‎css/main.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
:root {
2+
--secondary-color: #bb0000;
3+
--nice-gray: rgb(236, 240, 243);
4+
--main-width: 84ch;
5+
font-size: 1.0em;
6+
font-family: "Noto Sans Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7+
}
8+
9+
html {
10+
box-sizing: border-box;
11+
}
12+
13+
*,*:before,*:after {
14+
box-sizing: inherit;
15+
}
16+
17+
body {
18+
margin: 0;
19+
}
20+
21+
main {
22+
margin: 0 auto;
23+
max-width: var(--main-width);
24+
text-rendering: optimizeLegibility;
25+
-webkit-font-smoothing: antialiased;
26+
-moz-osx-font-smoothing: grayscale;
27+
line-height: 1.7em;
28+
min-height: calc(var(--main-width));
29+
}
30+
31+
h1 {
32+
text-align: center;
33+
font-size: 2.8em;
34+
line-height: 1.2em;
35+
}
36+
37+
38+
/***************
39+
Tables
40+
***************/
41+
42+
43+
td,th {
44+
padding: 2px 8px;
45+
margin: 0;
46+
}
47+
th {
48+
text-align: center;
49+
font-size: 0.9em;
50+
}
51+
table {
52+
max-width: 100%;
53+
display: inline-block;
54+
overflow-x: scroll;
55+
white-space: nowrap;
56+
57+
padding: 0;
58+
margin: auto;
59+
}
60+
th {
61+
border-top: 2px solid black;
62+
border-bottom: 1px solid black;
63+
}
64+
tbody > tr:last-child > td {
65+
border-bottom: 2px solid black;
66+
}
67+
/* When you hover over a table row, highlight its children table data elements without a rowspan element. */
68+
tbody > tr:hover {
69+
background-color: var(--nice-gray);
70+
}
71+
th.sticky,td.sticky {
72+
position: sticky;
73+
left: 0;
74+
z-index: 2;
75+
background: #fff;
76+
}
77+
th.large-padding {
78+
margin: 0;
79+
padding: 2px 18px;
80+
}
81+
td.large-padding {
82+
margin: 0;
83+
padding: 2px 18px;
84+
}
85+
86+
pre.reference {
87+
-webkit-overflow-scrolling: touch;
88+
overflow-x: auto;
89+
padding: 0.5em 0.5em;
90+
white-space: pre;
91+
word-wrap: normal;
92+
line-height: 1.2em;
93+
background-color: #f5f5f5;
94+
font-size: 1.1em;
95+
border-radius: 4px;
96+
}
97+
98+
99+
/***************
100+
Helpers
101+
***************/
102+
.centered {
103+
text-align: center;
104+
}
105+
.authors-line {
106+
white-space: nowrap;
107+
}
108+
109+
.no-border-top {
110+
border-top: 0;
111+
}
112+
.no-border-bottom {
113+
border-bottom: 0;
114+
}
115+
.border-right {
116+
border-right: 1px solid black;
117+
}
118+
.text-sm {
119+
font-size: 0.875rem;
120+
line-height: 1.25rem;
121+
}
122+
.centered {
123+
text-align: center;
124+
}
125+
.full-width {
126+
width: max(90vw, 100%);
127+
position: relative;
128+
left: calc(-45vw + 50%);
129+
}
130+
.banded {
131+
width: 100vw;
132+
position: relative;
133+
left: calc(-50vw + 50%);
134+
135+
padding: 1em;
136+
text-align: center;
137+
background-color: var(--nice-gray);
138+
}
139+
140+
141+
/***************
142+
Figures
143+
***************/
144+
145+
146+
.figure-container {
147+
display: grid;
148+
grid-template-columns: 1fr 1fr;
149+
column-gap: 4px;
150+
row-gap: 4px;
151+
}
152+
153+
@media only screen and (max-width: 768px) {
154+
.figure-container {
155+
grid-template-columns: 1fr;
156+
}
157+
}
158+
159+
figure {
160+
margin: 0px;
161+
}
162+
163+
/* Makes <a> behave like it doesn't exist with regards to flexbox */
164+
figure > a {
165+
display: contents;
166+
}
167+
figure > a > img,figure > img {
168+
width: 100%;
169+
}
170+
figcaption {
171+
text-align: left;
172+
}
173+
174+
175+
/***************
176+
Pill Buttons
177+
***************/
178+
179+
180+
.pill-button {
181+
padding: 0.5em 1em;
182+
border-radius: 9999px;
183+
background-color: black;
184+
color: white;
185+
text-decoration: none;
186+
margin-right: 0.25em;
187+
white-space: nowrap;
188+
}
189+
190+
.pill-button > span {
191+
font-size: 1em;
192+
}
193+
194+
.pill-button > img {
195+
height: 1em;
196+
display: inline-block;
197+
transform:translate(0, 0.125em);
198+
}
199+
200+
/***************
201+
Dropdown
202+
***************/
203+
details {
204+
margin-top: 6px;
205+
display: inline-block;
206+
min-width: 16ch;
207+
text-align: center;
208+
padding: 4px 12px;
209+
position: relative;
210+
}
211+
details:hover {
212+
cursor: pointer;
213+
}
214+
215+
details > div.options {
216+
position: absolute;
217+
background: white;
218+
width: 100%;
219+
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
220+
border-radius: 4px;
221+
}
222+
223+
details > div.options > p {
224+
margin: 0;
225+
padding: 6px 2px;
226+
}
227+
details > div.options > p:hover {
228+
background-color: var(--nice-gray);
229+
}

0 commit comments

Comments
 (0)