attempt

Author: Ceveloper

_sass/custom.scss

@@ -0,0 +1,226 @@
+/* Ensure greedy-nav distributes left and right */
+.greedy-nav {
+  display: flex;
+  justify-content: space-between; /* pushes left and right to edges */
+  align-items: center;
+  width: 100%;
+}
+
+/* Left side */
+.masthead__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Right side (force to right) */
+.masthead__right {
+  margin-left: auto; /* ensures it hugs the right edge */
+}
+
+.masthead__right .visible-links {
+  display: flex;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* --- put this at the very end of your custom scss so it overrides theme rules --- */
+
+/* container: tiny gap (change 0.05rem → 0 to make absolutely touching) */
+.masthead__menu .masthead__social {
+  display: flex !important;
+  align-items: center;
+  gap: 0.05rem !important;   /* tiny gap; set to 0 for touching */
+  margin: 0;
+  padding: 0;
+}
+
+/* remove any li spacing coming from the theme */
+.masthead__menu .masthead__social li {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* remove anchor padding and force inline-flex so icons align perfectly */
+.masthead__menu .masthead__social li a {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: 1;
+}
+
+/* remove spacing on the icon element itself (FontAwesome <i> or <svg>) */
+.masthead__menu .masthead__social li a i,
+.masthead__menu .masthead__social li a svg {
+  margin: 0 !important;
+  padding: 0 !important;
+  vertical-align: middle;
+}
+
+
+/* Make the about section text smaller */
+#about {
+  font-size: 0.7rem;   /* default is ~1rem, reduce a bit */
+  line-height: 1.5;    /* keep it readable */
+  color: #333;         /* optional: softer black */
+}
+
+.about-float-wrapper {
+  overflow: hidden; /* clearfix: allows text to wrap properly around floated image */
+}
+.about-photo-wrapper {
+  float: right;                /* keep on the right */
+  width: 270px;                /* desktop width */
+  height: 270px;               /* fixed height for cropping */
+  margin: 0 0 1rem 1rem;
+  overflow: hidden;            /* hide cropped parts */
+  border-radius: 50%; 
+}
+
+.about-photo {
+  display: block !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;  /* override theme */
+  max-height: none !important; /* override theme */
+  object-fit: cover;
+  object-position: center 20%; /* keep top visible */
+}
+
+@media (max-width: 600px) {
+  .about-photo-wrapper {
+    float: none;
+    width: 60%;
+    height: auto; 
+    margin: 0 auto 1rem auto;
+  }
+  .about-photo {
+    height: auto !important;
+    object-position: center top !important;
+  }
+}
+
+
+.welcome-name {
+  font-size: 2.5rem;           /* very large */
+  font-weight: 400;           /* bold */
+  text-align: left;         /* centered on page */
+  margin: 0rem 0 1.0rem 0;    /* spacing above/below */
+  line-height: 1.2;
+  padding-left: 15px;   /* optional: small padding from the page edge */
+
+}
+
+/* Scrollable container */
+/* Scrollable container */
+.news-scroll {
+  max-height: 300px;          /* adjust height */
+  overflow-y: auto;            /* vertical scroll */
+  padding-right: 10px;         /* avoid text under scrollbar */
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-top: 1rem;
+  scroll-behavior: smooth;
+}
+
+/* Remove bullets */
+.news-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Each news item as flex row */
+.news-list li {
+  display: flex;
+  align-items: flex-start;   /* top-align date with first line of text */
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #eee;
+}
+
+/* Date column */
+.news-date {
+  flex: 0 0 50px;           /* fixed width */
+  display: flex;
+  font-size: 0.7rem;       /* smaller, compact text */
+  flex-direction: column;    /* stack month/year */
+  justify-content: flex-start;
+  text-align: center;
+  margin-right: 1rem;
+  line-height: 1.2;
+   padding-left: 15px;
+}
+
+.news-month,
+.news-year {
+  display: block;
+  width: 100%;
+}
+
+/* News description */
+.news-text {
+  flex: 1;
+  font-size: 0.8rem;       /* smaller, compact text */
+  line-height: 1.4;
+}
+
+/* Optional: mobile stacking */
+@media (max-width: 600px) {
+  .news-list li {
+    flex-direction: column;
+    border-bottom: 1px solid #eee;
+  }
+  .news-date {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.publications-preview .publication-block {
+  display: grid;
+  grid-template-columns: 80px 1fr; /* thumbnail column + text column */
+  column-gap: 1rem;
+  align-items: start;             /* top-aligns image with first line of text */
+  padding: 0.5rem 0;
+}
+
+.publication-thumbnail img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.publication-data {
+  font-size: 0.85rem;
+  line-height: 1.3;
+}
+
+.publication-title a {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #111;
+  text-decoration: none;
+}
+
+.publication-title a:hover {
+  text-decoration: underline;
+}
+
+.publication-venue,
+.publication-authors {
+  font-size: 0.8rem;
+  color: #555;
+}
+
+/* Mobile stacking */
+@media (max-width: 600px) {
+  .publications-preview .publication-block {
+    grid-template-columns: 1fr; /* stack image above text */
+    row-gap: 0.5rem;
+  }
+}