benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling 🎨 ygm

Browse Source
This commit is contained in:
Ben
2022-01-28 00:49:07 +00:00
parent 5bcd45c9c1
commit a7b8b59327
5 changed files with 85 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/public/components/navbar/navbar.css
View File

@@ -1,20 +1,30 @@
.logo {
max-width: 200px;
}
.navbar {
align-items: flex-end;
display: flex;
font-family: 'Josefin Sans', sans-serif;
justify-content: space-between;
align-items: baseline;
flex-direction: row;
font-family: 'Londrina Solid', cursive;
flex-wrap: wrap;
font-size: 1.5em;
margin: auto;
padding: 20px 50px;
padding-bottom: 20px;
color: #222;
}
.push-left {
.push-right {
margin-left: auto;
text-align: right;
}
.push-down {
align-self: flex-end;
flex-basis: 100%;
margin-top: auto;
}
.logo {
flex-grow: 2;
transform: translatey(30%);
}
.hamburger {
@@ -26,7 +36,7 @@
position: relative;
height: 60px;
width: 60px;
z-index: 100;
z-index: 200;
}
.hamburger-line {
@@ -72,6 +82,7 @@
}
.nav-menu {
font-family: 'Londrina Solid', cursive;
display: flex;
list-style: none;
margin: 0;
@@ -112,9 +123,9 @@
}
/* Make sure the thing doesnt move */
.nav-menu {
/* .nav-menu {
transform: translatey(-100%);
}
} */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu {
@@ -129,6 +140,7 @@
left: 0;
transform: translatey(-100%);
text-align: center;
z-index: 100;
}
.menu-active .nav-menu {
transform: translatey(0%);
@@ -160,3 +172,7 @@
.sub-nav:hover {
display: block;
}
/* search bar */

26
client/public/components/navbar/navbar.html
View File

@@ -1,22 +1,22 @@
<nav class="navbar">
<div class="logo"><img src="res/logo.svg" height="80em" alt="logo"></div>
<div class="push-left">
<div class="push-right">
<!-- https://jonsuh.com/hamburgers/ -->
<button id="menu-toggler" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
</button>
<ul id="primary-menu" class="menu nav-menu">
<li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<!-- TODO: Going to need to dynamically generate this -->
<ul class = "sub-nav">
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Bricks▾</a>
@@ -26,7 +26,17 @@
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item "><a class="nav-link" href="#">My Account</a>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
</ul>
<div class="push-down">
<span class="push-right">
<input id="search-bar" type="text" placeholder="search..."/>
</span>
<img src="https://www.svgrepo.com/show/13666/heart.svg" width="30px" alt="">
<img src="https://www.svgrepo.com/show/80543/shopping-cart-outline.svg" width="30px" alt="">
<span id="cart-number">5</span>
</div>
</div>
</nav>

12
client/public/components/notification-bar/notification-bar.css
View File

@@ -4,18 +4,18 @@
top: 0;
left: 0;
width: 100%;
height: 35px;
height: 1.7em;
background-color: #00B4F5;
box-shadow: #222 0px 0px 5px;
transition: all 0.3s ease-in;
}
.notification-bar-text {
font-family: 'Open Sans', sans-serif;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
text-align: center;
color: #fff;
padding: 0px 15px;
padding: 0px 1em;
height: 100%;
line-height: 35px;
font-size: 20px;
@@ -25,11 +25,11 @@
.notification-bar-close {
display: inline-block;
padding: 0px 15px;
padding: 0px 1em;
height: 100%;
line-height: 35px;
line-height: 2em;
color: #fff;
font-size: 20px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
font-family: 'Open Sans', sans-serif;

27
client/public/global.css
View File

@@ -1,5 +1,5 @@
body {
font-family: 'Open Sans', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
color: #222;
text-decoration: none;
@@ -15,13 +15,34 @@ limited-margin {
margin-left: auto;
margin-right: auto;
width: 85%;
max-width: 1200px;
max-width: 1400px;
}
content-margin {
position: relative;
display: inherit;
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 1300px;
}
/* responsive sidebar stop scrolling */
/* also making sure this is applied any time it's on a mobile device */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
limited-margin {
width: 100%;
width: 90%;
padding-left: 1em;
padding-right: 1em;
}
content-margin {
width: 90%;
padding-left: 2em;
padding-right: 2em;
}
}
#top-picks {
}

10
client/public/index.html
View File

@@ -6,6 +6,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<script src="components/components.js"></script>
</head>
<body>
@@ -15,5 +16,14 @@
<limited-margin>
<navbar-component></navbar-component>
<content-margin>
<div id="top-picks">
Today's Top Picks
</div>
</content-margin>
</limited-margin>
</body>