chore: styles
This commit is contained in:
parent
39ce5ea05c
commit
ea67473957
7 changed files with 48 additions and 36 deletions
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "22.3.7",
|
||||
"version": "22.3.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "22.3.7",
|
||||
"version": "22.3.8",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.5.0",
|
||||
|
|
@ -1147,9 +1147,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.7",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz",
|
||||
"integrity": "sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==",
|
||||
"version": "1.5.8",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.8.tgz",
|
||||
"integrity": "sha512-4Nx0gP2tPNBLTrFxBMHpkQbtn2hidPVr/+/FTtcCiBYTucqc70zRyVZiOLj17Ui3wTO7SQ1/N+hkHYzJjBzt6A==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "22.3.7",
|
||||
"version": "22.3.8",
|
||||
"description": "The source for my personal site. Built using 11ty (and other tools).",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
content: '';
|
||||
top: 0;
|
||||
left: 1px;
|
||||
box-shadow: inset 0 -85px 60px -65px var(--black);
|
||||
box-shadow: inset 0 -85px 60px -60px var(--black);
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 1px);
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
color: var(--color-lightest);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5;
|
||||
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
text-shadow: var(--black) 0px 0px 10px;
|
||||
}
|
||||
|
||||
& .header {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: #000000b3;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,17 +12,18 @@
|
|||
|
||||
& .item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--sizing-md);
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
margin-top: var(--sizing-sm);
|
||||
max-width: 40%;
|
||||
margin-left: var(--sizing-lg);
|
||||
}
|
||||
|
||||
& img {
|
||||
|
|
@ -39,13 +40,13 @@
|
|||
& .presentation {
|
||||
justify-content: start;
|
||||
gap: var(--sizing-md);
|
||||
width: calc(55% - var(--sizing-lg));
|
||||
}
|
||||
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
& .meta-text {
|
||||
|
|
@ -89,13 +90,8 @@
|
|||
}
|
||||
|
||||
& .timestamp {
|
||||
margin-left: var(--sizing-lg);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& .info {
|
||||
max-width: calc(75% - var(--sizing-lg));
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,8 +101,7 @@
|
|||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-bottom: var(--sizing-base);
|
||||
|
||||
& .item {
|
||||
& .meta {
|
||||
& .item .meta {
|
||||
max-width: 80%;
|
||||
|
||||
& .title {
|
||||
|
|
@ -120,7 +115,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.music-chart {
|
||||
|
|
@ -134,6 +128,10 @@
|
|||
}
|
||||
|
||||
& .item {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& .meta {
|
||||
width: calc(75% - var(--sizing-lg));
|
||||
}
|
||||
|
|
@ -141,6 +139,20 @@
|
|||
& .meta-text {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
& .timestamp {
|
||||
margin-left: var(--sizing-lg);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& .info {
|
||||
max-width: calc(75% - var(--sizing-lg));
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
margin-left: var(--sizing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
&.grid {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
overflow: hidden;
|
||||
height: var(--sizing-lg);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
& .progress-bar {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
border: 0
|
||||
}
|
||||
|
||||
& a:focus .shadow::after,
|
||||
& a:focus-within .shadow::after {
|
||||
& a:focus .shadow:after,
|
||||
& a:focus-within .shadow:after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
|
|
|
|||
Reference in a new issue