mirror of
https://gitlab.com/tavo-wasd/conex-pages.git
synced 2025-06-07 13:33: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 {
|
@media (prefers-color-scheme: dark) {
|
||||||
font-family: sans-serif;
|
:root {
|
||||||
margin: 0 auto;
|
--background-color: #1d2021;
|
||||||
height: 100%;
|
--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 {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.banner {
|
||||||
padding: 6vh;
|
padding: 6vh;
|
||||||
box-shadow: 0 15vh 30vh black inset;
|
box-shadow: 0 15vh 30vh black inset;
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin-bottom: 2vh;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.desc {
|
.desc h1,
|
||||||
vertical-align: middle;
|
.desc p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
}
|
||||||
padding-bottom: 0;
|
|
||||||
|
.desc h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 1em auto -0.4em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.banner h1 {
|
div.banner h1 {
|
||||||
color: white;
|
color: white;
|
||||||
margin-bottom: 0.1em;
|
margin-bottom: -0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.banner p {
|
div.banner p {
|
||||||
color: white;
|
color: white;
|
||||||
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.profilepicture img {
|
div.profilepicture img {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
max-width: 250px;
|
max-width: 250px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SEARCH */
|
|
||||||
|
|
||||||
div.search {
|
div.search {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 4vh;
|
margin: 1em 0 2em 0;
|
||||||
margin-bottom: 4vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
background-color: #dcdcdc;
|
background-color: var(--hover-background);
|
||||||
border-radius: 50px;
|
color: var(--unemph-color);
|
||||||
border-style: solid;
|
border-radius: 50px;
|
||||||
border-color: white;
|
border: 1px solid var(--hover-border);
|
||||||
border-width: 1px;
|
text-align: left;
|
||||||
text-align: left;
|
max-width: 30em;
|
||||||
max-width: 500px;
|
width: 90%;
|
||||||
width: 90%;
|
padding: 1.2em;
|
||||||
padding: 1.1rem;
|
font-size: 1em;
|
||||||
font-size: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CARDS */
|
|
||||||
|
|
||||||
div.cardscontainer {
|
div.cardscontainer {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
display: grid;
|
display: grid;
|
||||||
line-height: 0.2em;
|
line-height: 0.2em;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 90%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.cardscontainer p {
|
div.cardscontainer p {
|
||||||
line-height: 1.2em;
|
color: var(--unemph-color);
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.cardscontainer h1,h2,h3 {
|
div.cardscontainer h1,h2,h3 {
|
||||||
line-height: 1.2em;
|
color: var(--color);
|
||||||
margin-bottom: -0.4em;
|
line-height: 1.2em;
|
||||||
|
margin-bottom: -0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.card {
|
div.card {
|
||||||
color: black;
|
border: 1px solid var(--hover-border);
|
||||||
border-radius: 10px;
|
color: black;
|
||||||
padding: 1px 15px;
|
border-radius: 10px;
|
||||||
margin-bottom: 2vh;
|
padding: 0 1em;
|
||||||
|
margin: 0 0.5em 1.5em 0.5em;
|
||||||
|
transition: all 0.3s ease 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.card h2,a {
|
div.card h2,a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
margin-top: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.card:hover {
|
div.card:hover {
|
||||||
transition: all 0.3s ease 0s;
|
background-color: var(--hover-background);
|
||||||
background-color: #dcdcdc;
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CONTENT */
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-bottom: 4vh;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content h1 {
|
.content li {
|
||||||
margin-top: 1em;
|
line-height: 1.4em;
|
||||||
}
|
text-align: left;
|
||||||
|
|
||||||
.content p,li {
|
|
||||||
line-height: 1.4em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content p {
|
.content p {
|
||||||
text-align: justify;
|
line-height: 1.4em;
|
||||||
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content img {
|
.content img {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOOTER */
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: #dcdcdc;
|
background-color: var(--hover-background);
|
||||||
color: #757575;
|
color: var(--unemph-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 1em auto 0 auto;
|
||||||
margin-top: 2vh;
|
padding-top: 1em;
|
||||||
padding-top: 2vh;
|
padding-bottom: 1em;
|
||||||
padding-bottom: 2vh;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const removeClass = className => Array.from(document.getElementsByClassName(className)).forEach(e => e.classList.remove(className));
|
const removeClass = className => Array.from(document.getElementsByClassName(className)).forEach(e => e.classList.remove(className));
|
||||||
removeClass("js-only");
|
removeClass("js-only");
|
||||||
|
|
||||||
const cards = document.querySelectorAll("#cardscontainer a");
|
const cards = document.querySelectorAll("#cardscontainer a");
|
||||||
const search = document.getElementById("search");
|
const search = document.getElementById("search");
|
||||||
const cardscontainer = document.getElementById("cardscontainer");
|
const cardscontainer = document.getElementById("cardscontainer");
|
||||||
|
|
||||||
search.addEventListener("input", () => {
|
search.addEventListener("input", () => {
|
||||||
const normalizeText = text => text.toLowerCase().trim().normalize('NFD').replace(/\p{Diacritic}/gu, "");
|
const normalizeText = text => text.toLowerCase().trim().normalize('NFD').replace(/\p{Diacritic}/gu, "");
|
||||||
const searchTerms = normalizeText(search.value).split(" ");
|
const searchTerms = normalizeText(search.value).split(" ");
|
||||||
const hasFilter = searchTerms.length > 0;
|
const hasFilter = searchTerms.length > 0;
|
||||||
|
|
||||||
cardscontainer.classList.toggle("list-searched", hasFilter);
|
cardscontainer.classList.toggle("list-searched", hasFilter);
|
||||||
|
|
||||||
cards.forEach(card => {
|
cards.forEach(card => {
|
||||||
const cardText = normalizeText(`${card.textContent} ${card.dataset.tags}`);
|
const cardText = normalizeText(`${card.textContent} ${card.dataset.tags}`);
|
||||||
const isMatch = searchTerms.every(term => cardText.includes(term));
|
const isMatch = searchTerms.every(term => cardText.includes(term));
|
||||||
|
|
||||||
card.hidden = !isMatch;
|
card.hidden = !isMatch;
|
||||||
card.classList.toggle("matched-card", hasFilter && isMatch);
|
card.classList.toggle("matched-card", hasFilter && isMatch);
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue