HC - modify: Header, CSS, JS

css/styles.css → css/theme-styles.css

@@ -264,7 +264,7 @@ section#second-nav-section .second-nav-active {
   margin: 10px 0px 10px 30px;
   max-width: 60%;
   height: 60px;
-  background-color: #ColorThree;
+  /* background-color: #ColorThree; */
 }
 
 .white-bg {
@@ -1573,4 +1573,66 @@ button:focus {
 #research-pointers {
   border-bottom: none !important;
   margin-bottom: -30px !important;
-}/*# sourceMappingURL=style-cse.css.map */
+}/*# sourceMappingURL=style-cse.css.map */
+
+
+
+
+
+  /* The Overlay (background) */
+  .overlay {
+    /* Height & width depends on how you want to reveal the overlay (see JS below) */
+    height: 0%;
+    width: 100%;
+    position: fixed; /* Stay in place */
+    z-index: 1100; /* Sit on top */
+    left: 0;
+    top: 0;
+    background-color: rgb(0,0,0); /* Black fallback color */
+    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
+    overflow-x: hidden; /* Disable horizontal scroll */
+    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
+  }
+
+  /* Position the content inside the overlay */
+  .overlay-content {
+
+    position: relative;
+    height: 100%;
+    top: 25%; /* 25% from the top */
+    width: 100%; /* 100% width */
+
+    text-align: center; /* Centered text/links */
+    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
+  }
+
+  /* The navigation links inside the overlay */
+  .overlay a {
+    padding: 8px;
+    text-decoration: none;
+    font-size: 18px;
+    color: white;
+    display: block; /* Display block instead of inline */
+    transition: 0.3s; /* Transition effects on hover (color) */
+  }
+  .overlay h1 {
+    color: white;
+    font-size: 20px;
+    font-weight: lighter;
+    margin-bottom: 10px;
+    text-decoration: underline;
+  }
+
+  /* When you mouse over the navigation links, change their color */
+  .overlay a:hover, .overlay a:focus {
+    color: #f1f1f1;
+
+  }
+
+  /* Position the close button (top right corner) */
+  .overlay .closebtn {
+    position: absolute;
+    top: 20px;
+    right: 45px;
+    font-size: 60px;
+  }

functions.php

@@ -146,7 +146,7 @@ function uiu_cse_scripts()
 	wp_enqueue_style('uiu-cse-style', get_stylesheet_uri(), array(), _S_VERSION);
 	wp_style_add_data('uiu-cse-style', 'rtl', 'replace');
 
-	wp_enqueue_style('uiu-cse-pickr-nano', 'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css');
+	wp_enqueue_style('uiu-cse-pickr', 'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css');
 
 	wp_enqueue_style('uiu-cse-google-fonts-material-icon', 'https://fonts.googleapis.com/icon?family=Material+Icons');
 
@@ -154,6 +154,10 @@ function uiu_cse_scripts()
 
 	wp_enqueue_style('uiu-cse-google-fonts-material+symbols+sharpt', 'https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0');
 
+	wp_enqueue_script('uiu-cse-pickr-js', 'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js', array(), '');
+
+	wp_enqueue_script('uiu-cse-settings-js', get_template_directory_uri() . '/js/theme-settings.js', array(), _S_VERSION, true);
+
 	wp_enqueue_script('uiu-cse-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true);
 
 	if (is_singular() && comments_open() && get_option('thread_comments')) {

js/theme-settings.js

@@ -0,0 +1,194 @@
+// const sidebar = document.querySelector('#sidebar')
+
+window.onscroll = function () {
+  let navbar = document.querySelector("nav#first-nav");
+  let secondNav = document.querySelector("nav#second-nav");
+  if (window.scrollY > 300) {
+    if (secondNav) secondNav.classList.add("second-nav-active");
+    navbar.classList.add("nav-resp");
+  } else {
+    if (secondNav) secondNav.classList.remove("second-nav-active");
+    navbar.classList.remove("nav-resp");
+  }
+};
+
+// const buttons = document.querySelectorAll("[data-carousel-button]")
+
+document.querySelectorAll("[data-carousel-button]").forEach((button) => {
+  button.addEventListener("click", () => {
+    const offset = button.dataset.carouselButton === "next" ? 1 : -1;
+    const slides = button
+      .closest("[data-carousel]")
+      .querySelector("[data-slides]");
+
+    const activeSlide = slides.querySelector("[data-active]");
+    let newIndex = [...slides.children].indexOf(activeSlide) + offset;
+    if (newIndex < 0) newIndex = slides.children.length - 1;
+    if (newIndex >= slides.children.length) newIndex = 0;
+
+    slides.children[newIndex].dataset.active = true;
+    delete activeSlide.dataset.active;
+  });
+});
+
+setInterval(function () {
+  if (document.querySelector(".carousel-button.next"))
+    document.querySelector(".carousel-button.next").click();
+}, 5000);
+
+function openSearch() {
+  document.getElementById("search-modal").style.height = "100%";
+  console.log("search opened");
+}
+
+/* Close when someone clicks on the "x" symbol inside the overlay */
+function closeSearch() {
+  document.getElementById("search-modal").style.height = "0%";
+}
+
+let totalDivs = document.querySelectorAll(
+  "#faculty-carousel > .profile-carousel > .car-item"
+).length;
+let screenWidth = Math.max(
+  document.documentElement.clientWidth || 0,
+  window.innerWidth || 0
+);
+let totalWidth = totalDivs * 340;
+let extraWidth = screenWidth - totalWidth;
+let scrolled = 0;
+
+function scrollToNext() {
+  scrolled -= 345;
+  let moveX = "";
+  if (scrolled <= extraWidth - 400) {
+    scrolled = 0;
+  }
+
+  moveX = scrolled.toString() + "px";
+  //console.log(moveX, (-1*extraWidth), screenWidth, totalWidth, totalDivs)
+  document.querySelectorAll(
+    "#faculty-carousel > .profile-carousel"
+  )[0].style.left = moveX;
+}
+
+function scrollToPrev() {
+  scrolled = scrolled + 345;
+  let moveX = "";
+  if (scrolled > 340) {
+    scrolled = extraWidth - 50;
+  }
+
+  moveX = scrolled.toString() + "px";
+  //console.log(scrolled, moveX, (extraWidth), screenWidth, totalWidth, totalDivs)
+  document.querySelectorAll(
+    "#faculty-carousel > .profile-carousel"
+  )[0].style.left = moveX;
+}
+
+let totalDivsAl = document.querySelectorAll(
+  "#alumni-carousel > .profile-carousel > .car-item"
+).length;
+let screenWidthAl = Math.max(
+  document.documentElement.clientWidth || 0,
+  window.innerWidth || 0
+);
+let totalWidthAl = totalDivsAl * 340;
+let extraWidthAl = screenWidthAl - totalWidthAl;
+let scrolledAl = 0;
+
+function scrollToNextAl() {
+  scrolledAl -= 340;
+  let moveXAl = "";
+  if (scrolledAl <= extraWidthAl - 400) {
+    scrolledAl = 0;
+  }
+
+  moveXAl = scrolledAl.toString() + "px";
+
+  document.querySelectorAll(
+    "#alumni-carousel > .profile-carousel"
+  )[0].style.left = moveXAl;
+}
+
+function scrollToPrevAl() {
+  scrolledAl = scrolledAl + 340;
+  let moveXAl = "";
+  if (scrolledAl > 340) {
+    scrolledAl = extraWidthAl - 50;
+  }
+
+  moveXAl = scrolledAl.toString() + "px";
+  document.querySelectorAll(
+    "#alumni-carousel > .profile-carousel"
+  )[0].style.left = moveXAl;
+}
+
+//for NAV
+
+function openNav() {
+  document.getElementById("myNav").style.height = "100%";
+}
+
+/* Close when someone clicks on the "x" symbol inside the overlay */
+function closeNav() {
+  document.getElementById("myNav").style.height = "0%";
+}
+
+// Simple example, see optional options for more configuration.
+const pickr = Pickr.create({
+  el: ".color-picker",
+  theme: "nano",
+
+  swatches: [
+    "rgba(244, 67, 54, 1)",
+    "rgba(233, 30, 99, 0.95)",
+    "rgba(156, 39, 176, 0.9)",
+    "rgba(103, 58, 183, 0.85)",
+    "rgba(63, 81, 181, 0.8)",
+    "rgba(33, 150, 243, 0.75)",
+    "rgba(3, 169, 244, 0.7)",
+    "rgba(0, 188, 212, 0.7)",
+    "rgba(0, 150, 136, 0.75)",
+    "rgba(76, 175, 80, 0.8)",
+    "rgba(139, 195, 74, 0.85)",
+    "rgba(205, 220, 57, 0.9)",
+    "rgba(255, 235, 59, 0.95)",
+    "rgba(255, 193, 7, 1)",
+  ],
+
+  components: {
+    // Main components
+    preview: true,
+    opacity: true,
+    hue: true,
+
+    // Input / output Options
+    interaction: {
+      hex: true,
+      rgba: false,
+      hsla: false,
+      hsva: false,
+      cmyk: false,
+      input: true,
+      clear: true,
+      save: true,
+    },
+  },
+});
+
+pickr.on("change", (...args) => {
+  let color = args[0].toHEXA();
+  console.log(color.toString());
+
+  const buttons = document.getElementsByClassName("primary-c");
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].style.backgroundColor = color.toString();
+    buttons[i].addEventListener("mouseenter", (e) => {
+      buttons[i].style.backgroundColor = "#F68B1F";
+    });
+
+    buttons[i].addEventListener("mouseleave", (e) => {
+      buttons[i].style.backgroundColor = color.toString();
+    });
+  }
+});

style.css

@@ -22,4 +22,4 @@ Normalizing styles have been helped along thanks to the fine work of
 Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 */
 @import "css/pico.min.css";
-@import "css/styles.css";
+@import "css/theme-styles.css";