style: Blog/Tech/Worksページのテック感統一
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 29s
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 29s
This commit is contained in:
parent
51a1104284
commit
7a509d5dc5
@ -23,3 +23,55 @@
|
||||
--ifm-color-primary-lightest: #4fddbf;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ===== Markdown Pages - Tech Style ===== */
|
||||
@keyframes mdFadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.theme-doc-markdown {
|
||||
animation: mdFadeInUp 0.5s ease both;
|
||||
}
|
||||
|
||||
.theme-doc-markdown h1,
|
||||
.theme-doc-markdown h2 {
|
||||
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.theme-doc-markdown ul > li {
|
||||
list-style: none;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.theme-doc-markdown ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.theme-doc-markdown ul > li > a {
|
||||
display: block;
|
||||
padding: 0.9rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-left: 3px solid var(--ifm-color-primary);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.theme-doc-markdown ul > li > a:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
border-left-color: var(--ifm-color-primary);
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 16px rgba(46,133,85,0.25);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-markdown ul > li > a:hover {
|
||||
box-shadow: 0 0 16px rgba(37,194,160,0.25);
|
||||
}
|
||||
|
||||
@ -1,55 +1,87 @@
|
||||
/* ===== Animations ===== */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ===== Main ===== */
|
||||
.main {
|
||||
min-height: calc(100vh - 60px);
|
||||
padding: 2rem;
|
||||
padding: 3rem 2rem;
|
||||
background:
|
||||
radial-gradient(circle, rgba(46,133,85,0.12) 1px, transparent 1px) 0 0 / 24px 24px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .main {
|
||||
background:
|
||||
radial-gradient(circle, rgba(37,194,160,0.15) 1px, transparent 1px) 0 0 / 24px 24px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
animation: fadeInUp 0.5s ease both;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
|
||||
font-size: 2.2rem;
|
||||
color: var(--ifm-color-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
|
||||
font-size: 0.95rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.works {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.workCard {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-left: 3px solid var(--ifm-color-primary);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
animation: fadeInUp 0.5s ease both;
|
||||
}
|
||||
|
||||
.workCard:nth-child(1) { animation-delay: 0.1s; }
|
||||
.workCard:nth-child(2) { animation-delay: 0.2s; }
|
||||
.workCard:nth-child(3) { animation-delay: 0.3s; }
|
||||
.workCard:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
.workCard:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-left-color: var(--ifm-color-primary);
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 16px rgba(46,133,85,0.25);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .workCard:hover {
|
||||
box-shadow: 0 0 16px rgba(37,194,160,0.25);
|
||||
}
|
||||
|
||||
.workName {
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 0.6rem 0;
|
||||
}
|
||||
|
||||
.workDescription {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.5;
|
||||
@ -62,9 +94,17 @@
|
||||
}
|
||||
|
||||
.workTag {
|
||||
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
|
||||
font-size: 0.75rem;
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: transparent;
|
||||
color: var(--ifm-color-primary);
|
||||
padding: 0.2rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--ifm-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title { font-size: 1.8rem; }
|
||||
.main { padding: 2rem 1rem; }
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ export default function Works(): React.JSX.Element {
|
||||
>
|
||||
<main className={styles.main}>
|
||||
<div className={styles.container}>
|
||||
<h1 className={styles.title}>🛠 Works</h1>
|
||||
<h1 className={styles.title}>// Works</h1>
|
||||
<p className={styles.subtitle}>作ったもの・関わったもの</p>
|
||||
|
||||
<div className={styles.works}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user