You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

587 lines
9.4 KiB

$font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, avenir next,
avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
$font-family-mono: FMono-Regular, Consolas, DejaVu Sans Mono, Liberation Mono,
Menlo, monospace;
$font-family-serif: Iowan Old Style, Apple Garamond, Baskerville, Georgia,
Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
Apple Color Emoji;
$spacingSmall: 0.5rem;
$spacing: 1rem;
$spacingLarge: 1.5rem;
$b-sm: 640px;
$b-md: 768px;
:root {
--wrapper: 760px;
--color-primary: #0096f5;
--color-background: #212121;
--color-background-secondary: #262626;
--color-background-aside: #151515;
--color-border-aside: #abb2bf;
--color-default-text: #fefefe;
font-family: $font-family-sans;
font-size: clamp($spacing, 2vw, 18px);
background-color: var(--color-background);
color: var(--color-default-text);
}
@media (prefers-color-scheme: light) {
:root {
--color-primary: #0d47a1;
--color-background: #eeeeee;
--color-background-secondary: #eaeaea;
--color-background-aside: #ececec;
--color-border-aside: #e1e1e1;
--color-default-text: #212121;
}
}
@mixin wrapper() {
max-width: var(--wrapper);
margin-inline: auto;
padding-inline: $spacingSmall;
}
@mixin flex($justify: flex-start, $align: center) {
display: flex;
justify-content: $justify;
align-items: $align;
}
@mixin list($style: none, $display: flex, $gap: $spacing) {
list-style: $style;
display: $display;
gap: $gap;
padding: 0 !important;
margin: 0;
}
@mixin stickyHeading() {
width: 100%;
top: 0;
position: sticky;
padding-block: $spacingSmall;
background-color: var(--color-background);
}
a {
--color-text: var(--color-primary);
color: var(--color-text);
text-decoration-color: var(--color-primary);
font-weight: 600;
transition: all ease 150ms;
&:hover {
background: var(--color-text);
color: var(--color-background);
}
}
.btn {
--color-text: var(--color-primary);
color: var(--color-text);
border: 1px solid var(--color-primary);
border-radius: $spacingSmall;
text-decoration: none;
padding: $spacingSmall;
@include flex(flex-start, center);
gap: $spacingSmall;
width: max-content;
height: max-content;
&:hover {
background: var(--color-text);
color: var(--color-background);
}
svg {
width: 1.25rem;
}
}
h1 {
font-size: 1.75rem;
}
h1,
h2,
h3,
h4 {
font-weight: 600;
}
h2,
h3 {
margin: 0.5rem 0;
}
p {
hyphens: auto;
max-width: 65ch;
line-height: 1.5;
}
li {
line-height: 1.5;
}
blockquote {
margin: 0;
padding: $spacingSmall 0 $spacingSmall $spacing;
border-left: $spacingSmall solid var(--color-default-text);
p {
margin: 0;
}
}
strong {
font-weight: 600;
}
/*
Syntax highlighting
*/
$code-bg-dark: #151515;
code {
color: #abb2bf;
}
pre,
code {
background: $code-bg-dark !important;
padding: $spacingSmall $spacing;
border-radius: $spacingSmall;
line-height: 1.5;
* {
font-family: $font-family-mono;
}
}
pre {
overflow-x: auto;
}
code {
padding: 0.25rem $spacingSmall;
word-wrap: break-word;
}
pre code {
padding: 0;
}
picture {
img {
max-width: 100%;
&.small {
@media (min-width: $b-sm) {
display: block;
max-width: 50%;
max-height: 80rem;
margin-inline: auto;
}
}
}
figcaption {
color: var(--color-default-text);
font-size: 0.9rem;
font-style: italic;
line-height: 1.5;
padding-block: $spacingSmall;
border-bottom: 1px solid var(--color-default-text);
}
}
.anchor {
margin-left: $spacingSmall;
text-decoration: none;
}
.hidden {
display: none;
}
header.header {
@include wrapper();
@include flex(space-between);
margin-block-end: $spacing;
.header__logo {
border-radius: 999px;
max-width: 4rem;
max-height: 4rem;
svg {
width: 100%;
height: 100%;
}
}
.nav__list {
@include list();
font-weight: 600;
}
a {
text-decoration: none;
}
}
footer.footer {
@include wrapper();
@include flex(space-between);
gap: $spacingSmall;
margin-block: $spacingLarge;
@media (max-width: $b-sm) {
justify-content: flex-start;
flex-wrap: wrap;
}
.nav__list {
@include list();
}
}
.wrapper {
@include wrapper();
}
.blog {
@include list(none, block);
margin-block-end: $spacing;
& > *:not(:last-of-type) {
margin-block: $spacing;
}
h2 {
@include stickyHeading();
}
.blog__post {
@include flex(space-between, flex-start);
gap: $spacingSmall;
@media (max-width: $b-sm) {
flex-wrap: wrap-reverse;
}
p {
margin-block-start: $spacingSmall;
margin-block-end: 0;
}
}
}
.footnote-definition {
@include flex();
gap: $spacing;
&:first-of-type {
padding-block-start: $spacingSmall;
border-top: 1px solid gray;
}
&:last-of-type {
margin-block-end: $spacing;
}
p {
margin-block: $spacingSmall;
}
}
article.post {
.post-header {
margin-block-end: $spacing;
}
h1 {
margin-block: 0 $spacingSmall;
}
.post__tags {
@include list($gap: $spacingSmall);
* {
text-decoration: none;
}
}
ul,
ol {
padding-left: $spacingLarge;
line-height: 1.5;
}
aside {
--border-color: var(--color-border-aside);
--bg: var(--color-background-aside);
background-color: var(--bg);
border: 3px solid var(--border-color);
border-radius: $spacingSmall;
padding: $spacingSmall $spacing;
}
.post__footer {
@include flex(space-between, center);
flex-wrap: wrap;
gap: $spacing;
border-top: 1px solid var(--color-border-aside);
border-bottom: 1px solid var(--color-border-aside);
padding-block: $spacingLarge;
margin-block: $spacing;
.footer__metadata > div {
@include flex(flex-start, center);
gap: $spacingSmall;
svg {
width: 1.25rem;
}
&:last-of-type {
margin-block-start: $spacingSmall;
}
}
}
}
.backlinks {
--bg: var(--color-background-secondary);
margin-block-start: 1rem;
background-color: var(--bg);
border-radius: $spacingSmall;
padding: $spacing;
h2 {
margin-block-start: 0;
}
&__list {
@include list($style: disc, $display: block);
margin-inline-start: $spacing;
}
}
.page-content {
.page__subnav ul {
@include list();
flex-wrap: wrap;
}
}
// section.resume h2 {
// margin-block-end: $spacing;
// }
.experience {
padding-block: $spacing;
&:not(:first-of-type) {
border-top: 2px solid gray;
}
&:not(:last-of-type) {
border-bottom: 2px solid gray;
}
&__header {
@include flex();
gap: $spacing;
}
&__logo {
max-width: 3.5rem;
}
&__role {
margin-block-start: $spacingSmall;
}
.role__name {
margin: 0;
margin-block-end: $spacing;
}
.role__description {
margin: 0;
margin-block-start: $spacingSmall;
}
.role__list {
margin: 0;
padding-left: $spacing;
max-width: 65ch;
& > *:not(:last-of-type) {
margin-block-end: $spacingSmall;
}
}
}
.skill__category {
margin-block-end: $spacing;
@media (min-width: $b-sm) {
@include flex($justify: space-between);
flex-wrap: nowrap;
& > * {
width: 50%;
}
}
}
@media print {
header.header,
footer.footer,
.full-cv,
.print-hidden {
display: none;
}
.experience {
border: none !important;
}
}
.page-review {
h2 {
@include stickyHeading();
}
.review__rating {
dt {
float: left;
margin-inline-end: $spacingSmall;
}
}
.entries {
& > * {
padding-block: $spacing;
&:not(:last-of-type) {
border-bottom: 1px solid gray;
}
}
}
.entry {
display: grid;
gap: $spacingLarge $spacing;
align-items: center;
padding-inline: $spacingSmall;
&:hover {
background-color: var(--color-background-aside);
}
@media (min-width: $b-md) {
grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
}
}
.count {
text-align: right;
margin-top: $spacing;
margin-bottom: $spacing;
}
}
.tags-list {
@media (min-width: $b-md) {
column-count: 2;
}
}
.blogroll {
@media (min-width: $b-md) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: $spacingLarge;
}
.blog {
ul.blog__tags {
@include list();
font-style: italic;
}
ul.blog__urls {
@include list();
}
}
}
.page-content.page-stats {
max-width: $b-sm;
width: 100%;
margin-inline: auto;
}
table.stats {
width: 100%;
border-collapse: collapse;
margin-block-end: $spacingLarge;
th {
text-align: left;
width: 35%;
}
th,
td {
padding: $spacingSmall;
}
tr {
border-bottom: 1px solid gray;
}
}
.tags-cloud {
@include flex();
flex-wrap: wrap;
gap: $spacingSmall $spacing;
.tag__name {
text-decoration: none;
}
}
.work-filter {
margin-block-end: $spacing;
}
.work-grid {
@media (min-width: $b-md) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: $spacingLarge;
}
& > &__item:not(:last-of-type) {
margin-block-end: $spacingLarge;
}
.item__header {
h3 {
margin-block-start: 0;
}
&__wrapper {
display: flex;
align-items: center;
gap: $spacingSmall;
svg {
max-width: 2rem;
}
}
}
.item__tags {
@include list();
column-gap: $spacingSmall;
row-gap: calc(#{$spacing} / 2);
flex-wrap: wrap;
font-style: italic;
}
.item__links {
@include list();
}
}