academic page

This commit is contained in:
Daniel Alves Rösel
2025-11-03 13:28:10 +00:00
parent f4da5289bd
commit 6e8eb582e6
25 changed files with 4344 additions and 0 deletions

View File

@@ -0,0 +1 @@
@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.slider{position:relative;width:100%}.slider-container{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);min-height:100%}.slider-container.is-vertical{flex-direction:column}.slider-container .slider-item{flex:none}.slider-container .slider-item .image.is-covered img{-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;height:100%;width:100%}.slider-container .slider-item .video-container{height:0;padding-bottom:0;padding-top:56.25%;margin:0;position:relative}.slider-container .slider-item .video-container.is-1by1,.slider-container .slider-item .video-container.is-square{padding-top:100%}.slider-container .slider-item .video-container.is-4by3{padding-top:75%}.slider-container .slider-item .video-container.is-21by9{padding-top:42.857143%}.slider-container .slider-item .video-container embed,.slider-container .slider-item .video-container iframe,.slider-container .slider-item .video-container object{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.slider-navigation-next,.slider-navigation-previous{display:flex;justify-content:center;align-items:center;position:absolute;width:42px;height:42px;background:#fff center center no-repeat;background-size:20px 20px;border:1px solid #fff;border-radius:25091983px;box-shadow:0 2px 5px #3232321a;top:50%;margin-top:-20px;left:0;cursor:pointer;transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s}.slider-navigation-next:hover,.slider-navigation-previous:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.slider-navigation-next.is-hidden,.slider-navigation-previous.is-hidden{display:none;opacity:0}.slider-navigation-next svg,.slider-navigation-previous svg{width:25%}.slider-navigation-next{left:auto;right:0;background:#fff center center no-repeat;background-size:20px 20px}.slider-pagination{display:none;justify-content:center;align-items:center;position:absolute;bottom:0;left:0;right:0;padding:.5rem 1rem;text-align:center}.slider-pagination .slider-page{background:#fff;width:10px;height:10px;border-radius:25091983px;display:inline-block;margin:0 3px;box-shadow:0 2px 5px #3232321a;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;cursor:pointer}.slider-pagination .slider-page.is-active,.slider-pagination .slider-page:hover{-webkit-transform:scale(1.4);transform:scale(1.4)}@media screen and (min-width:800px){.slider-pagination{display:flex}}.hero.has-carousel{position:relative}.hero.has-carousel+.hero-body,.hero.has-carousel+.hero-footer,.hero.has-carousel+.hero-head{z-index:10;overflow:hidden}.hero.has-carousel .hero-carousel{position:absolute;top:0;left:0;bottom:0;right:0;height:auto;border:none;margin:auto;padding:0;z-index:0}.hero.has-carousel .hero-carousel .slider{width:100%;max-width:100%;overflow:hidden;height:100%!important;max-height:100%;z-index:0}.hero.has-carousel .hero-carousel .slider .has-background{max-height:100%}.hero.has-carousel .hero-carousel .slider .has-background .is-background{-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;height:100%;width:100%}.hero.has-carousel .hero-body{margin:0 3rem;z-index:10}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,753 @@
/* Modern CSS Variables for consistent theming */
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--secondary-color: #64748b;
--accent-color: #0ea5e9;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-light: #94a3b8;
--background-primary: #ffffff;
--background-secondary: #f8fafc;
--background-accent: #f1f5f9;
--border-color: #e2e8f0;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-subtle: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
--border-radius: 12px;
--border-radius-lg: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Smooth scrolling for better UX */
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary);
line-height: 1.6;
font-size: 16px;
background-color: var(--background-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Modern Button Styles */
.button {
border-radius: var(--border-radius) !important;
font-weight: 600 !important;
transition: var(--transition) !important;
border: 2px solid transparent !important;
position: relative;
overflow: hidden;
}
.button.is-dark {
background: var(--text-primary) !important;
border: none !important;
color: white !important;
box-shadow: var(--shadow-md);
}
.button.is-dark:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: var(--primary-color) !important;
}
.button.is-dark:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
.footer .icon-link {
font-size: 25px;
color: var(--text-secondary);
transition: var(--transition);
}
.footer .icon-link:hover {
color: var(--primary-color);
transform: translateY(-2px);
}
.link-block a {
margin: 8px 4px;
}
.dnerf {
font-variant: small-caps;
}
/* Hero Section Modernization */
.hero {
position: relative;
overflow: hidden;
}
.hero.is-light {
background: var(--background-secondary);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.hero-body {
padding: 4rem 1.5rem;
}
.teaser .hero-body {
padding-top: 2rem;
padding-bottom: 4rem;
}
.teaser {
font-family: 'Inter', sans-serif;
}
/* Publication Content Styling */
.publication-title {
font-family: 'Inter', sans-serif !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
margin-bottom: 2rem !important;
line-height: 1.1 !important;
}
.publication-banner {
max-height: 70vh;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
margin: 2rem 0;
}
.publication-banner video {
position: relative;
left: auto;
top: auto;
transform: none;
object-fit: cover;
width: 100%;
height: 100%;
border-radius: var(--border-radius-lg);
}
.publication-header .hero-body {
padding: 6rem 1.5rem 4rem;
}
.publication-authors {
font-family: 'Inter', sans-serif !important;
font-weight: 500;
margin-bottom: 1.5rem;
}
.publication-venue {
color: var(--text-secondary);
width: fit-content;
font-weight: 600;
background: var(--background-accent);
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
margin-top: 1rem;
display: inline-block;
}
.publication-awards {
color: #ef4444;
width: fit-content;
font-weight: 700;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
border-left: 4px solid #ef4444;
margin-top: 1rem;
}
.publication-authors a {
color: var(--primary-color) !important;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
position: relative;
}
.publication-authors a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background: var(--gradient-accent);
transition: var(--transition);
}
.publication-authors a:hover::after {
width: 100%;
}
.publication-authors a:hover {
color: var(--primary-hover) !important;
}
.author-block {
display: inline-block;
margin-right: 0.5rem;
}
.publication-banner img {
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.publication-banner img:hover {
transform: scale(1.02);
box-shadow: var(--shadow-xl);
}
/* Modern Video and Carousel Styling */
.publication-video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
border-radius: var(--border-radius-lg) !important;
box-shadow: var(--shadow-xl);
transition: var(--transition);
}
.publication-video:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.publication-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--border-radius-lg);
}
.publication-body img {
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.publication-body img:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.results-carousel {
overflow: hidden;
padding: 1rem 0;
}
.results-carousel .item {
margin: 1rem;
overflow: hidden;
padding: 1.5rem;
font-size: 0;
background: var(--background-primary);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
border: 1px solid var(--border-color);
}
.results-carousel .item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.results-carousel .item img,
.results-carousel video {
margin: 0;
border-radius: var(--border-radius);
width: 100%;
height: auto;
}
.results-carousel .subtitle {
font-size: 1rem !important;
color: var(--text-secondary);
margin-top: 1rem;
font-weight: 500;
}
/* Pagination and Misc Improvements */
.slider-pagination .slider-page {
background: var(--primary-color);
border-radius: 50%;
transition: var(--transition);
}
.slider-pagination .slider-page.is-active {
background: var(--primary-hover);
transform: scale(1.2);
}
.eql-cntrb {
font-size: 0.875rem;
color: var(--text-light);
font-style: italic;
}
/* Section Titles */
.title.is-3 {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
color: var(--text-primary);
margin-bottom: 2rem !important;
position: relative;
padding-bottom: 1rem;
}
.title.is-3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--gradient-accent);
border-radius: 2px;
}
/* Content Improvements */
.content.has-text-justified {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-secondary);
}
.content.has-text-justified p {
margin-bottom: 1.5rem;
}
/* Footer Improvements */
.footer {
background: var(--background-secondary);
border-top: 1px solid var(--border-color);
padding: 3rem 1.5rem;
}
.footer .content {
color: var(--text-secondary);
line-height: 1.7;
}
.footer a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.footer a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
/* BibTeX Styling */
pre {
background: var(--background-accent) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--border-radius) !important;
padding: 1.5rem !important;
font-size: 0.9rem !important;
overflow-x: auto;
box-shadow: var(--shadow-sm);
}
code {
background: var(--background-accent) !important;
color: var(--text-primary) !important;
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace !important;
}
/* BibTeX Section Improvements */
.bibtex-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.copy-bibtex-btn {
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.copy-bibtex-btn:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.copy-bibtex-btn.copied {
background: #10b981;
}
.copy-bibtex-btn.copied .copy-text::after {
content: "ied!";
}
/* Scroll to Top Button */
.scroll-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: var(--shadow-lg);
}
.scroll-to-top:hover {
background: var(--primary-hover);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
}
/* More Works Dropdown */
.more-works-container {
position: fixed;
top: 2rem;
right: 2rem;
z-index: 1000;
}
.more-works-btn {
background: var(--background-primary);
color: var(--text-primary);
border: 2px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 0.75rem 1.25rem;
font-weight: 600;
font-size: 0.9rem;
box-shadow: var(--shadow-md);
transition: var(--transition);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'Inter', sans-serif;
}
.more-works-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: var(--background-secondary);
border-color: var(--primary-color);
}
.more-works-btn .dropdown-arrow {
transition: var(--transition);
font-size: 0.8rem;
}
.more-works-btn.active .dropdown-arrow {
transform: rotate(180deg);
}
.more-works-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
width: 400px;
max-width: 90vw;
background: var(--background-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
max-height: 70vh;
overflow-y: auto;
}
.more-works-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 1rem;
border-bottom: 1px solid var(--border-color);
}
.dropdown-header h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
}
.close-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: var(--border-radius);
transition: var(--transition);
}
.close-btn:hover {
background: var(--background-accent);
color: var(--text-primary);
}
.works-list {
padding: 1rem;
}
.work-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1rem;
border-radius: var(--border-radius);
text-decoration: none;
color: inherit;
transition: var(--transition);
margin-bottom: 0.5rem;
}
.work-item:hover {
background: var(--background-accent);
transform: translateX(4px);
}
.work-info h5 {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 500;
color: var(--text-primary);
}
.work-info p {
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
}
.work-venue {
font-size: 0.8rem;
color: var(--text-light);
font-style: italic;
}
.work-item .fas {
color: var(--text-light);
font-size: 0.9rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
/* Mobile Responsive Improvements */
@media screen and (max-width: 768px) {
.hero-body {
padding: 2rem 1rem;
}
.publication-header .hero-body {
padding: 3rem 1rem 2rem;
}
.publication-title {
font-size: 2.5rem !important;
line-height: 1.2 !important;
margin-bottom: 1.5rem !important;
}
.publication-authors {
font-size: 1rem !important;
}
.button {
margin: 0.25rem !important;
font-size: 0.875rem !important;
padding: 0.75rem 1rem !important;
}
.more-works-container {
bottom: 2rem;
right: 1rem;
top: auto;
}
.more-works-btn {
padding: 0.6rem 1rem;
font-size: 0.8rem;
}
.more-works-dropdown {
width: calc(100vw - 2rem);
right: -1rem;
bottom: calc(100% + 0.5rem);
top: auto;
}
.results-carousel .item {
margin: 0.5rem;
padding: 1rem;
}
.teaser .hero-body {
padding: 1rem;
}
.content.has-text-justified {
font-size: 1rem;
}
}
@media screen and (max-width: 480px) {
.publication-title {
font-size: 2rem !important;
}
.hero-body {
padding: 1.5rem 0.75rem;
}
.more-works-container {
position: fixed;
bottom: 2rem;
right: 1rem;
z-index: 1000;
}
.more-works-btn {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
}
.more-works-dropdown {
position: absolute;
bottom: calc(100% + 0.5rem);
right: 0;
width: calc(100vw - 2rem);
max-width: 90vw;
}
.link-block {
display: block;
margin-bottom: 0.5rem;
}
.button {
width: 100%;
justify-content: center;
}
}
/* Tablet Responsive */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.hero-body {
padding: 3rem 2rem;
}
.publication-header .hero-body {
padding: 4rem 2rem 3rem;
}
}
/* Animation for page load */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero, .section {
animation: fadeInUp 0.6s ease-out;
}
/* Improved focus states for accessibility */
.button:focus,
.related-works-btn:focus,
a:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Print styles */
@media print {
.more-works-container {
display: none;
}
.hero, .section {
animation: none;
}
.button {
background: transparent !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}
}