Skip to content

Instantly share code, notes, and snippets.

@maddy531

maddy531/index.html

Created December 11, 2018 21:27
Show Gist options
  • Save maddy531/f977e0d2b6a376a76a1a1101500d028e to your computer and use it in GitHub Desktop.
Save maddy531/f977e0d2b6a376a76a1a1101500d028e to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="dep/normalize.css/normalize.css" />
<link rel="stylesheet" type="text/css" href="dep/Font-Awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style id="jsbin-css">
@page{
size: letter portrait;
margin: 0;
}
*{
box-sizing: border-box;
}
:root{
--page-width: 8.5in;
--page-height: 11in;
--main-width: 6.4in;
--sidebar-width: calc(var(--page-width) - var(--main-width));
--decorator-horizontal-margin: 0.2in;
--sidebar-horizontal-padding: 0.2in;
/* XXX: using px for very good precision control */
--decorator-outer-offset-top: 10px;
--decorator-outer-offset-left: -5.5px;
--decorator-border-width: 1px;
--decorator-outer-dim: 9px;
--decorator-border: 1px solid #ccc;
--row-blocks-padding-top: 5pt;
--date-block-width: 0.6in;
--main-blocks-title-icon-offset-left: -19pt;
}
body{
width: var(--page-width);
height: var(--page-height);
margin: 0;
font-family: "Open Sans", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
hyphens: auto;
}
h1, h2, h3{
margin: 0;
color: #000;
}
li{
list-style-type: none;
}
#main{
float: left;
width: var(--main-width);
padding: 0.25in 0.25in 0 0.25in;
font-size: 7pt;
}
#sidebar{
float: right;
position: relative; /* for disclaimer */
width: var(--sidebar-width);
height: 100%;
padding: 0.6in var(--sidebar-horizontal-padding);
background-color: #f2f2f2;
font-size: 8.5pt;
}
/* main */
/** big title **/
#title, h1, h2{
text-transform: uppercase;
}
#title{
position: relative;
left: 0.55in;
margin-bottom: 0.3in;
line-height: 1.2;
}
#title h1{
font-weight: 300;
font-size: 18pt;
line-height: 1.5;
}
#title h1 strong{
margin: auto 2pt auto 4pt;
font-weight: 600;
}
.subtitle{
font-size: 8pt;
}
/*** categorial blocks ***/
.main-block{
margin-top: 0.1in;
}
#main h2{
position: relative;
top: var(--row-blocks-padding-top);
/* XXX: 0.5px for aligning fx printing */
left: calc((var(--date-block-width) + var(--decorator-horizontal-margin)));
font-weight: 400;
font-size: 11pt;
color: #555;
}
#main h2 > i{
/* use absolute position to prevent icon's width from misaligning title */
/* assigning a fixed width here is no better due to needing to align decorator
line too */
position: absolute;
left: var(--main-blocks-title-icon-offset-left);
z-index: 1; /* over decorator line */
color: #444;
}
#main h2::after{ /* extends the decorator line */
height: calc(var(--row-blocks-padding-top) * 2);
position: relative;
top: calc(-1 * var(--row-blocks-padding-top));
/* XXX: 0.5px for aligning fx printing */
left: calc(-1 * var(--decorator-horizontal-margin));
display: block;
border-left: var(--decorator-border);
z-index: 0;
line-height: 0;
font-size: 0;
content: ' ';
}
/**** minor tweaks on the icon fonts ****/
#main h2 > .fa-graduation-cap{
left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
top: 2pt;
}
#main h2 > .fa-suitcase{
top: 1pt;
}
#main h2 > .fa-folder-open{
top: 1.5pt;
}
/**** individual row blocks (date - decorator - details) ****/
.blocks{
display: flex;
flex-flow: row nowrap;
}
.blocks > div{
padding-top: var(--row-blocks-padding-top);
}
.date{
flex: 0 0 var(--date-block-width);
padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important;
padding-right: var(--decorator-horizontal-margin);
font-size: 7pt;
text-align: right;
line-height: 1;
}
.date span{
display: block;
}
.date span:nth-child(2)::before{
position: relative;
top: 1pt;
right: 5.5pt;
display: block;
height: 10pt;
content: '|';
}
.decorator{
flex: 0 0 0;
position: relative;
width: 2pt;
min-height: 100%;
border-left: var(--decorator-border);
}
/*
* XXX: Use two filled circles to achieve the circle-with-white-border effect.
* The normal technique of only using one pseudo element and
* border: 1px solid white; style makes firefox erroneously either:
* 1) overflows the grayshade background (if no background-clip is set), or
* 2) shows decorator line which should've been masked by the white border
*
*/
.decorator::before{
position: absolute;
top: var(--decorator-outer-offset-top);
left: var(--decorator-outer-offset-left);
content: ' ';
display: block;
width: var(--decorator-outer-dim);
height: var(--decorator-outer-dim);
border-radius: calc(var(--decorator-outer-dim) / 2);
background-color: #fff;
}
.decorator::after{
position: absolute;
top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
content: ' ';
display: block;
width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
height: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
border-radius: calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2);
background-color: #555;
}
.blocks:last-child .decorator{ /* slightly shortens it */
margin-bottom: 0.25in;
}
/***** fine-tunes on the details block where the real juice is *****/
.details{
flex: 1 0 0;
padding-left: var(--decorator-horizontal-margin);
padding-top: calc(var(--row-blocks-padding-top) - 0.5pt) !important; /* not sure why but this is needed for better alignment */
}
.details header{
color: #000;
}
.details h3{
font-size: 9pt;
}
.main-block:not(.concise) .details div{
margin: 0.18in 0 0.1in 0;
}
.main-block:not(.concise) .blocks:last-child .details div{
margin-bottom: 0;
}
.main-block.concise .details div:not(.concise){
/* use padding to work around the fact that margin doesn't affect floated
neighboring elements */
padding: 0.05in 0 0.07in 0;
}
.details .place{
float: left;
font-size: 7.5pt;
}
.details .location{
float: right;
}
.details div{
clear: both;
}
.details .location::before{
display: inline-block;
position: relative;
right: 3pt;
top: 0.25pt;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
content: "\f041";
}
/***** fine-tunes on the lists... *****/
#main ul{
padding-left: 0.07in;
margin: 0.08in 0;
}
#main li{
margin: 0 0 0.025in 0;
}
/****** customize list symbol style ******/
#main li::before{
position: relative;
margin-left: -4.25pt;
content: '• ';
}
.details .concise ul{
margin: 0 !important;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.details .concise li{
margin: 0 !important;
}
.details .concise li{
margin-left: 0 !important;
}
/* sidebar */
#sidebar h1{
font-weight: 400;
font-size: 11pt;
}
.side-block{
margin-top: 0.5in;
}
#contact ul{
margin-top: 0.05in;
padding-left: 0;
font-family: "Source Code Pro";
font-weight: 400;
line-height: 1.75;
}
#contact li > i{
width: 9pt; /* for text alignment */
text-align: right;
}
#skills{
line-height: 1.5;
}
#skills ul{
margin: 0.05in 0 0.15in;
padding: 0;
}
#disclaimer{
position: absolute;
bottom: var(--sidebar-horizontal-padding);
right: var(--sidebar-horizontal-padding);
font-size: 7.5pt;
font-style: italic;
line-height: 1.1;
text-align: right;
color: #777;
}
#disclaimer code{
color: #666;
font-family: "Source Code Pro";
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body lang="en">
<section id="main">
<header id="title">
<h1>Maddy Andrade</h1>
<span class="subtitle">Software Engineer</span>
</header>
<section class="main-block">
<h2>
<i class="fa fa-suitcase"></i> Experiences
</h2>
<section class="blocks">
<div class="date">
<span>present</span>
<span>Feb' 2015</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Software Engineer</h3>
<span class="place">Deepfield/Nokia</span>
<span class="location">Ann Arbor, MI</span>
</header>
<div>
<ul>
<li>Built web applications using React.js, Material UI, and EmotionJS and tested functionality with Jest</li>
<li>Led small teams of developers to meet sprint goals including building features, fixing bugs, and paying off technical debt</li>
<li>Improved developer experience by documenting developer workflows, onboarding, and operational processes such as git workflow, filing bugs, and opening PR's</li>
<li>Created structure" bish pls you basically architected the mentorship program. Brag more, something like "Implemented and led the front-end intern mentorship program</li>
<li>Worked with APIs for big data analytics and security products</li>
<li>Created structure for front end intern mentorship program</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>Oct' 2015</span>
<span>Nov' 2014</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Sales & Marketing Representative</h3>
<span class="place">Nutshell</span>
<span class="location">Ann Arbor, MI</span>
</header>
<div>
<ul>
<li>Increase product visibility and customer outreach by .</li>
<li>Worked closely with the engineering team to relay customer feedback that would improve user experience, address bugs, and suggest possible features</li>
</ul>
</div>
</div>
</section>
</section>
<section class="main-block concise">
<h2>
<i class="fa fa-graduation-cap"></i> Education
</h2>
<section class="blocks">
<div class="date">
<span>Jan' 2016</span>
<span>Oct' 2015</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Software Developement</h3>
<span class="place">Grand Circus</span>
<span class="location">Detroit, MI</span>
</header>
</div>
</section>
<section class="blocks">
<div class="date">
<span>2009</span>
<span>2005</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>B.S. in Existential Science (Double Major)</h3>
<span class="place">Inexistent University</span>
<span class="location">Some City, Some Country</span>
</header>
<div>President's Scholarship</div>
</div>
</section>
<section class="blocks">
<div class="date">
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Massive Online Fee&ndash;Required Course (selective list)</h3>
</header>
<div class="concise">
<ul>
<li>Introduction to something else</li>
<li>Introduction to some more useless things</li>
<li>Philosophy in practice</li>
<li>Recursive research and its impact on recursive research</li>
<li>Artificial politics</li>
</ul>
</div>
</div>
</section>
</section>
<section class="main-block">
<h2>
<i class="fa fa-folder-open"></i> Volunteering
</h2>
<section class="blocks">
<div class="date">
<span>present</span>
<span>Sept' 2017 </span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Job Coordinator</h3>
<span class="place">SEM.JS</span>
</header>
<div>
<ul>
<li>I help connect local learners (mostly software engineers) to jobs in the Ann
Arbor/Detroit area. </li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>preset</span>
<span>Jun' 2014</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Volunteer</h3>
<span class="place">Girl Develop It</span>
</header>
<div>
<ul>
<li>Volunteering at events that aim to empower and assist women interested in getting into and advancing in the tech industry.</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>Oct' 2015</span>
<span>Sept' 2011</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Student Mentor</h3>
<span class="place">University of MIchigan,</span>
</header>
<div>
<ul>
<li>I helped students from Washtenaw Community College achieve their goal of
transferring to the University of Michigan. This included one-on-one sessions to
ensure their classes were transferable, planning outreach events, and connecting
current students to our graduates and professionals from U of M.</li>
</ul>
</div>
</div>
</section>
</section>
</section>
<aside id="sidebar">
<div class="side-block" id="contact">
<h1>
Contact Info
</h1>
<ul>
<li><i class="fa fa-envelope"></i> maddy531@gmail.com</li>
<li><i class="fa fa-linkedin"></i> linkedin.com/in/maddyandrade</li>
<li><i class="fa fa-github" aria-hidden="true"> @maddy531</li>
<li><i class="fa fa-phone"></i> 734.678.7014</li>
</ul>
</div>
<div class="side-block" id="skills">
<h1>
Skills
</h1>
<h3>Languages</h3>
<ul>
<li>Javascript</li>
<li>Python</li>
<li>HTML</li>
<li>CSS (SASS/LESS)</li>
</ul>
<h3>Web Frameworks</h3>
<ul>
<li>React.js</li>
<li>AngularJS</li>
<li>Node/Express</li>
</ul>
<h3>Dev Tool</h3>
<ul>
<li>Yarn/npm</li>
<li>Git + Github</li>
<li>Docker</li>
</ul>
</div>
<div class="side-block" id="disclaimer">
This r&eacute;sum&eacute; was wholly typeset with HTML/CSS &mdash; see <code>git.io/vVSYL</code>
</div>
</aside>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="dep/normalize.css/normalize.css" />
<link rel="stylesheet" type="text/css" href="dep/Font-Awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body lang="en">
<section id="main">
<header id="title">
<h1>Maddy Andrade</h1>
<span class="subtitle">Software Engineer</span>
</header>
<section class="main-block">
<h2>
<i class="fa fa-suitcase"></i> Experiences
</h2>
<section class="blocks">
<div class="date">
<span>present</span>
<span>Feb' 2015</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Software Engineer</h3>
<span class="place">Deepfield/Nokia</span>
<span class="location">Ann Arbor, MI</span>
</header>
<div>
<ul>
<li>Built web applications using React.js, Material UI, and EmotionJS and tested functionality with Jest</li>
<li>Led small teams of developers to meet sprint goals including building features, fixing bugs, and paying off technical debt</li>
<li>Improved developer experience by documenting developer workflows, onboarding, and operational processes such as git workflow, filing bugs, and opening PR's</li>
<li>Created structure" bish pls you basically architected the mentorship program. Brag more, something like "Implemented and led the front-end intern mentorship program</li>
<li>Worked with APIs for big data analytics and security products</li>
<li>Created structure for front end intern mentorship program</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>Oct' 2015</span>
<span>Nov' 2014</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Sales & Marketing Representative</h3>
<span class="place">Nutshell</span>
<span class="location">Ann Arbor, MI</span>
</header>
<div>
<ul>
<li>Increase product visibility and customer outreach by .</li>
<li>Worked closely with the engineering team to relay customer feedback that would improve user experience, address bugs, and suggest possible features</li>
</ul>
</div>
</div>
</section>
</section>
<section class="main-block concise">
<h2>
<i class="fa fa-graduation-cap"></i> Education
</h2>
<section class="blocks">
<div class="date">
<span>Jan' 2016</span>
<span>Oct' 2015</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Software Developement</h3>
<span class="place">Grand Circus</span>
<span class="location">Detroit, MI</span>
</header>
</div>
</section>
<section class="blocks">
<div class="date">
<span>2009</span>
<span>2005</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>B.S. in Existential Science (Double Major)</h3>
<span class="place">Inexistent University</span>
<span class="location">Some City, Some Country</span>
</header>
<div>President's Scholarship</div>
</div>
</section>
<section class="blocks">
<div class="date">
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Massive Online Fee&ndash;Required Course (selective list)</h3>
</header>
<div class="concise">
<ul>
<li>Introduction to something else</li>
<li>Introduction to some more useless things</li>
<li>Philosophy in practice</li>
<li>Recursive research and its impact on recursive research</li>
<li>Artificial politics</li>
</ul>
</div>
</div>
</section>
</section>
<section class="main-block">
<h2>
<i class="fa fa-folder-open"></i> Volunteering
</h2>
<section class="blocks">
<div class="date">
<span>present</span>
<span>Sept' 2017 </span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Job Coordinator</h3>
<span class="place">SEM.JS</span>
</header>
<div>
<ul>
<li>I help connect local learners (mostly software engineers) to jobs in the Ann
Arbor/Detroit area. </li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>preset</span>
<span>Jun' 2014</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Volunteer</h3>
<span class="place">Girl Develop It</span>
</header>
<div>
<ul>
<li>Volunteering at events that aim to empower and assist women interested in getting into and advancing in the tech industry.</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>Oct' 2015</span>
<span>Sept' 2011</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Student Mentor</h3>
<span class="place">University of MIchigan,</span>
</header>
<div>
<ul>
<li>I helped students from Washtenaw Community College achieve their goal of
transferring to the University of Michigan. This included one-on-one sessions to
ensure their classes were transferable, planning outreach events, and connecting
current students to our graduates and professionals from U of M.</li>
</ul>
</div>
</div>
</section>
</section>
</section>
<aside id="sidebar">
<div class="side-block" id="contact">
<h1>
Contact Info
</h1>
<ul>
<li><i class="fa fa-envelope"></i> maddy531@gmail.com</li>
<li><i class="fa fa-linkedin"></i> linkedin.com/in/maddyandrade</li>
<li><i class="fa fa-github" aria-hidden="true"> @maddy531</li>
<li><i class="fa fa-phone"></i> 734.678.7014</li>
</ul>
</div>
<div class="side-block" id="skills">
<h1>
Skills
</h1>
<h3>Languages</h3>
<ul>
<li>Javascript</li>
<li>Python</li>
<li>HTML</li>
<li>CSS (SASS/LESS)</li>
</ul>
<h3>Web Frameworks</h3>
<ul>
<li>React.js</li>
<li>AngularJS</li>
<li>Node/Express</li>
</ul>
<h3>Dev Tool</h3>
<ul>
<li>Yarn/npm</li>
<li>Git + Github</li>
<li>Docker</li>
</ul>
</div>
<div class="side-block" id="disclaimer">
This r&eacute;sum&eacute; was wholly typeset with HTML/CSS &mdash; see <code>git.io/vVSYL</code>
</div>
</aside>
</body>
</html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</script>
<script id="jsbin-source-css" type="text/css">@page{
size: letter portrait;
margin: 0;
}
*{
box-sizing: border-box;
}
:root{
--page-width: 8.5in;
--page-height: 11in;
--main-width: 6.4in;
--sidebar-width: calc(var(--page-width) - var(--main-width));
--decorator-horizontal-margin: 0.2in;
--sidebar-horizontal-padding: 0.2in;
/* XXX: using px for very good precision control */
--decorator-outer-offset-top: 10px;
--decorator-outer-offset-left: -5.5px;
--decorator-border-width: 1px;
--decorator-outer-dim: 9px;
--decorator-border: 1px solid #ccc;
--row-blocks-padding-top: 5pt;
--date-block-width: 0.6in;
--main-blocks-title-icon-offset-left: -19pt;
}
body{
width: var(--page-width);
height: var(--page-height);
margin: 0;
font-family: "Open Sans", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
hyphens: auto;
}
h1, h2, h3{
margin: 0;
color: #000;
}
li{
list-style-type: none;
}
#main{
float: left;
width: var(--main-width);
padding: 0.25in 0.25in 0 0.25in;
font-size: 7pt;
}
#sidebar{
float: right;
position: relative; /* for disclaimer */
width: var(--sidebar-width);
height: 100%;
padding: 0.6in var(--sidebar-horizontal-padding);
background-color: #f2f2f2;
font-size: 8.5pt;
}
/* main */
/** big title **/
#title, h1, h2{
text-transform: uppercase;
}
#title{
position: relative;
left: 0.55in;
margin-bottom: 0.3in;
line-height: 1.2;
}
#title h1{
font-weight: 300;
font-size: 18pt;
line-height: 1.5;
}
#title h1 strong{
margin: auto 2pt auto 4pt;
font-weight: 600;
}
.subtitle{
font-size: 8pt;
}
/*** categorial blocks ***/
.main-block{
margin-top: 0.1in;
}
#main h2{
position: relative;
top: var(--row-blocks-padding-top);
/* XXX: 0.5px for aligning fx printing */
left: calc((var(--date-block-width) + var(--decorator-horizontal-margin)));
font-weight: 400;
font-size: 11pt;
color: #555;
}
#main h2 > i{
/* use absolute position to prevent icon's width from misaligning title */
/* assigning a fixed width here is no better due to needing to align decorator
line too */
position: absolute;
left: var(--main-blocks-title-icon-offset-left);
z-index: 1; /* over decorator line */
color: #444;
}
#main h2::after{ /* extends the decorator line */
height: calc(var(--row-blocks-padding-top) * 2);
position: relative;
top: calc(-1 * var(--row-blocks-padding-top));
/* XXX: 0.5px for aligning fx printing */
left: calc(-1 * var(--decorator-horizontal-margin));
display: block;
border-left: var(--decorator-border);
z-index: 0;
line-height: 0;
font-size: 0;
content: ' ';
}
/**** minor tweaks on the icon fonts ****/
#main h2 > .fa-graduation-cap{
left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
top: 2pt;
}
#main h2 > .fa-suitcase{
top: 1pt;
}
#main h2 > .fa-folder-open{
top: 1.5pt;
}
/**** individual row blocks (date - decorator - details) ****/
.blocks{
display: flex;
flex-flow: row nowrap;
}
.blocks > div{
padding-top: var(--row-blocks-padding-top);
}
.date{
flex: 0 0 var(--date-block-width);
padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important;
padding-right: var(--decorator-horizontal-margin);
font-size: 7pt;
text-align: right;
line-height: 1;
}
.date span{
display: block;
}
.date span:nth-child(2)::before{
position: relative;
top: 1pt;
right: 5.5pt;
display: block;
height: 10pt;
content: '|';
}
.decorator{
flex: 0 0 0;
position: relative;
width: 2pt;
min-height: 100%;
border-left: var(--decorator-border);
}
/*
* XXX: Use two filled circles to achieve the circle-with-white-border effect.
* The normal technique of only using one pseudo element and
* border: 1px solid white; style makes firefox erroneously either:
* 1) overflows the grayshade background (if no background-clip is set), or
* 2) shows decorator line which should've been masked by the white border
*
*/
.decorator::before{
position: absolute;
top: var(--decorator-outer-offset-top);
left: var(--decorator-outer-offset-left);
content: ' ';
display: block;
width: var(--decorator-outer-dim);
height: var(--decorator-outer-dim);
border-radius: calc(var(--decorator-outer-dim) / 2);
background-color: #fff;
}
.decorator::after{
position: absolute;
top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
content: ' ';
display: block;
width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
height: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
border-radius: calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2);
background-color: #555;
}
.blocks:last-child .decorator{ /* slightly shortens it */
margin-bottom: 0.25in;
}
/***** fine-tunes on the details block where the real juice is *****/
.details{
flex: 1 0 0;
padding-left: var(--decorator-horizontal-margin);
padding-top: calc(var(--row-blocks-padding-top) - 0.5pt) !important; /* not sure why but this is needed for better alignment */
}
.details header{
color: #000;
}
.details h3{
font-size: 9pt;
}
.main-block:not(.concise) .details div{
margin: 0.18in 0 0.1in 0;
}
.main-block:not(.concise) .blocks:last-child .details div{
margin-bottom: 0;
}
.main-block.concise .details div:not(.concise){
/* use padding to work around the fact that margin doesn't affect floated
neighboring elements */
padding: 0.05in 0 0.07in 0;
}
.details .place{
float: left;
font-size: 7.5pt;
}
.details .location{
float: right;
}
.details div{
clear: both;
}
.details .location::before{
display: inline-block;
position: relative;
right: 3pt;
top: 0.25pt;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
content: "\f041";
}
/***** fine-tunes on the lists... *****/
#main ul{
padding-left: 0.07in;
margin: 0.08in 0;
}
#main li{
margin: 0 0 0.025in 0;
}
/****** customize list symbol style ******/
#main li::before{
position: relative;
margin-left: -4.25pt;
content: '• ';
}
.details .concise ul{
margin: 0 !important;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.details .concise li{
margin: 0 !important;
}
.details .concise li{
margin-left: 0 !important;
}
/* sidebar */
#sidebar h1{
font-weight: 400;
font-size: 11pt;
}
.side-block{
margin-top: 0.5in;
}
#contact ul{
margin-top: 0.05in;
padding-left: 0;
font-family: "Source Code Pro";
font-weight: 400;
line-height: 1.75;
}
#contact li > i{
width: 9pt; /* for text alignment */
text-align: right;
}
#skills{
line-height: 1.5;
}
#skills ul{
margin: 0.05in 0 0.15in;
padding: 0;
}
#disclaimer{
position: absolute;
bottom: var(--sidebar-horizontal-padding);
right: var(--sidebar-horizontal-padding);
font-size: 7.5pt;
font-style: italic;
line-height: 1.1;
text-align: right;
color: #777;
}
#disclaimer code{
color: #666;
font-family: "Source Code Pro";
font-weight: 400;
font-style: normal;
}
</script>
</body>
</html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Raw
jsbin.untitled.css
@page{
size: letter portrait;
margin: 0;
}
*{
box-sizing: border-box;
}
:root{
--page-width: 8.5in;
--page-height: 11in;
--main-width: 6.4in;
--sidebar-width: calc(var(--page-width) - var(--main-width));
--decorator-horizontal-margin: 0.2in;
--sidebar-horizontal-padding: 0.2in;
/* XXX: using px for very good precision control */
--decorator-outer-offset-top: 10px;
--decorator-outer-offset-left: -5.5px;
--decorator-border-width: 1px;
--decorator-outer-dim: 9px;
--decorator-border: 1px solid #ccc;
--row-blocks-padding-top: 5pt;
--date-block-width: 0.6in;
--main-blocks-title-icon-offset-left: -19pt;
}
body{
width: var(--page-width);
height: var(--page-height);
margin: 0;
font-family: "Open Sans", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
hyphens: auto;
}
h1, h2, h3{
margin: 0;
color: #000;
}
li{
list-style-type: none;
}
#main{
float: left;
width: var(--main-width);
padding: 0.25in 0.25in 0 0.25in;
font-size: 7pt;
}
#sidebar{
float: right;
position: relative; /* for disclaimer */
width: var(--sidebar-width);
height: 100%;
padding: 0.6in var(--sidebar-horizontal-padding);
background-color: #f2f2f2;
font-size: 8.5pt;
}
/* main */
/** big title **/
#title, h1, h2{
text-transform: uppercase;
}
#title{
position: relative;
left: 0.55in;
margin-bottom: 0.3in;
line-height: 1.2;
}
#title h1{
font-weight: 300;
font-size: 18pt;
line-height: 1.5;
}
#title h1 strong{
margin: auto 2pt auto 4pt;
font-weight: 600;
}
.subtitle{
font-size: 8pt;
}
/*** categorial blocks ***/
.main-block{
margin-top: 0.1in;
}
#main h2{
position: relative;
top: var(--row-blocks-padding-top);
/* XXX: 0.5px for aligning fx printing */
left: calc((var(--date-block-width) + var(--decorator-horizontal-margin)));
font-weight: 400;
font-size: 11pt;
color: #555;
}
#main h2 > i{
/* use absolute position to prevent icon's width from misaligning title */
/* assigning a fixed width here is no better due to needing to align decorator
line too */
position: absolute;
left: var(--main-blocks-title-icon-offset-left);
z-index: 1; /* over decorator line */
color: #444;
}
#main h2::after{ /* extends the decorator line */
height: calc(var(--row-blocks-padding-top) * 2);
position: relative;
top: calc(-1 * var(--row-blocks-padding-top));
/* XXX: 0.5px for aligning fx printing */
left: calc(-1 * var(--decorator-horizontal-margin));
display: block;
border-left: var(--decorator-border);
z-index: 0;
line-height: 0;
font-size: 0;
content: ' ';
}
/**** minor tweaks on the icon fonts ****/
#main h2 > .fa-graduation-cap{
left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
top: 2pt;
}
#main h2 > .fa-suitcase{
top: 1pt;
}
#main h2 > .fa-folder-open{
top: 1.5pt;
}
/**** individual row blocks (date - decorator - details) ****/
.blocks{
display: flex;
flex-flow: row nowrap;
}
.blocks > div{
padding-top: var(--row-blocks-padding-top);
}
.date{
flex: 0 0 var(--date-block-width);
padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important;
padding-right: var(--decorator-horizontal-margin);
font-size: 7pt;
text-align: right;
line-height: 1;
}
.date span{
display: block;
}
.date span:nth-child(2)::before{
position: relative;
top: 1pt;
right: 5.5pt;
display: block;
height: 10pt;
content: '|';
}
.decorator{
flex: 0 0 0;
position: relative;
width: 2pt;
min-height: 100%;
border-left: var(--decorator-border);
}
/*
* XXX: Use two filled circles to achieve the circle-with-white-border effect.
* The normal technique of only using one pseudo element and
* border: 1px solid white; style makes firefox erroneously either:
* 1) overflows the grayshade background (if no background-clip is set), or
* 2) shows decorator line which should've been masked by the white border
*
*/
.decorator::before{
position: absolute;
top: var(--decorator-outer-offset-top);
left: var(--decorator-outer-offset-left);
content: ' ';
display: block;
width: var(--decorator-outer-dim);
height: var(--decorator-outer-dim);
border-radius: calc(var(--decorator-outer-dim) / 2);
background-color: #fff;
}
.decorator::after{
position: absolute;
top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
content: ' ';
display: block;
width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
height: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
border-radius: calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2);
background-color: #555;
}
.blocks:last-child .decorator{ /* slightly shortens it */
margin-bottom: 0.25in;
}
/***** fine-tunes on the details block where the real juice is *****/
.details{
flex: 1 0 0;
padding-left: var(--decorator-horizontal-margin);
padding-top: calc(var(--row-blocks-padding-top) - 0.5pt) !important; /* not sure why but this is needed for better alignment */
}
.details header{
color: #000;
}
.details h3{
font-size: 9pt;
}
.main-block:not(.concise) .details div{
margin: 0.18in 0 0.1in 0;
}
.main-block:not(.concise) .blocks:last-child .details div{
margin-bottom: 0;
}
.main-block.concise .details div:not(.concise){
/* use padding to work around the fact that margin doesn't affect floated
neighboring elements */
padding: 0.05in 0 0.07in 0;
}
.details .place{
float: left;
font-size: 7.5pt;
}
.details .location{
float: right;
}
.details div{
clear: both;
}
.details .location::before{
display: inline-block;
position: relative;
right: 3pt;
top: 0.25pt;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
content: "\f041";
}
/***** fine-tunes on the lists... *****/
#main ul{
padding-left: 0.07in;
margin: 0.08in 0;
}
#main li{
margin: 0 0 0.025in 0;
}
/****** customize list symbol style ******/
#main li::before{
position: relative;
margin-left: -4.25pt;
content: '• ';
}
.details .concise ul{
margin: 0 !important;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.details .concise li{
margin: 0 !important;
}
.details .concise li{
margin-left: 0 !important;
}
/* sidebar */
#sidebar h1{
font-weight: 400;
font-size: 11pt;
}
.side-block{
margin-top: 0.5in;
}
#contact ul{
margin-top: 0.05in;
padding-left: 0;
font-family: "Source Code Pro";
font-weight: 400;
line-height: 1.75;
}
#contact li > i{
width: 9pt; /* for text alignment */
text-align: right;
}
#skills{
line-height: 1.5;
}
#skills ul{
margin: 0.05in 0 0.15in;
padding: 0;
}
#disclaimer{
position: absolute;
bottom: var(--sidebar-horizontal-padding);
right: var(--sidebar-horizontal-padding);
font-size: 7.5pt;
font-style: italic;
line-height: 1.1;
text-align: right;
color: #777;
}
#disclaimer code{
color: #666;
font-family: "Source Code Pro";
font-weight: 400;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment