danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
fix(docs): extended docs hero graphic to edge of page
author
Jeffrey Dowdle
date
(Apr 6, 2023, 3:51 PM +1000)
commit
756a8637
756a863729f0e7328cc60687e451160db5cf718f
parent
960dead0
960dead0f03be8514c9532185a77835525896eeb
+18
-9
+18
-9
docs/components/content/DocsHeroHeader.vue
+18
-9
docs/components/content/DocsHeroHeader.vue
···
40
40
}
41
41
}
42
42
43
-
.inner {
43
+
.root {
44
44
background-image: url(/assets/img/hero-graphic.png);
45
45
background-size: 449px;
46
46
background-repeat: no-repeat;
47
47
background-position: right -232px bottom -177px;
48
-
padding-top: var(--rpl-sp-9);
49
-
padding-bottom: var(--rpl-sp-11);
50
48
51
49
@media (--rpl-bp-s) {
52
50
background-size: 449px;
···
56
54
@media (--rpl-bp-m) {
57
55
background-size: 629px;
58
56
background-position: right -316px bottom -122px;
57
+
}
59
58
59
+
@media (--rpl-bp-l) {
60
+
background-size: 837px;
61
+
background-position: right -413px bottom -120px;
62
+
}
63
+
64
+
@media (--rpl-bp-xl) {
65
+
background-size: 840px;
66
+
background-position: right calc(50% - 502px) bottom -160px;
67
+
}
68
+
}
69
+
70
+
.inner {
71
+
padding-top: var(--rpl-sp-9);
72
+
padding-bottom: var(--rpl-sp-11);
73
+
74
+
@media (--rpl-bp-m) {
60
75
padding-top: var(--rpl-sp-12);
61
76
padding-bottom: var(--rpl-sp-13);
62
77
}
63
78
64
79
@media (--rpl-bp-l) {
65
-
background-size: 837px;
66
-
background-position: right -413px bottom -120px;
67
-
68
80
padding-top: var(--rpl-sp-13);
69
81
padding-bottom: 96px;
70
82
}
71
83
72
84
@media (--rpl-bp-xl) {
73
-
background-size: 840px;
74
-
background-position: right -322px bottom -160px;
75
-
76
85
padding-top: var(--rpl-sp-13);
77
86
padding-bottom: var(--rpl-sp-14);
78
87
}