cvless 2.1.0

data/_sass/_elements.scss

@@ -0,0 +1,102 @@
+a.site-title {
+  font-weight: 500;
+  color: var(--color-heading);
+
+  &:focus,
+  &:hover {
+    border-color: inherit;
+    color: inherit;
+  }
+}
+
+.toggle-bar {
+  display: flex;
+  justify-content: end;
+  padding-top: 1.5em;
+}
+
+.toggle-icon {
+  color: var(--color-heading);
+
+  &:focus,
+  &:hover {
+    cursor: pointer;
+    border: none;
+
+    svg circle,
+    svg path {
+      stroke-width: 0.1em;
+    }
+  }
+}
+
+.message {
+  padding: 0.25em 1em;
+  border-radius: 0.25em;
+  background-color: var(--color-mark);
+  color: var(--color-text);
+}
+
+dd {
+  padding-left: 0.5em;
+}
+
+.archive ul,
+.contact ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.li-icon {
+  margin-right: 0.25em;
+}
+
+a.iconlink {
+  svg circle,
+  svg path {
+    stroke: var(--color-link);
+  }
+
+  &:focus,
+  &:hover {
+    border: none;
+
+    svg circle,
+    svg path {
+      stroke-width: 0.1em;
+    }
+  }
+}
+
+.footnotes {
+  margin-top: 2em;
+
+  p {
+    margin: 0;
+  }
+
+  &::before {
+    content: "Notes";
+  }
+}
+
+a[href^="#fn:"] {
+  margin-left: 0.1em;
+  font-weight: 500;
+
+  &:focus,
+  &:hover {
+    font-weight: 700;
+    border: none;
+  }
+}
+
+a.reversefootnote {
+  font-weight: 500;
+
+  &:focus,
+  &:hover {
+    font-weight: 700;
+    border: none;
+  }
+}

data/_sass/_fonts.scss

@@ -0,0 +1,159 @@
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-Light.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-LightItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-Italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-Medium.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-MediumItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-Bold.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla';
+  src: url('../fonts/Piazzolla-BoldItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-Light.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-LightItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-Italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-Medium.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-MediumItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-Bold.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Piazzolla SC';
+  src: url('../fonts/PiazzollaSC-BoldItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('../fonts/hack-regular-subset.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('../fonts/hack-italic-subset.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('../fonts/hack-bold-subset.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('../fonts/hack-bolditalic-subset.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}

data/_sass/_headings.scss

@@ -0,0 +1,42 @@
+h1,h2,h3 {
+  color: var(--color-heading);
+
+  a {
+    color: inherit;
+
+    &:focus,
+    &:hover {
+      border-color: inherit;
+      color: inherit;
+    }
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+
+  &.page-title {
+    margin: 0;
+  }
+}
+
+#home h1 {
+  margin-top: 1.5em;
+}
+
+h2 {
+  margin-top: 1.25em;
+  font-size: 1.25em;
+}
+
+h3 {
+  margin-top: 1em;
+  font-size: 1em;
+  text-transform: lowercase;
+  font-family: var(--type-caps);
+  font-weight: 500;
+}
+
+h2 + h3 {
+  margin-top: 0;
+}

data/_sass/_media.scss

@@ -0,0 +1,93 @@
+@media (prefers-color-scheme: dark) {
+  html,
+  html[data-theme="dark"] {
+    --color-background: var(--oc-gray-9);
+    --color-text: var(--oc-gray-3);
+    --color-heading: var(--oc-gray-3);
+    --color-code: var(--oc-gray-3);
+    --color-link: var(--oc-blue-3);
+    --color-mark: var(--oc-gray-8);
+    --color-border: var(--oc-gray-7);
+    --color-button: var(--oc-gray-7);
+  }
+
+  html[data-theme="light"] {
+    --color-background: var(--oc-gray-1);
+    --color-text: var(--oc-gray-8);
+    --color-heading: var(--oc-gray-8);
+    --color-code: var(--oc-gray-8);
+    --color-link: var(--oc-blue-8);
+    --color-mark: var(--oc-yellow-3);
+    --color-border: var(--oc-gray-4);
+    --color-button: var(--oc-gray-6);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  body {
+    font-size: 1.25em;
+  }
+
+  .particles-title {
+    font-size: 3.5em;
+  }
+
+  .particles-subtitle {
+    font-size: 1.75em;
+  }
+
+  .particles-icon {
+    margin: 0 1em;
+
+    svg {
+      -webkit-transform: scale(2.4);
+      transform: scale(2.4);
+    }
+  }
+
+  .particles-scroll svg {
+    -webkit-transform: scale(3.6);
+    transform: scale(3.6);
+  }
+}
+
+@media only print {
+  body {
+    font-size: 10pt;
+    background-color: white;
+    color: black;
+  }
+
+  a {
+    color: black;
+  }
+
+  dd {
+    padding-left: 1.5em;
+  }
+
+  .pagination {
+    display: none;
+  }
+
+  #cv {
+    header {
+      margin: 0;
+    }
+
+    .site-title {
+      font-size: 1.5em;
+    }
+
+    small {
+      display: none;
+    }
+
+    .toggle-icon,
+    .li-icon,
+    .reversefootnote,
+    a.iconlink {
+      display: none;
+    }
+  }
+}

data/_sass/_pagination.scss

@@ -0,0 +1,47 @@
+.pagination {
+  display: flex;
+  margin-top: 2em;
+  text-align: center;
+}
+
+.pagination-item {
+  float: left;
+  width: 50%;
+  padding: 1em 2em;
+  border: 0.075em solid var(--color-border);
+  color: var(--color-button);
+  -webkit-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+
+  svg circle,
+  svg path {
+    stroke: var(--color-button);
+  }
+
+  &:first-child {
+    margin-bottom: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  &:last-child {
+    margin-left: -1px;
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+}
+
+a.pagination-item {
+  color: var(--color-text);
+
+  svg circle,
+  svg path {
+    stroke: var(--color-text);
+  }
+
+  &:focus,
+  &:hover {
+    background-color: var(--color-border);
+    border: 0.075em solid var(--color-border);
+  }
+}

data/_sass/_particles.scss

@@ -0,0 +1,99 @@
+#particles-js {
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  background-color: var(--color-particles-background);
+
+  .particles-js-canvas-el {
+    width: 100%;
+    height: 99.5vh !important;
+  }
+
+  .jumbotron {
+    position: absolute;
+    top: 44%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+}
+
+.fullscreen {
+  min-height: 100vh;
+
+  h1,
+  h2 {
+    color: var(--color-particles-text);
+  }
+}
+
+.particles-photo {
+  width: 50%;
+  border-radius: 50%;
+  margin: auto;
+  margin-bottom: 0.5em;
+}
+
+.particles-title {
+  margin: 0;
+  font-size: 2.5em;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.particles-subtitle {
+  margin: 0 0 1em 0;
+  font-size: 1.25em;
+  font-weight: 400;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.particles-icon {
+  margin: 0 0.5em;
+  pointer-events: all;
+
+  svg {
+    -webkit-transform: scale(1.8);
+    transform: scale(1.8);
+  }
+
+  svg circle,
+  svg path {
+    stroke: var(--color-particles-text) !important;
+    stroke-width: 0.05em;
+  }
+
+  &:focus,
+  &:hover {
+    border: none;
+
+    svg circle,
+    svg path {
+      stroke-width: 0.075em;
+    }
+  }
+}
+
+.particles-scroll {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+
+  .particles-icon {
+    position: relative;
+    -webkit-animation: pulse 1s infinite;
+    animation: pulse 1s infinite;
+  }
+
+  svg {
+    -webkit-transform: scale(2.7);
+    transform: scale(2.7);
+  }
+}

data/_sass/_pulse.scss

@@ -0,0 +1,22 @@
+@keyframes pulse {
+  from {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+    filter: alpha(opacity=40);
+    opacity: .4;
+    top: 0;
+  }
+
+  50% {
+    -ms-filter: none;
+    filter: none;
+    opacity: 1;
+    top: -1rem;
+  }
+
+  to {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+    filter: alpha(opacity=40);
+    opacity: .4;
+    top: 0
+  }
+}

data/_sass/_variables.scss

@@ -0,0 +1,34 @@
+:root {
+  --type-serif: "Piazzolla", serif;
+  --type-caps: "Piazzolla SC", serif;
+  --type-mono: "Hack", monospace;
+  --type-size: 18px;
+  --type-weight: 400;
+  --type-height: 1.4;
+  --type-numeric: oldstyle-nums proportional-nums;
+  --color-particles-text: var(--oc-gray-1);
+  --color-particles-background: var(--oc-gray-9);
+}
+
+html,
+html[data-theme="light"] {
+  --color-background: var(--oc-gray-1);
+  --color-text: var(--oc-gray-8);
+  --color-heading: var(--oc-gray-8);
+  --color-link: var(--oc-blue-8);
+  --color-chunk: var(--oc-gray-8);
+  --color-mark: var(--oc-yellow-3);
+  --color-border: var(--oc-gray-4);
+  --color-button: var(--oc-gray-6);
+}
+
+html[data-theme="dark"] {
+  --color-background: var(--oc-gray-9);
+  --color-text: var(--oc-gray-3);
+  --color-heading: var(--oc-gray-3);
+  --color-link: var(--oc-blue-3);
+  --color-chunk: var(--oc-gray-8);
+  --color-mark: var(--oc-gray-8);
+  --color-border: var(--oc-gray-7);
+  --color-button: var(--oc-gray-7);
+}