Skip to content
Snippets Groups Projects
Commit e142c10a authored by KevinDutier desktop's avatar KevinDutier desktop
Browse files

Merge branch 'master' of https://github.com/KevinDutier/simple-ascii-homepage

parents 4493bf64 6b356fc1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 5
− 2
View file @ e142c10a
......@@ -5,9 +5,12 @@
# Description
Simple ascii homepage is a simple and lightweight, dark homepage for developers. It gives users quick access to their favorite websites.
As the page is completely customizable, users can (and are encouraged to) customize the page to their own liking (links, categories, colors, etc.).
Simple ascii homepage is a simple and lightweight, dark, home/new tab page for developers. It gives users quick access to their favorite websites.
As the page is completely customizable, users can customize it to their own liking (links, categories, colors, etc.).
[example of customization](https://user-images.githubusercontent.com/111971458/212679491-c5ed2280-dbb8-4ebe-9e9d-60e235c664d9.png)
## Customizing
......
index.html
+ 15
− 3
View file @ e142c10a
......@@ -5,14 +5,26 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<title>Homepage</title>
</head>
<!-- NOTE:
this page is fully customizable, feel free to edit/add/remove any link or category
to change a link, simply replace the ' href="..." ' attribute, and the name of the link
you can also add the attribute ' target="_blank" ' if you prefer the link to open in a new tab
example:
<li class="link">
<a target="_blank" href="your url here">name of your link</a>
</li>
-->
<body>
<div class="main">
<span class="datetime"></span>
<span class="dateTime"></span>
<div class="main-container">
<!-- first category -->
<div class="link-container">
<h1 class="title" style="color: #820000">music</h1>
<ul class="list">
......
script.js
+ 28
− 5
View file @ e142c10a
let dt = new Date();
let time = document.querySelector(".datetime");
// NOTE: the javascript displays and update time and date (every 5 seconds)
let initialDt = new Date(); // intitial time, displayed when the page is first loaded
let dateTime = document.querySelector(".dateTime");
// formatting time: displays it as "DD.MM.YYYY - HH:mm"
// I chose not to install any dependency to keep the file lightweight, but you can install moment if you want to edit the time/date more easily
dateTime.innerHTML =
("0" + initialDt.getDate()).slice(-2) +
"." +
("0" + (initialDt.getMonth() + 1)).slice(-2) +
"." +
initialDt.getFullYear() +
"&nbsp; - &nbsp;" +
("0" + initialDt.getHours()).slice(-2) +
":" +
("0" + initialDt.getMinutes()).slice(-2);
time.innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +"&nbsp; - &nbsp;"+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
// updates time every 5 seconds
setInterval(() => {
let d = new Date();
time.innerHTML = (("0"+d.getDate()).slice(-2)) +"."+ (("0"+(d.getMonth()+1)).slice(-2)) +"."+ (d.getFullYear()) +"&nbsp; - &nbsp;"+ (("0"+d.getHours()).slice(-2)) +":"+ (("0"+d.getMinutes()).slice(-2));
let updatedDt = new Date();
dateTime.innerHTML =
("0" + updatedDt.getDate()).slice(-2) +
"." +
("0" + (updatedDt.getMonth() + 1)).slice(-2) +
"." +
updatedDt.getFullYear() +
"&nbsp; - &nbsp;" +
("0" + updatedDt.getHours()).slice(-2) +
":" +
("0" + updatedDt.getMinutes()).slice(-2);
}, 5_000);
style.css
+ 20
− 15
View file @ e142c10a
/* colors: https://colorhunt.co/palettes/vintage */
/* nice colors: https://colorhunt.co/palettes/vintage */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
font-family: "Courier New", Courier, monospace; /* text font*/
}
body {
/* background color of the whole page */
background-color: #080808;
/* prevent text select */
/* prevents text select */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
h1,
ul,
li,
p {
h1, ul, li, p {
/* color of the text (links and time) */
color: #f7f7f7;
}
ul {
list-style-type: none; /* removes bullet points */
/* removes default bullet points */
list-style-type: none;
}
a {
/* removes default link decoration (underline and blue color) */
color: inherit;
text-decoration: none;
cursor: default;
}
a:hover {
/* color: #1d81b2; */
/* color: #FEC260; */
color: #D36B00;
}
/* color shown when user hovers on a link */
color: #d36b00;
}
.main {
height: 100vh;
......@@ -47,24 +47,28 @@ a:hover {
}
.main-container {
/* main container that encompasses all of the categories */
width: 80vw;
min-width: 800px;
display: flex;
justify-content: center;
z-index: 1;
z-index: 1; /* displays text above the image, if they ever overlap */
}
.link-container {
/* container used by each individual category */
margin: 0 26px;
}
.title {
/* category title */
font-size: 20px;
font-weight: 400;
margin-bottom: 0.15rem;
}
.datetime {
.dateTime {
/* displays date and time at top right corner */
color: #f7f7f7;
position: fixed;
font-size: 18px;
......@@ -73,8 +77,9 @@ a:hover {
}
.image {
/* displays image at bottom right corner */
position: fixed;
bottom: 0;
right: 0;
z-index: 0;
z-index: 0; /* displays image below text, if they ever overlap */
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment