7 files changed, 288 insertions, 0 deletions
diff --git a/css/partials/footer.css b/css/partials/footer.css
new file mode 100644
index 00000000..7903aa5c
--- /dev/null
+++ b/css/partials/footer.css
@@ -0,0 +1,8 @@
+.footer {
+  margin-top: $margin-primary;
+  border: $line-secondary $color-text-primary solid;
+}
+.footer .footer-text {
+  margin-top: $margin-l-1;
+  margin-bottom: $margin-primary;
+}
diff --git a/css/partials/header.css b/css/partials/header.css
new file mode 100644
index 00000000..f9b7ba40
--- /dev/null
+++ b/css/partials/header.css
@@ -0,0 +1,72 @@
+.header {
+  border: $line-secondary solid $color-text-primary;
+}
+.header-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-top: $margin-l-0;
+  margin-bottom: $margin-m-0;
+}
+.header-inner #menu-btn {
+  display: none;
+}
+.header-inner .site-nav {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+.menu-list {
+  text-align: right;
+  display: flex;
+}
+.menu-list .menu-item {
+  position: relative;
+  margin-left: $margin-l-0;
+}
+.menu-list:before {
+  content: "";
+  flex-grow: 1;
+}
+.menu-item-active:after {
+  border-bottom: solid $line-secondary;
+  width: 100%;
+}
+.logo-img {
+  max-height: $line-height-heading-h1;
+  width: auto;
+  max-width: 100%;
+  display: flex;
+}
+@media (max-width: 688px) {
+  .header-inner {
+    flex-wrap: wrap;
+  }
+  .header-inner #menu-btn {
+    display: block !important;
+    text-align: right;
+    width: 50%;
+  }
+  .header-inner #menu-btn .icon {
+    float: right;
+  }
+  .header-inner .site-brand-container {
+    width: 50%;
+  }
+  .header-inner .site-nav {
+    width: 100%;
+  }
+  .header-inner .site-nav .menu-list {
+    height: 0;
+    overflow: hidden;
+  }
+  .header-inner .site-nav .menu-list .menu-item {
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: $margin-m-0;
+  }
+  .header-inner .site-nav .active {
+    margin-top: $margin-m-1;
+    height: auto;
+    flex-direction: column;
+  }
+}
diff --git a/css/partials/paginator.css b/css/partials/paginator.css
new file mode 100644
index 00000000..bf9bb2a6
--- /dev/null
+++ b/css/partials/paginator.css
@@ -0,0 +1,22 @@
+.paginator {
+  margin-top: $margin-primary;
+}
+.pagination {
+  margin-top: $margin-m-1;
+  display: flex;
+}
+.pagination:before {
+  content: "";
+  flex-grow: 1;
+}
+.page-number {
+  position: relative;
+  margin-left: $margin-l-0;
+}
+.pagination .current:after {
+  border-bottom: solid $line-secondary;
+  width: 100%;
+}
+.pagination .space {
+  margin-left: $margin-l-0;
+}
diff --git a/css/partials/post_gallery.css b/css/partials/post_gallery.css
new file mode 100644
index 00000000..663b46fe
--- /dev/null
+++ b/css/partials/post_gallery.css
@@ -0,0 +1,35 @@
+.post-gallery-list .h-line-secondary {
+  margin-top: $margin-m-1;
+}
+.post-gallery-list .h-line-secondary:last-child {
+  display: none;
+}
+.post-gallery-item {
+  display: flex;
+  margin-top: $margin-primary;
+  margin-bottom: $margin-m-1;
+}
+.post-gallery-item .post-info {
+  margin-right: $margin-l-0;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+.post-gallery-item .post-info .post-title {
+  margin-bottom: $margin-m-1;
+}
+.post-gallery-item .post-img {
+  width: 50%;
+}
+@media (max-width: 480px) {
+  .post-gallery-item {
+    flex-wrap: wrap;
+  }
+  .post-gallery-item .post-info {
+    width: 100%;
+  }
+  .post-gallery-item .post-img {
+    width: 100%;
+    margin-top: $margin-m-1;
+  }
+}
diff --git a/css/partials/post_list.css b/css/partials/post_list.css
new file mode 100644
index 00000000..b4771102
--- /dev/null
+++ b/css/partials/post_list.css
@@ -0,0 +1,34 @@
+.year-title {
+  margin-top: $margin-primary;
+  margin-bottom: $margin-m-1;
+}
+.post-list-item {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: $margin-m-1;
+  align-items: top;
+}
+.post-list-item .post-title {
+  flex-grow: 1;
+  font-variation-settings: 'wght' $font-weight-medium;
+}
+.post-list-item .post-date {
+  margin-left: $margin-l-0;
+  min-width: 8rem;
+  text-align: right;
+  line-height: $line-height-body;
+  color: $color-text-secondary;
+}
+@media (max-width: 480px) {
+  .post-list-item {
+    flex-wrap: wrap;
+  }
+  .post-list-item .post-title {
+    width: 100%;
+  }
+  .post-list-item .post-date {
+    margin-left: 0;
+    width: 100%;
+    text-align: left;
+  }
+}
diff --git a/css/partials/profile.css b/css/partials/profile.css
new file mode 100644
index 00000000..310500f0
--- /dev/null
+++ b/css/partials/profile.css
@@ -0,0 +1,36 @@
+.profile {
+  margin-top: $margin-primary;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.profile .profile-content {
+  width: 50%;
+  margin: 0 $margin-l-0 0 0;
+}
+.profile .profile-content .profile-title {
+  margin-top: 0;
+  margin-bottom: $margin-m-0;
+}
+.profile .profile-content .profile-body {
+  margin-top: 0;
+  margin-bottom: $margin-l-1;
+}
+.profile .profile-content .profile-link {
+  margin-top: 0;
+  margin-bottom: $margin-m-1;
+}
+.profile .profile-image {
+  width: 50%;
+}
+@media (max-width: 480px) {
+  .profile {
+    flex-wrap: wrap;
+  }
+  .profile .profile-content {
+    width: 100%;
+    margin-top: $margin-m-1;
+  }
+  .profile .profile-image {
+    width: 100%;
+  }
+}
diff --git a/css/partials/search.css b/css/partials/search.css
new file mode 100644
index 00000000..506f0cc4
--- /dev/null
+++ b/css/partials/search.css
@@ -0,0 +1,81 @@
+.search-popup {
+  visibility: hidden;
+}
+.search-activate {
+  visibility: visible;
+}
+.search-popup-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: $color-overlay;
+}
+.search-popup-window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: $color-background;
+  transform: translate(-50%, -50%);
+  width: 640px;
+  height: 60%;
+  border: $line-secondary solid $color-text-primary;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.search-result-container {
+  flex-grow: 1;
+  overflow: scroll;
+  padding: $margin-m-1 $margin-m-1;
+}
+.search-result-container .search-result-message {
+  color: $color-text-secondary;
+}
+.search-result-container .search-result-title {
+  color: $color-text-primary;
+}
+.search-result-container li {
+  padding-bottom: $margin-m-1;
+  padding-top: $margin-m-2;
+}
+.search-result-container .search-result {
+  color: $color-text-primary;
+  margin-top: $margin-m-0;
+  margin-bottom: $margin-m-0;
+}
+.search-result-container mark {
+  color: $color-text-primary;
+  background-color: $color-search-marker;
+}
+.search-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $margin-m-1 $margin-m-1;
+  border-bottom: $line-secondary solid $color-text-primary;
+}
+.search-header .search-input-container {
+  flex-grow: 1;
+}
+.search-header .search-input-container .search-input {
+  width: 100%;
+  color: $color-text-primary;
+  background-color: $color-background;
+}
+.search-header .search-input-container .search-input::placeholder {
+  color: $color-text-secondary;
+}
+.search-header .search-close-btn {
+  flex-grow: 0;
+  margin-left: $margin-m-1;
+  margin: auto;
+  cursor: pointer;
+}
+@media (max-width: 688px) {
+  .search-popup-window {
+    width: 100%;
+    height: 100%;
+  }
+}