feat: Europe Day theme
This commit is contained in:
parent
bb72df9914
commit
c5443ff459
GPG key ID:
ECBCC9082395383F
3 changed files with 212 additions and 0 deletions
179
assets/css/theme/europe.css
Normal file
179
assets/css/theme/europe.css
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/* Europe Day Theme */
|
||||
:root {
|
||||
--europe-blue: #003399; /* Official EU Blue */
|
||||
--europe-yellow: #FFCC00; /* Official EU Yellow */
|
||||
--bs-primary: var(--europe-blue);
|
||||
--bs-primary-rgb: 0, 51, 153;
|
||||
--bs-primary-text-emphasis: #001a4d;
|
||||
--bs-primary-bg-subtle: #e6eaf4;
|
||||
--bs-primary-border-subtle: #b3c0e8;
|
||||
--bs-primary-hover: #002a7f;
|
||||
--bs-primary-active: #002266;
|
||||
--accent-yellow: var(--europe-yellow);
|
||||
--bs-btn-color: #ffffff;
|
||||
--bs-btn-bg: var(--bs-primary);
|
||||
--bs-btn-border-color: var(--bs-primary);
|
||||
--bs-btn-hover-color: #ffffff;
|
||||
--bs-btn-hover-bg: var(--bs-primary-hover);
|
||||
--bs-btn-hover-border-color: var(--bs-primary-hover);
|
||||
--bs-btn-active-color: #ffffff;
|
||||
--bs-btn-active-bg: var(--bs-primary-active);
|
||||
--bs-btn-active-border-color: var(--bs-primary-active);
|
||||
--bs-btn-disabled-color: #ffffff;
|
||||
--bs-btn-disabled-bg: var(--bs-primary);
|
||||
--bs-btn-disabled-border-color: var(--bs-primary);
|
||||
--bs-btn-outline-color: var(--accent-yellow);
|
||||
--bs-btn-border-color-override: var(--accent-yellow);
|
||||
--bs-btn-hover-bg-override: var(--accent-yellow);
|
||||
--bs-btn-hover-color-override: var(--europe-blue);
|
||||
--bs-btn-active-bg-override: #e6b800;
|
||||
--bs-btn-active-border-color-override: #e6b800;
|
||||
--bs-btn-disabled-color-override: rgba(255, 204, 0, 0.5);
|
||||
--bs-btn-disabled-border-color-override: rgba(255, 204, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--bs-btn-color: var(--bs-btn-outline-color);
|
||||
--bs-btn-border-color: var(--bs-btn-border-color-override);
|
||||
--bs-btn-hover-color: var(--bs-btn-hover-color-override);
|
||||
--bs-btn-hover-bg: var(--bs-btn-hover-bg-override);
|
||||
--bs-btn-hover-border-color: var(--bs-btn-hover-bg-override);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color-override);
|
||||
--bs-btn-active-bg: var(--bs-btn-active-bg-override);
|
||||
--bs-btn-active-border-color: var(--bs-btn-active-border-color-override);
|
||||
--bs-btn-disabled-color: var(--bs-btn-disabled-color-override);
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: var(--bs-btn-disabled-border-color-override);
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.bg-primary-gradient {
|
||||
background-color: var(--europe-blue);
|
||||
color: #e6eaf4;
|
||||
}
|
||||
footer.bg-primary-gradient {
|
||||
background-image: none;
|
||||
}
|
||||
footer.bg-primary-gradient a {
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
footer.bg-primary-gradient a:hover {
|
||||
color: #ffee99;
|
||||
}
|
||||
footer.bg-primary-gradient .text-muted {
|
||||
color: #b3c0e8 !important;
|
||||
}
|
||||
|
||||
header.bg-primary-gradient {
|
||||
background-image: url(../../img/eu_flag.svg);
|
||||
background-color: var(--europe-blue); /* Fallback color */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
header.bg-primary-gradient h2,
|
||||
header.bg-primary-gradient p {
|
||||
color: #ffffff;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
header.bg-primary-gradient .fancy-text-primary {
|
||||
color: var(--accent-yellow);
|
||||
background: none;
|
||||
-webkit-background-clip: initial;
|
||||
background-clip: initial;
|
||||
-webkit-text-fill-color: initial;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#logoContainer {
|
||||
background-image: url(../../img/logo-white.svg);
|
||||
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-primary {
|
||||
background-color: var(--accent-yellow);
|
||||
color: var(--europe-blue);
|
||||
}
|
||||
.bs-icon.bs-icon-primary svg {
|
||||
fill: var(--europe-blue) !important;
|
||||
}
|
||||
.bs-icon-sm.bs-icon-circle.bs-icon-primary {
|
||||
background-color: var(--accent-yellow);
|
||||
}
|
||||
.bs-icon-sm.bs-icon-circle.bs-icon-primary svg {
|
||||
fill: var(--europe-blue) !important;
|
||||
}
|
||||
.homemade svg, .upstream svg, .fork svg, .members-only svg {
|
||||
fill: var(--europe-blue) !important;
|
||||
}
|
||||
.bs-icon-sm.homemade, .bs-icon-sm.upstream, .bs-icon-sm.fork, .bs-icon-sm.members-only {
|
||||
background-color: var(--accent-yellow) !important;
|
||||
border: 1px solid var(--europe-blue);
|
||||
}
|
||||
.bs-icon.bs-icon-lg svg {
|
||||
fill: var(--accent-yellow);
|
||||
}
|
||||
|
||||
section a:not(.btn), .card a:not(.btn), .alert a:not(.btn) {
|
||||
color: var(--europe-blue);
|
||||
text-decoration: underline;
|
||||
}
|
||||
section a:not(.btn):hover, .card a:not(.btn):hover, .alert a:not(.btn):hover {
|
||||
color: var(--bs-primary-hover);
|
||||
}
|
||||
|
||||
header.bg-primary-gradient a:not(.btn) {
|
||||
color: var(--accent-yellow);
|
||||
text-decoration: underline;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
header.bg-primary-gradient a:not(.btn):hover {
|
||||
color: #ffee99;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--europe-blue) !important;
|
||||
}
|
||||
.card.bg-primary-subtle {
|
||||
background-color: var(--bs-primary-bg-subtle) !important;
|
||||
border-color: var(--bs-primary-border-subtle) !important;
|
||||
color: var(--bs-primary-text-emphasis) !important;
|
||||
}
|
||||
.card.bg-primary-subtle a {
|
||||
color: var(--bs-primary-bg-subtle) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.alert-primary {
|
||||
--bs-alert-color: var(--bs-primary-text-emphasis);
|
||||
--bs-alert-bg: var(--bs-primary-bg-subtle);
|
||||
--bs-alert-border-color: var(--bs-primary-border-subtle);
|
||||
--bs-alert-link-color: var(--bs-primary-text-emphasis);
|
||||
}
|
||||
.alert-warning {
|
||||
--bs-alert-bg: #fff9e6;
|
||||
--bs-alert-border-color: #ffecb3;
|
||||
--bs-alert-color: #665200;
|
||||
}
|
||||
|
||||
.theme-toggle-container .btn {
|
||||
border-color: var(--accent-yellow);
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
.theme-toggle-container .btn:hover {
|
||||
background-color: var(--accent-yellow);
|
||||
color: var(--europe-blue);
|
||||
}
|
||||
.theme-toggle-container .btn svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.pt-xl-5 {
|
||||
padding-top: 15rem !important;
|
||||
padding-bottom: 15rem !important;
|
||||
}
|
||||
}
|
||||
27
assets/img/eu_flag.svg
Normal file
27
assets/img/eu_flag.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 900 600" width="900" height="600">
|
||||
|
||||
<defs>
|
||||
<polygon id="star" points="0,-100 29.389,-30.902 95.106,-30.902 42.863,19.098 58.779,80.902 0,40 -58.779,80.902 -42.863,19.098 -95.106,-30.902 -29.389,-30.902" fill="#FFCC00"/>
|
||||
</defs>
|
||||
|
||||
<!-- Blue background rectangle -->
|
||||
<rect width="900" height="600" fill="#003399"/>
|
||||
|
||||
<!-- Group for stars, centered and scaled -->
|
||||
<g transform="translate(450, 300) scale(0.3)">
|
||||
<use xlink:href="#star" transform="translate(0, -700)"/>
|
||||
<use xlink:href="#star" transform="translate(350, -606.21778)"/>
|
||||
<use xlink:href="#star" transform="translate(606.21778, -350)"/>
|
||||
<use xlink:href="#star" transform="translate(700, 0)"/>
|
||||
<use xlink:href="#star" transform="translate(606.21778, 350)"/>
|
||||
<use xlink:href="#star" transform="translate(350, 606.21778)"/>
|
||||
<use xlink:href="#star" transform="translate(0, 700)"/>
|
||||
<use xlink:href="#star" transform="translate(-350, 606.21778)"/>
|
||||
<use xlink:href="#star" transform="translate(-606.21778, 350)"/>
|
||||
<use xlink:href="#star" transform="translate(-700, 0)"/>
|
||||
<use xlink:href="#star" transform="translate(-606.21778, -350)"/>
|
||||
<use xlink:href="#star" transform="translate(-350, -606.21778)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -36,6 +36,12 @@
|
|||
"start": "1970-05-17",
|
||||
"end": "1970-05-17"
|
||||
},
|
||||
{
|
||||
// Europe Day
|
||||
"name": "europe",
|
||||
"start": "1970-05-05",
|
||||
"end": "1970-05-09"
|
||||
},
|
||||
{
|
||||
// Pride Month
|
||||
"name": "pride",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue