Merge pull request #26 from SVUIT/UI

UI

Gemfile

@@ -4,4 +4,4 @@ gem "jekyll", "~> 4.3.3" # installed by `gem jekyll`
 # gem "webrick"        # required when using Ruby >= 3 and Jekyll <= 4.2.2
 
 gem "just-the-docs", "0.7.0" # pinned to the current release
-# gem "just-the-docs"        # always download the latest release
+# gem "just-the-docs"        # always download the latest release

_config.yml

@@ -13,13 +13,13 @@ callouts:
     color: yellow
   important:
     title: Important
-    color: blue
+    color: pink
   new:
     title: New
     color: green
   note:
     title: Note
-    color: purple
+    color: darkblue
   warning:
     title: Warning
     color: red
@@ -31,3 +31,12 @@ mermaid:
   version: "9.1.6"
 
 favicon_ico: "/assets/images/favicon.ico"
+
+gh_edit_link: true
+gh_edit_link_text: "Edit this page on GitHub."
+gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo
+gh_edit_branch: "main" # the branch that your docs is served from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
+
+last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
+last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html

_includes/components/aux_nav.html

@@ -0,0 +1,17 @@
+<nav aria-label="Auxiliary" class="aux-nav">
+    <ul class="aux-nav-list">
+      {% for link in site.aux_links %}
+        <li class="aux-nav-list-item">
+          <a href="{{ link.last }}" class="site-button"
+            {% if site.aux_links_new_tab %}
+            target="_blank" rel="noopener noreferrer"
+            {% endif %}
+          >
+            {{ link.first }}
+          </a>
+        </li>
+      {% endfor %}
+
+      {% include components/switchTheme.html %}
+    </ul>
+  </nav>

_includes/components/switchTheme.html

@@ -0,0 +1,21 @@
+<div class="dm-container">
+    <input type="checkbox" class="checkbox js-toggle-dark-mode" id="checkbox">
+    <label for="checkbox" class="checkbox-label">
+        <i class="fa-solid fa-sun"></i>
+        <i class="fa-solid fa-moon"></i>
+      <span class="ball"></span>
+    </label>
+  </div>
+  <script>
+    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+    const cbLabel = document.querySelector('.checkbox-label');
+    jtd.addEvent(toggleDarkMode, 'click', function(){
+      if (jtd.getTheme() === 'dark') {
+        jtd.setTheme('light');
+        cbLabel.style.backgroundColor = '#44434d';
+      } else {
+        cbLabel.style.backgroundColor = '#000000';
+        jtd.setTheme('dark');
+      }
+    });
+    </script>

_includes/head_custom.html

@@ -0,0 +1 @@
+<script src="https://kit.fontawesome.com/cdf299865b.js" crossorigin="anonymous"></script>

_sass/custom/custom.scss

@@ -0,0 +1,59 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
+
+
+.dm-container {
+  font-family: "Montserrat", sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  margin: 0;
+  transition: background 0.2s linear;
+}
+
+.dm-container.dark {background-color: #292c35;} /* #9b59b6 */
+
+.dm-container.dark h1, .dm-container.dark .support a {color: #fff;}
+
+.dm-container .checkbox {
+  opacity: 0;
+  position: absolute;
+}
+
+.dm-container .checkbox-label {
+  background-color: #44434d;
+  width: 50px;
+  height: 26px;
+  border-radius: 50px;
+  position: relative;
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dm-container .fa-moon {color: #fff200;font-size: 15px;}
+
+.dm-container .fa-sun {color: #f39c12;font-size: 15px;}
+
+.dm-container .checkbox-label .ball {
+  background-color: #fff;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  transition: transform 0.2s linear;
+}
+
+.dm-container .checkbox:checked + .checkbox-label .ball {
+  transform: translateX(24px);
+}
+
+.aux-nav .aux-nav-list {
+    margin-right: 20px;
+    justify-content: space-between;
+}

_sass/custom/setup.scss

@@ -0,0 +1,8 @@
+$pink-000: #f77ef1;
+$pink-100: #f967f1;
+$pink-200: #e94ee1;
+$pink-300: #dd2cd4;
+$darkblue-000: #88a8ff;
+$darkblue-100: #608aff;
+$darkblue-200: #4577ff;
+$darkblue-300: #386dff;

docs/contribute.md

@@ -3,12 +3,10 @@ layout: default
 title: Đóng góp
 nav_exclude: true
 search_exclude: true
-
 ---
 
 # Đóng góp cho website
 
-
 ## Tài liệu học tập
 
 Nếu bạn muốn chia sẻ tài liệu học tập với chúng mình, bạn có thể:
@@ -31,4 +29,4 @@ Nếu có nội dung nào đó trên web chưa được đề cập về môn h
 - Lê Đình Trí, MMTT2021
 - Trần Mai Hân, MMTT2021
 
-Và những bạn đóng góp ẩn danh.
+Và những bạn đóng góp ẩn danh.

index.md

@@ -5,6 +5,7 @@ nav_order: 0
 ---
 
 # **Study Vault of UIT - MMTT Edition**
+
 {: .fs-9 }
 
 Kho tài liệu học tập UIT, phiên bản Mạng máy tính và Truyền thông.
@@ -15,11 +16,9 @@ Kho tài liệu học tập UIT, phiên bản Mạng máy tính và Truyền th
 
 ---
 
-
 > Hiện tại còn thiếu tài liệu ở các môn cơ sở nhóm ngành và đại cương, rất cần sự đóng góp của các bạn K17, K18 đã học qua ở các học kỳ gần đây. Ngoài ra, team chúng mình đang tuyển thêm thành viên thuộc các khóa này để hỗ trợ quản lý website và kho tài liệu. Mọi chi tiết vui lòng liên hệ qua email **studyvault.uit@gmail.com**.
 {: .note }
 
-
 ## Mục tiêu
 
 Mục tiêu chính của dự án là giúp các bạn sinh viên dễ dàng tìm kiếm các thông tin và tài liệu về môn học, đặc biệt là có thể tham khảo đồ án thực hiện bởi các sinh viên khóa trước. Chúng mình hướng tới việc sinh viên các khóa có thể truyền tải, chia sẻ kiến thức cho nhau thông qua nền tảng này.
@@ -30,6 +29,3 @@ Do nhân lực có hạn nên hiện tại chúng mình chỉ tập trung vào t
 
 - Website này là một dự án phi lợi nhuận được thực hiện bởi một nhóm sinh viên và không phải là website chính thức của UIT.
 - Các nội dung được đăng tải trên đây chỉ mang tính chất **tham khảo** và không hoàn toàn chính xác. Chúng mình luôn khuyến khích các bạn tự đánh giá và chọn lọc thông tin.
-
-
-