add navbar and kitty pages

This commit is contained in:
mohamad24xx 2022-09-15 21:05:42 +04:30
parent 9fa9b69894
commit 73e6d9e4fa
11 changed files with 113 additions and 17 deletions

View file

@ -5,7 +5,7 @@
"en-US",
"fa"
],
"vimMode": false,
"vimMode": true,
"newFileLocation": "folder",
"newFileFolderPath": "Unorganized notes",
"spellcheck": true,

View file

@ -4,12 +4,12 @@
"type": "split",
"children": [
{
"id": "a145d83ecfa70c8b",
"id": "e8bd60ed3df5367a",
"type": "leaf",
"state": {
"type": "markdown",
"state": {
"file": "Programing/Awesome wm/rc lua.md",
"file": "Programing/Html & Css/Recources/Icones.md",
"mode": "source",
"source": false
}
@ -61,8 +61,7 @@
}
],
"direction": "horizontal",
"width": 300,
"collapsed": true
"width": 300
},
"right": {
"id": "2c20d1d2df18b0ba",
@ -78,7 +77,7 @@
"state": {
"type": "backlink",
"state": {
"file": "Programing/Awesome wm/rc lua.md",
"file": "Programing/Html & Css/Recources/Icones.md",
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical",
@ -95,7 +94,7 @@
"state": {
"type": "outgoing-link",
"state": {
"file": "Programing/Awesome wm/rc lua.md",
"file": "Programing/Html & Css/Recources/Icones.md",
"linksCollapsed": false,
"unlinkedCollapsed": true
}
@ -118,7 +117,7 @@
"state": {
"type": "outline",
"state": {
"file": "Programing/Awesome wm/rc lua.md"
"file": "Programing/Html & Css/Recources/Icones.md"
}
}
},
@ -138,17 +137,17 @@
"width": 300,
"collapsed": true
},
"active": "a145d83ecfa70c8b",
"active": "e8bd60ed3df5367a",
"lastOpenFiles": [
"Unorganized notes/Untitled.md",
"Programing/Awesome wm/rc lua.md",
"Programing/Vim/plugins keybinding.md",
"Programing/Vim/plugin list.md",
"Programing/Server/gitea setup.md",
"Programing/Linux commands/ssh.md",
"Programing/kitty.md",
"Programing/Html & Css/Recources/learn and making sites.md",
"Programing/Html & Css/Recipes/button.md",
"Programing/Html & Css/Recipes/Navbar/navbar - classic.md",
"cheat sheats/Format your notes.md",
"Programing/Vim/vim keybinding.md",
"Programing/media files/button3.png"
"Programing/media files/Screenshot from 2022-08-12 16-20-20 1.png",
"Screenshot from 2022-08-12 16-04-52.png",
"Programing/media files/nc-0.png",
"Screenshot from 2022-08-12 16-02-56.png",
"cheat sheats/Spacemacs keybinding.md"
]
}

View file

@ -0,0 +1,77 @@
# navbar - classic
for making navbar first we must add html elements to file
```html
<div class="topnav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
```
![[nc-0.png]]
## font and margin
we can specify what font family we want and we add `margin: 0;` so that default browser margin go away
```css
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
```
![[nc-1.png]]
## background color and overflow
now we set background for our nav, also we add `overflow: hidden;` so content form next to navbar dose not come to navbar area
```css
.topnav {
background-color: #333;
overflow: hidden;
}
```
## styling link elements
now we need to style `<a>` elements
```css
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
```
![[nc-2.png]]
* `float: left;` make our element float to left we can also make it float to right with ` float:rigt;`
* `color` make color of our text what we want
* `text-align: center;` make text centered in their container between the padding
* `padding: 14px 16px;` make container for our text so it can sit in it
* `text-decoration: none;` remove the blue text color and under line
* `font-size:` we tell browse how big our font must be
## styling the hover
we can specify what CSS we have when we hover with mouse on element in here a elements
here we make color white and text black
```css
.topnav a:hover {
background-color: #ddd;
color: black;
}
```
![[nc-3.png]]
## styling one of elements
we can also change some of elements with adding a class to them and then styling
### adding class
```html
<a class="active" href="#home">Home</a>
```
### styling
```css
.topnav a.active {
background-color: #04AA6D;
color: white;
}
```
![[nc-4.png]]
## making nav responsive
[continue](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav)

View file

@ -0,0 +1 @@
## [how to from w3school](https://www.w3schools.com/howto/default.asp)

View file

@ -0,0 +1,18 @@
# kitty useful keybinding
## [Tabs](https://sw.kovidgoyal.net/kitty/overview/#tabs )
New tab
[`ctrl+shift+t`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.New-tab) 
Close tab
[`ctrl+shift+q`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Close-tab) 
Next tab
[`ctrl+shift+right`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Next-tab) 
Previous tab
[`ctrl+shift+left`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Previous-tab) 
Next layout
[`ctrl+shift+l`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Next-layout)
Move tab forward
[`ctrl+shift+.`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Move-tab-forward)
Move tab backward
[`ctrl+shift+,`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Move-tab-backward)
Set tab title
[`ctrl+shift+alt+t`](https://sw.kovidgoyal.net/kitty/conf/#shortcut-kitty.Set-tab-title) 

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -0,0 +1 @@
# Spacemacs keybinding