Skip to content

Commit 5e2349e

Browse files
edwiniedwini
committed
css changes main landing
1 parent a831f90 commit 5e2349e

File tree

2 files changed

+127
-28
lines changed

2 files changed

+127
-28
lines changed

‎src/css/helios-gcx.css‎

Lines changed: 102 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ ul#ds_sites_list li a:active {
152152

153153
.navbar-end__group {
154154
margin: 12px 0 0 0;
155-
justify-content: end;
155+
justify-content: space-between;
156156
}
157157

158158
.navbar-end {
@@ -301,6 +301,16 @@ ul#ds_sites_list li a:active {
301301

302302
/*Card Styles*/
303303

304+
.doc .imageblock {
305+
grid-row-start: 1;
306+
align-items: start;
307+
margin-top: 0;
308+
}
309+
310+
.doc .content {
311+
display: grid;
312+
}
313+
304314
.helios-card.mdc-card--outlined {
305315
margin-top: 4rem;
306316
}
@@ -322,10 +332,6 @@ feedback-stars {
322332
text-align: left;
323333
}
324334

325-
.doc .imageblock {
326-
align-items: flex-end;
327-
}
328-
329335
.doc pre:not(.highlight),
330336
.doc pre.highlight code {
331337
font-size: 14px;
@@ -381,7 +387,7 @@ schema#gcx-schema {
381387
padding: 0 0 0 20px;
382388
}
383389

384-
.doc .paragraph {
390+
.doc .sect1 .paragraph {
385391
padding: 0 1rem;
386392
}
387393

@@ -708,13 +714,95 @@ gcx-schema-topbar {
708714
}
709715

710716

711-
/* Switch Dark Mode */
717+
/* Switch/toggle Dark-Light Mode */
712718

713719
.doc-link {
714720
display: flex;
721+
align-items: center;
722+
}
723+
724+
.navbar-switch {
725+
margin-left: 20px;
726+
margin-right: 2px;
727+
}
728+
729+
.switch_label {
730+
position: relative;
731+
display: inline-block;
732+
width: 60px;
733+
height: 30px;
734+
}
735+
736+
.switch_label input {
737+
display: none;
738+
}
739+
740+
.slider {
741+
box-shadow: 0 0 0 2px #ebebeb;
742+
position: absolute;
743+
cursor: pointer;
744+
top: 0;
745+
left: 0;
746+
right: 0;
747+
bottom: 0;
748+
display: flex;
749+
justify-content: space-around;
750+
border-radius: 6px;
751+
background-color: #ebebeb;
752+
align-items: center;
753+
-webkit-transition: .4s;
754+
transition: .4s;
755+
}
756+
757+
.slider:before {
758+
border-radius: 6px 0 0 6px;
759+
position: absolute;
760+
content: "";
761+
height: 30px;
762+
width: 30px;
763+
left: 0;
764+
bottom: 0;
765+
z-index: 1;
766+
background: white;
767+
-webkit-transition: .4s;
768+
transition: .4s;
715769
}
716770

717-
.switch[type=checkbox] {
771+
.slider svg {
772+
z-index: 2;
773+
}
774+
775+
776+
/* Not Checked */
777+
778+
input.switch+.slider svg:nth-of-type(1) path {
779+
fill: var(--blue);
780+
}
781+
782+
input.switch+.slider svg:nth-of-type(2) path {
783+
fill: #74767b;
784+
}
785+
786+
787+
/*Checked*/
788+
789+
input.switch:checked+.slider svg:nth-of-type(1) path {
790+
fill: #74767b;
791+
}
792+
793+
input.switch:checked+.slider svg:nth-of-type(2) path {
794+
fill: var(--blue);
795+
}
796+
797+
input.switch:checked+.slider:before {
798+
border-radius: 0 6px 6px 0;
799+
-webkit-transform: translateX(30px);
800+
-ms-transform: translateX(30px);
801+
transform: translateX(30px);
802+
}
803+
804+
805+
/*.switch[type=checkbox] {
718806
height: 0;
719807
width: 0;
720808
visibility: hidden;
@@ -747,22 +835,25 @@ label.switch_label:after {
747835
}
748836
749837
.switch[type="checkbox"]+label {
750-
background-image: url(../img/moon.svg);
838+
background-image: url(../img/light_mode.svg);
751839
height: 40px;
752840
width: 40px;
753841
display: inline-block;
754842
z-index: 1;
843+
background-size: contain;
755844
}
756845
757846
.switch[type="checkbox"]:checked+label {
758-
background-image: url(../img/sun.svg);
847+
background-image: url(../img/dark_mode.svg);
759848
height: 40px;
760849
width: 40px;
761850
display: inline-block;
851+
background-size: contain;
762852
}
853+
*/
763854

764855

765-
/*Dark mode: Mobile Header */
856+
/* === Dark mode: Mobile Header === */
766857

767858

768859
/* gcx-schema-sample-app-gallery */

‎src/partials/header-content.hbs‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<nav class="navbar">
44
<div class="navbar-brand">
55
<a href="{{{or site.url (or siteRootUrl siteRootPath)}}}">
6-
<img src="{{{uiRootPath}}}/img/logo.png" alt=""> </a>
6+
<img src="{{{uiRootPath}}}/img/logo.png" alt="">
7+
</a>
78
<button class="navbar-burger" data-target="topbar-nav">
89
<span></span>
910
<span></span>
@@ -12,35 +13,42 @@
1213
</div>
1314
<div id="topbar-nav" class="navbar-menu">
1415
<div class="navbar-end">
15-
<div class="doc-link">
16+
<div class="doc-link">
1617
<ul id="ds_sites_list">
1718
<li><a href="/en/glossary/docs" target="_blank">Glossary</a></li>
1819
<li><a href="https://support.datastax.com/" target="_blank">Support</a></li>
1920
<li><a href="https://downloads.datastax.com/" target="_blank">Downloads</a></li>
2021
<li><a href="https://www.datastax.com/" target="_self">DataStax Home</a></li>
2122
</ul>
22-
<div class="navbar-end">
23-
<input type="checkbox" name="switch" class="switch" id="switch"/><label class="switch_label" for="switch"></label>
23+
<div class="navbar-end navbar-switch">
24+
<label class="switch_label" for="switch">
25+
<input type="checkbox" name="switch" class="switch" id="switch">
26+
<span class="slider">
27+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
28+
<path d="M12 9C13.65 9 15 10.35 15 12C15 13.65 13.65 15 12 15C10.35 15 9 13.65 9 12C9 10.35 10.35 9 12 9ZM12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM2 13H4C4.55 13 5 12.55 5 12C5 11.45 4.55 11 4 11H2C1.45 11 1 11.45 1 12C1 12.55 1.45 13 2 13ZM20 13H22C22.55 13 23 12.55 23 12C23 11.45 22.55 11 22 11H20C19.45 11 19 11.45 19 12C19 12.55 19.45 13 20 13ZM11 2V4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4V2C13 1.45 12.55 1 12 1C11.45 1 11 1.45 11 2ZM11 20V22C11 22.55 11.45 23 12 23C12.55 23 13 22.55 13 22V20C13 19.45 12.55 19 12 19C11.45 19 11 19.45 11 20ZM5.99 4.58C5.6 4.19 4.96 4.19 4.58 4.58C4.19 4.97 4.19 5.61 4.58 5.99L5.64 7.05C6.03 7.44 6.67 7.44 7.05 7.05C7.43 6.66 7.44 6.02 7.05 5.64L5.99 4.58ZM18.36 16.95C17.97 16.56 17.33 16.56 16.95 16.95C16.56 17.34 16.56 17.98 16.95 18.36L18.01 19.42C18.4 19.81 19.04 19.81 19.42 19.42C19.81 19.03 19.81 18.39 19.42 18.01L18.36 16.95ZM19.42 5.99C19.81 5.6 19.81 4.96 19.42 4.58C19.03 4.19 18.39 4.19 18.01 4.58L16.95 5.64C16.56 6.03 16.56 6.67 16.95 7.05C17.34 7.43 17.98 7.44 18.36 7.05L19.42 5.99ZM7.05 18.36C7.44 17.97 7.44 17.33 7.05 16.95C6.66 16.56 6.02 16.56 5.64 16.95L4.58 18.01C4.19 18.4 4.19 19.04 4.58 19.42C4.97 19.8 5.61 19.81 5.99 19.42L7.05 18.36Z" fill="#20293A"/>
29+
</svg>
30+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
31+
<path d="M9.37 5.51C9.19 6.15 9.1 6.82 9.1 7.5C9.1 11.58 12.42 14.9 16.5 14.9C17.18 14.9 17.85 14.81 18.49 14.63C17.45 17.19 14.93 19 12 19C8.14 19 5 15.86 5 12C5 9.07 6.81 6.55 9.37 5.51ZM12 3C7.03 3 3 7.03 3 12C3 16.97 7.03 21 12 21C16.97 21 21 16.97 21 12C21 11.54 20.96 11.08 20.9 10.64C19.92 12.01 18.32 12.9 16.5 12.9C13.52 12.9 11.1 10.48 11.1 7.5C11.1 5.69 11.99 4.08 13.36 3.1C12.92 3.04 12.46 3 12 3Z" fill="#20293A"/>
32+
</svg>
33+
</span>
34+
</label>
2435
</div>
2536
</div>
26-
2737
<div class="navbar-end__group">
2838
<form id="alg-search-form" class="ds-search-form" action="https://www.datastax.com/search" target="_blank" method="GET">
29-
<div>
30-
<div class="ds-search-input-icon">
31-
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
32-
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 11.1326C9.04048 11.9373 7.74289 12.4167 6.33333 12.4167C2.9736 12.4167 0.25 9.69307 0.25 6.33333C0.25 2.9736 2.9736 0.25 6.33333 0.25C9.69307 0.25 12.4167 2.9736 12.4167 6.33333C12.4167 7.74289 11.9373 9.04048 11.1326 10.0719L13.5303 12.4696C13.8232 12.7625 13.8232 13.2374 13.5303 13.5303C13.2374 13.8232 12.7625 13.8232 12.4696 13.5303L10.0719 11.1326ZM1.75 6.33333C1.75 3.80203 3.80203 1.75 6.33333 1.75C8.86464 1.75 10.9167 3.80203 10.9167 6.33333C10.9167 7.56591 10.4301 8.68485 9.63861 9.50857C9.6147 9.52728 9.59166 9.54763 9.56965 9.56965C9.54763 9.59166 9.52728 9.6147 9.50857 9.63861C8.68485 10.4301 7.56591 10.9167 6.33333 10.9167C3.80203 10.9167 1.75 8.86464 1.75 6.33333Z" fill="#5C6A85"/>
33-
</svg>
34-
<input id="alg-search-input" class="ds-datastax-search-input" type="text" name="query" placeholder="Search"/>
35-
</div>
36-
<button id="alg-search-button" class="ds-search-button" type="submit" style="display: none"></button>
37-
<input id="dataset" type="hidden" name="dataset" value="docs"/>
38-
</div>
39+
<div>
40+
<div class="ds-search-input-icon">
41+
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
42+
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 11.1326C9.04048 11.9373 7.74289 12.4167 6.33333 12.4167C2.9736 12.4167 0.25 9.69307 0.25 6.33333C0.25 2.9736 2.9736 0.25 6.33333 0.25C9.69307 0.25 12.4167 2.9736 12.4167 6.33333C12.4167 7.74289 11.9373 9.04048 11.1326 10.0719L13.5303 12.4696C13.8232 12.7625 13.8232 13.2374 13.5303 13.5303C13.2374 13.8232 12.7625 13.8232 12.4696 13.5303L10.0719 11.1326ZM1.75 6.33333C1.75 3.80203 3.80203 1.75 6.33333 1.75C8.86464 1.75 10.9167 3.80203 10.9167 6.33333C10.9167 7.56591 10.4301 8.68485 9.63861 9.50857C9.6147 9.52728 9.59166 9.54763 9.56965 9.56965C9.54763 9.59166 9.52728 9.6147 9.50857 9.63861C8.68485 10.4301 7.56591 10.9167 6.33333 10.9167C3.80203 10.9167 1.75 8.86464 1.75 6.33333Z" fill="#5C6A85"/>
43+
</svg>
44+
<input id="alg-search-input" class="ds-datastax-search-input" type="text" name="query" placeholder="Search"/>
45+
</div>
46+
<button id="alg-search-button" class="ds-search-button" type="submit" style="display: none"></button>
47+
<input id="dataset" type="hidden" name="dataset" value="docs"/>
48+
</div>
3949
</form>
40-
<a class="navbar-item ds_buttons_button" href="/en/landing_page/doc/landing_page/current.html">Docs</a>
4150
<span onclick="window.Intercom('show');" class="ds_buttons_button get-started">Get Live Help</span>
4251
</div>
43-
4452
</div>
4553
</div>
4654
</nav>

0 commit comments

Comments
 (0)