Skip to content

Commit

Permalink
navigation bar: #4
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashusharmadev
ashusharmadev committed Sep 3, 2022
1 parent b4ab7ad commit b1546e5
Show file tree
Hide file tree
Showing 5 changed files with 297 additions and 15 deletions.
239 changes: 239 additions & 0 deletions docs/css/master.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.app-container
{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #f1f1f1;
}

.orphic-navbar
{
width: 100%;
height: 120px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 5%;
}

.orphic-navbar > .orphic-navbar-rsection
{
position: absolute;
z-index: 9;
}

.orphic-navbar > .orphic-navbar-section
{
width: 100%;
height: 60px;;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #f1f1f1;;
border-radius: 0 60px 60px 0;
margin-left: 12px;
}

.orphic-navbar > .orphic-navbar-section > ul
{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style: none;
padding-left: 120px;
}

.orphic-navbar > .orphic-navbar-section > ul > li
{
margin-right: 12px;
margin-left: 12px;
}

.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item
{
width: fit-content;
height: 35px;
border-radius: 35px;
padding: 0 25px;;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.custom-cute
{
display: none;
font-weight: 600;
font-size: 17px;
width: 100px;
overflow: hidden;
}

@media only screen and (max-width: 820px)
{
.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.custom-cute
{
display: block;
}
.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item
{
display: none;
}
}

.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.custom-cute > button
{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
opacity: 0.6;
border: none;
font-size: 17px;
cursor: pointer;
font-weight: 600;
}

.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item:hover
{
opacity: 0.7;
}

.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.active
{
/* background: rgba(0, 0, 0, 0.1); */
box-shadow: inset 0 0 0 2px rgba(0, 183, 255, 0.1);
color: rgba(0, 183, 255, 1);
font-weight: 600;
}

.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item > a
{
color: inherit;
text-decoration: none;
}


.orphic-navbar > .orphic-navbar-section > ul > li:last-child
{
/* margin-right: 6%; */
}

/* logo */

.o-logo-wrapper
{
width: 100px;
height: 100px;
overflow: hidden;
animation: oRot 0.9s 1 alternate ease;
}
@keyframes oRot {
0%
{
transform: rotate(0) rotateY(0) scale(1);
}
100%
{
transform: rotate(360deg) scale(0.9);
}
}
@keyframes oScale {
0%
{
transform: scale(1);
}
100%
{
transform: scale(1.5);
}
}
.bd-rd
{
border-radius: 200px;
}
.pd-20
{
padding: 10px;
}
@keyframes oRot2 {
0%
{
transform: rotate(0);
}
100%
{
transform: rotate(360deg);
}
}
.o-logo-subwrapper
{
width: 100%;
height: 100%;
box-shadow: 0 0 0 2px rgba(0, 183, 255, 0.1);
border-radius: 200px;
animation: oRot 200s infinite alternate ease;
}
.o-logo-subbwrapper
{
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 6px rgba(0, 255, 136, 0.05);
border-radius: 200px;
}
.custom-co1
{
transform: scale(0.9);
background-color: rgba(0, 183, 255, 0.1);
overflow: hidden;
background-image: url(../images/orph.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
animation: oScale 1s 2 alternate ease;
}

.custom-aligner
{
width: 100%;
height: fit-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 50px 0;
background-color: #f1f1f1;
}

.logo-text
{
font-size: 100px;
font-weight: 600;
/* font-family: 'Century Gothic'; */
font-family: 'From the stars';
margin-left: 20px;
color: #f1f1f1;
}
11 changes: 0 additions & 11 deletions docs/css/o.css
View file

This file was deleted.

Binary file added docs/images/orph.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 57 additions & 3 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,71 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>orphic</title>
<link rel="stylesheet" href="./../dist/css/o.css">
<script src="./../dist/js/o.min.js"></script>
<script src="../dist/js/o.min.js"></script>
<link rel="stylesheet" href="./css/master.css">
</head>
<body>

<div class="o-navbar">
<div class="inner-o-navbar">
<div class="app-container">

<div class="orphic-navbar">
<div class="orphic-navbar-rsection orphic-logo">

<div class="o-orphic o-logo-wrapper bd-rd" data-osh="o-drop, left: 12, right: 12, top: 12, bottom: 12">

<div class="o-orphic-back bd-rd" data-oblur="none"></div>

<div class="o-orphic-layer pd-20">

<div class="o-orphic o-logo-subwrapper">

<div class="o-orphic o-logo-subbwrapper">

<!-- <div class="o-orphic-back bd-rd" data-oblur="none"></div> -->

<div class="o-orphic-layer custom-co1 bd-rd">

</div>

</div>

</div>

</div>

</div>

</div>
<div class="o-orphic orphic-navbar-section" data-osh="o-box, left: 6, right: 6, top: 6, bottom: 6, blur: 12">
<ul class="o-orphic-layer">
<li class="orphic-nav-item active">
<a href="#">Preview</a>
</li>
<li class="orphic-nav-item">
<a href="#">Explore Docs</a>
</li>
<li class="orphic-nav-item">
<a href="#">Examples</a>
</li>
<li class="orphic-nav-item">
<a href="#">Github</a>
</li>
<li class="o-orphic orphic-nav-item custom-cute" data-osh="o-drop">
<button class="o-orphic-layer">
<span>menu</span>
</button>
</li>
</ul>
</div>
</div>

</div>

<script>
let orphic = new OrphicUI();
orphic.init(document);
orphic.render(document);
</script>

</body>
</html>
2 changes: 1 addition & 1 deletion tests/o.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,4 +158,4 @@ <h1 class="logo-text o-orphic" data-osh="o-text, left: 4, right: 4, top: 4, bott
orphic.render(document);
</script>
</body>
</html>
</html>

0 comments on commit b1546e5

Please sign in to comment.