summaryrefslogtreecommitdiff
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/index.css272
-rw-r--r--src/styles/post.css48
-rw-r--r--src/styles/resume.css258
-rw-r--r--src/styles/resume.mobile.css25
-rw-r--r--src/styles/sitemap.css130
5 files changed, 733 insertions, 0 deletions
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..b5b923d
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,272 @@
+body {
+ width: 50vw;
+ height: calc(100vh - 2rem);
+ font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 14px;
+ background-color: transparent;
+ color: black;
+ 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: darkviolet;
+ 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: darkviolet;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* 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 rgba(0, 0, 0, 0.7);
+}
+
+.image_item > figcaption {
+ font-size: 10px;
+ font-style: italic;
+}
+
+.image_item > img {
+ width: inherit;
+ border-radius: 3px;
+ border: 2px solid rgba(0, 0, 0, 0.3);
+}
+
+.image_item_expanded_container {
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.7);
+ 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 lightgray;
+}
+
+.action_button {
+ border: 1px solid #f0f0f0;
+ 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 gray;
+ color: black;
+ background-color: white;
+ 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..324c7ff
--- /dev/null
+++ b/src/styles/post.css
@@ -0,0 +1,48 @@
+pre {
+ background-color: #FEFEFE;
+ border: 1px solid #D5D5D5;
+ border-radius: 2px;
+ padding: 1rem;
+ overflow: auto;
+}
+
+code {
+ font-family: "Consolas" sans-serif;
+ color: #D0372D;
+}
+
+.underline {
+ text-decoration: underline;
+}
+
+.org-article-title {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.org-article-title h1 {
+ margin: 0;
+ font-family: "Dancing Script", cursive;
+}
+
+#content {
+ padding-bottom: 10vh;
+}
+
+.figure p {
+ text-align: center;
+}
+
+.org-article-title > h1 {
+ margin-bottom: 0;
+}
+
+.org-article-title > span {
+ color: #707183;
+}
+
+#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..a36fc0d
--- /dev/null
+++ b/src/styles/resume.css
@@ -0,0 +1,258 @@
+@font-face {
+ font-family: Ubuntu;
+ src: url(/fonts/Ubuntu-M.ttf);
+ }
+
+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: white;
+ color: black;
+ font-family: 'Ubuntu', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.325rem;
+}
+
+#resume_container {
+ display: flex;
+ flex-direction: row;
+}
+
+#resume a {
+ color: #343231;
+}
+
+#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: #583759;
+ color: white;
+}
+
+.resume_section_content {
+ padding: 0.5rem;
+}
+
+.experience-header > div {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.experience-item:hover {
+ color: #583759;
+}
+
+.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 gray;
+ 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 lightgray;
+}
+
+.skills_table tr th {
+ color: #2E4C6D;
+}
+
+.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: white;
+ border-radius: 3px;
+ border: 1px solid lightgray;
+}
+
+.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: black;
+ 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-03-12 23:03:35 +0000