├── 21-switching-themes ├── .prettierrc ├── body-class.html ├── css │ ├── body-class.css │ ├── custom-properties.css │ └── invert.css ├── custom-properties.html ├── img │ └── que-es-codelytv.png ├── invert.html └── js │ └── main.js ├── 22-css-architecture ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ └── cursos │ │ ├── arquitectura │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg ├── index.html ├── js │ └── main.js ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ └── _dropdown.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ └── _header.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── _index.scss │ ├── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss │ └── utilities │ └── _error.scss ├── 23-switch ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ └── teachers │ │ ├── teacher1.png │ │ ├── teacher2.png │ │ └── teacher3.png ├── index.html ├── js │ └── main.js ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ ├── _dropdown.scss │ └── _switch.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ └── _header.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── index.scss │ ├── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss │ └── utilities │ ├── _error.scss │ └── _sr-only.scss ├── 33-images ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ └── teachers │ │ ├── teacher1.png │ │ ├── teacher2.png │ │ └── teacher3.png ├── index.html ├── js │ └── main.js ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ ├── _dropdown.scss │ └── _switch.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ ├── _header.scss │ └── _teachers.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── index.scss │ ├── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss │ └── utilities │ ├── _error.scss │ └── _sr-only.scss ├── 41-user-preferences ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ └── teachers │ │ ├── teacher1-dark.png │ │ ├── teacher1.png │ │ ├── teacher2-dark.png │ │ ├── teacher2.png │ │ ├── teacher3-dark.png │ │ └── teacher3.png ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ └── _dropdown.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ ├── _header.scss │ └── _teachers.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── _index.scss │ ├── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _toRem.scss │ └── utilities │ ├── _error.scss │ └── _sr-only.scss ├── 42-overriding-default ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── img │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ └── icons │ │ └── caret.svg ├── index.html ├── js │ └── main.js ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ ├── _select.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ └── _dropdown.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ └── _header.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── _index.scss │ ├── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _themes.scss │ └── utilities │ ├── _error.scss │ └── _sr-only.scss ├── 43-preprocessors ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── img │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ └── icons │ │ └── caret.svg ├── index.html ├── js │ └── main.js ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ ├── _select.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ └── _dropdown.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ └── _header.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── _index.scss │ ├── tools │ ├── _justify.scss │ ├── _mixins.scss │ ├── _sidebar.scss │ └── _themes.scss │ └── utilities │ ├── _error.scss │ └── _sr-only.scss ├── 43b-preprocessors ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── cursos │ │ ├── arquitectura │ │ │ └── refactoring-bloater-code-smells.jpg │ │ ├── bash.jpg │ │ ├── buenas-practicas-bdd-cucumber-behat.jpg │ │ ├── comunicacion-microservicios.jpg │ │ ├── cqrs-event-sourcing-kotlin-axon-framework.jpg │ │ ├── curso-agile-retrospectivas.jpg │ │ ├── curso-api-http-scala.jpg │ │ ├── curso-app-mean-webpack.jpg │ │ ├── curso-app-vuejs-jest.jpg │ │ ├── curso-arquitectura-hexagonal.jpg │ │ ├── curso-aws-ec2.jpg │ │ ├── curso-aws-escalando-apps.jpg │ │ ├── curso-cqrs.jpg │ │ ├── curso-introduccion-scala.jpg │ │ ├── curso-screenshot-testing-android.jpg │ │ ├── curso-screenshot-testing-ios.jpg │ │ ├── curso-ui-testing-android.jpg │ │ ├── curso-ui-testing-ios.jpg │ │ ├── ddd-en-php.jpg │ │ ├── ddd-java.jpg │ │ ├── docker-desde-0.jpg │ │ ├── domain-driven-design.jpg │ │ ├── dotfiles.jpg │ │ ├── elastic-stack.jpg │ │ ├── git-introduccion-trabajo-en-equipo.jpg │ │ ├── github-actions-automatizacion.jpg │ │ ├── github-actions-integracion-continua.jpg │ │ ├── go-primera-app.jpg │ │ ├── grafana-prometheus.jpg │ │ ├── intellij.jpg │ │ ├── iterm-productividad.jpg │ │ ├── kubernetes-para-desarrolladores.jpg │ │ ├── layouts-css.jpg │ │ ├── makefiles.jpg │ │ ├── migracion-vuejs.jpg │ │ ├── notion.jpg │ │ ├── novedades-vue-3.jpg │ │ ├── programacion-funcional-refactor-typeclasses.jpg │ │ ├── prometheus.jpg │ │ ├── reactjs-de-0-a-deploy.jpg │ │ ├── solid.jpg │ │ ├── terminal-zsh.jpg │ │ ├── testing-introduccion-buenas-practicas.jpg │ │ ├── testing-vuex.jpg │ │ └── vistas-android.jpg │ └── icons │ │ └── caret.svg ├── index.html ├── js │ └── main.js ├── package-lock.json ├── package.json └── scss │ ├── atoms │ ├── _btn.scss │ ├── _pill.scss │ ├── _select.scss │ └── _typography.scss │ ├── elements │ ├── _body.scss │ ├── _headings.scss │ ├── _img.scss │ └── _links.scss │ ├── generic │ ├── _box-sizing.scss │ └── _normalize.scss │ ├── index.scss │ ├── molecules │ ├── _card.scss │ └── _dropdown.scss │ ├── objects │ ├── _container.scss │ └── _ui-list.scss │ ├── organisms │ ├── _courses.scss │ ├── _cta.scss │ ├── _footer.scss │ └── _header.scss │ ├── settings │ ├── _colors.scss │ ├── _layout.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _z-index.scss │ ├── theme │ └── _index.scss │ ├── tools │ ├── _functions.scss │ ├── _justify.scss │ ├── _mixins.scss │ └── _sidebar.scss │ └── utilities │ ├── _error.scss │ └── _sr-only.scss ├── 51-fodt ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.md ├── components │ ├── Logo.vue │ └── ThemeSelector.vue ├── layouts │ └── default.vue ├── middleware │ └── theme.js ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ └── index.vue ├── static │ └── favicon.ico ├── store │ └── preferences.js └── stylelint.config.js ├── 52-color-scheme ├── .prettierrc ├── css │ └── main.css ├── index.html └── js │ └── main.js ├── 53-legibility ├── .prettierrc ├── css │ └── main.css └── index.html └── README.md /21-switching-themes/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /21-switching-themes/img/que-es-codelytv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/21-switching-themes/img/que-es-codelytv.png -------------------------------------------------------------------------------- /21-switching-themes/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpThemeToggle() { 2 | const themeBtn = document.getElementById("themeToggle"); 3 | 4 | themeBtn.addEventListener("click", () => { 5 | document.documentElement.classList.toggle("dark-theme"); 6 | }); 7 | } 8 | 9 | window.onload = setUpThemeToggle(); 10 | -------------------------------------------------------------------------------- /22-css-architecture/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /22-css-architecture/README.md: -------------------------------------------------------------------------------- 1 | # CSS Architecture with themes 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/bash.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/notion.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/solid.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /22-css-architecture/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/22-css-architecture/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /22-css-architecture/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpThemeToggle() { 2 | const themeBtn = document.getElementById("themeToggle"); 3 | 4 | themeBtn.addEventListener("click", () => { 5 | document.documentElement.classList.toggle("dark-theme"); 6 | }); 7 | } 8 | 9 | window.onload = setUpThemeToggle(); 10 | -------------------------------------------------------------------------------- /22-css-architecture/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /22-css-architecture/scss/atoms/_btn.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-btn { 4 | display: inline-block; 5 | padding: 0.75rem 1.87rem; 6 | border: none; 7 | border-radius: 0.3rem; 8 | cursor: pointer; 9 | font-size: variables.$fs-btn; 10 | font-weight: 600; 11 | letter-spacing: 0.03em; 12 | text-align: center; 13 | text-decoration: none; 14 | text-transform: uppercase; 15 | transition: all 0.2s; 16 | 17 | &--block { 18 | display: block; 19 | width: 100%; 20 | } 21 | 22 | &--primary { 23 | background: variables.$primary-color; 24 | color: variables.$text-inverted-color; 25 | 26 | &:hover, 27 | &:focus { 28 | background: variables.$primary-dark-color; 29 | color: variables.$text-inverted-color; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /22-css-architecture/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /22-css-architecture/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /22-css-architecture/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /22-css-architecture/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /22-css-architecture/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /22-css-architecture/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /22-css-architecture/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /22-css-architecture/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/typography"; 22 | 23 | // Molecules 24 | @use "molecules/card"; 25 | @use "molecules/dropdown"; 26 | 27 | // Organisms 28 | @use "organisms/courses"; 29 | @use "organisms/cta"; 30 | @use "organisms/footer"; 31 | @use "organisms/header"; 32 | 33 | // Utilities 34 | @use "utilities/error"; 35 | -------------------------------------------------------------------------------- /22-css-architecture/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /22-css-architecture/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /22-css-architecture/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-courses { 4 | --courses-background-color: #{variables.$background-lighter-color}; 5 | --courses-border-color: #{variables.$border-inverted-color}; 6 | 7 | .dark-theme & { 8 | --courses-background-color: #{variables.$background-darker-color}; 9 | --courses-border-color: #{variables.$border-color}; 10 | } 11 | 12 | border-bottom: 1px solid var(--courses-border-color); 13 | background: var(--courses-background-color); 14 | 15 | &__filters { 16 | margin-bottom: 3rem; 17 | } 18 | 19 | &__grid { 20 | column-width: 18rem; 21 | gap: 1.87rem; 22 | } 23 | 24 | &__item { 25 | margin-bottom: 1.87rem; 26 | break-inside: avoid; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /22-css-architecture/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /22-css-architecture/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /22-css-architecture/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /22-css-architecture/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /22-css-architecture/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /22-css-architecture/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /22-css-architecture/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /22-css-architecture/scss/theme/_index.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | :root { 4 | --background-color: #{variables.$background-lightest-color}; 5 | --background-closer-color: #{variables.$background-light-color}; 6 | --text-color: #{variables.$text-color}; 7 | --text-muted-color: #{variables.$text-muted-color}; 8 | --brand-text-color: #{variables.$brand-text-color}; 9 | --border-color: #{variables.$border-inverted-color}; 10 | 11 | &.dark-theme { 12 | --background-color: #{variables.$background-darker-color}; 13 | --background-closer-color: #{variables.$background-dark-color}; 14 | --text-color: #{variables.$text-inverted-color}; 15 | --text-muted-color: #{variables.$text-inverted-muted-color}; 16 | --brand-text-color: #{variables.$brand-text-inverted-color}; 17 | --border-color: #{variables.$border-color}; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /22-css-architecture/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /22-css-architecture/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /22-css-architecture/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /22-css-architecture/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /22-css-architecture/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /23-switch/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /23-switch/README.md: -------------------------------------------------------------------------------- 1 | # Accessible switch 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /23-switch/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/bash.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/notion.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/solid.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /23-switch/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /23-switch/img/teachers/teacher1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/teachers/teacher1.png -------------------------------------------------------------------------------- /23-switch/img/teachers/teacher2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/teachers/teacher2.png -------------------------------------------------------------------------------- /23-switch/img/teachers/teacher3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/23-switch/img/teachers/teacher3.png -------------------------------------------------------------------------------- /23-switch/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpThemeToggle() { 2 | const themeToggle = document.getElementById("themeToggle"); 3 | 4 | themeToggle.addEventListener("change", () => { 5 | document.documentElement.classList.toggle("dark-theme"); 6 | }); 7 | } 8 | 9 | window.onload = setUpThemeToggle(); 10 | -------------------------------------------------------------------------------- /23-switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /23-switch/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /23-switch/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /23-switch/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /23-switch/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /23-switch/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | 4 | .dark-theme & { 5 | filter: opacity(0.95) saturate(90%); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /23-switch/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /23-switch/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /23-switch/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/typography"; 22 | 23 | // Molecules 24 | @use "molecules/card"; 25 | @use "molecules/dropdown"; 26 | @use "molecules/switch"; 27 | 28 | // Organisms 29 | @use "organisms/courses"; 30 | @use "organisms/cta"; 31 | @use "organisms/footer"; 32 | @use "organisms/header"; 33 | 34 | // Utilities 35 | @use "utilities/error"; 36 | @use "utilities/sr-only"; 37 | -------------------------------------------------------------------------------- /23-switch/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /23-switch/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /23-switch/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-courses { 4 | --courses-background-color: #{variables.$background-lighter-color}; 5 | --courses-border-color: #{variables.$border-inverted-color}; 6 | 7 | .dark-theme & { 8 | --courses-background-color: #{variables.$background-darker-color}; 9 | --courses-border-color: #{variables.$border-color}; 10 | } 11 | 12 | border-bottom: 1px solid var(--courses-border-color); 13 | background: var(--courses-background-color); 14 | 15 | &__filters { 16 | margin-bottom: 3rem; 17 | } 18 | 19 | &__grid { 20 | column-width: 18rem; 21 | gap: 1.87rem; 22 | } 23 | 24 | &__item { 25 | margin-bottom: 1.87rem; 26 | break-inside: avoid; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /23-switch/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /23-switch/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /23-switch/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /23-switch/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /23-switch/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /23-switch/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /23-switch/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /23-switch/scss/theme/index.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | :root { 4 | --background-color: #{variables.$background-lightest-color}; 5 | --background-closer-color: #{variables.$background-light-color}; 6 | --text-color: #{variables.$text-color}; 7 | --text-muted-color: #{variables.$text-muted-color}; 8 | --brand-text-color: #{variables.$brand-text-color}; 9 | --border-color: #{variables.$border-inverted-color}; 10 | 11 | &.dark-theme { 12 | --background-color: #{variables.$background-darker-color}; 13 | --background-closer-color: #{variables.$background-dark-color}; 14 | --text-color: #{variables.$text-inverted-color}; 15 | --text-muted-color: #{variables.$text-inverted-muted-color}; 16 | --brand-text-color: #{variables.$brand-text-inverted-color}; 17 | --border-color: #{variables.$border-color}; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /23-switch/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /23-switch/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /23-switch/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /23-switch/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /23-switch/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /23-switch/scss/utilities/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .is-sr-only { 2 | position: absolute; 3 | overflow: hidden; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | border: 0; 8 | margin: -1px; 9 | clip: rect(1px, 1px, 1px, 1px); 10 | clip-path: inset(50%); 11 | word-wrap: normal; 12 | } 13 | -------------------------------------------------------------------------------- /33-images/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /33-images/README.md: -------------------------------------------------------------------------------- 1 | # Image treatment in dark mode 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /33-images/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/bash.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/notion.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/solid.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /33-images/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /33-images/img/teachers/teacher1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/teachers/teacher1.png -------------------------------------------------------------------------------- /33-images/img/teachers/teacher2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/teachers/teacher2.png -------------------------------------------------------------------------------- /33-images/img/teachers/teacher3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/33-images/img/teachers/teacher3.png -------------------------------------------------------------------------------- /33-images/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpThemeToggle() { 2 | const themeToggle = document.getElementById("themeToggle"); 3 | 4 | themeToggle.addEventListener("change", () => { 5 | document.documentElement.classList.toggle("dark-theme"); 6 | }); 7 | } 8 | 9 | window.onload = setUpThemeToggle(); 10 | -------------------------------------------------------------------------------- /33-images/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /33-images/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /33-images/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /33-images/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /33-images/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /33-images/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | 4 | .dark-theme & { 5 | filter: opacity(0.95) saturate(90%); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /33-images/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /33-images/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /33-images/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/typography"; 22 | 23 | // Molecules 24 | @use "molecules/card"; 25 | @use "molecules/dropdown"; 26 | @use "molecules/switch"; 27 | 28 | // Organisms 29 | @use "organisms/courses"; 30 | @use "organisms/cta"; 31 | @use "organisms/footer"; 32 | @use "organisms/header"; 33 | @use "organisms/teachers"; 34 | 35 | // Utilities 36 | @use "utilities/error"; 37 | @use "utilities/sr-only"; 38 | -------------------------------------------------------------------------------- /33-images/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /33-images/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /33-images/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-courses { 4 | --courses-background-color: #{variables.$background-lighter-color}; 5 | --courses-border-color: #{variables.$border-inverted-color}; 6 | 7 | .dark-theme & { 8 | --courses-background-color: #{variables.$background-darker-color}; 9 | --courses-border-color: #{variables.$border-color}; 10 | } 11 | 12 | border-bottom: 1px solid var(--courses-border-color); 13 | background: var(--courses-background-color); 14 | 15 | &__filters { 16 | margin-bottom: 3rem; 17 | } 18 | 19 | &__grid { 20 | column-width: 18rem; 21 | gap: 1.87rem; 22 | } 23 | 24 | &__item { 25 | margin-bottom: 1.87rem; 26 | break-inside: avoid; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /33-images/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /33-images/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /33-images/scss/organisms/_teachers.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-teachers { 4 | --teachers-background-color: #{variables.$background-lighter-color}; 5 | 6 | .dark-theme & { 7 | --teachers-background-color: #{variables.$background-darker-color}; 8 | } 9 | 10 | background: var(--teachers-background-color); 11 | 12 | &__collection { 13 | display: flex; 14 | flex-wrap: wrap; 15 | justify-content: center; 16 | } 17 | 18 | &__avatar { 19 | overflow: hidden; 20 | max-width: 15rem; 21 | margin: 1rem; 22 | border-radius: 50%; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /33-images/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /33-images/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /33-images/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /33-images/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /33-images/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /33-images/scss/theme/index.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | :root { 4 | --background-color: #{variables.$background-lightest-color}; 5 | --background-closer-color: #{variables.$background-light-color}; 6 | --text-color: #{variables.$text-color}; 7 | --text-muted-color: #{variables.$text-muted-color}; 8 | --brand-text-color: #{variables.$brand-text-color}; 9 | --border-color: #{variables.$border-inverted-color}; 10 | 11 | &.dark-theme { 12 | --background-color: #{variables.$background-darker-color}; 13 | --background-closer-color: #{variables.$background-dark-color}; 14 | --text-color: #{variables.$text-inverted-color}; 15 | --text-muted-color: #{variables.$text-inverted-muted-color}; 16 | --brand-text-color: #{variables.$brand-text-inverted-color}; 17 | --border-color: #{variables.$border-color}; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /33-images/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /33-images/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /33-images/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /33-images/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /33-images/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /33-images/scss/utilities/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .is-sr-only { 2 | position: absolute; 3 | overflow: hidden; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | border: 0; 8 | margin: -1px; 9 | clip: rect(1px, 1px, 1px, 1px); 10 | clip-path: inset(50%); 11 | word-wrap: normal; 12 | } 13 | -------------------------------------------------------------------------------- /41-user-preferences/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /41-user-preferences/README.md: -------------------------------------------------------------------------------- 1 | # Respecting user preferences 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/bash.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/notion.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/solid.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /41-user-preferences/img/teachers/teacher1-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/teachers/teacher1-dark.png -------------------------------------------------------------------------------- /41-user-preferences/img/teachers/teacher1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/teachers/teacher1.png -------------------------------------------------------------------------------- /41-user-preferences/img/teachers/teacher2-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/teachers/teacher2-dark.png -------------------------------------------------------------------------------- /41-user-preferences/img/teachers/teacher2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/teachers/teacher2.png -------------------------------------------------------------------------------- /41-user-preferences/img/teachers/teacher3-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/teachers/teacher3-dark.png -------------------------------------------------------------------------------- /41-user-preferences/img/teachers/teacher3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/41-user-preferences/img/teachers/teacher3.png -------------------------------------------------------------------------------- /41-user-preferences/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /41-user-preferences/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /41-user-preferences/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /41-user-preferences/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /41-user-preferences/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /41-user-preferences/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | 4 | @media (prefers-color-scheme: dark) { 5 | filter: opacity(0.95) saturate(90%); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /41-user-preferences/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /41-user-preferences/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /41-user-preferences/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/typography"; 22 | 23 | // Molecules 24 | @use "molecules/card"; 25 | @use "molecules/dropdown"; 26 | 27 | // Organisms 28 | @use "organisms/courses"; 29 | @use "organisms/cta"; 30 | @use "organisms/footer"; 31 | @use "organisms/header"; 32 | @use "organisms/teachers"; 33 | 34 | // Utilities 35 | @use "utilities/error"; 36 | @use "utilities/sr-only"; 37 | -------------------------------------------------------------------------------- /41-user-preferences/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /41-user-preferences/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /41-user-preferences/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-courses { 4 | --courses-background-color: #{variables.$background-lighter-color}; 5 | --courses-border-color: #{variables.$border-inverted-color}; 6 | 7 | @media (prefers-color-scheme: dark) { 8 | --courses-background-color: #{variables.$background-darker-color}; 9 | --courses-border-color: #{variables.$border-color}; 10 | } 11 | 12 | border-bottom: 1px solid var(--courses-border-color); 13 | background: var(--courses-background-color); 14 | 15 | &__filters { 16 | margin-bottom: 3rem; 17 | } 18 | 19 | &__grid { 20 | column-width: 18rem; 21 | gap: 1.87rem; 22 | } 23 | 24 | &__item { 25 | margin-bottom: 1.87rem; 26 | break-inside: avoid; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /41-user-preferences/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /41-user-preferences/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /41-user-preferences/scss/organisms/_teachers.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .g-teachers { 4 | --teachers-background-color: #{variables.$background-lighter-color}; 5 | 6 | @media (prefers-color-scheme: dark) { 7 | --teachers-background-color: #{variables.$background-darker-color}; 8 | } 9 | 10 | background: var(--teachers-background-color); 11 | 12 | &__collection { 13 | display: flex; 14 | flex-wrap: wrap; 15 | justify-content: center; 16 | } 17 | 18 | &__avatar { 19 | overflow: hidden; 20 | max-width: 15rem; 21 | margin: 1rem; 22 | border-radius: 50%; 23 | 24 | img { 25 | width: 100%; 26 | height: 100%; 27 | object-fit: cover; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /41-user-preferences/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /41-user-preferences/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /41-user-preferences/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /41-user-preferences/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /41-user-preferences/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /41-user-preferences/scss/theme/_index.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | :root { 4 | --background-color: #{variables.$background-lightest-color}; 5 | --background-closer-color: #{variables.$background-light-color}; 6 | --text-color: #{variables.$text-color}; 7 | --text-muted-color: #{variables.$text-muted-color}; 8 | --brand-text-color: #{variables.$brand-text-color}; 9 | --border-color: #{variables.$border-inverted-color}; 10 | 11 | @media (prefers-color-scheme: dark) { 12 | --background-color: #{variables.$background-darker-color}; 13 | --background-closer-color: #{variables.$background-dark-color}; 14 | --text-color: #{variables.$text-inverted-color}; 15 | --text-muted-color: #{variables.$text-inverted-muted-color}; 16 | --brand-text-color: #{variables.$brand-text-inverted-color}; 17 | --border-color: #{variables.$border-color}; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /41-user-preferences/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /41-user-preferences/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /41-user-preferences/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /41-user-preferences/scss/tools/_toRem.scss: -------------------------------------------------------------------------------- 1 | @function toRem($size) { 2 | $remSize: $size / $fs-base; 3 | 4 | @return $remSize * 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /41-user-preferences/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /41-user-preferences/scss/utilities/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .is-sr-only { 2 | position: absolute; 3 | overflow: hidden; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | border: 0; 8 | margin: -1px; 9 | clip: rect(1px, 1px, 1px, 1px); 10 | clip-path: inset(50%); 11 | word-wrap: normal; 12 | } 13 | -------------------------------------------------------------------------------- /42-overriding-default/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /42-overriding-default/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /42-overriding-default/README.md: -------------------------------------------------------------------------------- 1 | # Overriding user preferences 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/bash.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/notion.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/solid.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/42-overriding-default/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /42-overriding-default/img/icons/caret.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /42-overriding-default/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpTheme() { 2 | const html = document.documentElement; 3 | const currentTheme = localStorage.getItem("theme"); 4 | const themeSelector = document.getElementById("themeSelector"); 5 | 6 | if (currentTheme) { 7 | html.classList.add(`${currentTheme}-theme`); 8 | themeSelector.value = currentTheme; 9 | } 10 | 11 | themeSelector.addEventListener("change", ({ target }) => { 12 | html.classList.remove("light-theme", "dark-theme"); 13 | const theme = target.value; 14 | 15 | if (theme === "default") { 16 | localStorage.removeItem("theme"); 17 | return; 18 | } 19 | 20 | localStorage.setItem("theme", theme); 21 | html.classList.add(`${theme}-theme`); 22 | }); 23 | } 24 | 25 | window.onload = setUpTheme(); 26 | -------------------------------------------------------------------------------- /42-overriding-default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /42-overriding-default/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /42-overriding-default/scss/atoms/_select.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-select { 4 | padding: 0.5rem 2rem 0.5rem 1rem; 5 | border: 1px solid var(--border-color); 6 | -moz-appearance: none; 7 | -webkit-appearance: none; 8 | appearance: none; 9 | background-color: #fff; 10 | background-image: url("/img/icons/caret.svg"); 11 | background-position: right 0.4rem top 50%; 12 | background-repeat: no-repeat; 13 | border-radius: 0.5em; 14 | } 15 | -------------------------------------------------------------------------------- /42-overriding-default/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /42-overriding-default/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /42-overriding-default/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /42-overriding-default/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | 4 | .dark-theme & { 5 | filter: opacity(0.95) saturate(90%); 6 | } 7 | 8 | :not(.light-theme) & { 9 | @media (prefers-color-scheme: dark) { 10 | filter: opacity(0.95) saturate(90%); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /42-overriding-default/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /42-overriding-default/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /42-overriding-default/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/select"; 22 | @use "atoms/typography"; 23 | 24 | // Molecules 25 | @use "molecules/card"; 26 | @use "molecules/dropdown"; 27 | 28 | // Organisms 29 | @use "organisms/courses"; 30 | @use "organisms/cta"; 31 | @use "organisms/footer"; 32 | @use "organisms/header"; 33 | 34 | // Utilities 35 | @use "utilities/error"; 36 | @use "utilities/sr-only"; 37 | -------------------------------------------------------------------------------- /42-overriding-default/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /42-overriding-default/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /42-overriding-default/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-courses { 5 | @include mixins.light-dark( 6 | --courses-background-color, 7 | #{variables.$background-lighter-color}, 8 | #{variables.$background-darker-color} 9 | ); 10 | @include mixins.light-dark( 11 | --courses-border-color, 12 | #{variables.$border-inverted-color}, 13 | #{variables.$border-color} 14 | ); 15 | 16 | border-bottom: 1px solid var(--courses-border-color); 17 | background: var(--courses-background-color); 18 | 19 | &__filters { 20 | margin-bottom: 3rem; 21 | } 22 | 23 | &__grid { 24 | column-width: 18rem; 25 | gap: 1.87rem; 26 | } 27 | 28 | &__item { 29 | margin-bottom: 1.87rem; 30 | break-inside: avoid; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /42-overriding-default/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /42-overriding-default/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /42-overriding-default/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /42-overriding-default/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /42-overriding-default/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /42-overriding-default/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /42-overriding-default/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /42-overriding-default/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /42-overriding-default/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | @forward "./themes"; 4 | -------------------------------------------------------------------------------- /42-overriding-default/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /42-overriding-default/scss/tools/_themes.scss: -------------------------------------------------------------------------------- 1 | @mixin light-dark($key, $light, $dark) { 2 | #{$key}: $light; 3 | 4 | .dark-theme & { 5 | #{$key}: $dark; 6 | } 7 | 8 | @media (prefers-color-scheme: dark) { 9 | #{$key}: $dark; 10 | 11 | .light-theme & { 12 | #{$key}: $light; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /42-overriding-default/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /42-overriding-default/scss/utilities/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .is-sr-only { 2 | position: absolute; 3 | overflow: hidden; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | border: 0; 8 | margin: -1px; 9 | clip: rect(1px, 1px, 1px, 1px); 10 | clip-path: inset(50%); 11 | word-wrap: normal; 12 | } 13 | -------------------------------------------------------------------------------- /43-preprocessors/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /43-preprocessors/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /43-preprocessors/README.md: -------------------------------------------------------------------------------- 1 | # Preprocessors 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/bash.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/notion.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/solid.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43-preprocessors/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /43-preprocessors/img/icons/caret.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /43-preprocessors/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpTheme() { 2 | const html = document.documentElement; 3 | const currentTheme = localStorage.getItem("theme"); 4 | const themeSelector = document.getElementById("themeSelector"); 5 | 6 | if (currentTheme) { 7 | html.classList.add(`${currentTheme}-theme`); 8 | themeSelector.value = currentTheme; 9 | } 10 | 11 | themeSelector.addEventListener("change", ({ target }) => { 12 | html.classList.remove("light-theme", "dark-theme"); 13 | const theme = target.value; 14 | 15 | if (theme === "default") { 16 | localStorage.removeItem("theme"); 17 | return; 18 | } 19 | 20 | localStorage.setItem("theme", theme); 21 | html.classList.add(`${theme}-theme`); 22 | }); 23 | } 24 | 25 | window.onload = setUpTheme(); 26 | -------------------------------------------------------------------------------- /43-preprocessors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /43-preprocessors/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /43-preprocessors/scss/atoms/_select.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-select { 4 | padding: 0.5rem 2rem 0.5rem 1rem; 5 | border: 1px solid var(--border-color); 6 | -moz-appearance: none; 7 | -webkit-appearance: none; 8 | appearance: none; 9 | background-color: #fff; 10 | background-image: url("/img/icons/caret.svg"); 11 | background-position: right 0.4rem top 50%; 12 | background-repeat: no-repeat; 13 | border-radius: 0.5em; 14 | } 15 | -------------------------------------------------------------------------------- /43-preprocessors/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /43-preprocessors/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /43-preprocessors/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /43-preprocessors/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | 4 | .dark-theme & { 5 | filter: opacity(0.95) saturate(90%); 6 | } 7 | 8 | :not(.light-theme) & { 9 | @media (prefers-color-scheme: dark) { 10 | filter: opacity(0.95) saturate(90%); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /43-preprocessors/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /43-preprocessors/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /43-preprocessors/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/select"; 22 | @use "atoms/typography"; 23 | 24 | // Molecules 25 | @use "molecules/card"; 26 | @use "molecules/dropdown"; 27 | 28 | // Organisms 29 | @use "organisms/courses"; 30 | @use "organisms/cta"; 31 | @use "organisms/footer"; 32 | @use "organisms/header"; 33 | 34 | // Utilities 35 | @use "utilities/error"; 36 | @use "utilities/sr-only"; 37 | -------------------------------------------------------------------------------- /43-preprocessors/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /43-preprocessors/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /43-preprocessors/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-courses { 5 | @include mixins.light-dark( 6 | --courses-background-color, 7 | #{variables.$background-lighter-color}, 8 | #{variables.$background-darker-color} 9 | ); 10 | @include mixins.light-dark( 11 | --courses-border-color, 12 | #{variables.$border-inverted-color}, 13 | #{variables.$border-color} 14 | ); 15 | 16 | border-bottom: 1px solid var(--courses-border-color); 17 | background: var(--courses-background-color); 18 | 19 | &__filters { 20 | margin-bottom: 3rem; 21 | } 22 | 23 | &__grid { 24 | column-width: 18rem; 25 | gap: 1.87rem; 26 | } 27 | 28 | &__item { 29 | margin-bottom: 1.87rem; 30 | break-inside: avoid; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /43-preprocessors/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /43-preprocessors/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /43-preprocessors/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /43-preprocessors/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /43-preprocessors/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /43-preprocessors/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /43-preprocessors/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /43-preprocessors/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /43-preprocessors/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | @forward "./themes"; 4 | -------------------------------------------------------------------------------- /43-preprocessors/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /43-preprocessors/scss/tools/_themes.scss: -------------------------------------------------------------------------------- 1 | @mixin light-dark($key, $light, $dark) { 2 | #{$key}: $light; 3 | 4 | .dark-theme & { 5 | #{$key}: $dark; 6 | } 7 | 8 | @media (prefers-color-scheme: dark) { 9 | #{$key}: $dark; 10 | 11 | .light-theme & { 12 | #{$key}: $light; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /43-preprocessors/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /43-preprocessors/scss/utilities/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .is-sr-only { 2 | position: absolute; 3 | overflow: hidden; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | border: 0; 8 | margin: -1px; 9 | clip: rect(1px, 1px, 1px, 1px); 10 | clip-path: inset(50%); 11 | word-wrap: normal; 12 | } 13 | -------------------------------------------------------------------------------- /43b-preprocessors/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /43b-preprocessors/README.md: -------------------------------------------------------------------------------- 1 | # Preprocessors 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/arquitectura/refactoring-bloater-code-smells.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/bash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/bash.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/buenas-practicas-bdd-cucumber-behat.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/comunicacion-microservicios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/comunicacion-microservicios.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/cqrs-event-sourcing-kotlin-axon-framework.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-agile-retrospectivas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-agile-retrospectivas.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-api-http-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-api-http-scala.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-app-mean-webpack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-app-mean-webpack.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-app-vuejs-jest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-app-vuejs-jest.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-arquitectura-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-arquitectura-hexagonal.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-aws-ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-aws-ec2.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-aws-escalando-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-aws-escalando-apps.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-cqrs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-cqrs.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-introduccion-scala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-introduccion-scala.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-screenshot-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-screenshot-testing-android.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-screenshot-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-screenshot-testing-ios.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-ui-testing-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-ui-testing-android.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/curso-ui-testing-ios.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/curso-ui-testing-ios.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/ddd-en-php.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/ddd-en-php.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/ddd-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/ddd-java.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/docker-desde-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/docker-desde-0.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/domain-driven-design.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/dotfiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/dotfiles.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/elastic-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/elastic-stack.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/git-introduccion-trabajo-en-equipo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/git-introduccion-trabajo-en-equipo.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/github-actions-automatizacion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/github-actions-automatizacion.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/github-actions-integracion-continua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/github-actions-integracion-continua.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/go-primera-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/go-primera-app.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/grafana-prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/grafana-prometheus.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/intellij.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/intellij.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/iterm-productividad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/iterm-productividad.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/kubernetes-para-desarrolladores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/kubernetes-para-desarrolladores.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/layouts-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/layouts-css.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/makefiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/makefiles.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/migracion-vuejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/migracion-vuejs.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/notion.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/novedades-vue-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/novedades-vue-3.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/programacion-funcional-refactor-typeclasses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/programacion-funcional-refactor-typeclasses.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/prometheus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/prometheus.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/reactjs-de-0-a-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/reactjs-de-0-a-deploy.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/solid.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/terminal-zsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/terminal-zsh.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/testing-introduccion-buenas-practicas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/testing-introduccion-buenas-practicas.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/testing-vuex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/testing-vuex.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/cursos/vistas-android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/43b-preprocessors/img/cursos/vistas-android.jpg -------------------------------------------------------------------------------- /43b-preprocessors/img/icons/caret.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /43b-preprocessors/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpTheme() { 2 | const html = document.documentElement; 3 | const currentTheme = localStorage.getItem("theme"); 4 | const themeSelector = document.getElementById("themeSelector"); 5 | 6 | if (currentTheme) { 7 | html.classList.add(`${currentTheme}-theme`); 8 | themeSelector.value = currentTheme; 9 | } 10 | 11 | themeSelector.addEventListener("change", ({ target }) => { 12 | html.classList.remove("light-theme", "dark-theme"); 13 | const theme = target.value; 14 | 15 | if (theme === "default") { 16 | localStorage.removeItem("theme"); 17 | return; 18 | } 19 | 20 | localStorage.setItem("theme", theme); 21 | html.classList.add(`${theme}-theme`); 22 | }); 23 | } 24 | 25 | window.onload = setUpTheme(); 26 | -------------------------------------------------------------------------------- /43b-preprocessors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dark-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/atoms/_pill.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-pill { 4 | display: inline-block; 5 | padding: 0.5rem 0.65rem; 6 | background: variables.$background-darker-color; 7 | border-radius: 50px; 8 | color: variables.$text-inverted-color; 9 | font-size: variables.$fs-pill; 10 | font-weight: 700; 11 | letter-spacing: 0.5px; 12 | text-align: center; 13 | text-transform: uppercase; 14 | } 15 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/atoms/_select.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-select { 4 | padding: 0.5rem 2rem 0.5rem 1rem; 5 | border: 1px solid var(--border-color); 6 | -moz-appearance: none; 7 | -webkit-appearance: none; 8 | appearance: none; 9 | background-color: #fff; 10 | background-image: url("/img/icons/caret.svg"); 11 | background-position: right 0.4rem top 50%; 12 | background-repeat: no-repeat; 13 | border-radius: 0.5em; 14 | } 15 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .a-lead { 4 | font-size: variables.$fs-lead; 5 | line-height: 1.65; 6 | } 7 | 8 | .a-title { 9 | font-size: variables.$fs-title-l; 10 | } 11 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/elements/_body.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | body { 4 | background: var(--background-color); 5 | color: var(--text-color); 6 | font-family: variables.$font-family; 7 | font-size: variables.$fs-body; 8 | line-height: 1.8; 9 | } 10 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 300; 7 | line-height: 1.13; 8 | } 9 | 10 | h1 { 11 | font-size: variables.$fs-title-l; 12 | } 13 | 14 | h2 { 15 | font-size: variables.$fs-title-m; 16 | } 17 | 18 | h3 { 19 | font-size: variables.$fs-title-s; 20 | } 21 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/elements/_img.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | 4 | .dark-theme & { 5 | filter: opacity(0.95) saturate(90%); 6 | } 7 | 8 | :not(.light-theme) & { 9 | @media (prefers-color-scheme: dark) { 10 | filter: opacity(0.95) saturate(90%); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/elements/_links.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | a { 4 | color: variables.$primary-color; 5 | text-decoration: underline; 6 | 7 | &:hover, 8 | &:focus { 9 | color: variables.$primary-dark-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/index.scss: -------------------------------------------------------------------------------- 1 | // Generic 2 | @use "generic/normalize"; 3 | @use "generic/box-sizing"; 4 | 5 | // Theme 6 | @use "theme"; 7 | 8 | // Elements 9 | @use "elements/body"; 10 | @use "elements/headings"; 11 | @use "elements/img"; 12 | @use "elements/links"; 13 | 14 | // Objects 15 | @use "objects/container"; 16 | @use "objects/ui-list"; 17 | 18 | // Atoms 19 | @use "atoms/btn"; 20 | @use "atoms/pill"; 21 | @use "atoms/select"; 22 | @use "atoms/typography"; 23 | 24 | // Molecules 25 | @use "molecules/card"; 26 | @use "molecules/dropdown"; 27 | 28 | // Organisms 29 | @use "organisms/courses"; 30 | @use "organisms/cta"; 31 | @use "organisms/footer"; 32 | @use "organisms/header"; 33 | 34 | // Utilities 35 | @use "utilities/error"; 36 | @use "utilities/sr-only"; 37 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | 3 | .o-container { 4 | max-width: variables.$max-width; 5 | padding: variables.$spacing variables.$spacing-s; 6 | margin: 0 auto; 7 | } 8 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/objects/_ui-list.scss: -------------------------------------------------------------------------------- 1 | .o-ui-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | 6 | &--horizontal { 7 | display: flex; 8 | flex-wrap: wrap; 9 | align-items: center; 10 | gap: 1rem; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/organisms/_courses.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/functions"; 3 | 4 | .g-courses { 5 | --courses-background-color: 6 | #{functions.light-dark( 7 | variables.$background-lighter-color, 8 | variables.$background-darker-color 9 | )}; 10 | --courses-border-color: 11 | #{functions.light-dark( 12 | variables.$border-inverted-color, 13 | variables.$border-color 14 | )}; 15 | 16 | border-bottom: 1px solid var(--courses-border-color); 17 | background: var(--courses-background-color); 18 | 19 | &__filters { 20 | margin-bottom: 3rem; 21 | } 22 | 23 | &__grid { 24 | column-width: 18rem; 25 | gap: 1.87rem; 26 | } 27 | 28 | &__item { 29 | margin-bottom: 1.87rem; 30 | break-inside: avoid; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/organisms/_cta.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-cta { 5 | @include mixins.justify; 6 | 7 | padding-top: variables.$spacing-l; 8 | padding-bottom: variables.$spacing-l; 9 | 10 | &__title { 11 | margin: 0; 12 | font-size: variables.$fs-lead; 13 | font-weight: 400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/organisms/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../settings/variables"; 2 | @use "../tools/mixins"; 3 | 4 | .g-footer { 5 | background: var(--background-closer-color); 6 | 7 | &__links { 8 | @include mixins.justify; 9 | 10 | font-size: variables.$fs-footer; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | 14 | svg { 15 | max-width: 1rem; 16 | margin-left: 0.5rem; 17 | fill: var(--text-muted-color); 18 | } 19 | } 20 | 21 | &__legal { 22 | padding-bottom: variables.$spacing-l; 23 | border-top: 1px solid rgba(variables.$border-color, 0.5); 24 | } 25 | 26 | a { 27 | color: var(--text-muted-color); 28 | opacity: 0.7; 29 | text-decoration: none; 30 | transition: all 0.2s; 31 | 32 | &:hover, 33 | &:focus { 34 | color: var(--text-muted-color); 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $_eucalyptus: #289f5f; 2 | $_green-pea: #19623b; 3 | $_pickled-bluewood: #2d4358; 4 | $_baltic-sea: #282729; 5 | $_cod-gray: #181818; 6 | $_dove-gray: #666; 7 | $_boulder: #777; 8 | $_white: #fff; 9 | $_alabaster: #f9f9f9; 10 | $_gallery: #ececec; 11 | $_alto: #d3d3d3; 12 | 13 | $primary-color: $_eucalyptus; 14 | $primary-dark-color: $_green-pea; 15 | $brand-text-color: $_pickled-bluewood; 16 | $brand-text-inverted-color: $_alto; 17 | 18 | $background-dark-color: $_baltic-sea; 19 | $background-darker-color: $_cod-gray; 20 | $background-light-color: $_gallery; 21 | $background-lighter-color: $_alabaster; 22 | $background-lightest-color: $_white; 23 | 24 | $text-color: $_cod-gray; 25 | $text-muted-color: $_dove-gray; 26 | $text-inverted-color: $_white; 27 | $text-inverted-muted-color: $_gallery; 28 | 29 | $border-color: $_dove-gray; 30 | $border-inverted-color: $_gallery; 31 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/settings/_layout.scss: -------------------------------------------------------------------------------- 1 | $max-width: 71.25rem; 2 | 3 | // Spacing 4 | $spacing-s: 1rem; 5 | $spacing: 1.6rem; 6 | $spacing-l: 3.25rem; 7 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/settings/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Open Sans", sans-serif; 2 | 3 | // Typography scale 4 | $fs-base: 16; 5 | 6 | $_fs-9: 9 / $fs-base + rem; 7 | $_fs-12: 12 / $fs-base + rem; 8 | $_fs-14: 14 / $fs-base + rem; 9 | $_fs-19: 19 / $fs-base + rem; 10 | $_fs-25: 25 / $fs-base + rem; 11 | $_fs-33: 33 / $fs-base + rem; 12 | $_fs-44: 44 / $fs-base + rem; 13 | 14 | // Typography applications 15 | $fs-pill: $_fs-9; 16 | $fs-btn: $_fs-12; 17 | $fs-footer: $_fs-12; 18 | $fs-menu: $_fs-14; 19 | $fs-body: $_fs-14; 20 | $fs-lead: $_fs-19; 21 | $fs-title-s: $_fs-25; 22 | $fs-title-m: $_fs-33; 23 | $fs-title-l: $_fs-44; 24 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | @forward "./colors"; 2 | @forward "./layout"; 3 | @forward "./typography"; 4 | @forward "./z-index"; 5 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/settings/_z-index.scss: -------------------------------------------------------------------------------- 1 | $_z1: 1; 2 | $_z2: 2; 3 | $_z3: 3; 4 | $_z4: 4; 5 | $_z5: 5; 6 | $_z6: 6; 7 | $_z7: 7; 8 | $_z8: 8; 9 | $_z9: 9; 10 | $_z10: 10; 11 | 12 | $z-menu: $_z9; 13 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/tools/_functions.scss: -------------------------------------------------------------------------------- 1 | @function light-dark($light, $dark) { 2 | @return var(--light, #{$light}) var(--dark, #{$dark}); 3 | } 4 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/tools/_justify.scss: -------------------------------------------------------------------------------- 1 | @mixin justify($vertical-align: center) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: $vertical-align; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | @forward "./justify"; 2 | @forward "./sidebar"; 3 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/tools/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar( 2 | $sidebar-position: "last-child", 3 | $side-width: auto, 4 | $min-width: 50%, 5 | $gap: 1rem 6 | ) { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: $gap; 10 | 11 | > * { 12 | flex-basis: $side-width; 13 | flex-grow: 1; 14 | } 15 | 16 | > :#{$sidebar-position} { 17 | min-width: $min-width; 18 | flex-basis: 0; 19 | flex-grow: 999; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/utilities/_error.scss: -------------------------------------------------------------------------------- 1 | .is-error { 2 | color: tomato !important; 3 | } 4 | -------------------------------------------------------------------------------- /43b-preprocessors/scss/utilities/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .is-sr-only { 2 | position: absolute; 3 | overflow: hidden; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | border: 0; 8 | margin: -1px; 9 | clip: rect(1px, 1px, 1px, 1px); 10 | clip-path: inset(50%); 11 | word-wrap: normal; 12 | } 13 | -------------------------------------------------------------------------------- /51-fodt/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /51-fodt/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint', 9 | }, 10 | extends: [ 11 | '@nuxtjs', 12 | 'prettier', 13 | 'prettier/vue', 14 | 'plugin:prettier/recommended', 15 | 'plugin:nuxt/recommended', 16 | ], 17 | plugins: ['prettier'], 18 | // add your custom rules here 19 | rules: {}, 20 | } 21 | -------------------------------------------------------------------------------- /51-fodt/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /51-fodt/README.md: -------------------------------------------------------------------------------- 1 | # light-dark-mode 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ npm install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ npm run dev 11 | 12 | # build for production and launch server 13 | $ npm run build 14 | $ npm run start 15 | 16 | # generate static project 17 | $ npm run generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 21 | -------------------------------------------------------------------------------- /51-fodt/components/ThemeSelector.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | -------------------------------------------------------------------------------- /51-fodt/middleware/theme.js: -------------------------------------------------------------------------------- 1 | import cookieUniversal from 'cookie-universal' 2 | 3 | export default ({ req, res, store }) => { 4 | const cookies = cookieUniversal(req, res) 5 | 6 | store.commit('preferences/setTheme', cookies.get('theme') || 'default') 7 | } 8 | -------------------------------------------------------------------------------- /51-fodt/pages/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | 25 | -------------------------------------------------------------------------------- /51-fodt/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-light-dark-mode-course/c217add10a1cada094a78db97943e0e0d10710d6/51-fodt/static/favicon.ico -------------------------------------------------------------------------------- /51-fodt/store/preferences.js: -------------------------------------------------------------------------------- 1 | import cookieUniversal from 'cookie-universal' 2 | 3 | const cookies = cookieUniversal() 4 | 5 | export const state = () => ({ 6 | theme: null, 7 | }) 8 | 9 | export const mutations = { 10 | setTheme(state, theme) { 11 | state.theme = theme 12 | }, 13 | } 14 | 15 | export const actions = { 16 | setTheme(app, theme) { 17 | app.commit('setTheme', theme) 18 | cookies.set('theme', theme) 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /51-fodt/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['stylelint-config-standard', 'stylelint-config-prettier'], 3 | plugins: ['stylelint-scss'], 4 | // add your custom config here 5 | // https://stylelint.io/user-guide/configuration 6 | rules: { 7 | 'at-rule-no-unknown': null, 8 | 'scss/at-rule-no-unknown': true, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /52-color-scheme/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /52-color-scheme/js/main.js: -------------------------------------------------------------------------------- 1 | function setUpForm() { 2 | const form = document.getElementById("login"); 3 | 4 | form.addEventListener("submit", (ev) => { 5 | ev.preventDefault(); 6 | }); 7 | } 8 | 9 | window.onload = setUpForm(); 10 | -------------------------------------------------------------------------------- /53-legibility/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Accessible Light & Dark themes 2 | 3 | Code examples for [the course at pro.codely.tv](https://pro.codely.tv/library/light-dark-themes-accesibles/) --------------------------------------------------------------------------------