Compare commits
No commits in common. "v1.0.25" and "main" have entirely different histories.
21 changed files with 903 additions and 950 deletions
|
|
@ -5,7 +5,7 @@ WORKDIR /usr/src/app
|
|||
|
||||
# Install app dependencies
|
||||
COPY package*.json ./
|
||||
#COPY .npmrc ./
|
||||
COPY .npmrc ./
|
||||
COPY yarn.lock ./
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ba-website",
|
||||
"version": "1.0.25",
|
||||
"version": "1.0.16",
|
||||
"description": "The Bridgeman Accessible main website",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
|
|
@ -10,8 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@BridgemanAccessible/ba-auth": "^1.0.0",
|
||||
"@BridgemanAccessible/ba-logging": "^1.0.0",
|
||||
"@BridgemanAccessible/ba-web-framework": "^1.0.11",
|
||||
"@BridgemanAccessible/ba-web-framework": "^1.0.0",
|
||||
"@BridgemanAccessible/listmonk-node-client": "^1.0.0",
|
||||
"ejs": "^3.1.6",
|
||||
"express": "^4.17.1",
|
||||
|
|
|
|||
|
|
@ -64,11 +64,6 @@
|
|||
if (typeof(person.image) !== 'undefined') {
|
||||
%>
|
||||
<img src="img/<%= person.image %>" alt="A photo of <%= person.fname %> <%= person.lname %>">
|
||||
<%
|
||||
}
|
||||
else {
|
||||
%>
|
||||
<i class="fa-solid fa-user fa-3x"></i>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
|
|
@ -93,14 +88,7 @@
|
|||
<%
|
||||
if (typeof(person.email) !== 'undefined') {
|
||||
%>
|
||||
<a href="mailto:<%= person.email %>"><i class="fa-solid fa-envelope"></i> Email</a>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
<%
|
||||
if (typeof(person.phone) !== 'undefined') {
|
||||
%>
|
||||
<a href="tel:<%= person.phone %>"><i class="fa-solid fa-phone"></i> Call</a>
|
||||
<a href="mailto:<%= person.email %>"><i class="fa-solid fa-envelope"></i> Contact</a>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
<section class="contact-hero">
|
||||
<div class="contact-hero-content">
|
||||
<h1>Connect with Bridgeman Accessible</h1>
|
||||
<p>We're here to help you build a more inclusive digital world. Reach out with any questions, feedback, or to discuss your accessibility needs.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-details-section">
|
||||
<div class="contact-details-container">
|
||||
<div class="contact-info-block">
|
||||
<h2>Get In Touch</h2>
|
||||
<p class="contact-item">
|
||||
<a href="mailto:info@bridgemanaccessible.com" class="icon-link">
|
||||
<span class="icon" aria-hidden="true">✉</span> info@bridgemwnwccessible.com
|
||||
</a>
|
||||
</p>
|
||||
<p class="contact-item">
|
||||
<a href="tel:+14314781655" class="icon-link">
|
||||
<span class="icon" aria-hidden="true">☎</span> 431-478-1655
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="newsletter-block">
|
||||
<h2>Stay Updated</h2>
|
||||
<p>Subscribe to our newsletter for the latest insights, tips, and news on digital accessibility.</p>
|
||||
<form action="/subscribe" method="POST" class="newsletter-form">
|
||||
<div class="form-group">
|
||||
<label for="newsletter-email">Email Address <span class="required">(required)</span></label>
|
||||
<input type="email" id="newsletter-email" name="email" required autocomplete="email" aria-required="true">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newsletter-fname">First Name (optional)</label>
|
||||
<input type="text" id="newsletter-fname" name="firstName" autocomplete="given-name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newsletter-lname">Last Name (optional)</label>
|
||||
<input type="text" id="newsletter-lname" name="lastName" autocomplete="family-name">
|
||||
</div>
|
||||
<button type="submit" class="button primary-button">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="feedback-section">
|
||||
<div class="feedback-container">
|
||||
<h2>Send Us Your Feedback</h2>
|
||||
<p>Your thoughts help us improve. Please share any suggestions, report an issue, or just tell us what you think.</p>
|
||||
<form action="/submit-feedback" method="POST" class="feedback-form">
|
||||
<div class="form-group">
|
||||
<label for="feedback-name">Your Name (optional)</label>
|
||||
<input type="text" id="feedback-name" name="name" autocomplete="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="feedback-email">Your Email (optional)</label>
|
||||
<input type="email" id="feedback-email" name="email" autocomplete="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="feedback-subject">Subject</label>
|
||||
<input type="text" id="feedback-subject" name="subject" required aria-required="true">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="feedback-message">Your Message <span class="required">(required)</span></label>
|
||||
<textarea id="feedback-message" name="message" rows="7" required aria-required="true"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="button secondary-button">Submit Feedback</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<h1>Education and Training</h1>
|
||||
|
|
@ -25,10 +25,6 @@
|
|||
<% } else { %>
|
||||
<li><a href="about" class="nav-link"><i class="fas fa-info-circle"></i> About Us</a></li>
|
||||
<% } %>
|
||||
<% if (title === 'Contact') { %>
|
||||
<li><a href="contact" class="nav-link active"><i class="fas fa-address-book"></i> Contact Us</a></li>
|
||||
<% } else { %>
|
||||
<li><a href="contact" class="nav-link"><i class="fas fa-address-book"></i> Contact Us</a></li>
|
||||
<% } %>
|
||||
<li><a href="mailto:info@bridgemanaccessible.ca" class="nav-link"><i class="fas fa-envelope"></i> Contact Us</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
49
src/pages/new-design-2.ejs
Normal file
49
src/pages/new-design-2.ejs
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thermometer Layout</title>
|
||||
<link rel="stylesheet" href="/css/new-design-2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-container">
|
||||
<main class="content-area">
|
||||
<section class="card-section" aria-describedby="thermometer-indicator-section1">
|
||||
<h2 class="card-header">Section Title 1</h2>
|
||||
<div class="card-content">
|
||||
<p>This is the content for the first section. It can contain multiple paragraphs and other elements.</p>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<button class="read-more">Read More</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-section" aria-describedby="thermometer-indicator-section2">
|
||||
<h2 class="card-header">Another Section</h2>
|
||||
<div class="card-content">
|
||||
<p>More interesting content for the second section goes here.</p>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<button class="read-more">Learn More</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<aside class="thermometer-area" aria-label="Amount of managed by us spectrum">
|
||||
<div class="thermometer-graphic-container">
|
||||
<div class="thermometer-graphic" role="img" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="thermometer-bulb"></div>
|
||||
</div>
|
||||
<div class="thermometer-label">Amount of managed by us</div>
|
||||
</div>
|
||||
<div id="thermometer-indicator-section1" class="visually-hidden">Section 1 is located at approximately 30% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section2" class="visually-hidden">Section 2 is located at approximately 60% in the managed amount spectrum.</div>
|
||||
</aside>
|
||||
<div class="triangle-connector-container">
|
||||
<div class="triangle-connector top"></div>
|
||||
<div class="triangle-connector bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
146
src/pages/new-design-3.ejs
Normal file
146
src/pages/new-design-3.ejs
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<!-- <!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thermometer Layout</title>
|
||||
<link rel="stylesheet" href="/css/new-design-3.css">
|
||||
</head>
|
||||
<body> -->
|
||||
<div class="page-container">
|
||||
<div class="content-area">
|
||||
<section class="card-section top" aria-describedby="thermometer-indicator-section1">
|
||||
<div class="card-header">
|
||||
<h2>Self-Serve Tools (Products)</h2>
|
||||
<small>Price: Varies</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
We provide a variety of self-serve tools that can be used to help make technology (or people's use of technology) more accessible.
|
||||
These tools are designed to be user-friendly and can be used by individuals or organizations without the need for specialized training or expertise.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Accessibility Events Platform (AEP)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="/products">Go to Products page</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-section middle" aria-describedby="thermometer-indicator-section2">
|
||||
<div class="card-header">
|
||||
<h2>Event, Media, Documents and Website Support</h2>
|
||||
<small>Price: $125/hour (subject to change)</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
We provide technical support for situations where there are disability/accessibility specific requirements or concerns.
|
||||
</p>
|
||||
<h3>Event Support</h3>
|
||||
<p>
|
||||
We specialize in helping facilitate any technical needs for accessibility features such as CART & captions, ASL/LSQ, and more.
|
||||
Our services are available for both online and hybrid events, and may be available for in-person events on a case by case basis.
|
||||
Noting, our office is located in Winnipeg, Manitoba, Canada and we are not able to travel outside of the city for in-person events at this time.
|
||||
</p>
|
||||
<!-- <p>
|
||||
More specifically, we often provide the following services (though may be open to others upon request):
|
||||
</p>
|
||||
<ul>
|
||||
<li>Event planning and coordination as it relates to needed technology and features (including researching and reporting on needed equipment, licenses or other resources or requirements)</li>
|
||||
<li>Event setup and troubleshooting</li>
|
||||
<li>Event moderation and technical problem troubleshooting</li>
|
||||
<li>Event recording and editing</li>
|
||||
</ul> -->
|
||||
<h3>Media Accessibility</h3>
|
||||
<p>We can help clients to remediate (make accessible) any media that they have created or are using.</p>
|
||||
<h3>Document Accessibility</h3>
|
||||
<p>We can help clients to remediate (make accessible) any documents that they have created or are using.</p>
|
||||
<p>
|
||||
Our past work has focused on PDFs, Word documents, PowerPoints and Excel spreadsheets.
|
||||
We are open to working with other document types as well, but with other formats we may not be able to provide the same level of support.
|
||||
</p>
|
||||
<h3>Website Advising/Testing</h3>
|
||||
<p>
|
||||
We do offer some limited website testing and advising services (that don't include development).
|
||||
Though this is somewhat limited (at least as A La Carte) compared to our many, many competitors in this area.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="#">Read More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-section middle" aria-describedby="thermometer-indicator-section3">
|
||||
<div class="card-header">
|
||||
<h2>Consulting and Co-Development</h2>
|
||||
<small>Price: $80/consultant or developer/hour (subject to change)</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
We work very closely with or alongside developers to make software and hardware accessible.
|
||||
Our team has extensive experience in not only accessibility (which many of our compeitors do as well) but in software development and engineering as well.
|
||||
Which means we provide you the uniquely specific experience and guidance that goes so much deeper than "you should do X because of Y which makes it more accessible" but the
|
||||
"your app is doing X which isn't accessible because of Y but if you look at line N in file M of your code you can do Z to fix it".
|
||||
</p>
|
||||
<p>
|
||||
This comes with the caveat that we are often more interested in the how than the what.
|
||||
Which means our clients are expected to have a good idea of what they want to build and what solutions may or may not work for them.
|
||||
We can help with this to an extent but we are not a design or content creation agency and we do not provide design or content development services.
|
||||
We have often had partners like disability specific organizations that can help with accessible design and content creation and we are happy to connect you and work with them as appropriate.
|
||||
</p>
|
||||
<p>
|
||||
In specific cases where the product or service will provide a meaningful and significant contribution to advancing the accessibility of technology we also offer co-development not only on accessibility but on the product or service in general.
|
||||
When applicable, we don't just bring accessibility into the development but also development expertise in areas such as infrastructure, security, testing and more.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Accessibility issue root cause analysis (and solution suggestion)</li>
|
||||
<li>Technial design as it relates to accessibility integration or subsystems</li>
|
||||
<li>Assistive technology or accessibility tool integration (ex. accessibility testing in CI pipelines suggestion and setup)</li>
|
||||
<li>Training and education (on developer tools, coding languages, APIs or other technical topics around accessibility)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="mailto:info@bridgemanaccessible.ca">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-section bottom" aria-describedby="thermometer-indicator-section4">
|
||||
<div class="card-header">
|
||||
<h2>Disability Organization Technical Support</h2>
|
||||
<small>Price: $45/contractor/hour - minimum 10 hours (subject to change)</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
We provide IT support to disability-specific organizations or organiztions that work significanlty with people living with disabilities and help them become more digitally literate and efficient.
|
||||
Our team has experience working with a variety of organizations and can provide customized solutions to meet their unique needs.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IT support and troubleshooting</li>
|
||||
<li>Training and education on technology use</li>
|
||||
<li>Assistive technology support</li>
|
||||
<li>Database management</li>
|
||||
<li>Website design and development</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="mailto:info@bridgemanaccessible.ca">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<aside class="thermometer-area" aria-label="Amount of managed by us spectrum">
|
||||
<div class="thermometer-graphic-container">
|
||||
<div class="thermometer-graphic" role="img" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="thermometer-bulb"></div>
|
||||
</div>
|
||||
<div class="thermometer-label">Amount we're involved / managed by us</div>
|
||||
</div>
|
||||
<div id="thermometer-indicator-section1" class="visually-hidden">Located near the top at approximately the 25% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section2" class="visually-hidden">Located about half way down at approximately 50% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section3" class="visually-hidden">Located about three-quarters of the way down at approximately 75% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section4" class="visually-hidden">Located near the bottom at approximately 100% in the managed amount spectrum.</div>
|
||||
</aside>
|
||||
</div>
|
||||
<!-- </body>
|
||||
</html> -->
|
||||
|
|
@ -1,49 +1,17 @@
|
|||
<!-- <!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thermometer Layout</title>
|
||||
<link rel="stylesheet" href="/css/new-design-3.css">
|
||||
</head>
|
||||
<body> -->
|
||||
<div class="page-container">
|
||||
<div class="content-area">
|
||||
<section class="card-section top" aria-describedby="thermometer-indicator-section1">
|
||||
<div class="card-header">
|
||||
<h2>Self-Serve Tools (Products)</h2>
|
||||
<small>Price: Varies</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
We provide a variety of self-serve tools that can be used to help make technology (or people's use of technology) more accessible.
|
||||
These tools are designed to be user-friendly and can be used by individuals or organizations without the need for specialized training or expertise.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Accessibility Events Platform (AEP)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="/products">Go to Products page</a>
|
||||
</div>
|
||||
</section>
|
||||
<h1>Our Services</h1>
|
||||
|
||||
<section class="card-section middle" aria-describedby="thermometer-indicator-section2">
|
||||
<div class="card-header">
|
||||
<h2>Event, Media, Documents and Website Support</h2>
|
||||
<section class="service">
|
||||
<h2>Event and Assistive Technology Support</h2>
|
||||
<small>Price: $125/hour (subject to change)</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
We provide technical support for situations where there are disability/accessibility specific requirements or concerns.
|
||||
</p>
|
||||
<h3>Event Support</h3>
|
||||
<p>
|
||||
We specialize in helping facilitate any technical needs for accessibility features such as CART & captions, ASL/LSQ, and more.
|
||||
We specialize in features such as captions, ASL/LSQ, English/French interpretation, and more.
|
||||
Our services are available for both online and hybrid events, and may be available for in-person events on a case by case basis.
|
||||
Noting, our office is located in Winnipeg, Manitoba, Canada and we are not able to travel outside of the city for in-person events at this time.
|
||||
</p>
|
||||
<!-- <p>
|
||||
<p>
|
||||
More specifically, we often provide the following services (though may be open to others upon request):
|
||||
</p>
|
||||
<ul>
|
||||
|
|
@ -51,32 +19,15 @@
|
|||
<li>Event setup and troubleshooting</li>
|
||||
<li>Event moderation and technical problem troubleshooting</li>
|
||||
<li>Event recording and editing</li>
|
||||
</ul> -->
|
||||
<h3>Media Accessibility</h3>
|
||||
<p>We can help clients to remediate (make accessible) any media that they have created or are using.</p>
|
||||
<h3>Document Accessibility</h3>
|
||||
<p>We can help clients to remediate (make accessible) any documents that they have created or are using.</p>
|
||||
</ul>
|
||||
<h3>Specialized Technology Support</h3>
|
||||
<p>
|
||||
Our past work has focused on PDFs, Word documents, PowerPoints and Excel spreadsheets.
|
||||
We are open to working with other document types as well, but with other formats we may not be able to provide the same level of support.
|
||||
We allow clients to feel confident that their employees of any abilities will be well supported when it comes to technology.
|
||||
</p>
|
||||
<h3>Website Advising/Testing</h3>
|
||||
<p>
|
||||
We do offer some limited website testing and advising services (that don't include development).
|
||||
Though this is somewhat limited (at least as A La Carte) compared to our many, many competitors in this area.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="#">Read More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-section middle" aria-describedby="thermometer-indicator-section3">
|
||||
<div class="card-header">
|
||||
<h2>Consulting and Co-Development</h2>
|
||||
<small>Price: $80/consultant or developer/hour (subject to change)</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<section class="service">
|
||||
<h2>Co-Development and Consulting</h2>
|
||||
<small>Price: $80/hour (subject to change)</small>
|
||||
<p>
|
||||
We work very closely with or alongside developers to make software and hardware accessible.
|
||||
Our team has extensive experience in not only accessibility (which many of our compeitors do as well) but in software development and engineering as well.
|
||||
|
|
@ -84,9 +35,8 @@
|
|||
"your app is doing X which isn't accessible because of Y but if you look at line N in file M of your code you can do Z to fix it".
|
||||
</p>
|
||||
<p>
|
||||
This comes with the caveat that we are often more interested in the how than the what.
|
||||
Which means our clients are expected to have a good idea of what they want to build and what solutions may or may not work for them.
|
||||
We can help with this to an extent but we are not a design or content creation agency and we do not provide design or content development services.
|
||||
This comes with the caveat that we are often more interested in the how than the what. Which means our clients are expected to have a good idea of what they want to build and
|
||||
what solutions may or may not work for them. We can help with this to an extent but we are not a design or content creation agency and we do not provide design or content development services.
|
||||
We have often had partners like disability specific organizations that can help with accessible design and content creation and we are happy to connect you and work with them as appropriate.
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -99,48 +49,19 @@
|
|||
<li>Assistive technology or accessibility tool integration (ex. accessibility testing in CI pipelines suggestion and setup)</li>
|
||||
<li>Training and education (on developer tools, coding languages, APIs or other technical topics around accessibility)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="mailto:info@bridgemanaccessible.ca">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-section bottom" aria-describedby="thermometer-indicator-section4">
|
||||
<div class="card-header">
|
||||
<section class="service">
|
||||
<h2>Disability Organization Technical Support</h2>
|
||||
<small>Price: $45/contractor/hour - minimum 10 hours (subject to change)</small>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<small>Price: $45/hour (subject to change)</small>
|
||||
<p>
|
||||
We provide IT support to disability-specific organizations or organiztions that work significanlty with people living with disabilities and help them become more digitally literate and efficient.
|
||||
We provide IT support to disability-specific organizations and help them become more digitally literate and efficient.
|
||||
Our team has experience working with a variety of organizations and can provide customized solutions to meet their unique needs.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IT support and troubleshooting</li>
|
||||
<li>Training and education on technology use</li>
|
||||
<li>Training and education</li>
|
||||
<li>Assistive technology support</li>
|
||||
<li>Database management</li>
|
||||
<li>Website design and development</li>
|
||||
<li>Website design and development (limited)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<a class="read-more" href="mailto:info@bridgemanaccessible.ca">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<aside class="thermometer-area" aria-label="Amount of managed by us spectrum">
|
||||
<div class="thermometer-graphic-container">
|
||||
<div class="thermometer-graphic" role="img" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="thermometer-bulb"></div>
|
||||
</div>
|
||||
<div class="thermometer-label">Amount we're involved / managed by us</div>
|
||||
</div>
|
||||
<div id="thermometer-indicator-section1" class="visually-hidden">Located near the top at approximately the 25% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section2" class="visually-hidden">Located about half way down at approximately 50% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section3" class="visually-hidden">Located about three-quarters of the way down at approximately 75% in the managed amount spectrum.</div>
|
||||
<div id="thermometer-indicator-section4" class="visually-hidden">Located near the bottom at approximately 100% in the managed amount spectrum.</div>
|
||||
</aside>
|
||||
</div>
|
||||
<!-- </body>
|
||||
</html> -->
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<h1>Our Services</h1>
|
||||
|
||||
<section class="service">
|
||||
<h2>Event and Assistive Technology Support</h2>
|
||||
<small>Price: $125/hour (subject to change)</small>
|
||||
<p>
|
||||
We provide technical support for situations where there are disability/accessibility specific requirements or concerns.
|
||||
</p>
|
||||
<h3>Event Support</h3>
|
||||
<p>
|
||||
We specialize in features such as captions, ASL/LSQ, English/French interpretation, and more.
|
||||
Our services are available for both online and hybrid events, and may be available for in-person events on a case by case basis.
|
||||
</p>
|
||||
<p>
|
||||
More specifically, we often provide the following services (though may be open to others upon request):
|
||||
</p>
|
||||
<ul>
|
||||
<li>Event planning and coordination as it relates to needed technology and features (including researching and reporting on needed equipment, licenses or other resources or requirements)</li>
|
||||
<li>Event setup and troubleshooting</li>
|
||||
<li>Event moderation and technical problem troubleshooting</li>
|
||||
<li>Event recording and editing</li>
|
||||
</ul>
|
||||
<h3>Specialized Technology Support</h3>
|
||||
<p>
|
||||
We allow clients to feel confident that their employees of any abilities will be well supported when it comes to technology.
|
||||
</p>
|
||||
</section>
|
||||
<section class="service">
|
||||
<h2>Co-Development and Consulting</h2>
|
||||
<small>Price: $80/hour (subject to change)</small>
|
||||
<p>
|
||||
We work very closely with or alongside developers to make software and hardware accessible.
|
||||
Our team has extensive experience in not only accessibility (which many of our compeitors do as well) but in software development and engineering as well.
|
||||
Which means we provide you the uniquely specific experience and guidance that goes so much deeper than "you should do X because of Y which makes it more accessible" but the
|
||||
"your app is doing X which isn't accessible because of Y but if you look at line N in file M of your code you can do Z to fix it".
|
||||
</p>
|
||||
<p>
|
||||
This comes with the caveat that we are often more interested in the how than the what. Which means our clients are expected to have a good idea of what they want to build and
|
||||
what solutions may or may not work for them. We can help with this to an extent but we are not a design or content creation agency and we do not provide design or content development services.
|
||||
We have often had partners like disability specific organizations that can help with accessible design and content creation and we are happy to connect you and work with them as appropriate.
|
||||
</p>
|
||||
<p>
|
||||
In specific cases where the product or service will provide a meaningful and significant contribution to advancing the accessibility of technology we also offer co-development not only on accessibility but on the product or service in general.
|
||||
When applicable, we don't just bring accessibility into the development but also development expertise in areas such as infrastructure, security, testing and more.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Accessibility issue root cause analysis (and solution suggestion)</li>
|
||||
<li>Technial design as it relates to accessibility integration or subsystems</li>
|
||||
<li>Assistive technology or accessibility tool integration (ex. accessibility testing in CI pipelines suggestion and setup)</li>
|
||||
<li>Training and education (on developer tools, coding languages, APIs or other technical topics around accessibility)</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="service">
|
||||
<h2>Disability Organization Technical Support</h2>
|
||||
<small>Price: $45/hour (subject to change)</small>
|
||||
<p>
|
||||
We provide IT support to disability-specific organizations and help them become more digitally literate and efficient.
|
||||
Our team has experience working with a variety of organizations and can provide customized solutions to meet their unique needs.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IT support and troubleshooting</li>
|
||||
<li>Training and education</li>
|
||||
<li>Assistive technology support</li>
|
||||
<li>Database management</li>
|
||||
<li>Website design and development (limited)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -30,19 +30,9 @@ export class AboutController extends BaseController {
|
|||
'Alan started Bridgeman Accessible because he saw over and over again companies that were lead by non-disabled people and non-developers trying to solve digital accessibility problems. ' +
|
||||
'Moreover, they would only every consult or give advice but never build or innovate in ways that would help the community and the industry in a meaningful and impactful way.',
|
||||
image: 'alan.jpeg',
|
||||
//website: 'https://alanbridgeman.ca/',
|
||||
email: 'alan@bridgemanaccessible.com',
|
||||
phone: '+1 (431) 478-1655 Ext. 200'
|
||||
website: 'https://alanbridgeman.ca/',
|
||||
email: 'alan@alanbridgeman.ca'
|
||||
},
|
||||
{
|
||||
fname: 'Mohamed',
|
||||
lname: 'Behi',
|
||||
position: 'Vice President (Training & Education)',
|
||||
bio: '' +
|
||||
'Mohamed is a passionate advocate for disability rights and accessibility. He has been involved in the disability community for many years, working with various organizations to promote inclusion and accessibility. ',
|
||||
email: 'mohamed@bridgemanaccessible.com',
|
||||
phone: '+1 (431) 478-1655 Ext. 201'
|
||||
}
|
||||
//{
|
||||
// fname: 'John',
|
||||
// lname: 'Oberton',
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
import { Request, Response } from 'express';
|
||||
import { Controller, GET, Page, BaseController } from '@BridgemanAccessible/ba-web-framework';
|
||||
|
||||
/** The ContactController class is responsible for handling the contact page of the site. */
|
||||
@Controller()
|
||||
export class ContactController extends BaseController {
|
||||
/**
|
||||
* Route for rendering the contact page.
|
||||
*
|
||||
* @param req The request object.
|
||||
* @param res The response object.
|
||||
*/
|
||||
@Page('Contact', 'contact.ejs', [], ['contact'])
|
||||
@GET('/contact')
|
||||
private contact(req: Request, res: Response) {}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ export class HomeController extends BaseController {
|
|||
};
|
||||
}
|
||||
|
||||
//@Page('New Design', 'new-design-3.ejs', [], ['new-design-3'])
|
||||
//@GET('/new-design')
|
||||
//private newPage(req: Request, res: Response) {}
|
||||
@Page('New Design', 'new-design-3.ejs', [], ['new-design-3'])
|
||||
@GET('/new-design')
|
||||
private newPage(req: Request, res: Response) {}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ export class ServicesController extends BaseController {
|
|||
* @param req The request object.
|
||||
* @param res The response object.
|
||||
*/
|
||||
@Page('Services', 'services.ejs', [], ['services'])
|
||||
@Page('Services', 'services.ejs')
|
||||
@GET('/services')
|
||||
private services(req: Request, res: Response) {}
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ const domain = process.env.DOMAIN || 'localhost';
|
|||
*
|
||||
* @param app The Express app that gets created/started.
|
||||
*/
|
||||
function onStart(app: App) {
|
||||
function onStart(app: Application) {
|
||||
// Currently within the Server class implementation,
|
||||
// which is then implemented by the accounts dashboard,
|
||||
// only the RFC8414 path/callback is setup by default
|
||||
|
|
@ -18,7 +18,7 @@ function onStart(app: App) {
|
|||
// this should be easy enough to change but don't want to fiddle with it right now
|
||||
//const oidcLink = PointerServer.createOIDCLink('account.bridgemanaccessible.ca');
|
||||
const rfc8414Link = PointerServer.createRFC8414Link('account.bridgemanaccessible.ca');
|
||||
PointerServer.setup(app.getExpressApp(), { links: [/*oidcLink, */rfc8414Link] });
|
||||
PointerServer.setup(app, { links: [/*oidcLink, */rfc8414Link] });
|
||||
}
|
||||
|
||||
async function main() {
|
||||
|
|
|
|||
|
|
@ -1,273 +0,0 @@
|
|||
/* General Reset & Base Styles (Assume some global styles exist, but these are good additions) */
|
||||
:root {
|
||||
/* Define your brand colors */
|
||||
--primary-color: #0056b3; /* A deep blue for Bridgeman Accessible */
|
||||
--secondary-color: #28a745; /* A complementary green */
|
||||
--accent-color: #ffc107; /* A bright accent color */
|
||||
--text-color: light-dark(#333, #f8f9fa); /* Dark text for light mode, light text for dark mode */
|
||||
--light-text-color: #f8f9fa;
|
||||
--background-light: light-dark(#f4f7f6, #343a40); /* Light background for light mode, dark for dark mode */
|
||||
--background-dark: light-dark(#e9ecef, #212529); /* Dark background for dark mode */
|
||||
--border-color: light-dark(#ced4da, #495057); /* Light border for light mode, dark for dark mode */
|
||||
|
||||
/* Font sizes (adjust as needed) */
|
||||
--font-size-base: 1rem;
|
||||
--font-size-large: 1.25rem;
|
||||
--font-size-xl: 2rem;
|
||||
--font-size-xxl: 2.5rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
|
||||
/* Border Radius */
|
||||
--border-radius: 8px;
|
||||
|
||||
/* Shadow */
|
||||
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif; /* Or your preferred brand font */
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-light);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* --- Section Styling --- */
|
||||
.contact-hero {
|
||||
background: linear-gradient(to right, var(--primary-color), #003366); /* Darker blue blend */
|
||||
color: var(--light-text-color);
|
||||
padding: var(--spacing-xl) var(--spacing-sm);
|
||||
text-align: center;
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contact-hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-hero h1 {
|
||||
font-size: var(--font-size-xxl);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.contact-hero p {
|
||||
font-size: var(--font-size-large);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.contact-details-section,
|
||||
.feedback-section {
|
||||
padding: var(--spacing-xl) var(--spacing-sm);
|
||||
background-color: var(--background-light);
|
||||
}
|
||||
|
||||
.contact-details-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Allows wrapping on smaller screens */
|
||||
gap: var(--spacing-xl); /* Space between blocks */
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
justify-content: center; /* Center blocks when they wrap */
|
||||
}
|
||||
|
||||
.contact-info-block,
|
||||
.newsletter-block {
|
||||
flex: 1; /* Allows blocks to grow and shrink */
|
||||
min-width: 300px; /* Minimum width before wrapping */
|
||||
background-color: light-dark(#fff, #343a40);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feedback-container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background-color: light-dark(#fff, #343a40);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
/* --- Headings --- */
|
||||
h2 {
|
||||
color: var(--primary-color);
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--spacing-md);
|
||||
border-bottom: 2px solid var(--accent-color); /* Underline effect */
|
||||
padding-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* --- Contact Information Styles --- */
|
||||
.contact-info-block .contact-item {
|
||||
font-size: var(--font-size-large);
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex; /* For icon alignment */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-info-block .icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-info-block .icon-link:hover,
|
||||
.contact-info-block .icon-link:focus {
|
||||
color: var(--secondary-color);
|
||||
outline: 2px solid var(--secondary-color); /* Accessibility focus */
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.contact-info-block .icon {
|
||||
margin-right: var(--spacing-sm);
|
||||
font-size: var(--font-size-large);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
/* --- Form Styles --- */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="email"],
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-color);
|
||||
box-sizing: border-box; /* Include padding in width */
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus,
|
||||
.form-group input[type="email"]:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2); /* Focus ring */
|
||||
outline: none; /* Remove default outline */
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical; /* Allow vertical resizing */
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #dc3545; /* Red for required indicator */
|
||||
font-weight: normal;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* --- Button Styles --- */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
.primary-button:hover,
|
||||
.primary-button:focus {
|
||||
background-color: #004494; /* Darker primary */
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
outline: 2px solid var(--accent-color); /* Accessible focus */
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--light-text-color);
|
||||
margin-top: var(--spacing-md); /* Space below forms */
|
||||
}
|
||||
|
||||
.secondary-button:hover,
|
||||
.secondary-button:focus {
|
||||
background-color: #218838; /* Darker secondary */
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
outline: 2px solid var(--accent-color); /* Accessible focus */
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* --- Responsive Adjustments --- */
|
||||
@media (max-width: 768px) {
|
||||
.contact-details-container {
|
||||
flex-direction: column; /* Stack blocks vertically on smaller screens */
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contact-info-block,
|
||||
.newsletter-block {
|
||||
min-width: unset; /* Remove min-width to allow full width */
|
||||
width: 100%; /* Take full width */
|
||||
}
|
||||
|
||||
.contact-hero h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.contact-hero p {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.contact-details-section,
|
||||
.feedback-section {
|
||||
padding: var(--spacing-lg) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.contact-hero {
|
||||
padding: var(--spacing-lg) var(--spacing-xs);
|
||||
}
|
||||
.contact-hero h1 {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
.contact-hero p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
.button {
|
||||
width: 100%; /* Full width buttons on very small screens */
|
||||
padding: var(--spacing-sm) var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
|
@ -82,11 +82,6 @@ nav {
|
|||
color: light-dark(#333, #DDD);
|
||||
}
|
||||
|
||||
.nav-links.active li:last-child a {
|
||||
background-color: light-dark(#0077c2, #005f99);
|
||||
color: light-dark(#fff, #000);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
nav {
|
||||
align-items: center;
|
||||
|
|
|
|||
196
src/static/css/new-design-2.css
Normal file
196
src/static/css/new-design-2.css
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
display: flex; /* Enable flexbox for overall layout */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex; /* Enable flexbox for main content and thermometer areas */
|
||||
width: 100%;
|
||||
max-width: 1200px; /* Optional: Limit page width */
|
||||
margin: 20px auto; /* Center the container */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative; /* For positioning the triangle connectors */
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 85%;
|
||||
padding-right: 5%; /* Spacing for the triangle */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
position: relative; /* To potentially position elements within the card */
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-bottom .read-more {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.card-bottom .read-more:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.thermometer-area {
|
||||
width: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* Align items to the top */
|
||||
padding-left: 5px; /* Spacing from the content area */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.thermometer-graphic-container {
|
||||
display: flex;
|
||||
flex-direction: row; /* Label to the right of the graphic */
|
||||
align-items: center; /* Vertically align label and graphic */
|
||||
margin-top: 20px; /* Adjust top margin as needed */
|
||||
}
|
||||
|
||||
.thermometer-graphic {
|
||||
background: linear-gradient(to bottom, #fdd835, #e1f5fe); /* Two-color fade/gradient */
|
||||
width: 30px; /* Adjust thickness as needed */
|
||||
height: 200px; /* Adjust height as needed */
|
||||
border-radius: 15px;
|
||||
border: 1px solid #ccc;
|
||||
position: relative; /* For positioning the bulb */
|
||||
}
|
||||
|
||||
.thermometer-bulb {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px; /* Adjust bulb width */
|
||||
height: 40px; /* Adjust bulb height */
|
||||
background-color: #f44336; /* Thermometer bulb color */
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: -10px; /* Overlap with the main graphic */
|
||||
}
|
||||
|
||||
.thermometer-label {
|
||||
font-size: 0.8em;
|
||||
color: #777;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.triangle-connector-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 85%; /* Align with the right edge of the content area */
|
||||
width: 5%; /* The gap between content and thermometer */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around; /* Distribute triangles vertically */
|
||||
align-items: flex-end; /* Align triangles to the right */
|
||||
padding: 20px 0; /* Add some vertical padding */
|
||||
box-sizing: border-box;
|
||||
pointer-events: none; /* Allow clicks to pass through */
|
||||
}
|
||||
|
||||
.triangle-connector {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid transparent; /* Adjust size */
|
||||
border-left: 15px solid white; /* Match card background */
|
||||
border-bottom: 15px solid transparent; /* Adjust size */
|
||||
}
|
||||
|
||||
/* Target the top triangle */
|
||||
.triangle-connector.top {
|
||||
border-top-width: 0; /* Start from a point */
|
||||
border-bottom-width: 20px; /* Adjust vertical expansion */
|
||||
border-left-width: 20px; /* Adjust horizontal expansion */
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
/* Target the bottom triangle */
|
||||
.triangle-connector.bottom {
|
||||
border-top-width: 20px; /* Adjust vertical expansion */
|
||||
border-left-width: 20px; /* Adjust horizontal expansion */
|
||||
border-bottom-width: 0; /* End at a point */
|
||||
border-left-color: white;
|
||||
/* You might need to adjust positioning based on card placement */
|
||||
}
|
||||
|
||||
|
||||
/* Visually hidden class for accessibility */
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* Basic responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
flex-direction: column; /* Stack elements on smaller screens */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
flex-direction: column;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.thermometer-area {
|
||||
width: 80%;
|
||||
flex-direction: row; /* Label and graphic side by side */
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.thermometer-graphic-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.thermometer-label {
|
||||
writing-mode: horizontal-tb;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.triangle-connector-container {
|
||||
display: none; /* Hide triangles on smaller screens */
|
||||
}
|
||||
}
|
||||
141
src/static/css/new-design.css
Normal file
141
src/static/css/new-design.css
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
display: flex; /* Enable flexbox for overall layout */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex; /* Enable flexbox for main content and thermometer areas */
|
||||
width: 100%;
|
||||
max-width: 1200px; /* Optional: Limit page width */
|
||||
margin: 20px auto; /* Center the container */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 85%;
|
||||
padding-right: 5%; /* Spacing for the triangle */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-bottom .read-more {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.card-bottom .read-more:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.thermometer-area {
|
||||
width: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 5px; /* Spacing from the content area */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.thermometer-label {
|
||||
font-size: 0.8em;
|
||||
color: #777;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr; /* Make the label vertical */
|
||||
}
|
||||
|
||||
.thermometer-graphic {
|
||||
background: linear-gradient(to bottom, #fdd835, #e1f5fe); /* Two-color fade/gradient */
|
||||
width: 30px; /* Adjust thickness as needed */
|
||||
height: 200px; /* Adjust height as needed */
|
||||
border-radius: 15px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.triangle-connector {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 20px solid transparent; /* Adjust height to control triangle size */
|
||||
border-left: 20px solid white; /* Match card background */
|
||||
border-bottom: calc(100% - 20px) solid transparent; /* Adjust based on top border */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10%; /* Align with the thermometer area */
|
||||
box-sizing: border-box;
|
||||
pointer-events: none; /* Allow clicks to pass through */
|
||||
}
|
||||
|
||||
/* Visually hidden class for accessibility */
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* Basic responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
flex-direction: column; /* Stack elements on smaller screens */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
flex-direction: column;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.thermometer-area {
|
||||
width: 80%;
|
||||
flex-direction: row; /* Label and graphic side by side */
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.thermometer-label {
|
||||
writing-mode: horizontal-tb;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.triangle-connector {
|
||||
display: none; /* Hide triangle on smaller screens */
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue