summaryrefslogtreecommitdiff
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/index.css332
-rw-r--r--src/styles/post.css129
-rw-r--r--src/styles/resume.css299
-rw-r--r--src/styles/resume.mobile.css25
-rw-r--r--src/styles/sitemap.css130
5 files changed, 915 insertions, 0 deletions
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..3856449
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,332 @@
+:root {
+ --bg: transparent;
+ --color: black;
+ --link-color: darkviolet;
+ --image-border: rgba(0, 0, 0, 0.3);
+ --image-border-hover: rgba(0, 0, 0, 0.7);
+ --image-overlay: rgba(0, 0, 0, 0.7);
+ --theme-btn-bg: white;
+ --theme-btn-border: gray;
+ --theme-btn-color: black;
+ --input-focus-border: lightgray;
+ --action-button-border: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --bg: rgba(13, 17, 23, 0.92);
+ --color: #e6edf3;
+ --link-color: #b083f0;
+ --image-border: rgba(255, 255, 255, 0.2);
+ --image-border-hover: rgba(255, 255, 255, 0.5);
+ --image-overlay: rgba(0, 0, 0, 0.85);
+ --theme-btn-bg: #21262d;
+ --theme-btn-border: #444c56;
+ --theme-btn-color: #e6edf3;
+ --input-focus-border: #586069;
+ --action-button-border: #30363d;
+ }
+}
+
+[data-theme="dark"] {
+ --bg: rgba(13, 17, 23, 0.92);
+ --color: #e6edf3;
+ --link-color: #b083f0;
+ --image-border: rgba(255, 255, 255, 0.2);
+ --image-border-hover: rgba(255, 255, 255, 0.5);
+ --image-overlay: rgba(0, 0, 0, 0.85);
+ --theme-btn-bg: #21262d;
+ --theme-btn-border: #444c56;
+ --theme-btn-color: #e6edf3;
+ --input-focus-border: #586069;
+ --action-button-border: #30363d;
+}
+
+body {
+ width: 50vw;
+ height: calc(100vh - 2rem);
+ font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 14px;
+ background-color: var(--bg);
+ color: var(--color);
+ padding: 0;
+ margin: auto;
+}
+
+header {
+ width: 100%;
+}
+
+header > h1 {
+ font-weight: bold;
+ font-size: 2rem;
+ padding-top: 1rem;
+ padding-bottom: 0.5rem;
+ margin: 0;
+}
+
+header > nav {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ padding-left: 0.25rem;
+}
+
+header > nav > ul {
+ display: flex;
+ flex-direction: row;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ gap: 1rem;
+}
+
+header > nav > ul > li {
+ display: flex;
+ align-items: center;
+}
+
+header > nav > ul a {
+ text-decoration: none;
+ color: var(--link-color);
+ font-size: 1rem;
+ border-bottom: 1px solid transparent;
+}
+
+header > nav > ul a:hover {
+ opacity: 0.8;
+ text-decoration: underline;
+}
+
+h1 {
+ font-size: 2.5rem;
+}
+
+h2 {
+ font-size: 1.5rem;
+ margin-bottom: 0rem;
+ margin-top: 2rem;
+}
+
+section {
+ width: 100%;
+}
+
+p {
+ text-align: left;
+}
+
+a {
+ color: var(--link-color);
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* Theme toggle button */
+#theme-toggle {
+ background: none;
+ border: 1px solid var(--theme-btn-border);
+ color: var(--link-color);
+ border-radius: 3px;
+ padding: 0.1rem 0.5rem;
+ cursor: pointer;
+ font-size: 0.85rem;
+ font-family: inherit;
+}
+
+#theme-toggle:hover {
+ opacity: 0.8;
+}
+
+/* Image styling */
+#image_container {
+ display: flex;
+ flex-direction: row;
+ transition: transform 100ms ease-in-out;
+ flex: 0 1 auto;
+ width: 100%;
+ overflow: auto;
+}
+
+#image_container .image_item {
+ width: 240px;
+ transition: opacity 100ms ease-in-out;
+ padding: 0;
+ margin: 0;
+ padding-right: 12px;
+ cursor: pointer;
+ position: relative;
+}
+
+#image_container .image_item:hover > img {
+ border: 2px solid var(--image-border-hover);
+}
+
+.image_item > figcaption {
+ font-size: 10px;
+ font-style: italic;
+}
+
+.image_item > img {
+ width: inherit;
+ border-radius: 3px;
+ border: 2px solid var(--image-border);
+}
+
+.image_item_expanded_container {
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ background-color: var(--image-overlay);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.image_item_expanded_container > .image_item {
+ width: 35vw;
+ opacity: 1.0 !important;
+}
+
+input {
+ outline: none;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ font-size: 1rem;
+ padding: 0.5rem;
+}
+
+input:focus {
+ border: 1px solid var(--input-focus-border);
+}
+
+.action_button {
+ border: 1px solid var(--action-button-border);
+ border-radius: 2px;
+ width: 108px;
+ height: 2rem;
+}
+
+.action_button:hover {
+ cursor: pointer;
+ opacity: 0.9;
+}
+
+/* Theme display */
+#theme_container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: transparent;
+ z-index: -1;
+}
+
+#theme_canvas {
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+}
+
+/* Theme Selector */
+#theme_section {
+ position: fixed;
+ bottom: 1rem;
+ left: 0;
+ width: 100%;
+ text-align: center;
+}
+
+#theme_selector {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ bottom: 1rem;
+ pointer-events: all;
+ opacity: 1;
+ transition: opacity 150ms linear;
+ gap: 2rem;
+}
+
+#theme_selector.hidden {
+ pointer-events: none;
+ opacity: 0;
+}
+
+#theme_selector > button {
+ width: 6rem;
+ height: 2rem;
+ border-radius: 3px;
+ border: 1px solid var(--theme-btn-border);
+ color: var(--theme-btn-color);
+ background-color: var(--theme-btn-bg);
+ cursor: pointer;
+ transition: opacity 100ms linear;
+}
+
+#theme_selector > button:hover {
+ opacity: 0.8;
+}
+
+#theme_selector > #theme_button_default {
+}
+
+#theme_selector > #theme_button_autumn {
+ background-color: orange;
+}
+
+#theme_selector > #theme_button_winter {
+ background-color: #79C0D7;
+}
+
+#theme_selector > #theme_button_spring {
+ background-color: #00FF7F;
+}
+
+#theme_selector > #theme_button_summer {
+ background-color: yellow;
+}
+
+.theme_button_text {
+ margin-left: 0.5rem;
+}
+
+/* Phone screen adjustments */
+@media only screen and (device-width: 1280px),
+only screen and (max-width:1280px) {
+ header > h1 {
+ font-size: 1.5rem;
+ }
+
+ body {
+ width: 80vw !important;
+ }
+}
+
+@media only screen and (device-width: 960px),
+only screen and (max-width:960px) {
+ #theme_selector {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .theme_button_text {
+ display: none;
+ }
+
+ #theme_selector > button {
+ width: 100%;
+ }
+
+ .image_item_expanded_container > .image_item {
+ width: 80vw;
+ }
+
+ #carousel > button {
+ font-size: 6rem;
+ top: calc(50% - 4rem);
+ }
+}
diff --git a/src/styles/post.css b/src/styles/post.css
new file mode 100644
index 0000000..33b8729
--- /dev/null
+++ b/src/styles/post.css
@@ -0,0 +1,129 @@
+:root {
+ --code-bg: #F5F0FF;
+ --code-border: #D5C8F0;
+ --code-inline-color: #D0372D;
+ --meta-color: #707183;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --code-bg: #1e1b2e;
+ --code-border: #3d3560;
+ --code-inline-color: #ff9090;
+ --meta-color: #8b929e;
+ }
+}
+
+[data-theme="dark"] {
+ --code-bg: #1e1b2e;
+ --code-border: #3d3560;
+ --code-inline-color: #ff9090;
+ --meta-color: #8b929e;
+}
+
+pre {
+ background-color: var(--code-bg);
+ border: 1px solid var(--code-border);
+ border-radius: 2px;
+ padding: 1rem;
+ overflow: auto;
+ font-size: 0.8rem;
+}
+
+code {
+ font-family: "Consolas" sans-serif;
+ color: var(--code-inline-color);
+}
+
+/* Shiki dual-theme support */
+.astro-code, .astro-code span {
+ color: var(--shiki-light) !important;
+ background-color: var(--shiki-light-bg) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) .astro-code,
+ :root:not([data-theme="light"]) .astro-code span {
+ color: var(--shiki-dark) !important;
+ background-color: var(--shiki-dark-bg) !important;
+ }
+}
+
+[data-theme="dark"] .astro-code,
+[data-theme="dark"] .astro-code span {
+ color: var(--shiki-dark) !important;
+ background-color: var(--shiki-dark-bg) !important;
+}
+
+.underline {
+ text-decoration: underline;
+}
+
+.org-article-title {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.org-article-title h1 {
+ margin: 0;
+ font-family: "Space Grotesk", sans-serif;
+}
+
+.org-article-content {
+ padding-bottom: 10vh;
+}
+
+.org-article-content h2,
+.org-article-content h3,
+.org-article-content h4 {
+ position: relative;
+ font-family: "Space Grotesk", sans-serif;
+}
+
+.org-article-content h2 {
+ font-size: 1.6rem;
+ border-bottom: 2px solid var(--link-color);
+ padding-bottom: 0.2rem;
+}
+
+.org-article-content h3 {
+ font-size: 1.2rem;
+ color: var(--link-color);
+}
+
+.org-article-content h2 > a.heading-anchor,
+.org-article-content h3 > a.heading-anchor,
+.org-article-content h4 > a.heading-anchor {
+ position: absolute;
+ left: -1.4em;
+ top: 0;
+ opacity: 0;
+ text-decoration: none;
+ font-weight: normal;
+ color: var(--link-color);
+ transition: opacity 100ms ease;
+}
+
+.org-article-content h2:hover > a.heading-anchor,
+.org-article-content h3:hover > a.heading-anchor,
+.org-article-content h4:hover > a.heading-anchor {
+ opacity: 1;
+}
+
+.figure p {
+ text-align: center;
+}
+
+.org-article-title > h1 {
+ margin-bottom: 0;
+}
+
+.org-article-title > span {
+ color: var(--meta-color);
+}
+
+#org-div-home-and-up {
+ display: flex;
+ column-gap: 8px;
+}
diff --git a/src/styles/resume.css b/src/styles/resume.css
new file mode 100644
index 0000000..3cbf769
--- /dev/null
+++ b/src/styles/resume.css
@@ -0,0 +1,299 @@
+@font-face {
+ font-family: Ubuntu;
+ src: url(/fonts/Ubuntu-M.ttf);
+ }
+
+:root {
+ --resume-bg: white;
+ --resume-color: black;
+ --resume-link-color: #343231;
+ --resume-section-bg: #583759;
+ --resume-section-color: white;
+ --skills-bar-bg: white;
+ --skills-table-border: gray;
+ --skills-table-inner-border: lightgray;
+ --skills-table-th-color: #2E4C6D;
+ --experience-hover-color: #583759;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --resume-bg: #161b22;
+ --resume-color: #e6edf3;
+ --resume-link-color: #8b949e;
+ --resume-section-bg: #3d2b5e;
+ --resume-section-color: #e6edf3;
+ --skills-bar-bg: #21262d;
+ --skills-table-border: #444c56;
+ --skills-table-inner-border: #30363d;
+ --skills-table-th-color: #79b8ff;
+ --experience-hover-color: #b083f0;
+ }
+}
+
+[data-theme="dark"] {
+ --resume-bg: #161b22;
+ --resume-color: #e6edf3;
+ --resume-link-color: #8b949e;
+ --resume-section-bg: #3d2b5e;
+ --resume-section-color: #e6edf3;
+ --skills-bar-bg: #21262d;
+ --skills-table-border: #444c56;
+ --skills-table-inner-border: #30363d;
+ --skills-table-th-color: #79b8ff;
+ --experience-hover-color: #b083f0;
+}
+
+html {
+ overflow-y: overlay;
+ font-size: 16px;
+}
+
+header {
+ padding-bottom: 1rem;
+}
+
+#actions_container {
+ padding-bottom: 1rem;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+#resume {
+ position: relative;
+ text-align: left;
+ background-color: var(--resume-bg);
+ color: var(--resume-color);
+ font-family: 'Ubuntu', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.325rem;
+}
+
+#resume_container {
+ display: flex;
+ flex-direction: row;
+}
+
+#resume a {
+ color: var(--resume-link-color);
+}
+
+#resume_sidebar {
+ width: 13rem;
+ margin-right: 1.5rem;
+}
+
+#resume_header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 2rem;
+}
+
+.resume_header_name {
+ font-size: 2rem;
+ line-height: 2rem;
+ font-variant: small-caps;
+ word-wrap: break-word;
+ padding: 0;
+ margin: 0;
+ margin-bottom: 1rem;
+}
+
+#resume_header_contact {
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: row;
+ flex-direction: column;
+}
+
+#resume_header_contact span {
+ margin-bottom: 0.5rem;
+ font-size: 1rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+#resume_header_contact i {
+ margin-right: 0.5rem;
+ font-style: normal;
+}
+
+.resume_section {
+ width: 100%;
+ text-align: left;
+ font-size: 1rem;
+}
+
+.resume_section > h2 {
+ font-size: 1.125rem;
+ font-variant: small-caps;
+ font-weight: bold;
+ padding: 0;
+ margin: 0;
+ padding: 0.25rem;
+ background-color: var(--resume-section-bg);
+ color: var(--resume-section-color);
+}
+
+.resume_section_content {
+ padding: 0.5rem;
+}
+
+.experience-header > div {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.experience-item:hover {
+ color: var(--experience-hover-color);
+}
+
+.experience-item ul {
+ margin-top: 0.5rem;
+}
+
+.experience-item li {
+ width: 100%;
+}
+
+.experience-tech {
+ font-size: 1rem;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ margin-top: 0.2rem;
+}
+
+.experience-tech > svg {
+ width: 1.125rem;
+ height: 1.125rem;
+ margin-right: 0.5rem;
+}
+
+.skills_table_container {
+ display: flex;
+ flex-direction: column;
+}
+
+.skills_table {
+ width: 100%;
+ border-spacing: 0;
+ border: 1px solid var(--skills-table-border);
+ border-radius: 2px;
+ margin-bottom: 2rem;
+}
+
+.skills_table th {
+ text-align: center;
+}
+
+.skills_table th, .skills_table tr:not(:last-child) td {
+ border-bottom: 1px solid var(--skills-table-inner-border);
+}
+
+.skills_table tr th {
+ color: var(--skills-table-th-color);
+}
+
+.skills_table td, th {
+ font-size: 0.9rem;
+ padding: 0.35rem 0.5rem;
+ width: 50%;
+}
+
+#skills_section {
+ display: flex;
+ flex-direction: column;
+}
+
+.skills_section_item {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 1.5rem;
+}
+
+.skills_section_bar {
+ position: relative;
+ width: 100%;
+ height: 1rem;
+ background-color: var(--skills-bar-bg);
+ border-radius: 3px;
+ border: 1px solid var(--skills-table-inner-border);
+}
+
+.skills_section_bar_fill {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-image: linear-gradient(to right,#007acc, #00E091);
+ border-radius: 3px;
+ background-size: 12rem 100%;
+}
+
+.skills_section_bar_fill.one {
+ width: 20%;
+}
+
+.skills_section_bar_fill.two {
+ width: 40%;
+}
+
+.skills_section_bar_fill.three {
+ width: 60%;
+}
+
+.skills_section_bar_fill.four {
+ width: 80%;
+}
+
+.skills_section_bar_fill.five {
+ width: 100%;
+}
+
+.skills_section_label {
+ width: 100%;
+ margin-top: 0.25rem;
+ color: var(--resume-color);
+ font-size: 1rem;
+}
+
+
+/** Web-only **/
+#resume_button_container {
+ width: 100%;
+ text-align: right;
+ margin-right: 1rem;
+ margin-bottom: 1rem;
+
+}
+
+#resume_button_container > button {
+ border: none;
+ background-color: transparent;
+ font-size: 20px;
+}
+
+#resume_button_container > button:hover {
+ cursor: pointer;
+ opacity: 0.8;
+}
+
+#resume.resume_fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ padding: 2rem;
+ width: calc(100vw - 4rem);
+ height: calc(100vh - 4rem);
+ overflow: auto;
+}
diff --git a/src/styles/resume.mobile.css b/src/styles/resume.mobile.css
new file mode 100644
index 0000000..016095b
--- /dev/null
+++ b/src/styles/resume.mobile.css
@@ -0,0 +1,25 @@
+@media (max-width: 767.98px) {
+ #resume {
+ font-size: 12px;
+ }
+
+ #resume_container {
+ flex-direction: column;
+ }
+
+ #resume_header {
+ flex-direction: row;
+ }
+
+ #resume_sidebar {
+ width: 100%;
+ }
+
+ .skills_table_container {
+ width: 100%;
+ justify-content: space-evenly;
+ display: flex;
+ flex-direction: row;
+ column-gap: 4px;
+ }
+}
diff --git a/src/styles/sitemap.css b/src/styles/sitemap.css
new file mode 100644
index 0000000..afe3f6a
--- /dev/null
+++ b/src/styles/sitemap.css
@@ -0,0 +1,130 @@
+.sitemap_tags {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ align-items: center;
+ margin-left: auto;
+}
+
+.sitemap_tag {
+ padding: 0.25rem 0.75rem;
+ background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+ color: #1976d2;
+ border-radius: 4px;
+ font-size: 0.7rem;
+ font-weight: 500;
+ border: 1px solid #90caf9;
+}
+
+.sitemap_tag p {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ font-size: 0.75rem;
+}
+
+.org-ul {
+ list-style: none;
+ padding: 0;
+}
+
+.org-ul > li {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.25rem;
+ position: relative;
+ margin-bottom: 0.25rem;
+}
+
+.org-ul > li > p {
+ margin: 0;
+ font-size: 0.5rem;
+}
+
+.org-ul > li > p > a {
+ color: #0066cc;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 1rem;
+}
+
+.org-ul > li > p > a:hover {
+ text-decoration: underline;
+ color: #004499;
+}
+
+.org-ul > li > p > a:after {
+ text-decoration: underline;
+ color: #004499;
+}
+
+.org-article-title {
+ width: 100%;
+ text-align: right;
+}
+
+#tag-filter-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+.tag-filter-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0.35rem;
+ border-radius: 2px;
+ justify-content: center;
+ font-style: italic;
+ background: linear-gradient(135deg, purple 0%, darkviolet 100%);
+ color: white;
+ font-size: 0.75rem;
+ letter-spacing: 0.3px;
+ transition: all 0.3s ease;
+}
+
+.tag-filter-item:hover {
+ background: linear-gradient(135deg, gray 0%, darkviolet 100%);
+ cursor: pointer;
+}
+
+.tag-filter-item.disabled {
+ background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
+ color: #666;
+ border-color: #999;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ opacity: 0.7;
+}
+
+.tag-filter-item.disabled:hover {
+ opacity: 1;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.post-date {
+ position: absolute;
+ bottom: 0.75rem;
+ right: 1rem;
+ font-size: 0.75rem;
+ color: #666;
+ font-style: italic;
+}
+
+.sitemap_date {
+ font-size: 0.8rem;
+ color: #666;
+ font-style: italic;
+}
+
+.sitemap_date p {
+ margin: 0;
+}
+
+.sitemap_date p::before {
+ content: 'created on ';
+}
generated by cgit v1.2.1 (git 2.18.0) at 2026-04-09 11:50:18 +0000