From 7548bc437503e66a4aaa79e9c755dcc39f5e8d60 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Thu, 10 Nov 2022 09:35:54 +0100
Subject: [PATCH] program buttons
---
assets/sass/_theme/design-system/nav.sass | 25 --------
assets/sass/_theme/sections/posts.sass | 2 +-
assets/sass/_theme/sections/programs.sass | 74 +++++++++++++++++------
3 files changed, 56 insertions(+), 45 deletions(-)
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 72c2091a..4873f784 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -236,31 +236,6 @@ header[role="banner"]
display: none
vertical-align: middle
-.dropdown-share
- position: relative
- > button
- @include button-icon(social)
- color: $hero-color
- border-color: $hero-color
- font-size: $program-share-font-size
- @include media-breakpoint-up(md)
- font-size: $program-share-font-size-md
- .dropdown-menu
- background: $hero-color
- padding: 0
- position: absolute
- width: 100%
- bottom: 100%
- .share
- display: flex
- li
- margin: 0
- flex: 1 1
- text-align: center
- a
- display: block
- color: invert($hero-color)
-
[aria-expanded="false"] + .dropdown-menu
display: none
diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass
index 100e1eb6..90b6dd8f 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -51,7 +51,7 @@
right: 0
top: 0
div:not(.media)
- h2,
+ h1,
p,
a
max-width: col(6, 9)
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index c6c2ffed..d050b235 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -92,27 +92,63 @@ ol.programs
// > button
// @include media-breakpoint-down(md)
// width: 100%
- .buttons
- margin-top: $spacing1
+
+ .dropdown-share
+ position: relative
+ > button
+ @include button-icon(social)
+ color: $hero-color
+ border-color: $hero-color
+ font-size: $program-share-font-size
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+ &:hover,
+ &:active,
+ &:focus
+ background: $main-background-color
+ color: $main-color
+ // a11y
+ &:active,
+ &:focus
+ box-shadow: 0 0 0 0.25rem rgba(white, .5)
@include media-breakpoint-up(md)
- bottom: 2.25rem
- margin-top: 0
- position: absolute
- right: $grid-gutter
- button, > a
+ font-size: $program-share-font-size-md
+ .dropdown-menu
+ background: $hero-color
+ padding: 0
+ position: absolute
+ width: 100%
+ bottom: 100%
+ .share
display: flex
- align-items: center
- justify-content: space-between
- width: 100%
- a[download]
- @include button-icon(download)
- color: $hero-background-color
- background: $hero-color
- border-color: $hero-color
- font-size: $program-share-font-size
- margin-top: $spacing1
- @include media-breakpoint-up(md)
- font-size: $program-share-font-size-md
+ li
+ margin: 0
+ flex: 1 1
+ text-align: center
+ a
+ display: block
+ color: invert($hero-color)
+ .buttons
+ margin-top: $spacing1
+ @include media-breakpoint-up(md)
+ bottom: 2.25rem
+ margin-top: 0
+ position: absolute
+ right: $grid-gutter
+ button, > a
+ display: flex
+ align-items: center
+ justify-content: space-between
+ width: 100%
+ a[download]
+ @include button-icon(download)
+ color: $hero-background-color
+ background: $hero-color
+ border-color: $hero-color
+ font-size: $program-share-font-size
+ margin-top: $spacing1
+ @include media-breakpoint-up(md)
+ font-size: $program-share-font-size-md
+
.lead
padding-top: $spacing2
aside
--
GitLab