Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added navbar #20

Merged
merged 4 commits into from Jan 5, 2022
Merged

Added navbar #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d20d061
Added navbar
artimanputra Dec 7, 2021
91ac78b
Added new content in manifest.json
artimanputra Dec 30, 2021
19aca3e
resolved conflicts
artimanputra Jan 4, 2022
4a2b6fc
Merge branch 'main' into navbar
artimanputra Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
4 changes: 3 additions & 1 deletion src/manifest.json
View file
Open in desktop
Expand Up @@ -19,6 +19,8 @@
"background" : {
"scripts": ["scripts/eventPage.js"],
"persistent": false
}
},


"content_security_policy" : "script-src 'self' https://kit.fontawesome.com/341052e332.js; object-src 'self'"
}
128 changes: 127 additions & 1 deletion src/styles/header.css
View file
Open in desktop
@@ -1,8 +1,134 @@
/* @import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@600&display=swap');

#H1 {
align-self: center;
font-family: "Menlo", monospace;
font-size: 30px;
color: #2c5aaf;
text-shadow: 1px 1px 2px #000000;
border-bottom: 2px solid rgb(70, 151, 53);
}

/* NAVBAR */
nav {
height: 80px;
background-color: hsl(0, 0%, 40%);
box-shadow: 3px 3px 0px 0px hsl(0, 1%, 85%);
border-radius: 0 0 5px 5px;
font-family: 'Baloo Paaji 2', cursive;
font-weight: 500;
}
.logo {
width: 70px;
height: 70px;
margin-top: 0px;
position: absolute;
top: 12px;
left: 10%;
border-radius: 50%;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 35px;
}
.u-list {
margin: 0;
padding: 0;
list-style: none;
float: right;
margin-right: 65px;
}
.list-items {
text-decoration: none;
position: relative;
color: #fff;
font-size: 21px;
text-transform: uppercase;
padding: 5px 0;
font-weight: 500;
}
.list-items:hover{
color: #0d0d6d;
}
.list-items::before {
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #021c72;
transform: scaleX(0);
transform-origin: left;
}
.list-items:hover::before {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.3s linear;
}
label #btn,
label #cancel {
color: #0d0d6d;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}

@media (max-width: 850px) {
body {
text-align: center;
}
.logo {
left: 3%;
}
.u-list {
margin-right: 0;
}
label #btn {
display: block;
}
.u-list {
position: absolute;
width: 100%;
height: 90vh;
box-shadow: 4px 4px 0px 0px #6d696957;
background: var(--ul-bgcolor);
backdrop-filter: blur(3px);
top: 80px;
right: -100%;
text-align: center;
transition: all 0.5s;
z-index: 10;
}
.u-list li {
display: block;
margin: 60px 0;
line-height: 30px;
}
.list-items {
color: #7e19d1;
font-weight: bold;
font-size: 22px;
}
#check:not(:checked) ~ .u-list {
display: none;
}
#check:checked ~ .u-list {
right: 0;
animation-name: fadeIn;
animation-duration: 1s;
}
#check:checked ~ label #btn {
display: none;
}
#check:checked ~ label #cancel {
display: block;
}
}
5 changes: 3 additions & 2 deletions src/styles/popup.css
View file
Open in desktop
@@ -1,4 +1,5 @@
body {
width: 200px;
background-image: linear-gradient(#66b3ff, #99ccff);
width: 500px;
height: 500px;
background: linear-gradient(45deg,#66b3ff, #99ccff);
}
40 changes: 30 additions & 10 deletions src/views/popup.html
View file
Open in desktop
@@ -1,13 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Save-Notes</title>
<script src="../scripts/popup.js"></script>
<link rel="stylesheet" href="../styles/popup.css">
<link rel="stylesheet" href="../styles/header.css">

</head>
<body>
<h2 id="H1">Hello World!</h2>
</body>

<head>
<title>Save-Notes</title>
<script src="../scripts/popup.js"></script>
<link rel="stylesheet" href="../styles/popup.css">
<link rel="stylesheet" href="../styles/header.css">

<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/341052e332.js" crossorigin="anonymous"></script>


</head>

<body>
<nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars burger" id="btn"></i>
<i class="fas fa-times burger" id="cancel"></i>
</label>
<img class="logo" src="..\icons\icon128.png" alt="To-Do-Logo">
<ul class="u-list">
<li><a class="list-items" href="#">Home</a></li>
<li><a class="list-items" href="#">Save Notes</a></li>
<li><a class="list-items" href="#">About us</a></li>
</ul>
</nav>
<h2 id="H1">Save Your Notes</h2>
</body>

</html>