more transparency

This commit is contained in:
liviu 2023-08-04 16:49:55 +02:00
parent 22232f617e
commit c967c71aa2
13 changed files with 22 additions and 11374 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 987 KiB

View File

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 579.74 579.74"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="2.12" y1="2.12" x2="577.62" y2="577.62"/><line class="cls-1" x1="2.12" y1="577.62" x2="577.62" y2="2.12"/></svg>

Before

Width:  |  Height:  |  Size: 333 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 139 KiB

11179
dist/css/styles.css vendored

File diff suppressed because it is too large Load Diff

130
dist/index.html vendored
View File

@ -1,130 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Anamaria și Liviu</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#page-top">Nunta</a></li>
<li class="nav-item"><a class="nav-link" href="#when">Cînd</a></li>
<li class="nav-item"><a class="nav-link" href="#where">Unde</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-heading">Anamaria și Liviu</div>
<div class="masthead-subheading">Ne căsătorim!</div>
<a class="btn btn-primary btn-xl mt-4" href="#when">Detalii</a>
</div>
</header>
<!-- Services-->
<section class="page-section" id="when">
<div class="container">
<div class="text-center">
<h3 class="section-subheading text-muted mb-1">împreună cu nașii</h3>
<h3 class="section-heading mb-4 my-2">Mihaela și Ion Sturzoiu</h3>
<h3 class="section-subheading text-muted mb-1">și dragii noștri părinți</h3>
</div>
<div class="row text-center">
<div class="col"><h4 class="my-1">Gabriela și Radu Rădulescu</h4></div>
<div class="col"><h4 class="my-1">Elena și Dan Ivașcu</h4></div>
</div>
<div class="text-center mt-4">
<h3 class="section-subheading text-muted mb-1">vă invităm să ne fiți alături pe</h3>
<h2 class="section-heading">23 Septembrie 2023</h2>
<h3 class="section-subheading text-muted mb-1">la București</h3>
</div>
</div>
</section>
<!-- About-->
<section class="page-section" id="where">
<div class="container">
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/bis-sf.maria.png" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>13:30</h4>
<h4 class="subheading">Cununia religioasă</h4>
</div>
<div class="timeline-body">
<p>Biserica Sf.Maria</p>
<p class="text-muted">
Voluntari
<br />
<i class="fas fa-location-dot"></i>
<a href="https://goo.gl/maps/kR5PGx3GLfkMtv3c7" target="_blank">Harta</a>
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/casa-doina-crama.png" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>15:00</h4>
<h4 class="subheading">Petrecerea</h4>
</div>
<div class="timeline-body">
<p>Casa Doina - Cramă</p>
<p class="text-muted">
Soseaua Kiseleff nr. 4, Sector 1, București
<br />
<i class="fas fa-location-dot"></i>
<a href="https://goo.gl/maps/G5TpdxgckozfZjk37" target="_blank">Harta</a>
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-image">
<h4>
<br />
<p class="text-uppercase">Mulțumim</p>
<br />
</h4>
</div>
<div class="timeline-panel">
<div class="timeline-heading"></div>
<div class="timeline-body">
<p>
Vă rugăm să confirmați participarea
<br />
pînă la data de 15 August
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

54
dist/js/scripts.js vendored
View File

@ -1,54 +0,0 @@
/*!
* Start Bootstrap - nunta v1.0.0 (https://startbootstrap.com/theme/agency)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/nunta-radulescu/blob/master/LICENSE)
*/
//
// Scripts
//
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector('#mainNav');
if (mainNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
rootMargin: '0px 0px -40%',
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});

View File

@ -36,7 +36,7 @@ html(lang='en')
#navbarResponsive.collapse.navbar-collapse #navbarResponsive.collapse.navbar-collapse
ul.navbar-nav.ms-auto.py-4.py-lg-0 ul.navbar-nav.ms-auto.py-4.py-lg-0
li.nav-item li.nav-item
a.nav-link(href='#page-top') Nunta a.nav-link(href='#top') Nunta
li.nav-item li.nav-item
a.nav-link(href='#when') Cînd a.nav-link(href='#when') Cînd
li.nav-item li.nav-item
@ -44,8 +44,8 @@ html(lang='en')
// Masthead // Masthead
header.masthead header.masthead
.container .container
.masthead-heading Anamaria și Liviu
.masthead-subheading Ne căsătorim! .masthead-subheading Ne căsătorim!
.masthead-heading Anamaria și Liviu
a.btn.btn-primary.btn-xl.mt-4(href='#when') Detalii a.btn.btn-primary.btn-xl.mt-4(href='#when') Detalii
// Services // Services
@ -83,8 +83,10 @@ html(lang='en')
p.text-muted p.text-muted
| Voluntari | Voluntari
br br
a(href='https://goo.gl/maps/kR5PGx3GLfkMtv3c7' target='_blank')
i.fas.fa-location-dot i.fas.fa-location-dot
a(href='https://goo.gl/maps/kR5PGx3GLfkMtv3c7' target='_blank') Harta | Harta
li.timeline-inverted li.timeline-inverted
.timeline-image .timeline-image
img.rounded-circle.img-fluid(src='assets/img/casa-doina-crama.png', alt='...') img.rounded-circle.img-fluid(src='assets/img/casa-doina-crama.png', alt='...')
@ -98,8 +100,10 @@ html(lang='en')
p.text-muted p.text-muted
| Soseaua Kiseleff nr. 4, Sector 1, București | Soseaua Kiseleff nr. 4, Sector 1, București
br br
a(href='https://goo.gl/maps/G5TpdxgckozfZjk37' target='_blank')
i.fas.fa-location-dot i.fas.fa-location-dot
a(href='https://goo.gl/maps/G5TpdxgckozfZjk37' target='_blank') Harta | Harta
li.timeline li.timeline
.timeline-image .timeline-image
h4 h4

View File

@ -27,6 +27,10 @@ a {
text-decoration: none; text-decoration: none;
} }
.btn-xl {
opacity: 80%;
}
// Spacing and heading styling for page sections // Spacing and heading styling for page sections
.page-section { .page-section {

View File

@ -5,7 +5,7 @@
#mainNav { #mainNav {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
background-color: rgb(0 0 0 / 70%); background-color: rgba(#212529, 0.7);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
.navbar-toggler { .navbar-toggler {
@ -15,10 +15,12 @@
font-family: $headings-font-family; font-family: $headings-font-family;
text-transform: uppercase; text-transform: uppercase;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
opacity: 80%;
color: $white;
} }
.navbar-brand { .navbar-brand {
// color: $primary; color: $primary;
font-family: $headings-font-family; font-family: $headings-font-family;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
letter-spacing: $headings-letter-spacing; letter-spacing: $headings-letter-spacing;
@ -55,6 +57,8 @@
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border: none; border: none;
background-color: transparent; background-color: transparent;
backdrop-filter: blur(0);
transition: padding-top 0.3s ease-in-out, transition: padding-top 0.3s ease-in-out,
padding-bottom 0.3s ease-in-out; padding-bottom 0.3s ease-in-out;
@ -72,7 +76,7 @@
&.navbar-shrink { &.navbar-shrink {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
background-color: rgb(0 0 0 / 70%); background-color: rgba(#212529, 0.7);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
.navbar-brand { .navbar-brand {

View File

@ -4,7 +4,7 @@
// Override Bootstrap state colors variables // Override Bootstrap state colors variables
$primary: #8676BA; $primary: #A16882;
// Override Bootstrap contrast ratio // Override Bootstrap contrast ratio