From 907d2710baafd62c0dad8c7b6c0750a3a6952df2 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Tue, 2 Apr 2024 15:38:53 +0200 Subject: [PATCH] style changes --- .../assets/styles/widget/_nav-dropdown.scss | 41 ++++-- frontend/src/layouts/partials/nav.vue | 10 +- frontend/src/pages/how-to-add/index.vue | 132 ++---------------- frontend/src/pages/index.vue | 21 ++- 4 files changed, 61 insertions(+), 143 deletions(-) diff --git a/frontend/src/assets/styles/widget/_nav-dropdown.scss b/frontend/src/assets/styles/widget/_nav-dropdown.scss index f65b9434..48076f80 100644 --- a/frontend/src/assets/styles/widget/_nav-dropdown.scss +++ b/frontend/src/assets/styles/widget/_nav-dropdown.scss @@ -6,7 +6,7 @@ .b-nav-dropdown { .dropdown-menu { - background-color: #000 !important; + background-color: #fff !important; width: 290px !important; margin-top: 10px; @@ -16,16 +16,20 @@ } a { - color: white !important; + color: black !important; } li { - background-color: #000 !important; + background-color: #fff !important; } - // li:hover { - // background-color: rgb(41, 41, 41) !important; - // } + li:hover { + background-color: #fff !important; + } + + li:active { + background-color: #fff !important; + } .triangle { margin-top: -25px; @@ -40,11 +44,28 @@ } .dropdown-menu:hover { - background-color: #000 !important; + background-color: #fff !important; } /* stylelint-disable-next-line */ - ::v-deep .dropdown-item:hover { - background-color: #000 !important; - } + // ::v-deep .dropdown-item:hover { + // background-color: #fff !important; + // } +} + +@media (max-width: 747px) { +.b-nav-dropdown { + text-align: center; + .dropdown-menu { + background-color: #fff !important; + margin-top: 10px; + text-align: center; + + hr { + background-color: white !important; + margin: 0 12px; + } +} + +} } diff --git a/frontend/src/layouts/partials/nav.vue b/frontend/src/layouts/partials/nav.vue index e5d17e90..998196ac 100644 --- a/frontend/src/layouts/partials/nav.vue +++ b/frontend/src/layouts/partials/nav.vue @@ -42,13 +42,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later :to="localePath('how-to-add')" @click="$emit('hide-overlay')" > - Add + Add a webcomponent - Create + Create a webcomponent

How to add a webcomponent

Everything you need to know to - start creating your own Web Component! - In the playlist below you can explore each step from start to finish, - to develop your web component and contribute to the collection. + add a Web Component to your website! + The following videos will provide detailed instructions on adding web + components to your website, addressing specific requirements for plain + HTML, WordPress, and TYPO3 platforms.
- Start with the Boilerplate
The first step to - create your own Web Component for the Open Data Hub Web Component - Collection. + Add a webcomponent to WordPress
A + comprehensive guide and walkthrough on effortlessly selecting, + integrating, and adding a web component to a WordPress website.
- ACCESS THE BOILERPLATE -
@@ -59,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
- Hello World
Explanation of the simple - hello-world Web Component inside the Web Component Boilerplate - provided by the Open Data Hub. + Add a webcomponent to TYPO3
A comprehensive + guide and walkthrough on effortlessly selecting, integrating, and + adding a web component to a TYPO3 website.
- ACCESS THE BOILERPLATE - -
- - -
- -
- What is the manifest.json?
What is the - manifest.json file in the Web Component Boilerplate of the Open Data - Hub. -
- ACCESS THE VALIDATOR - -
-
- -
- -
- What is Webpack?
What is Webpack and how to - use it for your Web Component development process using the - Boilerplate provided by the Open Data Hub. -
- ACCESS THE WEBPACK GUIDES - -
-
- -
- -
- What is Docker?
What is Docker and how to - use it for your Web Component development process using the - Boilerplate provided by the Open Data Hub. -
- ACCESS THE DOCKER INSTALLATION GUIDE - -
-
- -
- -
- How to publish?
How to publish your Web - Component in the Open Data Hub Web Component Store. -
- ACCESS THE BOILERPLATE -
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue index 777aae10..9f5e0bcb 100644 --- a/frontend/src/pages/index.vue +++ b/frontend/src/pages/index.vue @@ -6,13 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later