LBRYCommunity/components
1
0
Fork 0
Code Issues 1 Pull requests 7 Projects Releases Packages Wiki Activity

Finished navigation

Browse source
This commit is contained in:
ポール ウェッブ 2019-02-08 14:17:21 -06:00
parent 9e7ec00654
commit 37abe1513d
4 changed files with 81 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/index.css.map vendored
View file

File diff suppressed because one or more lines are too long

97
dist/index.html vendored
View file

@ -82,6 +82,21 @@
color: var(--lbry-gray-5); color: var(--lbry-gray-5);
padding: var(--spacing-l); padding: var(--spacing-l);
} }
.social-links a {
width: 1.25rem; height: 1.25rem;
background-color: var(--lbry-black);
color: transparent;
display: inline-block;
font-size: 0;
border-radius: 50%;
line-height: 0;
}
.social-links a:not(:last-of-type) {
margin-right: 0.5rem;
}
</style> </style>
</head> </head>
@ -117,12 +132,16 @@
</a> </a>
</drawer-child> </drawer-child>
<drawer-child> <drawer-child class="social-links">
<div> <div>
<strong>Social</strong> <strong>Social</strong>
<span>Connect with the LBRY team on your favorite platform</span> <span>
<a href="">Facebook</a> <a href="">Network 1</a>
<a href="">Twitter</a> <a href="">Network 2</a>
<a href="">Network 3</a>
<a href="">Network 4</a>
<a href="">Network 5</a>
</span>
</div> </div>
</drawer-child> </drawer-child>
@ -150,40 +169,33 @@
</drawer-wrap> </drawer-wrap>
</drawer-section> </drawer-section>
<drawer-section class="header__navigation-parent"> <drawer-section>
<drawer-title>Link II</drawer-title> <drawer-title>Link II</drawer-title>
<drawer-wrap class="header__navigation-children-wrap"> <drawer-wrap>
<drawer-children class="header__navigation-children inner-wrap"> <drawer-children>
<drawer-child class="flex-half"> <drawer-child>
<a href="/youtube"> <a href="">
<strong>YouTube Partner Program</strong> <strong>YouTube Partner Program</strong>
<span>Bring all your content to LBRY with just a few clicks</span> <span>Bring all your content to LBRY with just a few clicks</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href=""> <a href="">
<strong>Creator FAQ</strong> <strong>Creator FAQ</strong>
<span>Like the FAQ, but for Creators</span> <span>Like the FAQ, but for Creators</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href="https://lbry.fund"> <a href="">
<strong>Fund a Project</strong> <strong>Fund a Project</strong>
<span>How to to get some LBC for your latest idea or project</span> <span>How to to get some LBC for your latest idea or project</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href="">
<strong>Creator Tour</strong>
<span>XYZXYZXYZ</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href=""> <a href="">
<strong>Makers</strong> <strong>Makers</strong>
<span>Would you like to share and sell 3D printable files?</span> <span>Would you like to share and sell 3D printable files?</span>
@ -193,34 +205,34 @@
</drawer-wrap> </drawer-wrap>
</drawer-section> </drawer-section>
<drawer-section class="header__navigation-parent"> <drawer-section>
<drawer-title>Link III</drawer-title> <drawer-title>Link III</drawer-title>
<drawer-wrap class="header__navigation-children-wrap"> <drawer-wrap>
<drawer-children class="header__navigation-children inner-wrap"> <drawer-children>
<drawer-child class="flex-half"> <drawer-child>
<a href="/team"> <a href="">
<strong>Team / About</strong> <strong>Team / About</strong>
<span>Meet the people building LBRY and find out why they’re doing it</span> <span>Meet the people building LBRY and find out why they’re doing it</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href="/join-us"> <a href="">
<strong>Join Us</strong> <strong>Join Us</strong>
<span>Work with the LBRY team</span> <span>Work with the LBRY team</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href=""> <a href="">
<strong>Contact</strong> <strong>Contact</strong>
<span>Have a question or want to connect with the LBRY, Inc. team?</span> <span>Have a question or want to connect with the LBRY, Inc. team?</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href="/credit-reports"> <a href="">
<strong>Credit Reports</strong> <strong>Credit Reports</strong>
<span>Four times a year we share the current state of LBRY, Inc.'s balance sheet</span> <span>Four times a year we share the current state of LBRY, Inc.'s balance sheet</span>
</a> </a>
@ -229,38 +241,31 @@
</drawer-wrap> </drawer-wrap>
</drawer-section> </drawer-section>
<drawer-section class="header__navigation-parent"> <drawer-section>
<drawer-title>Link IV</drawer-title> <drawer-title>Link IV</drawer-title>
<drawer-wrap class="header__navigation-children-wrap"> <drawer-wrap>
<drawer-children class="header__navigation-children inner-wrap"> <drawer-children>
<drawer-child class="flex-half"> <drawer-child>
<a href="https://lbry.tech"> <a href="">
<strong>LBRY.tech</strong> <strong>LBRY.tech</strong>
<span>Find out how the heck all of this works</span> <span>Find out how the heck all of this works</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href="https://github.com/lbryio/lbry.io"> <a href="">
<strong>GitHub</strong> <strong>GitHub</strong>
<span>The LBRY code is open source, check out the repos</span> <span>The LBRY code is open source, check out the repos</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half"> <drawer-child>
<a href="https://lbry.tech/contribute"> <a href="">
<strong>Contributor's Guide</strong> <strong>Contributor's Guide</strong>
<span>Tips and guidelines for being a contributor to the LBRY projects</span> <span>Tips and guidelines for being a contributor to the LBRY projects</span>
</a> </a>
</drawer-child> </drawer-child>
<drawer-child class="flex-half">
<a href="https://forum.lbry.tech">
<strong>Forum</strong>
<span>If you have a question for the LBRY, Inc. development team, post it here</span>
</a>
</drawer-child>
</drawer-children> </drawer-children>
</drawer-wrap> </drawer-wrap>
</drawer-section> </drawer-section>

33
sass/navigation/_index.scss
View file

@ -4,7 +4,7 @@ drawer-navigation {
display: inline-flex; display: inline-flex;
flex: 1; flex: 1;
position: relative; position: relative;
z-index: 1; z-index: 10;
} }
drawer-section { drawer-section {
@ -24,7 +24,7 @@ drawer-section {
&:hover { &:hover {
drawer-title::after { drawer-title::after {
background-color: $lbry-teal-3; background-color: $lbry-teal-4;
} }
} }
} }
@ -77,11 +77,34 @@ drawer-children {
} }
drawer-child { drawer-child {
&:not(:last-of-type) { padding: var(--spacing-s);
margin-bottom: 1rem; border: 2px solid;
transition: all 0.2s;
&:not(:hover) {
border-color: transparent;
}
&:hover {
border-color: $lbry-gray-1;
padding-left: var(--spacing-m);
> a {
color: $lbry-teal-4;
}
}
&:not([full-width]) {
width: 50%;
}
&[full-width] {
width: 100%;
} }
span { span {
display: block; display: flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
} }
} }