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);
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>
</head>
@ -117,12 +132,16 @@
</a>
</drawer-child>
<drawer-child>
<drawer-child class="social-links">
<div>
<strong>Social</strong>
<span>Connect with the LBRY team on your favorite platform</span>
<a href="">Facebook</a>
<a href="">Twitter</a>
<span>
<a href="">Network 1</a>
<a href="">Network 2</a>
<a href="">Network 3</a>
<a href="">Network 4</a>
<a href="">Network 5</a>
</span>
</div>
</drawer-child>
@ -150,40 +169,33 @@
</drawer-wrap>
</drawer-section>
<drawer-section class="header__navigation-parent">
<drawer-section>
<drawer-title>Link II</drawer-title>
<drawer-wrap class="header__navigation-children-wrap">
<drawer-children class="header__navigation-children inner-wrap">
<drawer-child class="flex-half">
<a href="/youtube">
<drawer-wrap>
<drawer-children>
<drawer-child>
<a href="">
<strong>YouTube Partner Program</strong>
<span>Bring all your content to LBRY with just a few clicks</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<drawer-child>
<a href="">
<strong>Creator FAQ</strong>
<span>Like the FAQ, but for Creators</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href="https://lbry.fund">
<drawer-child>
<a href="">
<strong>Fund a Project</strong>
<span>How to to get some LBC for your latest idea or project</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href="">
<strong>Creator Tour</strong>
<span>XYZXYZXYZ</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<drawer-child>
<a href="">
<strong>Makers</strong>
<span>Would you like to share and sell 3D printable files?</span>
@ -193,34 +205,34 @@
</drawer-wrap>
</drawer-section>
<drawer-section class="header__navigation-parent">
<drawer-section>
<drawer-title>Link III</drawer-title>
<drawer-wrap class="header__navigation-children-wrap">
<drawer-children class="header__navigation-children inner-wrap">
<drawer-child class="flex-half">
<a href="/team">
<drawer-wrap>
<drawer-children>
<drawer-child>
<a href="">
<strong>Team / About</strong>
<span>Meet the people building LBRY and find out why they’re doing it</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href="/join-us">
<drawer-child>
<a href="">
<strong>Join Us</strong>
<span>Work with the LBRY team</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<drawer-child>
<a href="">
<strong>Contact</strong>
<span>Have a question or want to connect with the LBRY, Inc. team?</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href="/credit-reports">
<drawer-child>
<a href="">
<strong>Credit Reports</strong>
<span>Four times a year we share the current state of LBRY, Inc.'s balance sheet</span>
</a>
@ -229,38 +241,31 @@
</drawer-wrap>
</drawer-section>
<drawer-section class="header__navigation-parent">
<drawer-section>
<drawer-title>Link IV</drawer-title>
<drawer-wrap class="header__navigation-children-wrap">
<drawer-children class="header__navigation-children inner-wrap">
<drawer-child class="flex-half">
<a href="https://lbry.tech">
<drawer-wrap>
<drawer-children>
<drawer-child>
<a href="">
<strong>LBRY.tech</strong>
<span>Find out how the heck all of this works</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href="https://github.com/lbryio/lbry.io">
<drawer-child>
<a href="">
<strong>GitHub</strong>
<span>The LBRY code is open source, check out the repos</span>
</a>
</drawer-child>
<drawer-child class="flex-half">
<a href="https://lbry.tech/contribute">
<drawer-child>
<a href="">
<strong>Contributor's Guide</strong>
<span>Tips and guidelines for being a contributor to the LBRY projects</span>
</a>
</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-wrap>
</drawer-section>

33
sass/navigation/_index.scss
View file

@ -4,7 +4,7 @@ drawer-navigation {
display: inline-flex;
flex: 1;
position: relative;
z-index: 1;
z-index: 10;
}
drawer-section {
@ -24,7 +24,7 @@ drawer-section {
&:hover {
drawer-title::after {
background-color: $lbry-teal-3;
background-color: $lbry-teal-4;
}
}
}
@ -77,11 +77,34 @@ drawer-children {
}
drawer-child {
&:not(:last-of-type) {
margin-bottom: 1rem;
padding: var(--spacing-s);
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 {
display: block;
display: flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
}