mirror of
https://github.com/kristoferssolo/kristofersxyz.git
synced 2026-03-22 00:26:20 +00:00
push
This commit is contained in:
Kristofers Solo
72
static/projects/css/karbs/karbs.css
Normal file
72
static/projects/css/karbs/karbs.css
Normal file
@@ -0,0 +1,72 @@
|
||||
main {
|
||||
border: var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
max-width: 700px;
|
||||
color: var(--text-color);
|
||||
padding: 50px;
|
||||
margin: 100px auto 100px auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--hr-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 40px 0 0 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: var(--link-text-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, "courier new";
|
||||
color: var(--text-color);
|
||||
background-color: var(--code-bg-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: var(--bg);
|
||||
display: block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
aside {
|
||||
color: #8b949e;
|
||||
font-size: 12px;
|
||||
margin: 10px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 10px 40px;
|
||||
}
|
||||
|
||||
.upper {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.sub {
|
||||
list-style-type: disc;
|
||||
}
|
||||
169
static/projects/css/projects.css
Normal file
169
static/projects/css/projects.css
Normal file
@@ -0,0 +1,169 @@
|
||||
:root {
|
||||
--color-card-default: var(--color-scale-gray-8);
|
||||
--color-card-border: var(--color-scale-gray-0-transparent-10);
|
||||
--color-card-bg-hover: var(--color-scale-purple-4-transparent-06);
|
||||
--color-card-accent: var(--color-accent-fg);
|
||||
}
|
||||
|
||||
.body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
max-width: 916px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#cards:hover > .card::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--color-card-border);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 260px;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card::before,
|
||||
.card::after {
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transition: opacity 500ms;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
background: radial-gradient(
|
||||
800px circle at var(--mouse-x) var(--mouse-y),
|
||||
var(--color-card-bg-hover),
|
||||
transparent 40%
|
||||
);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
background: radial-gradient(
|
||||
600px circle at var(--mouse-x) var(--mouse-y),
|
||||
var(--color-card-accent),
|
||||
transparent 40%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card > .card-content {
|
||||
background-color: var(--color-card-default);
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
inset: 1px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
span {
|
||||
color: var(--color-fg-default);
|
||||
font-weight: 400;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.card-info-wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-info-title > h3 {
|
||||
font-size: 1.1em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
body {
|
||||
align-items: flex-start;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#cards {
|
||||
max-width: 1000px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-shrink: 1;
|
||||
width: calc(50% - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.card {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.card-image > i {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.card-info-wrapper {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.card-info > i {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.card-info-title > h3 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.card-info-title > h4 {
|
||||
font-size: 0.8em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 35em) {
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
9
static/projects/js/projects.js
Normal file
9
static/projects/js/projects.js
Normal file
@@ -0,0 +1,9 @@
|
||||
document.getElementById("cards").onmousemove = (e) => {
|
||||
for (const CARD of document.getElementsByClassName("card")) {
|
||||
const RECT = CARD.getBoundingClientRect(),
|
||||
x = e.clientX - RECT.left,
|
||||
y = e.clientY - RECT.top
|
||||
CARD.style.setProperty("--mouse-x", `${x}px`)
|
||||
CARD.style.setProperty("--mouse-y", `${y}px`)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user