Skip to content

Commit 36d6b30

Browse files
devbatterydevbattery
committed
feat: 홈 화면 모던화
1 parent ccb76dd commit 36d6b30

5 files changed

Lines changed: 277 additions & 6 deletions

File tree

‎.idea/watcherTasks.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml‎

Lines changed: 71 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_sass/minimal-mistakes/_home-modern.scss‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/* ==========================================================================
2+
HOME MODERN LAYOUT
3+
========================================================================== */
4+
5+
.layout--home {
6+
#main {
7+
@include breakpoint($large) {
8+
display: grid;
9+
grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
10+
gap: clamp(2rem, 3vw, 4rem);
11+
align-items: start;
12+
max-width: 96rem;
13+
padding-left: clamp(1.25rem, 2vw, 2rem);
14+
padding-right: clamp(1.25rem, 2vw, 2rem);
15+
}
16+
}
17+
18+
.sidebar {
19+
@include breakpoint($large) {
20+
float: none;
21+
width: auto;
22+
margin-top: 1.5rem;
23+
opacity: 1;
24+
}
25+
}
26+
27+
.archive {
28+
@include breakpoint($large) {
29+
float: none;
30+
width: auto;
31+
min-width: 0;
32+
margin-top: 1.5rem;
33+
padding-right: 0;
34+
}
35+
}
36+
37+
.archive .page__title {
38+
margin-bottom: 0.35rem;
39+
letter-spacing: -0.04em;
40+
line-height: 0.95;
41+
font-size: clamp(2.2rem, 4vw, 3.4rem);
42+
}
43+
44+
.archive__subtitle {
45+
display: flex;
46+
align-items: center;
47+
gap: 0.85rem;
48+
margin: 0 0 1.75rem;
49+
padding-bottom: 0.9rem;
50+
border-bottom: 1px solid rgba($border-color, 0.88);
51+
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
52+
font-weight: 700;
53+
color: mix($text-color, $muted-text-color, 75%);
54+
55+
&::after {
56+
content: "";
57+
flex: 1;
58+
height: 1px;
59+
background: linear-gradient(
60+
90deg,
61+
rgba($primary-color, 0.32) 0%,
62+
rgba($border-color, 0.08) 100%
63+
);
64+
}
65+
}
66+
67+
.entries-grid {
68+
display: grid;
69+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
70+
gap: clamp(1.25rem, 1rem + 1vw, 1.9rem);
71+
align-items: stretch;
72+
}
73+
74+
.grid__item {
75+
float: none;
76+
clear: none !important;
77+
width: auto !important;
78+
min-width: 0;
79+
margin: 0 !important;
80+
margin-bottom: 0;
81+
}
82+
83+
.grid__item .archive__item {
84+
display: flex;
85+
flex-direction: column;
86+
gap: 0.9rem;
87+
height: 100%;
88+
padding: clamp(0.9rem, 0.8rem + 0.35vw, 1.15rem);
89+
border: 1px solid mix($border-color, $primary-color, 86%);
90+
border-radius: 1.25rem;
91+
background: linear-gradient(
92+
180deg,
93+
rgba(mix($background-color, #fff, 96%), 0.98) 0%,
94+
rgba(mix($background-color, $border-color, 92%), 0.98) 100%
95+
);
96+
box-shadow: 0 18px 40px -28px rgba(#000, 0.55);
97+
transition:
98+
transform 0.24s ease,
99+
box-shadow 0.24s ease,
100+
border-color 0.24s ease;
101+
}
102+
103+
.grid__item .archive__item:hover {
104+
transform: translateY(-4px);
105+
border-color: rgba($primary-color, 0.42);
106+
box-shadow: 0 28px 54px -30px rgba(#000, 0.62);
107+
}
108+
109+
.grid__item .archive__item-teaser {
110+
aspect-ratio: 16 / 9;
111+
max-height: none;
112+
border-radius: 1rem;
113+
border: 1px solid rgba($border-color, 0.8);
114+
background: mix($background-color, $border-color, 92%);
115+
}
116+
117+
.grid__item .archive__item-teaser img {
118+
width: 100%;
119+
height: 100%;
120+
object-fit: cover;
121+
}
122+
123+
.grid__item .archive__item:hover .archive__item-teaser img {
124+
transform: scale(1.02);
125+
}
126+
127+
.grid__item .archive__item-title {
128+
margin-top: 0;
129+
margin-bottom: 0;
130+
font-size: clamp(1.12rem, 1rem + 0.35vw, 1.45rem);
131+
line-height: 1.24;
132+
letter-spacing: -0.03em;
133+
}
134+
135+
.grid__item .archive__item-title a[rel="permalink"] {
136+
display: block;
137+
display: -webkit-box;
138+
overflow: hidden;
139+
-webkit-box-orient: vertical;
140+
-webkit-line-clamp: 2;
141+
}
142+
143+
.grid__item .page__meta {
144+
margin: 0;
145+
font-size: 0.72rem;
146+
line-height: 1.55;
147+
}
148+
149+
.grid__item .archive__item-excerpt {
150+
display: block;
151+
display: -webkit-box;
152+
margin-bottom: 0;
153+
overflow: hidden;
154+
line-height: 1.6;
155+
-webkit-box-orient: vertical;
156+
-webkit-line-clamp: 2;
157+
}
158+
159+
.pagination {
160+
float: none;
161+
margin-top: 2.25rem;
162+
padding-top: 0;
163+
}
164+
165+
.pagination ul {
166+
display: flex;
167+
flex-wrap: wrap;
168+
justify-content: center;
169+
gap: 0.45rem;
170+
}
171+
172+
.pagination li {
173+
float: none;
174+
margin-left: 0;
175+
}
176+
177+
.pagination li a {
178+
min-width: 2.75rem;
179+
margin-bottom: 0;
180+
padding: 0.62rem 0.95rem;
181+
border: 1px solid mix($border-color, $primary-color, 88%);
182+
border-radius: 999px;
183+
background: mix($background-color, $border-color, 93%);
184+
}
185+
186+
.pagination li a:hover {
187+
transform: translateY(-1px);
188+
text-decoration: none;
189+
border-color: rgba($primary-color, 0.42);
190+
}
191+
192+
.pagination li:first-child a,
193+
.pagination li:last-child a {
194+
border-radius: 999px;
195+
}
196+
}

‎assets/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ search: false
1111
@import "minimal-mistakes";
1212
@import "minimal-mistakes/nav-enhancements";
1313
@import "minimal-mistakes/sidebar-nav-modern";
14+
@import "minimal-mistakes/home-modern";
1415

1516
@import url("//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css");
1617

‎assets/css/main_dark.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ search: false
1111
@import "minimal-mistakes";
1212
@import "minimal-mistakes/nav-enhancements";
1313
@import "minimal-mistakes/sidebar-nav-modern";
14+
@import "minimal-mistakes/home-modern";
1415

1516
@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
1617

0 commit comments

Comments
 (0)