mirror of
https://gitlab.com/tavo-wasd/conex-pages.git
synced 2025-06-06 13:03:29 -06:00
updated css
This commit is contained in:
parent
cbf1474daa
commit
e00cf2585a
2 changed files with 150 additions and 103 deletions
|
|
@ -1,144 +1,192 @@
|
|||
/* PROPERTIES */
|
||||
:root {
|
||||
--background-color: white;
|
||||
--color: black;
|
||||
--color: black;
|
||||
--page-width: 768px;
|
||||
--navbar-width: 50%;
|
||||
--font-family: sans-serif;
|
||||
--logo: url('logo.png');
|
||||
--unemph-color: #505050;
|
||||
--hover-background: #dcdcdc;
|
||||
--hover-border: #aaa;
|
||||
--line-height: 1.7;
|
||||
--smaller-font: 0.75em;
|
||||
--hyper-color: #0f82af;
|
||||
text-align: justify;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
html,body {
|
||||
font-family: sans-serif;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #1d2021;
|
||||
--color: white;
|
||||
--hover-background: #282c2d;
|
||||
--unemph-color: #909090;
|
||||
--hover-border: #505050;
|
||||
--hyper-color: #00b4db;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--page-width: 90%;
|
||||
--navbar-width: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
h1, h2, h3, h4 {
|
||||
margin-top: 1.5em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--hyper-color);
|
||||
}
|
||||
|
||||
.content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 6vh;
|
||||
box-shadow: 0 15vh 30vh black inset;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
margin-bottom: 2vh;
|
||||
padding: 6vh;
|
||||
box-shadow: 0 15vh 30vh black inset;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
div.desc {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
.desc h1,
|
||||
.desc p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc h1 {
|
||||
text-align: center;
|
||||
margin: 1em auto -0.4em auto;
|
||||
}
|
||||
|
||||
div.banner h1 {
|
||||
color: white;
|
||||
margin-bottom: 0.1em;
|
||||
color: white;
|
||||
margin-bottom: -0.2em;
|
||||
}
|
||||
|
||||
div.banner p {
|
||||
color: white;
|
||||
color: white;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
div.profilepicture img {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
margin-top: 2em;
|
||||
width: 50%;
|
||||
max-width: 250px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
margin-top: 2em;
|
||||
width: 50%;
|
||||
max-width: 250px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* SEARCH */
|
||||
|
||||
div.search {
|
||||
text-align: center;
|
||||
margin-top: 4vh;
|
||||
margin-bottom: 4vh;
|
||||
text-align: center;
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #dcdcdc;
|
||||
border-radius: 50px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
padding: 1.1rem;
|
||||
font-size: 1em;
|
||||
background-color: var(--hover-background);
|
||||
color: var(--unemph-color);
|
||||
border-radius: 50px;
|
||||
border: 1px solid var(--hover-border);
|
||||
text-align: left;
|
||||
max-width: 30em;
|
||||
width: 90%;
|
||||
padding: 1.2em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
|
||||
div.cardscontainer {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
display: grid;
|
||||
line-height: 0.2em;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
display: grid;
|
||||
line-height: 0.2em;
|
||||
margin: 0 auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
div.cardscontainer p {
|
||||
line-height: 1.2em;
|
||||
color: var(--unemph-color);
|
||||
text-align: left;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
div.cardscontainer h1,h2,h3 {
|
||||
line-height: 1.2em;
|
||||
margin-bottom: -0.4em;
|
||||
color: var(--color);
|
||||
line-height: 1.2em;
|
||||
margin-bottom: -0.4em;
|
||||
}
|
||||
|
||||
div.card {
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
padding: 1px 15px;
|
||||
margin-bottom: 2vh;
|
||||
border: 1px solid var(--hover-border);
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
padding: 0 1em;
|
||||
margin: 0 0.5em 1.5em 0.5em;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
div.card h2,a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
div.card:hover {
|
||||
transition: all 0.3s ease 0s;
|
||||
background-color: #dcdcdc;
|
||||
background-color: var(--hover-background);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
margin-bottom: 4vh;
|
||||
flex: 1 0 auto;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.content p,li {
|
||||
line-height: 1.4em;
|
||||
.content li {
|
||||
line-height: 1.4em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content p {
|
||||
text-align: justify;
|
||||
line-height: 1.4em;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content img {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
background-color: #dcdcdc;
|
||||
color: #757575;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
padding-top: 2vh;
|
||||
padding-bottom: 2vh;
|
||||
background-color: var(--hover-background);
|
||||
color: var(--unemph-color);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 1em auto 0 auto;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const removeClass = className => Array.from(document.getElementsByClassName(className)).forEach(e => e.classList.remove(className));
|
||||
removeClass("js-only");
|
||||
const removeClass = className => Array.from(document.getElementsByClassName(className)).forEach(e => e.classList.remove(className));
|
||||
removeClass("js-only");
|
||||
|
||||
const cards = document.querySelectorAll("#cardscontainer a");
|
||||
const search = document.getElementById("search");
|
||||
const cardscontainer = document.getElementById("cardscontainer");
|
||||
const cards = document.querySelectorAll("#cardscontainer a");
|
||||
const search = document.getElementById("search");
|
||||
const cardscontainer = document.getElementById("cardscontainer");
|
||||
|
||||
search.addEventListener("input", () => {
|
||||
const normalizeText = text => text.toLowerCase().trim().normalize('NFD').replace(/\p{Diacritic}/gu, "");
|
||||
const searchTerms = normalizeText(search.value).split(" ");
|
||||
const hasFilter = searchTerms.length > 0;
|
||||
search.addEventListener("input", () => {
|
||||
const normalizeText = text => text.toLowerCase().trim().normalize('NFD').replace(/\p{Diacritic}/gu, "");
|
||||
const searchTerms = normalizeText(search.value).split(" ");
|
||||
const hasFilter = searchTerms.length > 0;
|
||||
|
||||
cardscontainer.classList.toggle("list-searched", hasFilter);
|
||||
cardscontainer.classList.toggle("list-searched", hasFilter);
|
||||
|
||||
cards.forEach(card => {
|
||||
const cardText = normalizeText(`${card.textContent} ${card.dataset.tags}`);
|
||||
const isMatch = searchTerms.every(term => cardText.includes(term));
|
||||
cards.forEach(card => {
|
||||
const cardText = normalizeText(`${card.textContent} ${card.dataset.tags}`);
|
||||
const isMatch = searchTerms.every(term => cardText.includes(term));
|
||||
|
||||
card.hidden = !isMatch;
|
||||
card.classList.toggle("matched-card", hasFilter && isMatch);
|
||||
});
|
||||
card.hidden = !isMatch;
|
||||
card.classList.toggle("matched-card", hasFilter && isMatch);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue