-[UniGAD: Unifying Multi-level Graph Anomaly Detection](https://neurips.cc/virtual/2024/poster/93390#:~:text=To%20address%20this,%20we%20present%20UniGAD,%20the%20first%20unified%20framework).
+[UniGAD: Unifying Multi-level Graph Anomaly Detection](https://neurips.cc/virtual/2024/poster/93390#:~:text=To%20address%20this,%20we%20present%20UniGAD,%20the%20first%20unified%20framework)
Yiqing Lin, Jianheng Tang, ***Chenyi Zi***, H. Vicky Zhao, Yuan Yao, Jia Li*
@@ -51,7 +51,7 @@ Yiqing Lin, Jianheng Tang, ***Chenyi Zi***, H. Vicky Zhao, Yuan Yao, Jia Li*
ICLR 2024
-[ Generative Adversarial Policy Network for Modelling Protein Complexes](https://openreview.net/forum?id=4MsfQ2H0lP&referrer=%5Bthe%20profile%20of%20Tao%20Feng%5D(%2Fprofile%3Fid%3D)).
+[Generative Adversarial Policy Network for Modelling Protein Complexes](https://openreview.net/forum?id=4MsfQ2H0lP&referrer=%5Bthe%20profile%20of%20Tao%20Feng%5D(%2Fprofile%3Fid%3D))
Tao Feng^, Ziqi Gao^, Jiaxuan You, ***Chenyi Zi***, Yan Zhou, Chen Zhang, Jia Li*
@@ -65,22 +65,18 @@ Tao Feng^, Ziqi Gao^, Jiaxuan You, ***Chenyi Zi***, Yan Zhou, Chen Zhang, Jia Li
Haihong Zhao, ***Chenyi Zi***, Yang Liu, Chen Zhang, Yan Zhou, Jia Li*
-
-
-# 🎖 Honors and Awards
-- *2023.02* **National Scholarship**.
-- *2023.01* Yue+ scholarship by 37 [Interactive Entertainment](https://www.37entertainment.net/)
-- *2022.04* The Finalist Prize in the 2022 ICM/MCM
-- *2022.02* The first prize in the Chinese Mathematics Competition
-- *2022.01* The third place in Huawei Cloud gaussDB Database competition
-- *2018.10* First Prize in National Olympiad in Mathematics in Provinces, HuNan, China.
-
-# 📖 Educations
-- *2023.09 - 2024 (now)*, Mphil in HKUST(GZ)
-- *2023.07 - 2023.09*, RA in HKUST(GZ)
-- *2019.09 - 2023.07*, South China University of Technology – Computer Science (Full English Teaching), Bachelor
-
-
+# Honors and Awards
+- *2023.02* **National Scholarship**
+- *2023.01* Yue+ Scholarship by 37 [Interactive Entertainment](https://www.37entertainment.net/)
+- *2022.04* Finalist Prize in the 2022 ICM/MCM
+- *2022.02* First Prize in the Chinese Mathematics Competition
+- *2022.01* Third Place in Huawei Cloud GaussDB Database Competition
+- *2018.10* First Prize in National Olympiad in Mathematics in Provinces, Hunan, China
+
+# Educations
+- *2023.09 – Present* MPhil, HKUST(GZ)
+- *2023.07 – 2023.09* Research Assistant, HKUST(GZ)
+- *2019.09 – 2023.07* B.Eng. in Computer Science, South China University of Technology
diff --git a/_sass/_forms.scss b/_sass/_forms.scss
index a1f0f146480..20427408d43 100644
--- a/_sass/_forms.scss
+++ b/_sass/_forms.scss
@@ -80,8 +80,8 @@ select {
padding: 0.25em;
margin-bottom: 0.5em;
color: $text-color;
- background-color: #fff;
- border: 1px solid mix(#fff, #000, 80%);
+ background-color: #161616;
+ border: 1px solid #333;
border-radius: $border-radius;
box-shadow: $box-shadow;
diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
index 90397f2c53b..567692a0da8 100644
--- a/_sass/_masthead.scss
+++ b/_sass/_masthead.scss
@@ -5,7 +5,7 @@
.masthead {
position: sticky;
top: 0;
- background-color: white;
+ background-color: #0a0a0a;
border-bottom: 1px solid $border-color;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
index d96735b8465..324cab4d13b 100644
--- a/_sass/_navigation.scss
+++ b/_sass/_navigation.scss
@@ -257,8 +257,8 @@
padding: 5px;
border: 1px solid $border-color;
border-radius: $border-radius;
- background: #fff;
- box-shadow: 0 0 10px rgba(#000, 0.25);
+ background: #1a1a1a;
+ box-shadow: 0 0 20px rgba(#000, 0.5);
a {
margin: 0;
@@ -266,8 +266,8 @@
font-size: $type-size-5;
&:hover {
- color: $masthead-link-color-hover;
- background: mix(#fff, $primary-color, 75%);
+ color: #fff;
+ background: #252525;
}
}
@@ -279,7 +279,7 @@
width: 0;
border-style: solid;
border-width: 0 10px 10px;
- border-color: $border-color transparent;
+ border-color: #333 transparent;
display: block;
z-index: 0;
}
@@ -292,7 +292,7 @@
width: 0;
border-style: solid;
border-width: 0 10px 10px;
- border-color: #fff transparent;
+ border-color: #1a1a1a transparent;
display: block;
z-index: 1;
}
@@ -374,7 +374,7 @@
color: $gray;
text-transform: uppercase;
letter-spacing: 1px;
- background-color: #fff;
+ background-color: #161616;
border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index 2b635af6232..f1f8c3aef3c 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -184,9 +184,9 @@
list-style-type: none;
border: 1px solid $border-color;
border-radius: $border-radius;
- background: #fff;
+ background: #1a1a1a;
z-index: -1;
- box-shadow: 0 0 10px rgba(#000, 0.25);
+ box-shadow: 0 0 10px rgba(#000, 0.5);
cursor: default;
@include breakpoint($large) {
@@ -225,7 +225,7 @@
width: 0;
border-style: solid;
border-width: 0 10px 10px;
- border-color: #fff transparent;
+ border-color: #1a1a1a transparent;
z-index: 1;
@include breakpoint($large) {
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index c7ffff96e05..6be948319ad 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -1,24 +1,21 @@
/* ==========================================================================
- Variables
+ Variables - Dark Modern Theme
========================================================================== */
/*
Typography
========================================================================== */
-$doc-font-size : 14;
+$doc-font-size : 16;
/* paragraph indention */
-$paragraph-indent : false; // true, false (default)
+$paragraph-indent : false;
$indent-var : 0.5em;
/* system typefaces */
$serif : Georgia, Times, serif;
-$sans-serif : "Trebuchet MS", Helvetica, sans-serif;
-// $sans-serif : Georgia, serif, sans-serif;
-
-// $sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
-$monospace : Monaco, Consolas, "Lucida Console", monospace;
+$sans-serif : "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+$monospace : "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
/* sans serif typefaces */
$sans-serif-narrow : $sans-serif;
@@ -33,42 +30,41 @@ $garamond : Garamond, serif;
$global-font-family : $sans-serif;
$header-font-family : $sans-serif;
-$caption-font-family : $serif;
+$caption-font-family : $sans-serif;
/* type scale */
-$type-size-1 : 2.441em; // ~39.056px
-$type-size-2 : 1.953em; // ~31.248px
-$type-size-3 : 1.4em; // ~25.008px
-$type-size-4 : 1.2em; // ~20px
-$type-size-5 : 1em; // ~16px
-$type-size-6 : 1em; // ~12px
-$type-size-7 : 0.6875em; // ~11px
-$type-size-8 : 0.625em; // ~10px
+$type-size-1 : 2.8em;
+$type-size-2 : 2em;
+$type-size-3 : 1.5em;
+$type-size-4 : 1.25em;
+$type-size-5 : 1em;
+$type-size-6 : 0.9em;
+$type-size-7 : 0.75em;
+$type-size-8 : 0.625em;
/*
- Colors
+ Colors - Dark Theme
========================================================================== */
-$gray : #7a8288;
-$dark-gray : mix(#000, $gray, 40%);
-$darker-gray : mix(#000, $gray, 60%);
-$light-gray : mix(#fff, $gray, 50%);
-$lighter-gray : mix(#fff, $gray, 90%);
-
-$body-color : #fff;
-$background-color : #fff;
-$code-background-color : #fafafa;
-$code-background-color-dark : $light-gray;
-$text-color : $dark-gray;
-$border-color : $lighter-gray;
-
-$primary-color : #7a8288;
-$success-color : #62c462;
-$warning-color : #f89406;
-$danger-color : #ee5f5b;
-$info-color : #224b8d;
-// $info-color : #52adc8;
+$gray : #888;
+$dark-gray : #aaa;
+$darker-gray : #ccc;
+$light-gray : #333;
+$lighter-gray : #1a1a1a;
+
+$body-color : #e0e0e0;
+$background-color : #0a0a0a;
+$code-background-color : #161616;
+$code-background-color-dark : #1a1a1a;
+$text-color : #e0e0e0;
+$border-color : #222;
+
+$primary-color : #888;
+$success-color : #4ade80;
+$warning-color : #fbbf24;
+$danger-color : #f87171;
+$info-color : #93c5fd;
/* brands */
$behance-color : #1769FF;
@@ -76,7 +72,7 @@ $dribbble-color : #ea4c89;
$facebook-color : #3b5998;
$flickr-color : #ff0084;
$foursquare-color : #0072b1;
-$github-color : #171516;
+$github-color : #e0e0e0;
$google-plus-color : #dd4b39;
$instagram-color : #517fa4;
$lastfm-color : #d51007;
@@ -94,11 +90,11 @@ $xing-color : #006567;
/* links */
-$link-color : $info-color;
-$link-color-hover : mix(#000, $link-color, 25%);
-$link-color-visited : mix(#fff, $link-color, 25%);
-$masthead-link-color : $primary-color;
-$masthead-link-color-hover : mix(#000, $primary-color, 25%);
+$link-color : #93c5fd;
+$link-color-hover : #bfdbfe;
+$link-color-visited : #a5b4fc;
+$masthead-link-color : #999;
+$masthead-link-color-hover : #fff;
/*
@@ -106,13 +102,6 @@ $masthead-link-color-hover : mix(#000, $primary-color, 25%);
========================================================================== */
@include breakpoint-set("to ems", true);
-/*
-$small : 400px;
-$medium : 500px;
-$medium-wide : 550px;
-$large : 1200px;
-$x-large : 1800px;
-*/
$small : 600px !default;
$medium : 768px !default;
@@ -137,12 +126,6 @@ $susy: (
gutter-position: after,
container: $large,
global-box-sizing: border-box,
- // debug: (
- // image: show,
- // color: blue,
- // output: overlay,
- // toggle: top right,
- // ),
);
@@ -150,8 +133,8 @@ $susy: (
Other
========================================================================== */
-$border-radius : 4px;
-$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
+$border-radius : 8px;
+$box-shadow : 0 1px 3px rgba(0, 0, 0, 0.3);
$navicon-width : 28px;
$navicon-height : 4px;
-$global-transition : all 0.2s ease-in-out;
+$global-transition : all 0.3s ease;
diff --git a/assets/css/main.scss b/assets/css/main.scss
index b48c010bb4a..bc787288510 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -2,13 +2,8 @@
---
/*
- * Minimal Mistakes Jekyll Theme
- *
- * - Michael Rose
- * - mademistakes.com
- * - https://twitter.com/mmistakes
- *
-*/
+ * Dark Modern Theme - Inspired by Thinking Machines Lab
+ */
@import "vendor/breakpoint/breakpoint"; // media query mixins
@import "variables";
@@ -40,70 +35,501 @@
@import "vendor/magnific-popup/magnific-popup";
@import "print";
+/* ==========================================================================
+ DARK MODERN THEME OVERRIDES
+ ========================================================================== */
+
+/* Global Dark Background */
+html {
+ background-color: #0a0a0a;
+}
+
+body {
+ background-color: #0a0a0a;
+ color: #e0e0e0;
+ font-weight: 400;
+ letter-spacing: -0.01em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Selection */
+::selection {
+ background: rgba(147, 197, 253, 0.3);
+ color: #fff;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+ color: #fff;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+}
+
+/* Links */
+a {
+ color: #93c5fd;
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: #bfdbfe;
+ }
+}
+
+/* Horizontal Rule */
+hr {
+ border-top-color: #222;
+}
+
+/* Code */
+p > code,
+a > code,
+li > code,
+figcaption > code,
+td > code {
+ background: #161616;
+ border-color: #333;
+ color: #e0e0e0;
+}
+
+/* Blockquote */
+blockquote {
+ border-left-color: #333;
+ color: #999;
+}
+
+/* ============================================================
+ MASTHEAD / NAVIGATION - Clean Minimal Dark Nav
+ ============================================================ */
+
+.masthead {
+ background-color: rgba(10, 10, 10, 0.85);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ padding: 0;
+
+ &__inner-wrap {
+ padding: 0.75em 1.5em;
+
+ a {
+ color: #999;
+ font-weight: 400;
+ font-size: 0.9em;
+ letter-spacing: 0;
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+}
+
+.masthead__menu-item {
+ &--lg {
+ a {
+ color: #fff !important;
+ font-weight: 600;
+ }
+ }
+}
+
+.greedy-nav {
+ background: transparent;
+
+ .visible-links {
+ a {
+ color: #888;
+
+ &:hover {
+ color: #fff;
+ }
+
+ &:before {
+ background: transparent;
+ }
+ }
+ }
+
+ button {
+ background: transparent;
+ color: #fff;
+
+ &:before,
+ &:after {
+ color: #fff;
+ }
+ }
+}
+
+.hidden-links {
+ background: #1a1a1a !important;
+ border-color: #333 !important;
+
+ a {
+ color: #ccc !important;
+
+ &:hover {
+ color: #fff !important;
+ }
+ }
+
+ &:before {
+ border-color: #333 transparent !important;
+ }
+ &:after {
+ border-color: #1a1a1a transparent !important;
+ }
+}
+
+/* Navicon (mobile menu) */
+.navicon {
+ background: #fff;
+
+ &:before,
+ &:after {
+ background: #fff;
+ }
+}
+
+/* ============================================================
+ SIDEBAR / AUTHOR PROFILE - Modern Dark Card
+ ============================================================ */
+
+.sidebar {
+ background: transparent;
+
+ p, li {
+ color: #bbb;
+ }
+}
+
+.profile_box {
+ background: transparent;
+}
+
+.author__avatar {
+ img {
+ border-radius: 50%;
+ border: 2px solid #333 !important;
+ padding: 3px !important;
+ transition: border-color 0.3s ease;
+
+ &:hover {
+ border-color: #555 !important;
+ }
+ }
+}
+
+.author__content {
+ .author__name {
+ color: #fff;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+ }
+
+ .author__bio {
+ color: #888;
+ font-weight: 400;
+ }
+}
+
+.author__urls-wrapper {
+ .author__urls {
+ background: #1a1a1a;
+ border-color: #333;
+
+ @include breakpoint($large) {
+ background: transparent;
+ border: 0;
+ }
+
+ &:after {
+ border-color: #1a1a1a transparent;
+ }
+
+ li {
+ color: #bbb;
+ }
+
+ a {
+ color: #bbb;
+ text-decoration: none !important;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+}
+
+.author__urls_sm {
+ a {
+ color: #888;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+}
+
+/* ============================================================
+ PAGE CONTENT
+ ============================================================ */
+
+#main {
+ margin-top: 0.5em;
+}
+
+.page__content {
+ h1 {
+ color: #fff;
+ border-bottom: 1px solid #222;
+ padding-bottom: 0.5em;
+ margin-top: 2em;
+ font-size: 1.5em;
+ font-weight: 600;
+ }
+
+ a {
+ text-decoration: none;
+ color: #93c5fd;
+ border-bottom: 1px solid transparent;
+ transition: border-color 0.3s ease, color 0.3s ease;
+
+ &:hover {
+ color: #bfdbfe;
+ border-bottom-color: #bfdbfe;
+ text-decoration: none;
+ }
+ }
+
+ p, li, dl {
+ color: #ccc;
+ line-height: 1.8;
+ }
+
+ ul li {
+ margin-bottom: 0.75em;
+ }
+
+ /* Italic dates in news */
+ em {
+ color: #888;
+ font-style: normal;
+ font-weight: 500;
+ }
+
+ strong {
+ color: #fff;
+ font-weight: 600;
+ }
+}
+
+/* ============================================================
+ PAPER BOX - Modern Dark Cards
+ ============================================================ */
+
.paper-box {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ border-bottom: 1px solid #1a1a1a;
+ padding: 2.5em 0;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.02);
+ }
+
+ .paper-box-image {
+ justify-content: center;
display: flex;
- justify-content: left;
- align-items: center;
- flex-direction: row;
- flex-wrap: wrap;
- border-bottom: 1px #efefef solid;
- padding: 2em 0 2em 0;
-
-
- .paper-box-image{
- justify-content: center;
- display: flex;
- width: 100%;
- order: 2;
- img {
- max-width: 400px;
- box-shadow: 3px 3px 6px #888;
- object-fit: cover;
- }
- }
-
- .paper-box-text{
- max-width: 100%;
- order: 1;
- }
-
- @include breakpoint($medium) {
- .paper-box-image{
- justify-content: left;
- min-width: 200px;
- max-width: 40%;
- order: 1;
- }
-
- .paper-box-text{
- justify-content: left;
- padding-left: 2em;
- max-width: 60%;
- order: 2;
- }
-
- }
-
-
-}
-
-$scroll_offset : 2em;
-h1:before, .anchor:before {
- content: '';
- display: block;
- position: relative;
- width: 0;
- height: $scroll_offset;
- margin-top: -$scroll_offset;
+ width: 100%;
+ order: 2;
+
+ img {
+ max-width: 400px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+ border-radius: 8px;
+ object-fit: cover;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+ }
+ }
+ }
+
+ .paper-box-text {
+ max-width: 100%;
+ order: 1;
+
+ a {
+ color: #93c5fd;
+ font-weight: 500;
+ }
+
+ p {
+ color: #aaa;
+ }
+ }
+
+ @include breakpoint($medium) {
+ .paper-box-image {
+ justify-content: flex-start;
+ min-width: 200px;
+ max-width: 40%;
+ order: 1;
+ }
+
+ .paper-box-text {
+ justify-content: flex-start;
+ padding-left: 2em;
+ max-width: 60%;
+ order: 2;
+ }
+ }
}
+/* Badge on paper images */
.badge {
- padding-left: 1rem;
- padding-right: 1rem;
- position: absolute;
- margin-top: .5em;
- margin-left: -.5em;
- color: white;
- background-color: #00369f;
- font-size: .8em;
-}
\ No newline at end of file
+ padding: 0.35rem 0.75rem;
+ position: absolute;
+ margin-top: 0.5em;
+ margin-left: -0.5em;
+ color: #fff;
+ background: linear-gradient(135deg, #1e40af, #3b82f6);
+ font-size: 0.75em;
+ font-weight: 500;
+ border-radius: 4px;
+ letter-spacing: 0.02em;
+}
+
+/* Scroll offset for anchor links */
+$scroll_offset: 2em;
+h1:before, .anchor:before {
+ content: '';
+ display: block;
+ position: relative;
+ width: 0;
+ height: $scroll_offset;
+ margin-top: -$scroll_offset;
+}
+
+/* ============================================================
+ ANIMATIONS - Fade In
+ ============================================================ */
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.page {
+ animation: fadeInUp 0.6s ease both;
+ animation-delay: 0.2s;
+}
+
+/* ============================================================
+ FIGCAPTION
+ ============================================================ */
+
+figcaption {
+ color: #888;
+
+ a {
+ color: #888;
+ border-bottom-color: #444;
+
+ &:hover {
+ color: #fff;
+ border-bottom-color: #fff;
+ }
+ }
+}
+
+/* ============================================================
+ TABLE
+ ============================================================ */
+
+table {
+ border-color: #222;
+ color: #ccc;
+
+ th {
+ background: #161616;
+ color: #fff;
+ border-color: #333;
+ }
+
+ td {
+ border-color: #222;
+ }
+
+ tr:nth-child(even) {
+ background: #111;
+ }
+}
+
+/* ============================================================
+ RESPONSIVE TWEAKS
+ ============================================================ */
+
+@media (max-width: 600px) {
+ .masthead__inner-wrap {
+ padding: 0.5em 1em;
+ }
+
+ .page__content h1 {
+ font-size: 1.3em;
+ }
+}
+
+/* ============================================================
+ SCROLL BAR - Dark themed
+ ============================================================ */
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: #0a0a0a;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #333;
+ border-radius: 3px;
+
+ &:hover {
+ background: #555;
+ }
+}
+
+/* ============================================================
+ COLLAPSE CSS OVERRIDE
+ ============================================================ */
+
+details {
+ background: #161616;
+ border: 1px solid #222;
+ border-radius: 8px;
+ padding: 1em;
+
+ summary {
+ color: #fff;
+ cursor: pointer;
+ }
+}