del

classless-1.0-mod.css

/* Classless.css v1.0

Table of Contents:
 1. Theme Settings
 2. Reset
 3. Base Style
 4. Extras  (remove unwanted)
 5. Classes  (remove unwanted)
*/

/* 1. Theme Settings ––––––––––––––––––––-–––––––––––––– */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

@media (prefers-color-scheme: dark) {
	:root, html {
		--rem: 12pt;
		--width: 50rem;
		--navpos: fixed;  /* fixed | absolute */
		--font-p: 1em/1.7 Arial, Helvetica, sans-serif;
		--font-h: .9em/1.5 Arial, Helvetica, sans-serif;
		--font-c: .9em/1.4 monospace;
		--border: 1px solid var(--cmed);
		--ornament: "";
		/* foreground   | background color */
		--cfg:   #433;    --cbg:    #000;
		--cdark: #888;    --clight: #f5f6f7;
		--cmed:  #d1d1d1;
		--clink: red;
		--csummary: #333;
		--cemph: darkred;    --cemphbg: #0881;
	}
}

@media (prefers-color-scheme: light) {
	:root, html {
		--rem: 12pt;
		--width: 50rem;
		--navpos: fixed;  /* fixed | absolute */
		--font-p: 1em/1.7 'Open Sans', Helvetica, sans-serif;
		--font-h: .9em/1.5 'Open Sans', Helvetica, sans-serif;
		--font-c: .9em/1.4 monospace;
		--border: 1px solid var(--cmed);
		--ornament: "";
		/* foreground   | background color */
		--cfg:   #433;    --cbg:    #fff;
		--cdark: #888;    --clight: #f5f6f7;
		--cmed:  #d1d1d1;
		--clink: darkred;
		--csummary: #333;
		--cemph: red;    --cemphbg: #0881;
	}
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

/* 2. Reset –––––––––––––––––––––––––––––––––––––––––––– */

/* reset block elements  */
* { box-sizing: border-box; border-spacing: 0; margin: 0; padding: 0;}
header, footer, figure, table, video, details, blockquote,
ul, ol, dl, fieldset, pre, pre > code, caption {
	display: block;
	margin: 0.5rem 0rem 1rem;
	width: 100%;
	overflow: auto hidden;
	text-align: left;
}
video, summary, input, select { outline:none; }

/* reset clickable things  (FF Bug: select:hover prevents usage) */
a, button, select { color: var(--clink); cursor: pointer; }
summary { color: var(--csummary); cursor: pointer; }

/* 3. Base Style ––––––––––––––––––––––––––––––––––––––– */
html { font-size: var(--rem); background: var(--cbg); }
body {
	position: relative;
	margin: auto;
	max-width: var(--width);
	font: var(--font-p);
	color: var(--cfg);
	padding: 3.0rem 0.6rem 0;
	overflow-x: hidden;
}
body > footer { margin: 2rem 0rem 0rem; font-size: 90%; text-align: center; }
p { margin: .6em 0; }

/* links */
a[href]{ text-decoration: underline solid var(--cmed); text-underline-position: under; }
a[href^="#"] {text-decoration: none; }
a:hover, button:not([disabled]):hover, summary:hover {
	filter: brightness(92%); color: var(--cemph); border-color: var(--cemph);
}

/* lists */
ul, ol, dl { margin: 1rem 0; padding: 0 0 0 2em; }
li:not(:last-child), dd:not(:last-child) { margin-bottom: 0.5rem; }
dt { font-weight: bold; }

/* headings */
h1, h2, h3, h4, h5 { margin: 0.5em 0 0.5rem; font: var(--font-h); line-height: 1.2em; clear: both; }
h1+h2, h2+h3, h3+h4, h4+h5 { margin-top: .5em; padding-top: 0; }  /* non-clashing headings */
h1 { font-size: 2.2em; font-weight: 300; }
h2 { font-size: 2.0em; font-weight: 300; font-variant: small-caps; }
h3 { font-size: 1.5em; font-weight: 400; }
h4 { font-size: 1.1em; font-weight: 700; }
h5 { font-size: 1.2em; font-weight: 400; color: var(--cfg); }
h6 { font-size: 1.0em; font-weight: 700; font-style: italic; display: inline; }
h6 + p { display: inline; }

/* tables */
td, th {
  padding: 0.5em 0.8em;
  text-align: right;
  border-bottom: 0.1rem solid var(--cmed);
  white-space: nowrap;
  font-size: 95%;
}
thead th[colspan] { padding: .2em 0.8em; text-align: center; }
thead tr:not(:only-child) td { padding: .2em 0.8em; }
thead+tbody tr:first-child td { border-top: 0.1rem  solid var(--cdark);  }
td:first-child, th:first-child { text-align: left; }
tr:hover{ background-color: var(--clight); }
table img { display: block; }

/* figures */
img, svg { max-width: 100%; vertical-align: text-top; object-fit: cover; }
p>img:not(:only-child) { float: right; margin: 0 0 .5em .5em; }
figure > img { display: inline-block; width: auto; }
figure > img:only-of-type, figure > svg:only-of-type { max-width: 100%; display: block; margin: 0 auto 0.4em; }
figcaption, caption { font: var(--font-h); color: var(--cdark); width: 100%; }
figcaption > *:first-child, caption > *:first-child { display: inline-block; margin: 0; }
figure > *:not(:last-child) { margin-bottom: 0.4rem; }

/* code */
pre > code {
  margin: 0;
  position: relative;
  padding: 0.8em;
  border-left: .4rem solid var(--cemph);
}
code, kbd, samp {
	padding: 0.2em;
	font: var(--font-c);
	background: var(--clight);
	border-radius: 4px;
}
kbd { border: 1px solid var(--cmed); }

/* misc */
blockquote { border-left: 0.4rem solid var(--cmed); padding: 0 0 0 1rem;  }
time{ color: var(--cdark); }
hr { border: 0; border-top: 0.1rem solid var(--cmed); }
nav { width: 100%; background-color: var(--clight); }
::selection, mark { background: var(--clink); color: var(--cbg); }


/* 4. Extra Style –––––––––––––––––––––––––––––––––––––– */

/* Auto Numbering: figure/tables/headings/cite */
article { counter-reset: h2 0 h3 0 tab 0 fig 0 lst 0 ref 0 eq 0; }
article figure figcaption:before {
	color: var(--cemph);
	counter-increment: fig;
	content: "Figure " counter(fig) ": ";
}

/* subfigures */
figure { counter-reset: subfig 0 }
article figure figure { counter-reset: none; }
article figure > figure { display: inline-grid; width: auto; }
figure > figure:not(:last-of-type) { padding-right: 1rem; }
article figure figure figcaption:before {
	counter-increment: subfig 1;
	content: counter(subfig, lower-alpha) ": ";
}

/* listings */
article figure pre + figcaption:before {
	counter-increment: lst 1;
	content: "Listing " counter(lst) ": ";
}

/* tables */
figure > table:only-of-type { display: table; margin: 0.5em auto !important; width: fit-content; }
article figure > table caption { display: table-caption; caption-side: bottom; }
article figure > table + figcaption:before,
article table caption:before {
	color: var(--cemph);
	counter-increment: tab 1;
	content: "Table " counter(tab) ": ";
}

/* headings */
article h2, h3 { position: relative; }
article h2:before,
article h3:before {
	display: inline-block;
	position: relative;
	font-size: 0.6em;
	text-align: right;
	vertical-align: baseline;
	left: -1rem;
	width: 2.5em;
	margin-left: -2.5em;
}
article h1 { counter-set: h2; }
article h2:before { counter-increment: h2; content: counter(h2) ". "; counter-set: h3; }
article h3:before { counter-increment: h3; content: counter(h2) "." counter(h3) ". ";}
@media (max-width: 60rem) { h2:before, h3:before { display: none; } }

/* tooltip + citation */
article p>cite:before {
	padding: 0 .5em 0 0;
	counter-increment: ref; content: " [" counter(ref) "] ";
	vertical-align: super; font-size: .6em;
}
article p>cite > *:only-child { display: none; }
article p>cite:hover > *:only-child,
[data-tooltip]:hover:before {
	display: inline-block; z-index: 40;
	white-space: pre-wrap;
	position: absolute; left: 1rem; right: 1rem;
	padding: 1em 2em;
	text-align: center;
	transform:translateY( calc(-100%) );
	content: attr(data-tooltip);
	color: var(--cbg);
	background-color: var(--cemph);
	box-shadow: 0 2px 10px 0 black;
}
[data-tooltip], article p>cite:before { 
	color: var(--clink);
	border: .8rem solid transparent; margin: -.8rem;
}
abbr[title], [data-tooltip] { cursor: help; }

/* navbar */
nav+* { margin-top: 3rem; }
body>nav, header nav {
	position: var(--navpos);
	top: 0; left: 0; right: 0;
	z-index: 41;
	box-shadow: 0vw -50vw 0 50vw var(--clight), 0 calc(-50vw + 2px) 4px 50vw var(--cdark);
}
nav ul { list-style-type: none; }
nav ul:first-child { margin: 0; padding: 0; overflow: visible; }
nav ul:first-child > li {
	display: inline-block;
	margin: 0;
	padding: 0.8rem .6rem;
}
nav ul > li > ul {
	display: none;
	width: auto;
	position: absolute;
	margin: 0.5rem 0;
	padding: 1rem 2rem;
	background-color: var(--clight);
	border: var(--border);
	border-radius: 4px;
	z-index: 42;
}
nav ul > li > ul > li { white-space: nowrap; }
nav ul > li:hover > ul { display: block; }
@media (max-width: 40rem) {
	nav ul:first-child > li:first-child:after { content: " \25BE"; }
	nav ul:first-child > li:not(:first-child):not(.sticky) { display: none; }
	nav ul:first-child:hover > li:not(:first-child):not(.sticky) { display: block; float: none !important; }
}

/* details/cards */
summary>* { display: inline; }
.card, details {
	display: block;
	margin: 0.5rem 0rem 1rem;
	padding: 0 .6rem;
	border-radius: 4px;
	overflow: hidden;
}
.card, details[open] { outline: 1px solid var(--cmed); }
.card>img:first-child { margin: -3px -.6rem; max-width: calc(100% + 1.2rem); }
summary:hover, details[open] summary, .card>p:first-child {
	box-shadow: inset 0 0 0 2em var(--clight), 0 -.8rem 0 .8rem var(--clight); 
}
.hint { --cmed: var(--cemph); --clight: var(--cemphbg); background-color: var(--clight); }
.warn { --cmed: #c11; --clight: #e221; background-color: var(--clight); }

/* big first letter */
article > section:first-of-type > h2:first-of-type + p:first-letter,
article > h2:first-of-type + p:first-letter, .lettrine {
	float: left;
	font-size: 3.5em;
	padding: 0.1em 0.1em 0 0;
	line-height: 0.68em;
	color: var(--cemph);
}

section {
	border-top: 1px solid #333;
}

/* ornaments */
section:after {
	display: block;
	margin: 1em 0;
	color: var(--cmed);
	text-align: center;
	font-size: 1.5em;
	content: var(--ornament);
}

/* side menu (aside is not intended for use in a paragraph!) */
main aside {
	position: absolute;
	width: 8rem;      right: -8.6rem;
	font-size: 0.8em; line-height: 1.4em;
}
@media (max-width: 70rem) { main aside { display: none; } }

/* forms and inputs  */
textarea, input:not([type=range]), button, select {
	font: var(--font-h);
	border-radius: 4px;
	border: 1.5px solid var(--cmed);
	padding: 0.4em 0.8em;
}
fieldset select, input:not([type=checkbox]):not([type=radio]) {
	display: block;
	width: 100%;
	margin: 0 0 1rem;
}
button, select {
	font-weight: bold;
	background-color: var(--clight);
	margin: .5em;
	border: 1.5px solid var(--clink);
}
button { padding: 0.4em 1em; font-size: 85%; letter-spacing: 0.1em; }
button[disabled]{ color: var(--cdark); border-color: var(--cmed); }
fieldset { border-radius: 4px; border: var(--border); padding: .5em 1em;}
textarea:hover, input:not([type=checkbox]):not([type*='ra']):hover, select:hover{
  border: 1.5px solid var(--cemph);
}
textarea:focus, input:not([type=checkbox]):not([type*='ra']):focus{
	border: 1.5px solid var(--clink);
	box-shadow: 0 0 5px var(--clink);
}
p>button { padding: 0 .5em; margin: 0 .5em; }
p>select { padding: 0;      margin: 0 .5em; }


/* 5. Bootstrap-compatible classes ––––––––––––––––––––– */

/* grid */
.row { display: flex; margin:  0.5rem -0.6rem; align-items: stretch; }
.row [class*="col"] { padding: 0  0.6rem; }
.row .col   { flex: 1 1 100%; }
.row .col-2 { flex: 0 0 16.66%; max-width: 16.66%;}
.row .col-3 { flex: 0 0 25%; max-width: 25%;}
.row .col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.row .col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
.row .col-6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 40rem) { .row { flex-direction: column; } }

/* align */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.float-left  { float: left !important; }
.float-right { float: right !important; }
.clearfix    { clear: both; }

/* colors */
.text-black    { color: #000; }
.text-white    { color: #fff; }
.text-primary  { color: var(--cemph); }
.text-secondary{ color: var(--cdark); }
.bg-white    { background-color: #fff; }
.bg-light    { background-color: var(--clight); }
.bg-primary  { background-color: var(--cemph); }
.bg-secondary{ background-color: var(--cmed); }

/* margins */
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0 !important; }
.m-1, .mx-1, .mr-1 { margin-right:  1.0rem !important; }
.m-1, .mx-1, .ml-1 { margin-left:   1.0rem !important; }
.m-1, .my-1, .mt-1 { margin-top:    1.0rem !important; }
.m-1, .my-1, .mb-1 { margin-bottom: 1.0rem !important; }

/* pading */
.p-0 { padding: 0 !important; }
.p-1, .px-1, .pr-1 { padding-right:  1.0rem !important; }
.p-1, .px-1, .pl-1 { padding-left:   1.0rem !important; }
.p-1, .py-1, .pt-1 { padding-top:    1.0rem !important; }
.p-1, .py-1, .pb-1 { padding-bottom: 1.0rem !important; }

/* be print-friendly */
@media print { 
	@page { margin: 1.5cm 2cm; } 
	html {font-size: 9pt!important; } 
	body { max-width: 27cm; }
	p { orphans: 2; widows: 2; }
	caption, figcaption { page-break-before: avoid; }
	h2, h3, h4, h5 { page-break-after: avoid;}
	.noprint, body>nav, section:after { display: none; }
	.row { flex-direction: row; }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Augustin Luna</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
    <link rel="stylesheet" href="https://gist.githack.com/cannin/85c135eebb15864e57dd9327138a0376/raw/classless-1.0-mod.css"/>
  </head>

  <body>
    <header> 
      <nav>
        &nbsp;Augustin Luna /
        <a href="/">LinkedIn</a> / 
        <a href="/usage/">GitHub</a> / 
        <a href="/customization/">Twitter</a> / 
        <a href="/template/">Scholar</a>
      </nav>
    </header>
    <main>
      <h1>Augustin Luna</h1>
      <h2>Dept of Systems Biology, Harvard Medical School</h2>
      <h3>Bioinformatics Scientist / Research Associate</h3>
      <h3>augustin_luna AT hms.harvard.edu</h3>
      <section>
        <h1>Experiences</h1>
        <h2>Post-Baccalaureate Intramural Research Training Award Fellow / National Institute of Mental Health (10/2005-06/2007)</h2>
        <p>Worked with Daniel Weinberger and Kristen K. Nicodemus. Wrote an automated statistical analysis pipeline for candidate gene studies. Wrote software to visualize the results of SNP analyses. Performed analysis in a simulation study assessing power and type I error of single SNP transmission disequilibrium tests (TDTs).</p>

        <h2>Pre-Doctoral Cancer Research Training Award Fellow / National Cancer Institute (07/2008-08/2013)</h2>
        <p>Worked with Mirit I. Aladjem and Kurt W. Kohn. Worked on standardized representations for biological data (Molecular Interaction Maps (MIMs), Systems Biology Graphical Notation (SBGN), and BioPAX) and related software for MIMs: XML-based format, API, graphical editor, validator, scripting interface, and faceted browser. Worked on an ODE-based model of interactions that connect components of the circadian clock to those of DNA damage response; collaborating with Geoffrey B. McFadden (at NIST). Mentored student projects through the Google Summer of Code Project (2011 and 2012).</p>

        <h2>Undergraduate Research Assistant / Georgia Institute of Technology (09/2004-05/2005)</h2>
        <p>Worked with Andreas Bommarius and Karen M. Polizzi. Created an expression vector for mutant variants in a high throughput screen. Collected information on antibiotic resistance in E.coli due to beta-lactamase.</p>

        <h2>Bioinformatics PhD Student / Boston University (08/2007-07/2013)</h2>
        <p>Worked with Daniel Segrè. Worked on a metabolic network to represent a kidney cell using BIGG human metabolic network and microarray data from the GEO repository for flux balance analysis.</p>

        <h2>Intern / Pfizer (06/2010-07/2010)</h2>
        <p>Worked with Jacob Glanville. Developed a wiki-based platform for the analysis and collaborative annotation of experimental results.</p>

        <h2>Research Fellow / Memorial Sloan-Kettering Cancer Center (09/2013-10/2015)</h2>
        <p>Worked with Chris Sander. Working on standardized representations of biological data (BioPAX), the aggregation of multiple pathway databases into Pathway Commons, and related software, including: Paxtools and paxtoolsR. In collaboration with the Yves Pommier lab of the Developmental Therapeutics Branch at the NCI, working to identify novel drug-target interactions using compound activity from the NCI Developmental Therapeutics Program (DTP) and genomic profiling data of the NCI-60 cancer cell lines. Compounds are prioritized for further development using understanding of pharmacology, target pathway context, relevance to cancer, and novelty.</p>      

        <h2>Undergraduate Research Assistant / Georgia Institute of Technology (09/2003-05/2004)</h2>
        <p>Worked with Allen Tannenbaum and Eli Hershkovitz. Worked on the classification of RNA classification into motif libraries. Wrote programs to parse tRNA X-ray crystallography data</p>

        <h2>Research Fellow / Dana-Farber Cancer Institute (11/2015-Present)</h2>
        <p>Work with Chris Sander. Develop R packages for cancer pharmacology research, including cgdsr (CBioPortal, TCGA studies), paxtoolsr (Pathway Commons), rcellminer (NCI-60 cell lines). Develop R based integrative analyses and bioinformatics pipelines with a focus on reproducibility using Docker. Develop web applications for cancer pharmacology databases and analyses. Work on tools to conduct complex pathway analyses using the aggregated Pathway Commons database. Work to identify novel drug-target interactions using compound activity from the NCI Developmental Therapeutics Program (DTP) and omic profiling data of the NCI-60 cancer cell lines in collaboration with the Developmental Therapeutics Branch at the NCI, the Genomics of Drug Sensitivity in Cancer Project at the Sanger Institute, and the Institute of Molecular Systems Biology at ETH Zurich. Work to identify novel drug combinations for cancer using proteomics data.</p>
      </section>

      <section>
        <figure><img src="https://via.placeholder.com/350x200"/></figure>
        <p><img src="https://via.placeholder.com/350x75"/>The library has styles for <strong>strong</strong>, <em>emphasized</em> text and so on.</p>
      </section>

      <section>
        <h1>Education</h1>
        <ul>
          <li>Bioinformatics, PhD / Boston University / 2007-2013</li>
          <li>Biomedical Engineering, BS / Georgia Institute of Technology / 2002-2005</li>
          <li>Chemistry, AS / Middle Georgia College / 2000-2002</li>
        </ul>
      </section>

      <section>
      <h1>Honors</h1>
      <ul>
        <li>Petit Undergraduate Research Scholar / 2004</li>
        <li>Postdoctoral Ruth L. Kirschstein National Research Service Award / 2015</li>
        <li>NIH Post-Baccalaureate Intramural Research Training Award / 2005</li>
        <li>Goizueta Foundation Scholarship / 2004</li>
        <li>Alpha Eta Mu Beta Biomedical Engineering Honor Society / 2005</li>
        <li>Georgia Governor’s Scholar / 2001</li>
        <li>Tau Beta Pi Engineering Honor Society / 2005</li>
        <li>NCI Pre-Doctoral Cancer Research Training Award / 2008</li>
        <li>Golden Key Academic Honor Society / 2005</li>
        <li>HOPE Scholarship / 2001</li>
        <li>Ford Foundation Dissertation Fellowship / 2012</li>
      </ul>
      </section>

      <section>
      <h1>Education</h1>
      <ul>
        <li>Bioinformatics, PhD / Boston University / 2007-2013</li>
        <li>Biomedical Engineering, BS / Georgia Institute of Technology / 2002-2005</li>
        <li>Chemistry, AS / Middle Georgia College / 2000-2002</li>
      </section>

      <section>
      <h1>Publications</h1>
      <details>
        <summary>TITLE</summary>
        Abstract
      </details>
      </section>
    </main>
    <footer>Made using classless CSS</footer>
  </body>
</html>