|
|
| (124 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| __NOTOC__{{DISPLAYTITLE:<span id="1" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
| | {{#ask: |
| <html>
| | [[Category:Version]] |
| <style>
| | |?Has Reference Number |
| .hero-container {
| | }} |
| padding-bottom: 2rem;
| |
| }
| |
| .firstHeading {
| |
| display: none;
| |
| }
| |
| .mix-blend-multiply {
| |
| mix-blend-mode: multiply;
| |
| transition: opacity 0.5s ease;
| |
| }
| |
| .hero-section {
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| border-radius: 0.25rem;
| |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
| |
| height: calc(100dvh - 100px);
| |
| width: 100%;
| |
| transition: transform 0.3s ease;
| |
| }
| |
| .hero-section:hover img {
| |
| transform: scale(1.05);
| |
| }
| |
| .hero-section:hover .mix-blend-multiply {
| |
| opacity: 0.8;
| |
| }
| |
| .hero-section img {
| |
| transition: transform 0.3s ease;
| |
| object-fit: cover;
| |
| object-position: center;
| |
| inset: 0;
| |
| position: absolute;
| |
| height: 100%;
| |
| width: 100%;
| |
| }
| |
| .hero-overlay {
| |
| position: absolute;
| |
| height: 100%;
| |
| width: 100%;
| |
| inset: 0;
| |
| background-color: black;
| |
| opacity: 0.7;
| |
| }
| |
| .hero-text-container {
| |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| padding: 1rem;
| |
| }
| |
| .hero-title {
| |
| text-align: center;
| |
| color: white;
| |
| font-weight: bold;
| |
| font-size: 3rem;
| |
| line-height: 1;
| |
| }
| |
| .hero-subtitle {
| |
| text-align: center;
| |
| color: white;
| |
| font-size: 1.3rem;
| |
| line-height: 1;
| |
| max-width: 70%;
| |
| }
| |
| .caret {
| |
| position: absolute;
| |
| bottom: 20px;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| font-size: 2rem;
| |
| color: white;
| |
| cursor: pointer;
| |
| animation: bounce 2s infinite;
| |
| }
| |
| @keyframes bounce {
| |
| 0%, 20%, 50%, 80%, 100% {
| |
| transform: translateY(0) translateX(-50%);
| |
| }
| |
| 40% {
| |
| transform: translateY(-10px) translateX(-50%);
| |
| }
| |
| 60% {
| |
| transform: translateY(-5px) translateX(-50%);
| |
| }
| |
| }
| |
| @media (max-width: 400px) {
| |
| .hero-title {
| |
| font-size: 2.2rem;
| |
| }
| |
| .hero-subtitle {
| |
| font-size: 1.4rem;
| |
| }
| |
| }
| |
| @media (min-width: 768px) {
| |
| .hero-title {
| |
| font-size: 4rem;
| |
| }
| |
| .hero-subtitle {
| |
| font-size: 1.8rem;
| |
| }
| |
| }
| |
| .content-container {
| |
| width: 100%; /* Match hero section width */
| |
| max-width: 1600px; /* or your preferred max width */
| |
| margin: 0 auto; /* Center the container */
| |
| padding: 20px; /* Add padding for content */
| |
| }
| |
| .landing-page-row {
| |
| border-radius: 0.25rem;
| |
| background: oklch(0.374 0.01 67.558);
| |
| color: white;
| |
| padding: 1.5rem;
| |
| margin-bottom: 5rem;
| |
| ul {
| |
| list-style: none;
| |
| text-align: left;
| |
| }
| |
| }
| |
| .fit-img img {
| |
| border-radius: 0.25rem;
| |
| }
| |
| </style>
| |
| <body>
| |
| <div id="hero-container" class="container-fluid container-3xl">
| |
| <section class="hero-section bg-light">
| |
| <img src="https://db.seven-sages-of-rome.org/images/f/f5/BL_IO_Islamic_3214%2C_fol._29v.jpeg"
| |
| loading="lazy"
| |
| alt="Photo by Fakurian Design" />
| |
| <div class="hero-overlay mix-blend-multiply"></div>
| |
| <div class="hero-text-container">
| |
| <p class="hero-title">The Seven Sages of Rome: Database</p>
| |
| <p class="hero-subtitle">The Seven Sages of Rome is the most famous premodern text of which nobody has ever heard. This project aims to change that. The story cycle, told in at least 30 languages from Central Asia to Iceland over more than five centuries, centres on a non-consensual sexual encounter between a mute prince and his stepmother.</p>
| |
| </div>
| |
| <div class="caret" onclick="scrollToAnchor('content-anchor')">⌄</div>
| |
| </section>
| |
| </div>
| |
| </html>
| |
| <div class="my-5">
| |
| <div class="bento-grid">
| |
| <div id="bento-item bento-item-regular" class="bento-item bento-item-wide">
| |
| <h3>[[Manuscripts|Manuscripts]]</h3>
| |
| <p>{{#ask:[[Category:Manuscript]]|format=count}} manuscripts</p>
| |
| </div>
| |
| <div class="bento-item bento-item-regular">
| |
| <h3>[[Inset Stories|Inset Stories]]</h3>
| |
| <p>{{#ask:[[Category:Version]]|format=count}} inset stories</p>
| |
| </div>
| |
| <div class="bento-item bento-item-regular">
| |
| <h3>[[Sages|Sages]]</h3>
| |
| <p>{{#ask:[[Category:Sage]]|format=count}} sages</p>
| |
| </div>
| |
| <div id="bento-item bento-item-regular" class="bento-item">
| |
| <h3>[[Prints|Prints]]</h3>
| |
| <p>{{#ask:[[Category:Print]]|format=count}} prints</p>
| |
| </div>
| |
| <div class="bento-item bento-item-wide">
| |
| <h3>[[Versions|Versions]]</h3>
| |
| <p>{{#ask:[[Category:Version]]|format=count}} versions</p>
| |
| </div>
| |
| <div class="bento-item bento-item-regular">
| |
| <h3>[[Modern Editions|Modern Editions]]</h3>
| |
| <p>{{#ask:[[Category:Modern Edition]]|format=count}} modern editions</p>
| |
| </div>
| |
| <div class="bento-item bento-item-regular">
| |
| <h3>[[Modern Research Literature|Modern Research Literature]]</h3>
| |
| <p>{{#ask:[[Category:Modern Research Literature]]|format=count}} modern research literature</p>
| |
| </div>
| |
| <div class="bento-item bento-item-wide">
| |
| <h3>[[Locations|Locations]]</h3>
| |
| <p>{{#ask:[[Category:Location]]|format=count}} locations</p>
| |
| </div>
| |
| <div class="bento-item bento-item-wide">
| |
| <h3>[[Persons|Persons]]</h3>
| |
| <p>{{#ask:[[Category:Person]]|format=count}} persons</p>
| |
| </div>
| |
| <div class="bento-item bento-item-wide">
| |
| <h3>[[Motifs|Motifs]]</h3>
| |
| <p>{{#ask:[[Category:Motif]]|format=count}} motifs</p>
| |
| </div>
| |
| <div class="bento-item bento-item-wide">
| |
| <h3>[[Languages|Languages]]</h3>
| |
| <p>{{#ask:[[Category:Language]]|format=count}} materials</p>
| |
| </div>
| |
| <div class="bento-item bento-item-wide">
| |
| <h3>[[Materials|Materials]]</h3>
| |
| <p>{{#ask:[[Category:Material]]|format=count}} materials</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |