gall

NuttidaLab · May 25, 2024 · 8f18040 · 8f18040
1 parent c6189c0
commit 8f18040
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 14 deletions.
diff --git a/_includes/gallery.html b/_includes/gallery.html
@@ -0,0 +1,78 @@
+<div class="gallery">
+
+    {% for post in site.posts %}
+        {% if post.tags contains "Gallery" %}
+
+            {% if post.header.overlay_image %}
+
+                <div class="gallery_img_container">
+                    <a href="{{ post.url }}">
+                        <img class = "gallery_img" data-cursor-text="{{ post.title }}" src="{{ post.header.overlay_image }}" alt="{{ post.title }}">
+                    </a>
+                </div>
+
+                <!-- <img class = "gallery_img" data-cursor-text="{{ post.title }}" src="{{ post.header.overlay_image }}" alt="{{ post.title }}"> -->
+
+            {% endif %}
+
+        {% endif %}
+    {% endfor %}
+
+</div>
+
+<script> 
+    Promise.all(
+    Array.from(document.images)
+    .filter(img => !img.complete)
+    .map(img => new Promise(resolve => { img.onload = img.onerror = resolve; })))
+    .then(() => { 
+        var elem = document.querySelector('.gallery'); 
+        var msnry = new Masonry( elem, { 
+            columnWidth: 300,
+            itemSelector: '.gallery_img_container',
+            gutter: 10, 
+        }); 
+    }); 
+</script>
+
+<script>
+    const cursor = new MouseFollower({
+        el: null,
+        container: "#main",
+        className: 'mf-cursor',
+        innerClassName: 'mf-cursor-inner',
+        textClassName: 'mf-cursor-text',
+        mediaClassName: 'mf-cursor-media',
+        mediaBoxClassName: 'mf-cursor-media-box',
+        iconSvgClassName: 'mf-svgsprite',
+        iconSvgNamePrefix: '-',
+        iconSvgSrc: '',
+        dataAttr: 'cursor',
+        hiddenState: '-hidden',
+        textState: '-text',
+        iconState: '-icon',
+        activeState: '-active',
+        mediaState: '-media',
+        stateDetection: {
+            '-pointer': 'a,button',
+            '-hidden': 'iframe'
+        },
+        visible: true,
+        visibleOnState: false,
+        speed: 0.8,
+        ease: 'expo.out',
+        overwrite: true,
+        skewing: 0,
+        skewingText: 2,
+        skewingIcon: 2,
+        skewingMedia: 2,
+        skewingDelta: 0.001,
+        skewingDeltaMax: 0.15,
+        stickDelta: 0.15,
+        showTimeout: 20,
+        hideOnLeave: true,
+        hideTimeout: 300,
+        hideMediaTimeout: 300
+    });
+</script>
+
diff --git a/_includes/head/custom.html b/_includes/head/custom.html
@@ -2,18 +2,31 @@
 
 <!-- insert favicons. use https://realfavicongenerator.net/ -->
 
-<link rel="apple-touch-icon" sizes="180x180" href=" {{ assets/favicon/apple-touch-icon.png | relative_url }}">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ assets/favicon/favicon-32x32.png | relative_url }}">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ assets/favicon/favicon-16x16.png | relative_url }}">
-<link rel="manifest" href="{{ assets/favicon/site.webmanifest | relative_url }}">
-<link rel="mask-icon" href="{{ assets/favicon/safari-pinned-tab.svg | relative_url }}" color="#5bbad5">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/favicon/favicon-16x16.png">
+<link rel="manifest" href="{{ site.baseurl }}/assets/favicon/site.webmanifest">
+<link rel="mask-icon" href="{{ site.baseurl }}/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="theme-color" content="#ffffff">
 
 
 <!-- Nuttida Lab additions -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-<link rel="stylesheet" href="{{ '/assets/css/team.css' | relative_url }}">
 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+<link rel="stylesheet" href="{{ '/assets/css/mouse-follower.css' | relative_url }}">
+
+<!-- <link rel="stylesheet" href="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.css"> -->
+<link rel="stylesheet" href="{{ '/assets/css/team.css' | relative_url }}/mouse-follower.min.css">
+
+
+
+<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+<script src="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.js"></script>
+
+<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 
 <!-- end custom head snippets -->
diff --git a/_includes/team_stack.html b/_includes/team_stack.html
@@ -15,7 +15,7 @@ <h1>{{ section.section }}</h1>
                     <div class="row our-team">
 
                         <div class = col-lg-3 style="padding-left: 0px;">
-                            <div style="height: 100%; width: 100%; border-radius: 5px; overflow: hidden; display: flex; display: flex; justify-content: center; align-items: center;">
+                            <div class="lab_avatar" style="height: 100%; width: 100%; border-radius: 5px; overflow: hidden; display: flex; display: flex; justify-content: center; align-items: center;">
                                 <img src="{{ person.avatar | relative_url}}" alt="team-image">
                             </div>
                         </div>

diff --git a/_layouts/team.html b/_layouts/team.html
@@ -24,7 +24,7 @@ <h1 style="font-size: 2rem;"> Nuttida Rungratsameetaweemana, PhD</h1>
             </div>
         </div>
         <div class="col-lg-4" style="padding: 0px;">
-            <div style="height: 100%; width: 100%; border-radius: 5px; overflow: hidden;">
+            <div class="lab_avatar" style="height: 100%; width: 100%; border-radius: 5px; overflow: hidden;">
                 <img style="height: 100%; object-fit: cover;" src="/assets/images/nuttida.jpg" />
             </div>
         </div>
@@ -42,7 +42,6 @@ <h1 style="font-size: 2rem;"> Nuttida Rungratsameetaweemana, PhD</h1>
 {% endif %}
 
 
-<hr>
 <div class="section-title text-center">
     <h1>Summer@SEAS</h1>
 </div>

diff --git a/_pages/about.md b/_pages/about.md
@@ -8,6 +8,7 @@ toc_label: "About Us"
 toc_icon: "question-circle"
 toc_sticky: true
 ---
+<br>
 
 ## Who are we?
 
@@ -24,7 +25,10 @@ We are always looking for talented and motivated individuals to join our team. I
 ## Contact Us
 
 Lab contact information
+<br>
 Lab address
+<br>
 Directions
+<br>
 Timing and availability
 etc
diff --git a/_pages/gallery.md b/_pages/gallery.md
@@ -1,9 +1,10 @@
 ---
 title: Gallery
-layout: collection
+layout: single
 permalink: /gallery/
-collection: portfolio
-entries_layout: grid
+classes: wide
 ---
 
-*Coming Soon*
+<hr>
+
+{% include gallery.html %}
diff --git a/assets/css/mouse-follower.css b/assets/css/mouse-follower.css
diff --git a/assets/css/team.css b/assets/css/team.css
@@ -145,11 +145,36 @@ margin-top:60px;
 
 /* Modifications */
 
+a::-moz-focus-inner {
+    border: 0;
+}  
+
+a:focus {
+    outline: none;
+}
 
 
 .page__content img {
     border-radius: 5px;
 }
 
+.page__content img:hover {
+    /* box shadow */
+    box-shadow: 0 0 15px rgb(0, 0, 0);
+    transition: 0.3s;
+}
 
+.page__content a:not(.btn):hover img { 
+    box-shadow: 0 0 15px rgb(0, 0, 0);
+    transition: 0.3s;
+}
+
+
+.taxonomy__section .archive__item-title{
+    font-size: 1.2rem;
+}
 
+.gallery_img_container { 
+    width: 30%;
+    margin-bottom: 20px;
+}