Skip to content

Commit 30f9aaa

Browse files
author
Yuliya Pazniak
committed
update styles
1 parent c10730a commit 30f9aaa

File tree

2 files changed

+100
-47
lines changed

2 files changed

+100
-47
lines changed

‎datapress/getting-started.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ By default, DataPress (Dataverse Integration) use a Wordpress `AUTH_KEY` constan
9191
- `ICDS_FORM_AUTH_KEY` - Used for safe forms processing.
9292

9393
<div class="text--center">
94-
<img src="/images/keys.png" width="700" />
94+
<img src="/images/keys.png" alt="Keys" width="700" />
9595
</div>
9696

9797
These constants can be defined in your `wp-config.php` file, for example
@@ -120,7 +120,7 @@ Go to your WordPress Admin Area and access the *Dataverse* menu. Switch to the
120120
6. Upon successful test, click **Save settings** to establish a connection to CRM
121121

122122
<div class="text--center">
123-
<img src="/images/connection.png" width="700" />
123+
<img src="/images/connection.png" alt="Connection" width="700" />
124124
</div>
125125

126126
`For OAuth 2.0 / Certificate authentication method`
@@ -185,7 +185,7 @@ If you already have a registration, you can skip this step.
185185
4. Type password name in New Application Password Name text box and click the Add New Application Password button. It will be *application password*.
186186

187187
<div class="text--center">
188-
<img src="/images/password.png" width="700" />
188+
<img src="/images/password.png" alt="Password" width="700" />
189189
</div>
190190

191191
### Configure Dataverse Solution
@@ -204,7 +204,7 @@ If you already have a registration, you can skip this step.
204204
7. Save the record (at the top of the page you will see "Successfully connected to the site" message).
205205

206206
<div class="text--center">
207-
<img src="/images/wp-site.png" width="700" />
207+
<img src="/images/wp-site.png" alt="WP-site" width="700" />
208208
</div>
209209

210210
</ExpandableSection>

‎src/css/custom.css‎

Lines changed: 96 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
1-
/**
2-
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
4-
* work well for content-centric websites.
5-
*/
6-
7-
/* You can override the default Infima variables here. */
81
:root {
9-
--ifm-color-primary: #0097E6 !important; /* Brand primary */
10-
--ifm-color-primary-dark: #0086cf;
11-
--ifm-color-primary-darker: #0079bd;
12-
--ifm-color-primary-darkest: #0069a3;
2+
--ifm-color-primary: #0077c2 !important;
3+
--ifm-color-primary-dark: #006bb0;
4+
--ifm-color-primary-darker: #005fa0;
5+
--ifm-color-primary-darkest: #004f8a;
136
--ifm-color-primary-light: #48D0FF !important;
14-
--ifm-color-primary-lighter: #48D0FF; /* Secondary */
15-
--ifm-color-primary-lightest: #7EDCFF !important; /* Divider on white */
7+
--ifm-color-primary-lighter: #48D0FF;
8+
--ifm-color-primary-lightest: #7EDCFF !important;
169

17-
--ifm-background-color: #ffffff !important; /* Background */
10+
--ifm-background-color: #ffffff !important;
11+
--ifm-font-color-base: #212121;
1812
--ifm-code-font-size: 95%;
19-
--docusaurus-highlighted-code-line-bg: rgba(0, 151, 230, 0.1);
13+
--docusaurus-highlighted-code-line-bg: rgba(0, 119, 194, 0.1);
2014
}
2115

22-
23-
/* For readability concerns, you should choose a lighter palette in dark mode. */
2416
[data-theme='dark'] {
2517
--ifm-color-primary: #48D0FF;
2618
--ifm-color-primary-dark: #3bbbe6;
@@ -31,48 +23,68 @@
3123
--ifm-color-primary-lightest: #c2f2ff;
3224

3325
--ifm-background-color: #0a1e2a;
26+
--ifm-font-color-base: #f5f5f5;
3427
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05);
3528
}
3629

37-
.split-screen { display: flex; }
38-
.left-pane, .right-pane { flex: 1; padding: 20px; overflow: auto; margin: 10px; /* Add margin to separate panes */ border: 1px solid #ccc; /* Optional: Add border for better visualization */ }
39-
.left-pane { background-color: #f0f0f0; align-self: flex-start; /* Aligns to the start of the container */ }
40-
.right-pane { background-color: #e0e0e0; align-self: flex-start; /* Aligns to the start of the container */ }
30+
/* Pane backgrounds */
31+
.left-pane {
32+
background-color: #e5e5e5;
33+
color: #212121;
34+
}
35+
.right-pane {
36+
background-color: #d5d5d5;
37+
color: #212121;
38+
}
4139

42-
/* Navbar with gradient */
40+
/* Navbar */
4341
.navbar {
44-
background: linear-gradient(135deg, #0097E6 0%, #48D0FF 100%) !important;
45-
color: white;
42+
background: linear-gradient(135deg, #0077c2 0%, #48D0FF 100%) !important;
43+
color: #ffffff;
4644
box-shadow: none;
4745
}
4846

4947
.navbar__logo {
50-
background-color: rgba(255, 255, 255, 0.8); /* under logo */
48+
background-color: rgba(255, 255, 255, 0.9);
5149
padding: 4px 8px;
5250
border-radius: 6px;
5351
}
5452

55-
/* White links and logo */
5653
.navbar__link,
5754
.navbar__title {
58-
color: white !important;
55+
color: #ffffff !important;
56+
text-decoration: none !important;
5957
}
6058

6159
.navbar__link:hover {
62-
color: #EFFAFF !important;
60+
color: #e0f7ff !important;
6361
}
6462

63+
/* Hero section */
6564
.hero--primary {
66-
background-color: var(--ifm-hero-background-color) !important;
67-
color: var(--ifm-hero-text-color) !important;
65+
background-color: var(--ifm-color-primary) !important;
66+
color: #ffffff !important;
67+
}
68+
69+
/* Content links only */
70+
article a:not(.menu__link):not(.navbar__link):not(.breadcrumbs__link):not(.menu__link--sublist) {
71+
text-decoration: underline;
72+
color: #005fa0;
73+
font-weight: 600;
6874
}
6975

70-
/* Underline all links */
71-
article a {
76+
article a:hover {
77+
color: #003f70;
78+
}
79+
80+
/* External links in paragraphs */
81+
p a[target="_blank"] {
82+
color: #005fa0 !important;
83+
font-weight: 600;
7284
text-decoration: underline;
7385
}
7486

75-
/* Add external link icon to external links */
87+
/* External link icon */
7688
article a[href^="http"]:not([href*="docs.alexacrm.com"]):after {
7789
content: "";
7890
display: inline-block;
@@ -84,40 +96,81 @@ article a[href^="http"]:not([href*="docs.alexacrm.com"]):after {
8496
mask-image: url("/img/external-link.svg");
8597
mask-repeat: no-repeat;
8698
mask-size: contain;
87-
-webkit-mask-image: url("/img/external-link.svg"); /* for Safari */
99+
-webkit-mask-image: url("/img/external-link.svg");
88100
-webkit-mask-repeat: no-repeat;
89101
-webkit-mask-size: contain;
90102
}
91103

92-
/* Collapsible block styling */
104+
/* Collapsible block */
93105
details summary {
94106
list-style: none;
95107
cursor: pointer;
96-
font-weight: 500;
108+
font-weight: 600;
97109
position: relative;
98110
padding-left: 24px;
99111
margin-bottom: 0.5rem;
112+
color: #005fa0;
113+
}
114+
115+
details summary:hover {
116+
color: #003f70;
100117
}
101118

102-
/* ► icon when collapsed */
103119
details summary::before {
104-
content: "\f0da"; /* fa-caret-square-o-right */
120+
content: "\f0da";
105121
font-family: "FontAwesome";
106122
position: absolute;
107123
left: 0;
108124
top: 0;
109125
font-size: 16px;
110126
}
111127

112-
/* ▼ icon when expanded */
113128
details[open] summary::before {
114-
content: "\f0d7"; /* fa-caret-square-o-down */
129+
content: "\f0d7";
115130
}
116131

117-
/* Optional: spacing and border for collapsible content */
118132
details {
119133
margin: 1rem 0;
120134
padding: 0.5rem 0;
121-
border-top: 1px solid #7EDCFF;
122-
border-bottom: 1px solid #7EDCFF;
135+
border-top: 1px solid #0077c2;
136+
border-bottom: 1px solid #0077c2;
137+
color: #212121;
138+
}
139+
140+
/* Menu and pagination links */
141+
.menu__link,
142+
.menu__link--active,
143+
.menu__link--sublist,
144+
.menu__list-item-collapsible > a,
145+
.pagination-nav__label,
146+
.breadcrumbs__link,
147+
span[itemprop="name"],
148+
.DocSearch-Button-Placeholder {
149+
color: #005fa0 !important;
150+
font-weight: 600;
151+
text-decoration: none !important;
152+
}
153+
154+
.menu__link:hover,
155+
.menu__link--active:hover,
156+
.menu__link--sublist:hover,
157+
.menu__list-item-collapsible > a:hover,
158+
.pagination-nav__label:hover,
159+
.breadcrumbs__link:hover,
160+
.DocSearch-Button-Placeholder:hover {
161+
color: #003f70 !important;
162+
}
163+
164+
/* Buttons */
165+
button {
166+
color: #005fa0 !important;
167+
background-color: #ffffff !important;
168+
font-weight: 600;
169+
border: 1px solid #005fa0;
170+
padding: 0.4em 0.8em;
171+
}
172+
173+
button:hover {
174+
background-color: #f0f8ff !important;
175+
color: #003f70 !important;
123176
}

0 commit comments

Comments
 (0)