diff --git a/img/accessibility-icon.png b/img/accessibility-icon.png
new file mode 100644
index 0000000..2d88fde
Binary files /dev/null and b/img/accessibility-icon.png differ
diff --git a/img/slide-up.png b/img/slide-up.png
new file mode 100644
index 0000000..e3554bf
Binary files /dev/null and b/img/slide-up.png differ
diff --git a/index.html b/index.html
index ab09fdc..4933176 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,14 @@
gtag('js', new Date());
gtag('config', 'G-GR9JCZYNFH');
-
+
+
+
+
Recursos ICGC en obert
@@ -51,17 +58,19 @@
}
.alert-default {
- background-color: #F5F5F5;
+ background-color: #ffffff;
font-size: 0.95em;
- border-radius: 0px
+ border-radius: 10px;
+ border-color: rgb(194, 194, 194);
+
}
span {
- color: #BF0000;
+ color: #f58921;
}
a {
- color: #a80202 !important;
+ color: #f58921 ;
}
@@ -72,10 +81,17 @@
line-height: 40px;
background-color: #f5f5f5;
}
-
+
+ h5{
+ color: #000;
+ }
h6 {
font-weight: bolder;
}
+
+ h7{
+ color: #000;
+ }
.ul {
list-style-type: disclosure-closed;
@@ -95,7 +111,7 @@
.navbar {
background-color: #404040 !important;
- border-radius: 0px;
+ border-radius: 10px;
color: white !important;
}
@@ -124,10 +140,12 @@
color: black;
list-style: none;
padding: 8px;
- background-color: #c4c2c2;
+ background-color: #ffc300;
font-size: 1.1em;
font-weight: bold;
margin-top: 5px;
+ border-radius: 5px;
+
}
@media screen and (max-width: 500px) {
@@ -147,6 +165,241 @@
.raster {
font-size: 0.98em;
}
+
+ nav {
+ position: relative;
+ background-color: #404040;
+ padding: 10px;
+ border-radius: 10px;
+
+ }
+
+ nav ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ }
+
+ nav ul li {
+ margin-right: 20px;
+ position: relative;
+ }
+
+ nav ul li a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ nav ul li button {
+ background-color: transparent;
+ border: none;
+ color: #fff;
+ cursor: pointer;
+ padding: 5px;
+ }
+
+ nav ul li button:focus {
+ outline: none;
+ }
+
+ nav ul li .dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background-color: #404040;
+ padding: 10px;
+ border: 1px solid #fff;
+ display: none;
+ }
+
+ nav ul li .dropdown-menu li {
+ margin: 0;
+ padding: 0;
+ }
+
+ nav ul li .dropdown-menu li a {
+ color: #fff;
+ text-decoration: none;
+ padding: 5px;
+ }
+
+ nav ul li .dropdown-menu li a:hover {
+ background-color: white;
+ color: #444;
+ }
+
+
+ .dropdown-button {
+ background-color: #4CAF50;
+ color: #ffffff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ .dropdown-button:hover {
+ background-color: #3e8e41;
+ }
+
+ .dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background-color: #f9f9f9;
+ border: 1px solid #ccc;
+ padding: 10px;
+ width: 250px;
+ display: none;
+ z-index: 1;
+ }
+
+ .dropdown-menu li {
+ margin-bottom: 10px;
+ }
+
+ .dropdown-menu li a {
+ color: #00698f;
+ font-family: Arial, sans-serif;
+ text-decoration: none;
+ padding: 5px;
+ display: block;
+ width: 100%;
+ }
+
+ .dropdown-menu li a:hover {
+ background-color: #f0f0f0;
+ }
+
+ #scroll-up-btn {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background-color: #fdfdfd;
+ padding: 5px 10px;
+ border-color: #ffc300;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+ #accessibility-btn {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ z-index: 1000;
+ background-color: #ffc300;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+
+ #accessibility-btn img {
+ width: 3rem;
+ height: 3rem;
+
+ }
+
+ .accessibility-menu {
+ position: absolute;
+ top: 1rem; /* Adjust top position based on your button height */
+ left: 72%; /* Position the menu just outside the button */
+ width: 150px; /* Adjust width as needed */
+ background-color: #404040;
+ border-radius: 5px;
+ padding: 10px;
+ z-index: 1000; /* Ensure it's above other content */
+ transition: right 0.2s ease; /* Smooth transition */
+ cursor: pointer;
+ }
+
+ .accessibility-menu ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+
+ }
+
+ .accessibility-menu li {
+ margin-bottom: 10px;
+
+ }
+ .accessibility-menu li button:hover {
+ background-color: #f0f0f0;
+ color: #404040;
+ }
+ /* Make the buttons look like links */
+ .accessibility-menu button {
+ background-color: #404040;
+ color: white;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ /* Ensure the content is not hidden when menu is closed */
+ [aria-hidden="true"] {
+ display: none;
+ }
+
+ /* High-contrast mode */
+ .high-contrast {
+ background-color: #000;
+ color: rgb(253, 253, 253);
+
+ }
+
+ .high-contrast .alert-default{
+ background-color: #000;
+ color: rgb(253, 253, 253);
+ }
+ .high-contrast .hed{
+ background-color: #e5e500;
+ color: rgb(0, 0, 0);
+ }
+
+ .high-contrast h5{
+ background-color: #000;
+ color: rgb(253, 253, 253);
+ }
+ .high-contrast p{
+ background-color: #000;
+ color: rgb(253, 253, 253);
+ }
+ .high-contrast h7{
+ background-color: #000;
+ color: rgb(253, 253, 253);
+ }
+
+ .high-contrast .header {
+ background-color: #222; /* Darker header background */
+ }
+
+ .high-contrast .logos {
+ color: #fff; /* White logo text */
+ }
+ .high-contrast span {
+
+ color: #e5e500 ;
+ }
+ .high-contrast span:hover {
+
+ background-color: white;
+ color: #9e9e09;
+ }
+
+
+ .high-contrast .fa-code {
+ color: #e5e500 ;
+ }
+ .high-contrast .fa-edit {
+ color: #e5e500 ;
+ }
+ .high-contrast .fa-desktop {
+ color: #e5e500 ;
+ }
+
+
+
+
+