Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

first update #56

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test new style
hathawayj committed Aug 7, 2020
commit c7aaf9aa02fb34b44dc7282a9c986d971225c297
2 changes: 1 addition & 1 deletion docs/_config.yml
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
markdown: kramdown
style: davewhipp
style: pagedownresume
2 changes: 1 addition & 1 deletion docs/_layouts/resume.html
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset=utf-8 />
<title> {% if page.title %} {{ page.title }} | {% endif %} Resume</title>
<title> {% if page.title %} {{ page.title }} | {% endif %} RESUME</title>
<link href="media/{{ site.style }}-screen.css" type="text/css" rel="stylesheet" media="screen">
<link href="media/{{ site.style }}-print.css" type="text/css" rel="stylesheet" media="print">
</head>
File renamed without changes.
434 changes: 434 additions & 0 deletions docs/media/pagedownresume-screen.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,434 @@
@page{
size: letter portrait;
margin: 1in 0.5in 1in 0.25in;
}

*{
box-sizing: border-box;
}

:root{
--page-width: 8.5in;
--margin-right: 0.5in;
--margin-left: 0.25in;
--content-width: calc(var(--page-width) - var(--margin-right) - var(--margin-left));
--root-font-size: 12pt;
--sidebar-width: 15rem;
--sidebar-background-color: #f2f2f2;
--main-width: calc(var(--content-width) - var(--sidebar-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: 0.5rem;
--date-block-width: 0.7in;

--main-blocks-title-icon-offset-left: calc(-17pt - 0.25 * var(--root-font-size));

--viewer-background-color: #dcdcdc;
--viewer-pages-spacing: 12px;
--viewer-shadow-color: #313131;
}

.pagedjs_page {
--content-area-height: calc(var(--pagedjs-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom));
--sidebar-background-width: calc(var(--pagedjs-margin-right) + var(--sidebar-width));
}

@page{
background: linear-gradient(to left, var(--sidebar-background-color), var(--sidebar-background-color) var(--sidebar-background-width), white var(--sidebar-background-width));
}

html {
font-size: var(--root-font-size);
}

body{
width: var(--content-width);
font-family: "Open Sans", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
hyphens: auto;
}

h1, h2, h3{
margin: 0;
color: #000;
}

#main > h1, #aside > h1, #disclaimer > h2 {
display: none;
}

li{
list-style-type: none;
}

a{
text-decoration: none;
}

img{
max-width: 100%;
}

#main{
width: var(--main-width);
padding: 0 0.25in 0 0.25in;
font-size: 0.7rem;
float: left;
}

#aside{
position: relative; /* for disclaimer */
height: var(--content-area-height);
}

.aside{
width: var(--sidebar-width);
padding: 0.6in var(--sidebar-horizontal-padding);
font-size: 0.8rem;
float: right;
position: absolute;
right: 0;
}

/* main */

/** big title **/
h1, h2{
text-transform: uppercase;
}

#title{
position: relative;
left: 0.55in;
margin: auto 0.55in 0.3in auto;
line-height: 1.2;
}

#title h1{
font-weight: 300;
font-size: 1.8rem;
line-height: 1.5;
}

#title h3{
font-size: 0.8rem;
}


/*** 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: 1.1rem;
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) + 0.25rem) !important;
padding-right: var(--decorator-horizontal-margin);
font-size: 0.7rem;
text-align: right;
line-height: 1;
max-width: var(--date-block-width);
}

.date span{
display: block;
text-align: center;
}

.date span:nth-child(2)::before{
position: relative;
top: 0.1rem;
right: 0;
display: block;
height: 1rem;
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.05rem) !important; /* not sure why but this is needed for better alignment */
}

.details header{
color: #000;
}

.details h3{
font-size: 0.8rem;
}

.main-block:not(.concise) .details div{
margin: 0.18in 0 0.1in 0;
}

.main-block:not(.concise) .details div:empty {
margin: 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: 0.75rem;
}

.details .location{
float: right;
}

.details div{
clear: both;
}

/***** 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: '• ';
}

.aside li::before {
content: none;
}

.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 */

.aside h2{
font-weight: 400;
font-size: 1.1rem;
}

.aside .level2{
margin-top: 0.5in;
}

#contact ul{
margin-top: 0.05in;
padding-left: 0;
font-weight: 400;
line-height: 1.75;
}

#contact li > i{
width: 0.9rem; /* 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: 0;
right: var(--sidebar-horizontal-padding);
font-size: 0.75rem;
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;
}

/* Page breaks */

h2 {
break-after: avoid;
}

.blocks {
break-inside: avoid;
}

/* Paged.js viewer */

@media screen {
body {
background-color: var(--viewer-background-color);
margin: 0; /* for mobile */
width: calc(var(--pagedjs-width) + 2 * var(--viewer-pages-spacing)); /* for mobile */
}
.pagedjs_pages {
max-width: var(--pagedjs-width);
margin: 0 auto;
display: flex;
flex-direction: column;
}
.pagedjs_page {
box-shadow: 0 0 calc(0.66667 * var(--viewer-pages-spacing)) var(--viewer-shadow-color);
margin: var(--viewer-pages-spacing) 0;
}
}
@media screen and (min-width: 8.5in) {
/* not a mobile */
body {
margin: auto;
width: unset;
}
}