From 0cecfc357c7c083b8be1e7f6169423a1f6c6ccdf Mon Sep 17 00:00:00 2001 From: edwinyung Date: Sat, 28 Oct 2017 10:40:17 -0400 Subject: [PATCH] played around with resume styling --- index.html | 311 ++++++++++++++++++++++++++++++++------- style.css | 418 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 678 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 3a88ff2..25c2e91 100644 --- a/index.html +++ b/index.html @@ -1,80 +1,293 @@ - - - - - Viking CSS Garden + + + - - - - -
-

Viking CSS Garden

-

A place for your styling creativity to grow

-
- + - -
-
-

Growing Your Garden

+ +
-
-

The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.

-
-
+
+

John Doe

+ Plaintiff, defendant & witness +
-
-

Norse mythology

+
+

+ Experiences +

+
+
+ XXXX +
+
+
+
+
+

Some Position

+ Some Workplace + (remote) +
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac. Maecenas viverra tortor eget convallis vestibulum. Donec pulvinar venenatis est, non sollicitudin metus laoreet sed. Fusce tincidunt felis nec neque aliquet porttitor
    • +
+
+
+
+
+
+ XXXX +
+
+
+
+
+

Another Position

+ Some Workplace + Some City, Some Country +
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
+
+
+
+
+
+ 20132014 +
+
+
+
+
+

Yet Another Job Position

+ Some Workplace + Some City, Some Country +
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
+
+
+
+
+
+

+ Selected Projects +

+
+
+ XXXX +
+
+
+
+
+

Some Project 1

+ Some workplace +
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio
    • +
+
+
+
+
+
+ XXXX +
+
+
+
+
+

Some Project 2

+ Some workplace +
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac. Maecenas viverra tortor eget convallis vestibulum. Donec pulvinar venenatis est, non sollicitudin metus laoreet sed. Fusce tincidunt felis nec neque aliquet porttitor
    • +
+
+
+
+
+
+ 2014 +
+
+
+
+
+

Some Project 3

+ Some workplace +
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio
    • +
+
+
+
+
-
-

Norse mythology is the body of mythology of the North Germanic people stemming from Norse paganism and continuing after the Christianization of Scandinavia and into the Scandinavian folklore of the modern period. The northernmost extension of Germanic mythology, Norse mythology consists of tales of various deities, beings, and heroes derived from numerous sources from both before and after the pagan period, including medieval manuscripts, archaeological representations, and folk tradition.

-

Numerous gods are mentioned in the source texts such as the hammer-wielding, humanity-protecting god Thor, who relentlessly fights his foes; the one-eyed, raven-flanked god Odin, who craftily pursues knowledge throughout the worlds and bestowed among humanity the runic alphabet; the beautiful, seiðr-working, feathered cloak-clad goddess Freyja who rides to battle to choose among the slain; the vengeful, skiing goddess Skaði, who prefers the wolf howls of the winter mountains to the seashore; the powerful god Njörðr, who may calm both sea and fire and grant wealth and land; the god Freyr, whose weather and farming associations bring peace and pleasure to humanity; the goddess Iðunn, who keeps apples that grant eternal youthfulness; the mysterious god Heimdallr, who is born of nine mothers, can hear grass grow, has gold teeth, and possesses a resounding horn; the jötunn Loki, who brings tragedy to the gods by engineering the death of the goddess Frigg's beautiful son Baldr; and numerous other deities.

+
+

+ Education +

-

Most of the surviving mythology centers on the plights of the gods and their interaction with various other beings, such as humanity and the jötnar, beings who may be friends, lovers, foes and/or family members of the gods. The cosmos in Norse mythology consists of Nine Worlds that flank a central cosmological tree, Yggdrasil. Units of time and elements of the cosmology are personified as deities or beings. Various forms of a creation myth are recounted, where the world is created from the flesh of the primordial being Ymir, and the first two humans are Ask and Embla. These worlds are foretold to be reborn after the events of Ragnarök, when an immense battle occurs between the gods and their enemies, and the world is enveloped in flames, only to be reborn anew. There the surviving gods will meet, and the land will be fertile and green, and two humans will repopulate the world.

+
+
+ 20092015 +
+
+
+
+
+

B.A. in Economics and Government (Double Major))

+ Dartmouth College + Hanover, NH +
+
Scholarship
+
+
-

Norse mythology has been the subject of scholarly discourse since the 17th century, when key texts were brought to the attention of the intellectual circles of Europe. By way of comparative mythology and historical linguistics, scholars have identified elements of Germanic mythology reaching as far back as Proto-Indo-European mythology. In the modern period, the Romanticist Viking revival re-awoke an interest in the subject matter, and references to Norse mythology may now be found throughout modern popular culture. The myths have further been revived in a religious context among adherents of Germanic Neopaganism.

-
+
+
+
+
+
+
+
+

Massive Online Fee–Required Course (selective list)

+
+
+
    +
  • lorem ipsum
    • +
+
+
+
+
+
- - From Norse Mythology - -
+ + + + + diff --git a/style.css b/style.css index 64192bc..94d53c5 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,424 @@ +/* Forked from https://github.com/mnjul/html-resume + +Reset code: +http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + /* ----------------------------------- * - * Your Styles Here + * Personal Resume Styles * ----------------------------------- */ + @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; + } - \ No newline at end of file + #disclaimer code{ + color: #666; + font-family: "Source Code Pro"; + font-weight: 400; + font-style: normal; + }