summaryrefslogtreecommitdiff
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/index.css259
-rw-r--r--src/styles/post.css1
-rw-r--r--src/styles/resume.css176
-rw-r--r--src/styles/resume.mobile.css12
-rw-r--r--src/styles/sitemap.css68
5 files changed, 231 insertions, 285 deletions
diff --git a/src/styles/index.css b/src/styles/index.css
index 3856449..70c0f1b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,7 +1,7 @@
:root {
--bg: transparent;
--color: black;
- --link-color: darkviolet;
+ --link-color: #525dd7;
--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);
@@ -16,7 +16,7 @@
:root:not([data-theme="light"]) {
--bg: rgba(13, 17, 23, 0.92);
--color: #e6edf3;
- --link-color: #b083f0;
+ --link-color: #848DF0;
--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);
@@ -43,10 +43,10 @@
}
body {
- width: 50vw;
+ width: 60vw;
height: calc(100vh - 2rem);
font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- font-size: 14px;
+ font-size: 16px;
background-color: var(--bg);
color: var(--color);
padding: 0;
@@ -67,8 +67,8 @@ header > h1 {
header > nav {
margin-top: 1rem;
- margin-bottom: 1rem;
- padding-left: 0.25rem;
+ padding-bottom: 1rem;
+ border-bottom: 4px dotted var(--theme-btn-border);
}
header > nav > ul {
@@ -85,16 +85,13 @@ header > nav > ul > li {
align-items: center;
}
-header > nav > ul a {
- text-decoration: none;
- color: var(--link-color);
- font-size: 1rem;
- border-bottom: 1px solid transparent;
+nav .openmoji {
+ width: 1.5rem !important;
+ height: 1.5rem !important;
}
-header > nav > ul a:hover {
- opacity: 0.8;
- text-decoration: underline;
+header > nav > ul a {
+ font-size: 1rem;
}
h1 {
@@ -111,6 +108,53 @@ section {
width: 100%;
}
+/* Index page sidebar layout */
+.index-layout {
+ display: flex;
+ gap: 2rem;
+}
+
+.sidebar {
+ margin-top: 1rem;
+ min-width: 140px;
+ max-width: 220px;
+ position: sticky;
+ top: 1rem;
+ align-self: flex-start;
+}
+
+.sidebar h2 {
+ margin-top: 0.5rem;
+ font-size: 1rem;
+}
+
+.sidebar ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.sidebar ul li {
+ margin-bottom: 0.5rem;
+}
+
+.sidebar ul li a {
+ font-weight: 600;
+ display: block;
+}
+
+.sidebar ul li span {
+ display: block;
+ font-size: 0.8rem;
+ opacity: 0.7;
+ margin-top: 0.1rem;
+}
+
+.index-main {
+ flex: 1;
+ min-width: 0;
+}
+
p {
text-align: left;
}
@@ -126,12 +170,8 @@ a:hover {
/* 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-size: 1rem;
font-family: inherit;
}
@@ -232,67 +272,54 @@ input:focus {
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 {
+/* Season theme buttons (in nav) */
+#theme_button_default,
+#theme_button_autumn,
+#theme_button_winter,
+#theme_button_spring,
+#theme_button_summer {
+ background: none;
+ color: var(--theme-btn-color);
+ cursor: pointer;
+ font-size: 1rem;
+ font-family: inherit;
+ transition: opacity 100ms linear;
}
-#theme_selector > #theme_button_autumn {
- background-color: orange;
+#theme_button_default:hover,
+#theme_button_autumn:hover,
+#theme_button_winter:hover,
+#theme_button_spring:hover,
+#theme_button_summer:hover {
+ opacity: 0.8;
}
-#theme_selector > #theme_button_winter {
- background-color: #79C0D7;
-}
-#theme_selector > #theme_button_spring {
- background-color: #00FF7F;
+/* Hamburger menu - hidden on desktop */
+#hamburger {
+ display: none;
+ background: none;
+ border: none;
+ font-size: 1.75rem;
+ cursor: pointer;
+ color: var(--color);
+ padding: 1rem;
+ margin-left: auto;
}
-#theme_selector > #theme_button_summer {
- background-color: yellow;
+#nav-close {
+ display: none;
+ background: none;
+ border: none;
+ font-size: 1.75rem;
+ cursor: pointer;
+ color: var(--color);
+ align-self: flex-end;
+ padding: 1rem;
}
-.theme_button_text {
- margin-left: 0.5rem;
+#nav-overlay {
+ display: none;
}
/* Phone screen adjustments */
@@ -304,23 +331,21 @@ only screen and (max-width:1280px) {
body {
width: 80vw !important;
+ overflow-x: hidden;
}
-}
-@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;
+ .index-layout {
+ flex-direction: column;
+ gap: 0;
}
- #theme_selector > button {
- width: 100%;
+ .sidebar {
+ position: static;
}
+}
+@media only screen and (device-width: 960px),
+only screen and (max-width:960px) {
.image_item_expanded_container > .image_item {
width: 80vw;
}
@@ -329,4 +354,74 @@ only screen and (max-width:960px) {
font-size: 6rem;
top: calc(50% - 4rem);
}
+
+ #hamburger {
+ display: block;
+ position: fixed;
+ top: 0.5rem;
+ right: 5rem;
+ z-index: 1002;
+ padding: 0.5rem;
+ }
+
+ #nav-close {
+ display: block;
+ }
+
+ #nav-menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: var(--theme-btn-bg, white);
+ z-index: 1001;
+ padding: 0 10vw;
+ margin-top: 0;
+ display: flex;
+ flex-direction: column;
+ transform: translateX(100%);
+ transition: transform 0.25s ease;
+ box-sizing: border-box;
+ }
+
+ #nav-menu.open {
+ transform: translateX(0);
+ }
+
+ header:has(#nav-menu.open) #hamburger {
+ display: none;
+ }
+
+ #nav-menu > ul {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ #nav-menu > ul > li {
+ width: 100%;
+ }
+
+ #nav-menu > ul > li[style*="margin-left: auto"] {
+ margin-left: 0 !important;
+ margin-top: 1rem;
+ }
+
+ #nav-menu > ul > li[style*="margin-left: 1rem"] {
+ margin-left: 0 !important;
+ }
+
+ #nav-menu > ul button,
+ #nav-menu > ul a {
+ width: 100%;
+ text-align: center;
+ }
+
+ header > nav {
+ border-bottom: none;
+ }
+
+ #nav-overlay {
+ display: none;
+ }
}
diff --git a/src/styles/post.css b/src/styles/post.css
index 33b8729..a7e84c9 100644
--- a/src/styles/post.css
+++ b/src/styles/post.css
@@ -60,6 +60,7 @@ code {
}
.org-article-title {
+ margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
diff --git a/src/styles/resume.css b/src/styles/resume.css
index 3cbf769..97e504e 100644
--- a/src/styles/resume.css
+++ b/src/styles/resume.css
@@ -1,127 +1,19 @@
-@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;
+ color: var(--color);
line-height: 1.325rem;
-}
-
-#resume_container {
- display: flex;
- flex-direction: row;
+ margin-top: 1rem;;
+ padding-bottom: 4rem;
}
#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;
+ color: var(--link-color);
}
.resume_section {
@@ -131,18 +23,17 @@ header {
}
.resume_section > h2 {
- font-size: 1.125rem;
+ font-size: 1.25rem;
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);
+ margin: 0 0 0.5rem 0;
+ padding: 0 0 0.35rem 0;
+ border-bottom: 2px solid var(--link-color);
+ color: var(--color);
}
.resume_section_content {
- padding: 0.5rem;
+ padding: 0.5rem 0;
}
.experience-header > div {
@@ -151,10 +42,6 @@ header {
justify-content: space-between;
}
-.experience-item:hover {
- color: var(--experience-hover-color);
-}
-
.experience-item ul {
margin-top: 0.5rem;
}
@@ -186,7 +73,7 @@ header {
.skills_table {
width: 100%;
border-spacing: 0;
- border: 1px solid var(--skills-table-border);
+ border: 1px solid var(--theme-btn-border);
border-radius: 2px;
margin-bottom: 2rem;
}
@@ -196,11 +83,11 @@ header {
}
.skills_table th, .skills_table tr:not(:last-child) td {
- border-bottom: 1px solid var(--skills-table-inner-border);
+ border-bottom: 1px solid var(--action-button-border);
}
.skills_table tr th {
- color: var(--skills-table-th-color);
+ color: var(--link-color);
}
.skills_table td, th {
@@ -224,9 +111,9 @@ header {
position: relative;
width: 100%;
height: 1rem;
- background-color: var(--skills-bar-bg);
+ background-color: var(--theme-btn-bg);
border-radius: 3px;
- border: 1px solid var(--skills-table-inner-border);
+ border: 1px solid var(--action-button-border);
}
.skills_section_bar_fill {
@@ -263,37 +150,6 @@ header {
.skills_section_label {
width: 100%;
margin-top: 0.25rem;
- color: var(--resume-color);
+ color: var(--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
index 016095b..5e0caf9 100644
--- a/src/styles/resume.mobile.css
+++ b/src/styles/resume.mobile.css
@@ -3,18 +3,6 @@
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;
diff --git a/src/styles/sitemap.css b/src/styles/sitemap.css
index afe3f6a..316de00 100644
--- a/src/styles/sitemap.css
+++ b/src/styles/sitemap.css
@@ -7,13 +7,14 @@
}
.sitemap_tag {
- padding: 0.25rem 0.75rem;
- background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
- color: #1976d2;
- border-radius: 4px;
+ padding: 0.2rem;
+ background: transparent;
+ color: var(--color);
+ border-radius: 0;
font-size: 0.7rem;
- font-weight: 500;
- border: 1px solid #90caf9;
+ font-style: italic;
+ border: 1.5px solid var(--theme-btn-border);
+ opacity: 0.7;
}
.sitemap_tag p {
@@ -33,19 +34,21 @@
.org-ul > li {
display: flex;
flex-direction: row;
+ flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
position: relative;
- margin-bottom: 0.25rem;
+ margin-bottom: 1rem;
}
.org-ul > li > p {
margin: 0;
font-size: 0.5rem;
+ width: 100%;
}
.org-ul > li > p > a {
- color: #0066cc;
+ color: var(--link-color);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
@@ -53,12 +56,10 @@
.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 {
@@ -74,36 +75,30 @@
}
.tag-filter-item {
- display: flex;
- flex-direction: row;
+ display: inline-flex;
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;
+ padding: 0.2rem 0.6rem;
+ background: transparent;
+ color: var(--color);
font-size: 0.75rem;
- letter-spacing: 0.3px;
- transition: all 0.3s ease;
+ font-style: italic;
+ border: 1.5px solid var(--color);
+ cursor: pointer;
+ user-select: none;
+ transition: opacity 0.15s ease;
}
.tag-filter-item:hover {
- background: linear-gradient(135deg, gray 0%, darkviolet 100%);
- cursor: pointer;
+ opacity: 0.7;
}
.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;
+ opacity: 0.3;
+ text-decoration: line-through;
}
.tag-filter-item.disabled:hover {
- opacity: 1;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+ opacity: 0.5;
}
.post-date {
@@ -111,14 +106,21 @@
bottom: 0.75rem;
right: 1rem;
font-size: 0.75rem;
- color: #666;
+ color: var(--color);
+ opacity: 0.6;
font-style: italic;
}
+.org-ul > li > .sitemap_date,
+.org-ul > li > .sitemap_tag {
+ display: inline-flex;
+}
+
.sitemap_date {
font-size: 0.8rem;
- color: #666;
+ color: var(--color);
font-style: italic;
+ opacity: 0.6;
}
.sitemap_date p {
@@ -128,3 +130,7 @@
.sitemap_date p::before {
content: 'created on ';
}
+
+.org-ul > li > .sitemap_date + .sitemap_tag {
+ margin-left: 0.75rem;
+}
generated by cgit v1.2.1 (git 2.18.0) at 2026-05-01 16:46:57 +0000