Cyberinfrastructure for Network Science Style Guide

Ex. This is a headline

h1 {
    font-size: 32px;
}

Ex. This is a subheader

h2 {
    font-size: 25px;
}

Ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis, urna vitae rhoncus scelerisque, ipsum odio fermentum risus, ut blandit ante nisl eu ante. Maecenas nec nunc sollicitudin, semper ante at, gravida urna. Etiam vehicula lorem a erat faucibus posuere.

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

Ex. Filter Label by Grants

.labels {
    font-weight: 600; 
    font-size: 16px;
}

Ex. 0M | 2M | 4M | 6M | 8M | 10M | 12M

.axis-text { 
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.legend-container button:hover {
    background-color: #d8d8d8;
}

.legend-container button {
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background: #eaeaea;
    color: rgba(0,0,0,0.87);
    border: .5px solid #afafaf;
    border-radius: 2px;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Nodes

.legend-item-label {
    color: rgba(0,0,0,0.87);
    font-size: 18px;
    font-weight: 600;
}

Number of Grants

.legend-sub-title {
    font-size: 14px;
}

19

13

1

.legend-label-number {
    font-size: 13px;
    text-align: right;
}