extern/homepage
1
0
Fork 0
mirror of https://github.com/Jaredk3nt/homepage.git synced 2024-11-21 23:33:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding fontfamily var, updating readme to explain how to customize

Browse Source
This commit is contained in:
Jared Jones 2020-07-15 14:57:14 -05:00
parent f467131489
commit 411c0db410
2 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -1,3 +1,34 @@
# [Homepage](https://danggoodcode.com/startpage)
![homepage](https://i.redd.it/cbnzq36zj3601.gif)
## Customization
### Customize Bookmarks
Bookmarks are now held in the `bookmarks.js` file for easy updating. `bookmarks` is an array of objects with a `title` and `links` property. The `title` defines what the header of the "bookmark section" box will be. `link` is an array of link objects each with a name and a url to link to.
> The way the site is currently styled bookmarks should always have a length of `4` if you want to have more sections you need to change the `width` property of the css class `bookmark-set`
### Customize Search Engine
You can change the search engine used by the search overlay by updating the url value stored in the `searchUrl` var in `index.html` to the correct string for your engine.
Examples:
- DuckDuckGo: `https://duckduckgo.com/?q=`
- Bing: `https://www.bing.com/search?q=`
### Customize Styling
Styles are handled through CSS variables. To update the colors you just need to change the variable definitions defined in `:root`.
| Variable | default | description |
| ------------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `--bg` | `#5f4b8b` | Defines the body background color |
| `--fg` | `#ffffff` | Defines the primary foreground (text) color for clock, weather, and titles |
| `--secondaryFg` | `#b3b3b3` | Defines the foreground (text) color for links |
| `--containerBg` | `#272727` | Defines the background color of the boxes |
| `--searchBg` | `--containerBg` | Defines the background color of the search overlay |
| `--scrollbarColor` | `#3f3f3f` | Defines the color of the custom scrollbars |
| `--fontFamily` | `"Roboto Mono", monospace` | Defines the font used. To change to a custom font you will also have to import that font from whatever source is available |

9
styles.css
View File

@ -7,6 +7,7 @@
--containerBg: #272727;
--searchBg: var(--containerBg);
--scrollbarColor: #3f3f3f;
--fontFamily: 'Roboto Mono', monospace;
}
body {
@ -27,7 +28,7 @@ body {
font-family: sans-serif;
font-size: 3.5rem;
font-weight: 600;
font-family: 'Roboto Mono';
font-family: var(--fontFamily);
color: var(--fg);
margin-bottom: 0.25em;
}
@ -50,7 +51,7 @@ body {
box-sizing: border-box;
background-color: var(--searchBg);
border: solid 0px var(--searchBg);
font-family: 'Roboto Mono';
font-family: var(--fontFamily);
font-size: 4rem;
color: var(--fg);
outline: none;
@ -64,7 +65,7 @@ body {
background-color: var(--containerBg);
padding: 1em;
border-radius: 3px;
font-family: 'Roboto Mono';
font-family: var(--fontFamily);
color: var(--fg);
text-align: center;
}
@ -101,7 +102,7 @@ body {
padding: 1em;
background-color: var(--containerBg);
border-radius: 3px;
font-family: 'Roboto Mono';
font-family: var(--fontFamily);
font-size: 0.85rem;
width: 25%;
height: 12em;