Navigation
#main-nav .social {
display: none;
}
#main-nav .container {
grid-template-columns: 1fr;
grid-gap: 1.2rem;
}
#main-nav ul,
#main-nav .logo {
justify-self: center;
}
#main-nav ul li a {
padding: 0.50rem;
}
sns 아이콘을 지웠다.
로고와 메뉴가 세로 한 줄로 배치되도록
grid-template-columns:1fr;을 주고
각자 중앙에 배치될 수 있게 justify-self:center;을 주었다.
링크 버튼이 좀 작아졌으면 해서 패딩을 조절.
#home-articles .articles-container {
grid-template-columns: repeat(2, 1fr);
}
#home-articles .articles-container > *:first-child,
#home-articles .articles-container > *:last-child {
grid-template-columns: 1fr;
grid-column: 1;
}
원래 articles-container는 grid-template-columns:repeat(3, 1fr); 이었는데
작은 모니터에서는 column 2개로.
첫번째 아티클과 마지막 아티클이 그 내부에 grid를 가지고 span해 있었는데
작은 스크린에서는 1fr로 만들고
grid-column:1; (span하지 않고 원래 default값)
더 작은 모바일 화면에서
@media(max-width: 600px) {
/* Stack Grid Items */
#showcase .showcase-container,
#home-articles .articles-container,
#main-footer .footer-container {
grid-template-columns: 1fr;
}
#main-footer .footer-container > *:last-child {
grid-column: 1;
}
}
showcase와 article과 footer container 모두를 grid-template-columns:1fr;로 만들어준다.
이것만 하면 footer에 아무 변화가 없는데 그 이유는 원래 화면에서 마지막 element를 span해줬기 때문.
그걸 제거해야지 완벽하게 items가 stack together.
그래서 footer container의 마지막 child를 선택해서 grid-column:1;
@media(max-width: 600px) {
/* Stack Grid Items */
#showcase .showcase-container,
#home-articles .articles-container,
#main-footer .footer-container {
grid-template-columns: 1fr;
}
#main-footer .footer-container > *:last-child {
grid-column: 1;
}
#main-footer .footer-container > *:first-child,
#main-footer .footer-container > *:nth-child(2){
border-bottom: #444 dotted 1px;
padding-bottom: 1rem;
}
}
footer에 border-bottom을 추가해서 구획을 선명하게
@media(max-width: 600px) {
/* Stack Grid Items */
#showcase .showcase-container,
#home-articles .articles-container,
#main-footer .footer-container {
grid-template-columns: 1fr;
}
#main-footer .footer-container > *:last-child {
grid-column: 1;
}
#main-footer .footer-container > *:first-child,
#main-footer .footer-container > *:nth-child(2){
border-bottom: #444 dotted 1px;
padding-bottom: 1rem;
}
.page-container {
grid-template-columns: 1fr;
text-align: center;
}
.page-container > *:first-child {
grid-row: 1;
}
.l-heading {
font-size: 2rem;
}
}
about 페이지와 article 페이지도 한 줄로 stack
헤딩 사이즈도 좀 조절
'Mini Projects' 카테고리의 다른 글
Knowledge Timeline (2) Base CSS (0) | 2020.07.08 |
---|---|
Knowledge Timeline (1) HTML (0) | 2020.07.08 |
News Grid (11) style meta info (0) | 2020.07.06 |
News Grid (10) Article Page (0) | 2020.07.06 |
News Grid (9) About Page & Inner Page Grid Container(Utility) (0) | 2020.07.06 |