♻️ Improve CSS selectors
♻️ Refactor CSS selectors for better reading
This commit is contained in:
Miguel Ávila
GitHub
commit
8be9dd1338
126
app.css
126
app.css
@ -4,49 +4,61 @@
|
||||
// ╚═╝╚═╝╝╚╝ ╩ ╚═╝
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
|
||||
/*
|
||||
// ┬ ┬┌─┐┬─┐┬┌─┐┌┐ ┬ ┌─┐┌─┐
|
||||
// ┐┌┘├─┤├┬┘│├─┤├┴┐│ ├┤ └─┐
|
||||
// ┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘└─┘
|
||||
*/
|
||||
|
||||
/* V A R I A B L E S */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* Font Import */
|
||||
|
||||
:root {
|
||||
/* Fonts */
|
||||
--fsg: 12vh; /* Time and Greetings */
|
||||
--fsm: 8vh; /* Date */
|
||||
--fss: 3vh; /* Greetings and Weather widger */
|
||||
--fses: 2vh; /* Links List */
|
||||
|
||||
--iconsize: 3vh;
|
||||
|
||||
/* Light theme */
|
||||
--accent: #61b0f1; /* Hover color */
|
||||
--bg: #f5f5f5; /* Background color */
|
||||
--sbg: #e4e6e6; /* Cards color */
|
||||
/* Font Size */
|
||||
--fg-primary: 12vh; /* Time and Greetings */
|
||||
--fg-secondary: 3vh; /* Greetings and Weather widger */
|
||||
--fg-date: 8vh; /* Date */
|
||||
--fg-list: 2vh; /* Links List */
|
||||
--icon: 3vh; /* Icon Size */
|
||||
|
||||
/* Fonts Color */
|
||||
--fg: #3a3a3a; /* Foreground color */
|
||||
--sfg: #3a3a3a; /* Sceondary Foreground color */
|
||||
--sfg: #494949; /* Sceondary Foreground color */
|
||||
|
||||
/* Light Colors */
|
||||
--accent: #61b0f1; /* Hover color */
|
||||
--background: #f5f5f5; /* Background color */
|
||||
--cards: #e4e6e6; /* Cards color */
|
||||
|
||||
/* Image background */
|
||||
--imgbg: url(assets/background.jpg);
|
||||
--imgbg: url(assets/background.jpg); /* Image URL */
|
||||
--imgcol: linear-gradient(
|
||||
rgba(255, 255, 255, 0.7),
|
||||
rgba(255, 255, 255, 0.7)
|
||||
); /* Filter color */
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
.darktheme {
|
||||
/* Dark Colors */
|
||||
--accent: #61b0f1; /* Hover color */
|
||||
--bg: #19171a; /* Background color */
|
||||
--sbg: #201e21; /* Cards color */
|
||||
--background: #19171a; /* Background color */
|
||||
--cards: #201e21; /* Cards color */
|
||||
|
||||
/* Fonts Color */
|
||||
--fg: #d8dee9; /* Foreground color */
|
||||
--sfg: #3a3a3a; /* Secondary Foreground color */
|
||||
|
||||
/* Image background */
|
||||
--imgcol: linear-gradient(
|
||||
rgba(0, 0, 0, 0.85),
|
||||
rgba(0, 0, 0, 0.85)
|
||||
); /* Filter color */
|
||||
}
|
||||
|
||||
/* S T Y L E S */
|
||||
/*
|
||||
// ┌─┐┌┬┐┬ ┬┬ ┌─┐┌─┐
|
||||
// └─┐ │ └┬┘│ ├┤ └─┐
|
||||
// └─┘ ┴ ┴ ┴─┘└─┘└─┘
|
||||
*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@ -56,6 +68,15 @@
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.notransition {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
@ -68,15 +89,6 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#themeButton {
|
||||
position: absolute;
|
||||
margin: 2em 2em 0 0;
|
||||
@ -104,7 +116,7 @@ body {
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--sbg);
|
||||
background-color: var(--cards);
|
||||
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 5px;
|
||||
}
|
||||
@ -154,24 +166,24 @@ body {
|
||||
#hour,
|
||||
#separator,
|
||||
#minutes {
|
||||
font-size: var(--fsg);
|
||||
font-size: var(--fg-primary);
|
||||
font-weight: bolder;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
#month,
|
||||
#day {
|
||||
font-size: var(--fsm);
|
||||
font-size: var(--fg-date);
|
||||
font-weight: bold;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
#day {
|
||||
margin-left: 20px;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#greetings {
|
||||
font-size: var(--fss);
|
||||
font-size: var(--fg-secondary);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
@ -181,19 +193,19 @@ body {
|
||||
}
|
||||
|
||||
.weatherValue p {
|
||||
font-size: var(--fss);
|
||||
font-size: var(--fg-secondary);
|
||||
font-weight: bolder;
|
||||
margin-left: 15px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.weatherDescription p {
|
||||
font-size: var(--fss);
|
||||
font-size: var(--fg-secondary);
|
||||
margin-left: 15px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
.buttonsBlock {
|
||||
grid-row: 3 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
display: grid;
|
||||
@ -203,47 +215,47 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.buttons__link {
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttonLink__icon {
|
||||
width: var(--iconsize);
|
||||
height: var(--iconsize);
|
||||
.buttonIcon {
|
||||
width: var(--icon);
|
||||
height: var(--icon);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.buttons__link-1 {
|
||||
.button__1 {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.buttons__link-2 {
|
||||
.button__2 {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
.buttons__link-3 {
|
||||
.button__3 {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
.buttons__link-4 {
|
||||
.button__4 {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
.buttons__link-5 {
|
||||
.button__5 {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
}
|
||||
.buttons__link-6 {
|
||||
.button__6 {
|
||||
grid-row: 2;
|
||||
grid-column: 3;
|
||||
}
|
||||
.buttons__link:hover {
|
||||
.button:hover {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
.buttons__link:hover svg {
|
||||
.button:hover svg {
|
||||
stroke: var(--sfg);
|
||||
}
|
||||
|
||||
@ -261,16 +273,16 @@ body {
|
||||
grid-column: 4;
|
||||
grid-row: 3 / span 2;
|
||||
}
|
||||
.list__head {
|
||||
.listIcon {
|
||||
margin-top: 3vh;
|
||||
margin-bottom: 2vh;
|
||||
color: var(--fg);
|
||||
width: var(--iconsize);
|
||||
height: var(--iconsize);
|
||||
width: var(--icon);
|
||||
height: var(--icon);
|
||||
}
|
||||
.list__link {
|
||||
.listItem {
|
||||
text-decoration: none;
|
||||
font-size: var(--fses);
|
||||
font-size: var(--fg-list);
|
||||
color: var(--fg);
|
||||
margin-top: 1vh;
|
||||
padding: 8px 12px;
|
||||
@ -279,7 +291,7 @@ body {
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
}
|
||||
.list__link:hover {
|
||||
.listItem:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--sfg);
|
||||
}
|
||||
@ -302,7 +314,7 @@ body {
|
||||
}
|
||||
|
||||
#greetings {
|
||||
font-size: var(--fss);
|
||||
font-size: var(--fg-secondary);
|
||||
}
|
||||
|
||||
.list {
|
||||
@ -313,7 +325,7 @@ body {
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.buttonLink {
|
||||
.button {
|
||||
grid-gap: 3vw;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
// ┌─┐┌─┐┬─┐┌┬┐┌─┐
|
||||
// │ ├─┤├┬┘ ││└─┐
|
||||
// └─┘┴ ┴┴└──┴┘└─┘
|
||||
// Function to print Button Cards.
|
||||
|
||||
// Print cards
|
||||
const printCards = () => {
|
||||
for (const card of CONFIG.cards) {
|
||||
// Card Item
|
||||
let item = `
|
||||
<a
|
||||
href="${card.link}"
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
class="buttons__link card buttonLink__link-${card.id}"
|
||||
class="card button button__${card.id}"
|
||||
>
|
||||
<i class="buttonLink__icon" icon-name="${card.icon}"></i>
|
||||
<i class="buttonIcon" icon-name="${card.icon}"></i>
|
||||
</a>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
// ┬ ┬┌─┐┌┬┐┌─┐
|
||||
// │ │└─┐ │ └─┐
|
||||
// ┴─┘┴└─┘ ┴ └─┘
|
||||
// Functions for printing both lists
|
||||
|
||||
// Print the first List
|
||||
const printFirstList = () => {
|
||||
let icon = `<i class="list__head" icon-name="${CONFIG.firstListIcon}"></i>`;
|
||||
let icon = `<i class="listIcon" icon-name="${CONFIG.firstListIcon}"></i>`;
|
||||
const position = 'beforeend';
|
||||
list_1.insertAdjacentHTML(position, icon);
|
||||
for (const link of CONFIG.lists.firstList) {
|
||||
// List item
|
||||
let item = `
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${link.link}"
|
||||
class="list__link"
|
||||
class="listItem"
|
||||
>${link.name}</a
|
||||
>
|
||||
`;
|
||||
@ -22,18 +21,16 @@ const printFirstList = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Print the second List
|
||||
const printSecondList = () => {
|
||||
let icon = `<i class="list__head" icon-name="${CONFIG.secondListIcon}"></i>`;
|
||||
let icon = `<i class="listIcon" icon-name="${CONFIG.secondListIcon}"></i>`;
|
||||
const position = 'beforeend';
|
||||
list_2.insertAdjacentHTML(position, icon);
|
||||
for (const link of CONFIG.lists.secondList) {
|
||||
// List item
|
||||
let item = `
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${link.link}"
|
||||
class="list__link"
|
||||
class="listItem"
|
||||
>${link.name}</a
|
||||
>
|
||||
`;
|
||||
|
||||
@ -34,6 +34,7 @@ if (darkTheme === 'enabled') {
|
||||
disableDark();
|
||||
}
|
||||
|
||||
// Toggle Theme Listener
|
||||
themeToggle.addEventListener('click', () => {
|
||||
darkTheme = localStorage.getItem('darkTheme');
|
||||
if (darkTheme !== 'enabled') {
|
||||
@ -58,6 +59,7 @@ if (CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
|
||||
}
|
||||
}
|
||||
|
||||
// Theme Autochanger
|
||||
if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS) {
|
||||
const date = new Date();
|
||||
const hours =
|
||||
|
||||
@ -23,8 +23,8 @@ const CONFIG = {
|
||||
greetingNight: 'Go to Sleep!',
|
||||
|
||||
// Weather
|
||||
weatherKey: 'InsertYourAPIKeyHere123456',
|
||||
weatherIcons: 'OneDark', // 'Nord', 'Dark', 'White'
|
||||
weatherKey: 'InsertYourAPIKeyHere123456', // Write here your API Key
|
||||
weatherIcons: 'OneDark', // 'Onedark', 'Nord', 'Dark', 'White'
|
||||
weatherUnit: 'C', // 'F', 'C'
|
||||
language: 'en', // More languages in https://openweathermap.org/current#multi
|
||||
|
||||
|
||||
24
index.html
24
index.html
@ -27,29 +27,29 @@
|
||||
|
||||
<div class="timeBlock">
|
||||
<div class="clock">
|
||||
<div id="hour" class=""></div>
|
||||
<div id="separator" class=""></div>
|
||||
<div id="minutes" class=""></div>
|
||||
<div id="hour"></div>
|
||||
<div id="separator"></div>
|
||||
<div id="minutes"></div>
|
||||
</div>
|
||||
<div id="greetings" class=""></div>
|
||||
<div id="greetings"></div>
|
||||
</div>
|
||||
|
||||
<!-- Date and Weather -->
|
||||
|
||||
<div class="weatherBlock">
|
||||
<div class="date">
|
||||
<div id="month" class=""></div>
|
||||
<div id="day" class=""></div>
|
||||
<div id="month"></div>
|
||||
<div id="day"></div>
|
||||
</div>
|
||||
<div class="weather">
|
||||
<div class="weatherIcon">
|
||||
<img src="assets/icons/OneDark/unknown.png" />
|
||||
</div>
|
||||
<div class="weatherValue">
|
||||
<p class="">- °<span class="g">c</span></p>
|
||||
<p>- °<span class="g">c</span></p>
|
||||
</div>
|
||||
<div class="weatherDescription">
|
||||
<p class=""></p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,7 +60,7 @@
|
||||
└─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
|
||||
-->
|
||||
|
||||
<div class="buttons" id="buttonsContainer"></div>
|
||||
<div class="buttonsBlock" id="buttonsContainer"></div>
|
||||
|
||||
<!--
|
||||
┬ ┬┌─┐┌┬┐┌─┐
|
||||
@ -84,11 +84,13 @@
|
||||
|
||||
<script src="assets/js/cards.js"></script>
|
||||
<script src="assets/js/lists.js"></script>
|
||||
|
||||
<!-- Icons -->
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<!-- Developed and designed by Miguel R. Ávila: -->
|
||||
<!-- https://github.com/migueravila -->
|
||||
<!-- Developed and designed by Miguel Ávila: -->
|
||||
<!-- https://avila.sh-->
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user