diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss index 2914f91..97bd8a5 100644 --- a/assets/sass/_custom.scss +++ b/assets/sass/_custom.scss @@ -7,19 +7,29 @@ $chat-user-bg: darken(desaturate($accent-dark, 40%), 25%); $chat-assistant-bg: darken(desaturate($accent-ai, 40%), 25%); $chat-border-radius: 12px; -.menu { - .menu-icon { - margin-right: 0.8em; - } -} - .author { margin-top: 5.6rem; margin-bottom: 5.6rem; } -main { - article.post-article { +.navbar { + .menu { + @include media-query($on-mobile) { + .menu-link { + display: block; + box-sizing: border-box; + font-size: 1.6rem; + } + + .menu-icon { + margin-right: 0.8em; + } + } + } +} + +.page-content { + .post-content { font-size: 0.95em; a { @@ -49,23 +59,41 @@ main { padding-left: 0.25em; font-size: 1.25em; } - } - .header { - margin-top: 3.2em; + .post-item { + display: flex; + flex-wrap: wrap; /* allow wrapping */ + align-items: center; + + .post-item-title { + font-size: 0.88em; + flex: 1; /* take remaining space */ + } + + .right-cols { + display: flex; + flex-wrap: nowrap; /* keep 2 right columns on same line until wrapping */ + gap: 1.2em; /* spacing between them */ + flex-shrink: 0; /* don't shrink into left space */ - font-size: medium; + time { + font-weight: bold; + } - .header-title { - margin-bottom: 0.5em; - font-size: x-large; + .post-item-meta { + font-size: 0.75em; + } + + .ttr { + font-style: italic; + } } - .terms { - color: $greyed-out; - word-break: keep-all; + a { + color: $accent !important; } } + } .toc { padding: 0; @@ -89,101 +117,82 @@ main { font-size: 0.9em; } } +} - .chat { - .message { - display: inline-block; - position: relative; - overflow: visible; +.chat { + .message { + display: inline-block; + position: relative; + overflow: visible; + + padding: 0 1em; + margin: 0.8em 0; + max-width: 90%; + min-width: 0; - padding: 0 1em; - margin: 0.8em 0; - max-width: 90%; - min-width: 0; + border: 0px solid; + + &::before, + &::after { + content: ""; + position: absolute; + } - border: 0px solid; + &.user { + float: right; + border-radius: $chat-border-radius $chat-border-radius 0 $chat-border-radius; + border-color: $accent-dark; + color: $font-color; + background-color: $chat-user-bg; - &::before, &::after { - content: ""; - position: absolute; + bottom: 0; + right: -10px; + border-top: 20px solid transparent; + border-left: 12px solid $chat-user-bg; + z-index: 2; } + } - &.user { - float: right; - border-radius: $chat-border-radius $chat-border-radius 0 $chat-border-radius; - border-color: $accent-dark; - color: $font-color; - background-color: $chat-user-bg; - - &::after { - bottom: 0; - right: -10px; - border-top: 20px solid transparent; - border-left: 12px solid $chat-user-bg; - z-index: 2; - } - } + &.assistant { + border-radius: $chat-border-radius $chat-border-radius $chat-border-radius 0; + border-color: $accent-ai; + color: $font-color; + background-color: $chat-assistant-bg; - &.assistant { - border-radius: $chat-border-radius $chat-border-radius $chat-border-radius 0; - border-color: $accent-ai; - color: $font-color; - background-color: $chat-assistant-bg; - - &::after { - bottom: 0; - left: -10px; - border-top: 20px solid transparent; - border-right: 12px solid $chat-assistant-bg; - z-index: 2; - } + &::after { + bottom: 0; + left: -10px; + border-top: 20px solid transparent; + border-right: 12px solid $chat-assistant-bg; + z-index: 2; } + } - .content { - margin: 0; - font-size: 0.9em; + .content { + margin: 0; + font-size: 0.9em; - p, ul, ol { - margin: 0.4em inherit; - } + p, ul, ol { + margin: 0.4em inherit; } } } } +.header { + margin: 4rem 0 2rem 0; -.posts-item-note, .post-year { - font-size:1.2em; -} + font-size: medium; -.post-item { - display: flex; - flex-wrap: wrap; /* allow wrapping */ - align-items: center; - - .post-item-title { - font-size: 0.88em; - flex: 1; /* take remaining space */ + .header-title { + margin-bottom: 0.5em; + font-size: x-large; } - .right-cols { - display: flex; - flex-wrap: nowrap; /* keep 2 right columns on same line until wrapping */ - gap: 1.2em; /* spacing between them */ - flex-shrink: 0; /* don't shrink into left space */ - - time { - font-weight: bold;; - } - - .post-item-meta { - font-size: 0.75em; - } - - .ttr { - font-style: italic; - } + .terms { + color: $greyed-out; + word-break: keep-all; } } @@ -216,6 +225,10 @@ main { cursor: default; } +.center { + text-align: center; +} + .footer { margin-top: 2.8em; } @@ -274,3 +287,235 @@ main { } } } + +.post-card { + margin: 1.5rem 0; + border-radius: 8px; + transition: all 0.3s ease; + min-height: calc(120px + 2rem); + + position: relative; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; + overflow: visible; // Allow content to wrap around image + + &:hover { + transform: translateY(-2px); + border-color: rgba($accent, 0.3); + box-shadow: 0 4px 16px rgba($accent, 0.1); + } + + a { + color: white; + text-decoration: none; + transition: color 0.25s ease; + + &:hover { + color: $accent !important; + } + } + + // Default (left-aligned) layout + .post-card-image { + float: left; + width: 180px; + height: 120px; + margin: 1rem 1.5rem 1rem 1rem; + overflow: hidden; + border-radius: 6px; + flex-shrink: 0; + position: relative; // For mobile overlay positioning + + img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transform-origin: center center; + will-change: transform; + transition: transform 0.3s ease; + } + + // Mobile overlay (hidden on desktop) + .mobile-overlay { + display: none; + } + } + + + &:hover .post-card-image img { + transform: scale(1.05); + transition: transform 0.5s ease; + } + + &:nth-child(even) .post-card-image { + float: right; + margin: 1rem 1rem 1rem 1.5rem; + } + + .post-card-content { + padding: 1rem; + } + + // Desktop-only elements + .desktop-only { + display: block; + } + + .post-card-header { + margin-bottom: 0.8rem; + } + + .post-card-title { + margin: 0; + font-size: 1.1rem; + font-weight: 600; + line-height: 1.3; + } + + .post-card-categories { + display: block; + margin: 0.25em 0; + + .category-tag { + display: inline-block; + font-size: 0.7rem; + padding: 0rem 0.4rem; + margin: 0 0.1rem; + background: rgba($accent-dark, 0.2); + color: $accent-dark; + text-shadow: black 2px 2px 4px; + box-shadow: black 2px 2px 4px; + border-radius: 8px; + text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.5px; + } + } + + .post-card-description { + margin: 0; + font-size: 0.9rem; + line-height: 1.5; + color: rgba($font-color, 0.8); + } + + .post-card-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); + clear: both; + + .meta-left { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .ttr { + color: rgba($font-color, 0.7); + font-style: italic; + font-size: 0.8rem; + } + + .post-date { + color: rgba($font-color, 0.7); + font-weight: bold; + font-size: 0.9rem; + } + } + + .category-card-meta { + margin: 0.6em 0; + color: rgba($font-color, 0.7); + font-weight: bold; + font-size: 0.9rem; + } + + &:nth-child(even) { + text-align: right; + } + + @include media-query($on-mobile) { + .post-card-image { + float: right; + width: 100%; + height: 180px; + margin: 0 0 0.5em 0; + position: relative; + border-radius: 8px 8px 0 0; + + // Show mobile overlay within image + .mobile-overlay { + display: block; + position: absolute; + pointer-events: none; + top: 0; + left: 0; + right: 0; + height: 180px; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); + padding: 0rem 1rem 1rem 1rem; + color: white; + + .post-card-categories { + margin-top: 0.6em; + float: right; + + .category-tag { + background: rgba($accent-dark, 0.6); + color: white; + font-weight: 600; + } + } + + .post-card-title { + color: white; + font-size: 1.1rem; + position: inherit; + text-align: left; + margin: 0; + bottom: 1.6em; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); + } + } + } + + &:nth-child(even) .post-card-image { + float: right; + margin: 0 0 0.5em 0; + } + + .post-card-content { + padding: 0; + } + + // Hide desktop elements + .desktop-only { + display: none; + } + + .post-card-main-content { + padding: 1rem; + } + + .post-card-description { + font-size: 0.9rem; + text-align: left; + } + + .post-card-meta { + margin-top: 0.75rem; + clear: none; + } + + .category-card-meta { + text-align: left; + } + } +} diff --git a/assets/sass/_dark.scss b/assets/sass/_dark.scss new file mode 100644 index 0000000..8992b24 --- /dev/null +++ b/assets/sass/_dark.scss @@ -0,0 +1,270 @@ +body { + color: $dark-text-base-color; + background-color: $dark-black; +} + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + color: $dark-white; +} + +// Table +table { + thead { + color: $dark-white; + border-color: $dark-light; + } + + th, + td, + tr { + border-color: $dark-light; + } +} + +// Post +.page-content { + a { + color: $dark-text-link-blue; + + &:hover, + &:active, + &:focus { + color: $dark-text-link-blue-active; + } + } + + h3 { + border-color: $dark-light; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $dark-white; + } +} + +// ToC +.toc { + background-color: $dark-toc-bg; +} + +// Go to top +#totop { + color: $dark-text-base-color; + background-color: $dark-go-top-bg; + + &:hover { + background-color: $dark-go-top-bg-hover; + } +} + +// Inline code +li>code, +p>code { + font-size: 0.9em; + padding: 1px 3px; + position: relative; + top: -1px; + color: $dark-inline-code-text; + background-color: $dark-inline-code-bg; + border-radius: 2px; + border: 1px solid rgba(128, 128, 128, 0.1); +} + +// kbd tag +kbd { + color: $dark-inline-code-text; + background-color: $dark-inline-code-bg; +} + +// horizontal rule +hr { + border-color: $dark-light; +} + +// Post Meta +.post-meta { + color: $dark-gray; + + time { + &::after { + background-color: $dark-light; + } + } + + span[itemprop="author"] { + border-color: $dark-light; + } +} + +// Link +a { + color: inherit; + text-decoration-color: $dark-smoke; + + &:hover { + color: $dark-text-link-blue; + } + + &:focus { + outline-color: rgba(44, 118, 246, 0.6); + } +} + +// List +li { + &:before { + color: $dark-white; + } +} + +// Blockquote +blockquote { + color: $dark-blockquote-text; + border-color: $dark-bloquote-border; +} + +// Strong, Bold +strong, +b { + color: $dark-white; +} + +// Navbar +.navbar { + border-color: $dark-light; + + .menu { + a#mode { + .mode-sunny { + display: block; + } + + .mode-moon { + display: none; + } + } + + .menu-link { + color: $dark-white; + } + + @include media-query($on-mobile) { + background-color: $dark-black; + border-color: $dark-light; + + input[type="checkbox"]:checked~.trigger { + background: $dark-black; + } + } + } +} + +// Post Item +.post-item { + &:not(:first-child) { + border-color: $dark-light; + } + + .post-item-date { + color: $dark-white; + } + + .post-item-title { + a { + color: $dark-text-base-color; + + &:hover, + &focus { + color: $dark-white; + } + } + } +} + +// Post Navigation +.post-nav { + border-color: $dark-light; + + .post-nav-item { + font-weight: $bold-weight; + + .post-title { + color: $dark-white; + opacity: 0.9; + } + + &:hover, + &:focus { + .post-title { + color: $dark-text-link-blue-active; + } + } + + .nav-arrow { + color: $dark-gray; + } + } + + @include media-query($on-mobile) { + .post-nav-item:nth-child(even) { + border-color: $dark-light; + } + } +} + +// Footer +.footer { + span.footer_item { + color: $dark-white; + } + + a.footer_item:not(:last-child) { + color: $dark-white; + } + + .footer_copyright { + color: $dark-gray; + opacity: 1; + } +} + +// 404 Page +.not-found { + .title { + color: $dark-white; + text-shadow: 1px 0px 0px $dark-text-link-blue; + } + + .phrase { + color: $dark-text-base-color; + } + + .solution { + color: $dark-text-link-blue; + } + + .solution:hover { + color: $dark-text-link-blue-active; + } +} + +.search-article { + input[type="search"] { + color: $dark-text-base-color; + + &::-webkit-input-placeholder { + color: rgba(128, 128, 128, 0.8); + } + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..8b72547 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,89 @@ +//////////////// 1. Light Colors ///////////////// +$text-base-color: #434648; +$text-link-blue: #003fff; +$text-link-blue-active: #0036c7; +$bloquote-border: #c4c8cc; +$blockquote-text: #525b66; +$inline-code-text: #333638; +$inline-code-bg: #d8dbe2; +$toc-bg: #edecec; +$go-top-bg: #dfe0e397; +$go-top-bg-hover: #dfe0e3; + +$black: #0d122b; +$light: #ececec; +$smoke: #d2c7c7; +$gray: #6b7886; +$white: #fff; + +//////////////// 2. Dark Colors ///////////////// +$dark-text-base-color: #babdc4; +$dark-text-link-blue: #77a8fd; +$dark-text-link-blue-active: #5292ff; +$dark-bloquote-border: #4a4d56; +$dark-blockquote-text: #9b9ba3; +$dark-inline-code-text: #c2c4ca; +$dark-inline-code-bg: #2d2d2d; +$dark-toc-bg: #323232; +$dark-go-top-bg: #676767b3; +$dark-go-top-bg-hover: #676767; + +$dark-black: #131418; +$dark-white: #eaeaea; +$dark-light: #1b1d25; +$dark-smoke: #4a4d56; +$dark-gray: #767f87; + +//////////////// 3. Fonts preferences ///////////////// +$sans-family: Roboto, sans-serif; +$mono-family: Consolas, monospace; +$base-font-size: 16px; +$medium-font-size: $base-font-size * 0.938; +$small-font-size: $base-font-size * 0.875; +$base-line-height: 1.85; + +// Font weight +// $light-weight: 300; // uncomment if necessary +$normal-weight: 400; +$bold-weight: 700; +// $black-weight: 900; // uncomment if necessary + +//////////////// 4.Responsive design (media queries) ///////////////// +$wide-size: 890px; +$narrow-size: 720px; + +// Padding unit +$spacing-full: 30px; +$spacing-half: $spacing-full / 2; + +// Screen sizes +$on-mobile: 768px; +$on-tablet: 769px; +$on-desktop: 1024px; +$on-widescreen: 1152px; + +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: $base-font-size * $ratio; +} + +//////////////// 5. Import all sass files ///////////////// + +@import "fonts"; +@import "base"; +@import "navbar"; +@import "layout"; +@import "post"; +@import "code"; + +@import "tableOfContent"; +@import "miscellaneous"; +@import "listpage"; +@import "goToTop"; +@import "dark"; +@import "custom"; diff --git a/content/categories/anthropology/_index.md b/content/categories/anthropology/_index.md new file mode 100644 index 0000000..00b7980 --- /dev/null +++ b/content/categories/anthropology/_index.md @@ -0,0 +1,4 @@ +--- +title: "Anthropology" +description: "Ever watched Indiana Jones? It's not like that." +--- diff --git a/content/categories/anthropology/thumb.jpg b/content/categories/anthropology/thumb.jpg new file mode 100644 index 0000000..d90fb1c Binary files /dev/null and b/content/categories/anthropology/thumb.jpg differ diff --git a/content/categories/comp-sci/_index.md b/content/categories/comp-sci/_index.md new file mode 100644 index 0000000..67cf302 --- /dev/null +++ b/content/categories/comp-sci/_index.md @@ -0,0 +1,5 @@ +--- +title: "Computer Science" +shortTitle: "Comp-Sci" +description: "Conjuring the ghost in the machine." +--- diff --git a/content/categories/comp-sci/thumb.jpg b/content/categories/comp-sci/thumb.jpg new file mode 100644 index 0000000..1e7608d Binary files /dev/null and b/content/categories/comp-sci/thumb.jpg differ diff --git a/content/categories/epistemology/_index.md b/content/categories/epistemology/_index.md new file mode 100644 index 0000000..18ed52c --- /dev/null +++ b/content/categories/epistemology/_index.md @@ -0,0 +1,4 @@ +--- +title: "Epistemology" +description: "Thou shall not sin by engaging in impure reasoning." +--- diff --git a/content/categories/epistemology/thumb.jpg b/content/categories/epistemology/thumb.jpg new file mode 100644 index 0000000..c2fa425 Binary files /dev/null and b/content/categories/epistemology/thumb.jpg differ diff --git a/content/categories/law/_index.md b/content/categories/law/_index.md new file mode 100644 index 0000000..38d2f51 --- /dev/null +++ b/content/categories/law/_index.md @@ -0,0 +1,4 @@ +--- +title: "Law" +description: "Dibs on the gavel." +--- diff --git a/content/categories/law/thumb.jpg b/content/categories/law/thumb.jpg new file mode 100644 index 0000000..13685d4 Binary files /dev/null and b/content/categories/law/thumb.jpg differ diff --git a/content/categories/philosophy/_index.md b/content/categories/philosophy/_index.md new file mode 100644 index 0000000..fca0998 --- /dev/null +++ b/content/categories/philosophy/_index.md @@ -0,0 +1,4 @@ +--- +title: "Philosophy" +description: "Things to ponder when life seems too absurd." +--- diff --git a/content/categories/philosophy/thumb.jpg b/content/categories/philosophy/thumb.jpg new file mode 100644 index 0000000..29fc7ff Binary files /dev/null and b/content/categories/philosophy/thumb.jpg differ diff --git a/content/categories/poli-sci/_index.md b/content/categories/poli-sci/_index.md new file mode 100644 index 0000000..6061152 --- /dev/null +++ b/content/categories/poli-sci/_index.md @@ -0,0 +1,5 @@ +--- +title: "Political Science" +shortTitle: "Poli-Sci" +description: "Make it stop. Please." +--- diff --git a/content/categories/poli-sci/thumb.jpg b/content/categories/poli-sci/thumb.jpg new file mode 100644 index 0000000..58d63f5 Binary files /dev/null and b/content/categories/poli-sci/thumb.jpg differ diff --git a/content/categories/sociology/_index.md b/content/categories/sociology/_index.md new file mode 100644 index 0000000..e3a3061 --- /dev/null +++ b/content/categories/sociology/_index.md @@ -0,0 +1,4 @@ +--- +title: "Sociology" +description: "People are weird as shit, aren't they?" +--- diff --git a/content/categories/sociology/thumb.jpg b/content/categories/sociology/thumb.jpg new file mode 100644 index 0000000..2c2e016 Binary files /dev/null and b/content/categories/sociology/thumb.jpg differ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index dec3e29..4649441 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,24 +1,30 @@ {{- define "main" -}}