jsonresume-theme-class-yaucp/style.css

Class Theme for JSON Resume

/*! normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1
}

audio:not([controls]) {
  display: none
}

[hidden] {
  display: none
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

html, button, input, select, textarea {
  font-family: sans-serif
}

body {
  margin: 0
}

a:focus {
  outline: thin dotted
}

a:hover, a:active {
  outline: 0
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

h2 {
  font-size: 1.5em;
  margin: .83em 0
}

h3 {
  font-size: 1.17em;
  margin: 1em 0
}

h4 {
  font-size: 1em;
  margin: 1.33em 0
}

h5 {
  font-size: .83em;
  margin: 1.67em 0
}

h6 {
  font-size: .75em;
  margin: 2.33em 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b, strong {
  font-weight: bold
}

blockquote {
  margin: 1em 40px
}

dfn {
  font-style: italic
}

mark {
  background: #ff0;
  color: #000
}

p, pre {
  margin: 1em 0
}

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word
}

q {
  quotes: none
}

q:before, q:after {
  content: '';
  content: none
}

small {
  font-size: 75%
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -0.5em
}

sub {
  bottom: -0.25em
}

dl, menu, ol, ul {
  margin: 1em 0
}

dd {
  margin: 0 0 0 40px
}

menu, ol, ul {
  padding: 0 0 0 40px
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic
}

svg:not(:root) {
  overflow: hidden
}

figure {
  margin: 0
}

form {
  margin: 0
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
  *margin-left: -7px
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle
}

button, input {
  line-height: normal
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible
}

button[disabled], input[disabled] {
  cursor: default
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *height: 13px;
  *width: 13px
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto;
  vertical-align: top
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

/* Variables */

body {
  --fg-color: black;
  --bg-color: #FFFFFF;
  --header-h1-fg-color: #FFFFFF;
  --header-h2-fg-color: #F3F3F3;
  --header-bg-color: #1866C3;
  --link-color: #3061A5;
  --seperator-color: #E2E2E2;
  --h2-fg-color: #1866C3;
}

@media (prefers-color-scheme: dark) {
  body {
    --fg-color: #D5D6D7;
    --bg-color: #041C32;
    --header-h1-fg-color: #ECB365;
    --header-h2-fg-color: #ECB365;
    --header-bg-color: #04293A;
    --link-color: #70A1E5;
    --seperator-color: #939393;
    --h2-fg-color: #ECB365;
  }
}

/* Page CSS */

body {
  color: var(--fg-color);
  background: var(--bg-color);
  font-size: 0.9em;
  font-family: 'Helvetica', 'Arial', 'Trebuchet MS', 'Verdana', sans-serif;
}

em {
  color: #999;
}

p {
  line-height: 1.4;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

ul {
  margin-bottom: 0;
}

section {
  margin-bottom: 2em;
}

blockquote {
  margin: 0;
  margin-bottom: 1em;
}

.item {
  break-inside: avoid;
}

header {
  background: var(--header-bg-color);
  padding: 50px;
  margin-bottom: 50px;
}

header h1 {
  color: var(--header-h1-fg-color);
  max-width: 772px;
  margin: 0 auto;
}

header h2 {
  color: var(--header-h2-fg-color);
  font-size: 1em;
  max-width: 772px;
  margin: 0 auto;
}

footer {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
}

.container, footer {
  max-width: 772px;
  padding: 0 50px;
  margin: 0 auto;
}

.container h2,
#basics h3 {
  color: var(--h2-fg-color);
}

#basics {
  margin-bottom: 10px;
  border-bottom: 1px var(--seperator-color) solid;
}

#basics h3 {
  margin-bottom: 10px;
}

.contact h3 {
  padding-bottom: 10px;
}

.split {
  display: flex;
  flex-wrap: wrap;
}

.split strong {
  margin-right: 2em;
}

.website,
.email,
.phone {
  margin-bottom: 10px;
  width: 50%;
}

#profiles {
  overflow: hidden;
}

#profiles .item {
  width: 50%;
}

.username {
  margin-top: 10px;
}

.work_date,
.work_position,
.work_website,
.institution,
.study_date,
.qualification {
  margin-bottom: 10px;
  width: 30%;
}

.courses {
  clear: both;
}

.dissertation {
  margin-top: 10px;
}

#work,
#volunteer,
#projects {
  padding-bottom: 5px;
  border-bottom: 1px var(--seperator-color) solid;
}

#work .item,
#volunteer .item,
#projects .item {
  margin: 25px 0;
}

#skills {
  margin-bottom: 10px;
  border-bottom: 1px var(--seperator-color) solid;
  padding-bottom: 5px;
}

#skills .item,
#languages .item {
  margin: 0 0 25px 0;
}

#interests .item {
  margin-bottom: 25px;
}

#skills {
  overflow: hidden;
}

#languages .item,
#interests .item,
#skills .item {
  width: 50%;
}

#references,
#interests {
  clear: both;
}

.horizontal_list {
  padding: 0 !important;
}

.horizontal_list li:after {
  content: " ";
  letter-spacing: 1em;
  background: center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=);
}