diff options
Diffstat (limited to 'assets/scss/style.scss')
-rw-r--r-- | assets/scss/style.scss | 89 |
1 files changed, 34 insertions, 55 deletions
diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 157768f..9176d26 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -20,50 +20,44 @@ html { } /* menu icon */ - .header .menu-icon .navicon { display: block; height: 2px; position: relative; transition: background 0.2s ease-out; width: 18px; -} - -.header .menu-icon .navicon:before, -.header .menu-icon .navicon:after { - background: #ebdbb2; - content: ""; - display: block; - height: 100%; - position: absolute; - transition: all 0.2s ease-out; - width: 100%; -} - -.header .menu-icon .navicon:before { - top: 6px; -} - -.header .menu-icon .navicon:after { - top: -6px; + &::before, + &::after { + background: #ebdbb2; + content: ""; + display: block; + height: 100%; + position: absolute; + transition: all 0.2s ease-out; + width: 100%; + } + &:before { + top: 6px; + } + &:after { + top: -6px; + } } /* menu btn */ -.header .menu-btn:checked ~ .menu-icon { - .navicon { - background: transparent; - } - .navicon:before { +.header .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; + &:before { transform: rotate(-45deg); } - .navicon:after { + &:after { transform: rotate(45deg); } } -.header .menu-btn:checked ~ .menu-icon:not(.steps) { - .navicon:before, - .navicon:after { +.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon { + &:before, + &:after { top: 0; } } @@ -157,26 +151,7 @@ html { max-width: 20rem; } } -// HERO -#hero { - text-shadow: 2px 2px 3px black; -} -blockquote { - @extend .bl, .bw2, .w3-theme-border, .pv1, .pl3, .relative, .baskerville; - &::before { - font-family: "Font Awesome 6 Free"; - color: #79c753; - content: "\f10d"; - font-weight: 900; - font-size: 2rem; - position: absolute; - left: 10px; - top: -15px; - } - p:last-of-type { - @extend .tc, .ttu, .tracked, .fs-normal, .ma0, .pa0; - } -} + .heading-anchor { color: #ddd !important; } @@ -219,7 +194,8 @@ footer { } } // CV ENTRY -.cv-entry, .cv-honor { +.cv-entry, +.cv-honor { @extend .ml3, .pl4, .pb2, .relative; .cv-host, .cv-date, @@ -296,6 +272,7 @@ footer { // Title font @font-face { font-family: "BerkshireSwash-Regular"; + font-display: optional; src: url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"), url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular") @@ -325,11 +302,6 @@ table:not(.u-legend) { @extend .ph3, .pv2; } } -// gallery -// https://lubna.dev/articles/create-css-only-image-gallery/ -* { - box-sizing: border-box; -} .comment { @extend .mv2, .pl3, .bl, .bw1, .w3-theme-border, .relative; @@ -352,6 +324,13 @@ table:not(.u-legend) { } } +/* gallery +// https://lubna.dev/articles/create-css-only-image-gallery/ +// box-sizing setup is part of tachyons +// * { +// box-sizing: border-box; +// } */ + $max-img-width: 72rem; $max-img-height: 48rem; |