diff options
Diffstat (limited to '_sass')
| -rwxr-xr-x | _sass/fonts.css | 149 | ||||
| -rw-r--r-- | _sass/main.scss | 538 | ||||
| -rw-r--r-- | _sass/temp.scss | 21 |
3 files changed, 0 insertions, 708 deletions
diff --git a/_sass/fonts.css b/_sass/fonts.css deleted file mode 100755 index dfbca0f..0000000 --- a/_sass/fonts.css +++ /dev/null @@ -1,149 +0,0 @@ -/** =================== MONTSERRAT =================== **/ - -/** Montserrat Regular **/ -@font-face { - font-family: "Montserrat"; - font-weight: 400; - font-style: normal; - src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"), - url("/assets/fonts/Montserrat-Regular.woff") format("woff"); - font-display: swap; -} - -/** Montserrat Medium **/ -@font-face { - font-family: "Montserrat"; - font-weight: 500; - font-style: normal; - src: url("/assets/fonts/Montserrat-Medium.woff2") format("woff2"), - url("/assets/fonts/Montserrat-Medium.woff") format("woff"); - font-display: swap; -} - -/** Montserrat Regular-Italic **/ -@font-face { - font-family: "Montserrat"; - font-weight: 400; - font-style: italic; - src: url("/assets/fonts/Montserrat-Italic.woff2") format("woff2"), - url("/assets/fonts/Montserrat-Italic.woff") format("woff"); - font-display: swap; -} - -/** Montserrat Bold **/ -@font-face { - font-family: "Montserrat"; - font-weight: 700; - font-style: normal; - src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"), - url("/assets/fonts/Montserrat-Bold.woff") format("woff"); - font-display: swap; -} - -/** Montserrat Bold-Italic **/ -@font-face { - font-family: "Montserrat"; - font-weight: 700; - font-style: italic; - src: url("/assets/fonts/Montserrat-BoldItalic.woff2") format("woff2"), - url("/assets/fonts/Montserrat-BoldItalic.woff") format("woff"); - font-display: swap; -} - - -/** ==================== LATO ======================== **/ - -/* Webfont: Lato-Regular */ -@font-face { - font-family: 'Lato'; - src: url('/assets/fonts/Lato-Regular.eot'); /* IE9 Compat Modes */ - src: url('/assets/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */ - url('/assets/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/Lato-Regular.ttf') format('truetype'); - font-style: normal; - font-weight: 400; - font-display: swap; -} - -/* Webfont: Lato-Italic */@font-face { - font-family: 'Lato'; - src: url('/assets/fonts/Lato-Italic.eot'); /* IE9 Compat Modes */ - src: url('/assets/fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */ - url('/assets/fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/Lato-Italic.ttf') format('truetype'); - font-style: italic; - font-weight: 400; - font-display: swap; -} - -/* Webfont: Lato-Bold */@font-face { - font-family: 'Lato'; - src: url('/assets/fonts/Lato-Bold.eot'); /* IE9 Compat Modes */ - src: url('/assets/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */ - url('/assets/fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/Lato-Bold.ttf') format('truetype'); - font-style: normal; - font-weight: 700; - font-display: swap; -} - -/* Webfont: Lato-BoldItalic */@font-face { - font-family: 'Lato'; - src: url('/assets/fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */ - src: url('/assets/fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */ - url('/assets/fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/Lato-BoldItalic.ttf') format('truetype'); - font-style: italic; - font-weight: 700; - font-display: swap; -} -/** =================== FIRA CODE ===================== **/ - -@font-face { - font-family: 'Fira Code'; - src: url('/assets/fonts/FiraCode-Light.woff2') format('woff2'), - url("/assets/fonts/FiraCode-Light.woff") format("woff"); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Fira Code'; - src: url('/assets/fonts/FiraCode-Regular.woff2') format('woff2'), - url("/assets/fonts/FiraCode-Regular.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Fira Code'; - src: url('/assets/fonts/FiraCode-Medium.woff2') format('woff2'), - url("/assets/fonts/FiraCode-Medium.woff") format("woff"); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Fira Code'; - src: url('/assets/fonts/FiraCode-SemiBold.woff2') format('woff2'), - url("/assets/fonts/FiraCode-SemiBold.woff") format("woff"); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Fira Code'; - src: url('/assets/fonts/FiraCode-Bold.woff2') format('woff2'), - url("/assets/fonts/FiraCode-Bold.woff") format("woff"); - font-weight: 700; - font-style: normal; - font-display: swap; -} diff --git a/_sass/main.scss b/_sass/main.scss deleted file mode 100644 index 6ae9f78..0000000 --- a/_sass/main.scss +++ /dev/null @@ -1,538 +0,0 @@ -$color-main-bg: #f0f0f0; -$color-dark-bg: #070707; -$color-main-blue: #397eaf; -$color-dark-blue: #2e4054; -$color-main-grey: #e1e1e1; -$color-main-grey-dark: #c4c4c4; -$color-dark-grey: #1f1f1f; -$color-darker-grey: #101010; -$color-link-idle: #2e4054; -$color-link-idle-dark: #999999; -$color-link-hover: #999999; -$color-link-hover-dark: #707070; -$color-nav-current: #19212a; -$color-nav-current-dark: #999999; -$nav-alpha: 0.95; -$body-width: 835px; -$border-main: 5px solid; -$border-nav: $border-main $color-main-grey; -$border-dark: $border-main $color-dark-grey; -$font-title: sans-serif; -$font-body: sans-serif; -$font-code: monospace; - -html { - background: $color-main-bg; -} - -body { - max-width: $body-width; - min-width: 378px; - margin: 0 auto; - padding: 0.5em; - color: $color-dark-bg; - font: 100% $font-body; -} - -a { - color: $color-link-idle; - text-decoration: none; - transition: 0.2s ease-in-out; - &:hover { - color: $color-link-hover; - } -} - -nav { - position: sticky; - top: 0; - z-index: 10; - display: flex; - flex-direction: row-reverse; - font: 400 1.5em $font-title; - letter-spacing: -0.05em; - background: rgba($color-main-bg, $nav-alpha); - - a.current { - color: $color-nav-current; - pointer-events: none; - font-weight: 500; - } - - hr { - display: none; - } - - ul { - flex: 1; - display: inline-flex; - padding: 2.15em 0.5em 0 0; - height: fit-content; - - flex-direction: row; - justify-content: space-between; - border-bottom: $border-nav; - } -} - -h1, h2, h3, h4, h5, h6 { - margin: 0; - color: $color-main-blue; - font-family: $font-title; - font-weight: 500; - - a { - color: $color-main-blue; - - &:hover { - color: $color-dark-blue; - } - } -} - -hr { - border-width: 0 0 5px 0; - border-bottom: $border-nav; -} - -ul { - margin: 0; - padding: 0; - li { - list-style-type:none; - } -} - -blockquote { - margin: 0.5em; - padding-left: 1em; - border-width: 0 0 0 5px; - border-color: $color-main-grey; - border-style: solid; - border-radius: 0.5em; -} - -code { - font-family: $font-code; - font-size: 0.9em; - background: $color-main-grey; - padding: 2px; - border-radius: 5px; -} - -div.highlight { - overflow-x: auto; - background: $color-main-grey; - padding-left: 0.5em; - border-radius: 5px; - code { - padding: 0; - } -} - -audio { - width: 100%; - border-radius: 25px; -} - -footer { - padding-top: 0.5em; - text-align: center; - font: 75% $font-body; - p { - margin: 0; - } -} - -.title_with_backlink { - display: flex; - justify-content: space-between; - align-items: baseline; - - .backlink::before { - content: "← " - } -} - -.with_hidden { - .hidden { - display: none; - } - - &:hover { - .hidden { - display: inline; - } - } -} - -.faint { - color: $color-main-grey; -} - -.about { - display: flex; - flex-direction: row; - #avatar { - border-radius: 100%; - height: 128px; - } - &-sidebar { - flex: 23%; - } - &-links { - margin-top: 1em; - .link-icon { - width: 32px; - } - .link-text { - display: inline; - position: relative; - bottom: 0.75em; - } - } - &-info { - width: 100%; - p:first-child { - margin-top: 0; - } - } -} - -.post { - padding: 1em; - margin: 1em 0; - border-radius: 25px 25px 25px 0px; - border: 2px solid $color-main-grey; - word-wrap: break-word; - - a { - color: $color-main-blue; - - &:hover { - color: $color-dark-blue; - } - } - - small p { - display: inline; - } - - p { - img { - display: block; - max-width: 100%; - margin: 0 auto; - border-radius: 1em; - } - } - - &-date::after { - content: " /"; - } - - &-page { - margin-bottom: 10px; - ul { - padding-left: 10px; - } - } - - &-header { - margin-bottom: 2em; - &-info { - * { - margin: 0 0.1em; - } - margin-left: 0.5em; - float: right; - display: flex; - flex-direction: row; - ul { - padding: 0; - li { - display: inline; - a { - background: $color-main-grey; - border-radius: 5px; - padding: 2px; - } - } - } - } - } -} - -@mixin image-list-item ($width, $height, $object-fit: cover) { - &-item-mask { - position: absolute; - z-index: 1; - width: $width; - height: $height; - } - &-item-img { - position: relative; - width: $width; - height: $height; - - img { - position: absolute; - width: 100%; - height: 100%; - image-orientation: initial; - object-fit: $object-fit; - } - } -} - -@mixin link-color-transition ($color-bg, $color-fg) { - color: rgba($color-fg, 0); - background: rgba($color-bg, 0); - - &:hover { - color: rgba($color-fg, 1); - background: rgba($color-bg, 0.7); - } -} - -.art-menu { - display: flex; - flex-flow: row wrap; - justify-content: space-around; - align-content: center; - - @include image-list-item(24em, 18em); - - &-item { - margin-bottom: 1em; - &-mask { - display: inline-flex; - justify-content: center; - align-items: center; - transition: color 0.2s ease-in-out, - background 0.2s ease-in-out; - - @include link-color-transition($color-main-bg, $color-dark-bg); - } - &-text { - font-size: 200%; - margin-bottom: 0.2em; - } - } -} - -.art { - display: flex; - flex-flow: row wrap; - - .art-img { - margin: 0.5em 0; - img { - width: 100%; - height: auto; - image-orientation: from-image; - } - } -} - -.music-project { - display: flex; - flex-flow: row wrap; - - &-list { - display: flex; - flex-flow: row wrap; - justify-content: space-evenly; - - @include image-list-item(14em, 14em, contain); - - &-item { - margin-bottom: 1em; - - &-mask { - display: inline-flex; - flex-direction: column; - justify-content: center; - text-align: center; - transition: background 0.2s ease-in-out, - color 0.2s ease-in-out; - @include link-color-transition($color-main-bg, $color-dark-bg); - } - &-text { - font: 200% $font-title; - margin-top: 0.3em; - margin-bottom: 0.1em; - } - } - } - - &-titlebar { - flex: 100%; - } - - &-sidebar { - flex: 1; - padding-right: 0.5em; - #logo { - width: 100%; - } - } - - &-info { - flex: 3; - width: 100%; - } - - &-release { - &-list { - flex: 100%; - } - - &-info { - - } - - &-type { - color: $color-main-grey-dark; - } - - &-by_year { - padding-right: 0.5em; - border: $border-nav; - border-color: transparent; - border-right-color: $color-main-grey; - border-width: 0 5px 0 0; - border-radius: 0.5em; - } - &-year { - position: sticky; - top: 6em; - padding: 0.2em 0.3em; - border-radius: 1em; - float: right; - background: rgba($color-main-bg, 0.8); - } - } -} - -@media only screen and (max-width: 760px) { - footer p { - padding: 0; - } - nav { - flex-direction: column; - img { - align-self: center; - } - ul { - padding: 0 0.25em; - } - } - .content { - padding-top: 0.5em; - } - .about { - flex-direction: column-reverse; - &-sidebar { - display: flex; - flex-direction: column; - img { - width: 128px; - margin: 0 auto; - } - } - &-links { - margin-top: 0; - p:first-child { - margin: 0; - padding-top: 0; - } - ul { - padding-top: 1em; - display: flex; - flex-wrap: wrap; - li { - margin: auto; - padding: 0 0.5em; - } - } - } - } - .music-project { - flex-flow: column; - &-titlebar { - flex: 1; - } - &-sidebar { - padding: 0; - } - &-release { - &-year { - top: 8em; - } - } - } -} - -@media (prefers-color-scheme: dark) { - html { - background: $color-dark-bg; - } - body { - color: $color-main-bg; - } - a { - color: $color-link-idle-dark; - &:hover { - color: $color-link-hover-dark; - } - } - nav { - background: rgba($color-dark-bg, $nav-alpha); - a.current { - color: $color-nav-current-dark; - } - ul { - border-bottom: $border-dark; - } - } - hr { - border-bottom: $border-dark; - } - code { - background: $color-darker-grey; - } - .art-menu-item-mask { - @include link-color-transition($color-dark-bg, $color-main-bg); - } - div.highlight { - background: $color-darker-grey; - } - .post { - border: 2px solid $color-dark-grey; - } - .post-page .post-header ul li a { - background: $color-dark-grey; - } - .music-project { - &-release { - &-type { - color: $color-dark-grey; - } - &-year { - background: rgba($color-dark-bg, 0.8); - } - } - &-list-item-mask { - @include link-color-transition($color-dark-bg, $color-main-bg); - } - &-release { - &-by_year { - border-right-color: $color-dark-grey; - } - } - } - blockquote { - border-color: $color-dark-grey; - } -} diff --git a/_sass/temp.scss b/_sass/temp.scss deleted file mode 100644 index b215686..0000000 --- a/_sass/temp.scss +++ /dev/null @@ -1,21 +0,0 @@ -* { - margin: 0; - padding: 0; -} -html { - font-family: sans-serif; - background: black; -} -body { - color: white; - margin-left: auto; - margin-right: auto; - width: auto; - max-width: 800px; -} -h1 { - border-bottom: 1px solid white; -} -p { - margin: 30px 0; -} |