diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/challenge/skeleton-ui/jiho/YouTube_Logo_2017.svg b/challenge/skeleton-ui/jiho/YouTube_Logo_2017.svg new file mode 100644 index 0000000..86a44d8 --- /dev/null +++ b/challenge/skeleton-ui/jiho/YouTube_Logo_2017.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/challenge/skeleton-ui/jiho/index.html b/challenge/skeleton-ui/jiho/index.html new file mode 100644 index 0000000..5d62c51 --- /dev/null +++ b/challenge/skeleton-ui/jiho/index.html @@ -0,0 +1,66 @@ + + + + + + + Document + + + +
+
+ +
+
+
+ + +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+

Dog Video

+

+ this is video is amazing.this is video is amazing.this is + video is amazing.this is video is amazing.this is video is + amazing. +

+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/challenge/skeleton-ui/jiho/search.svg b/challenge/skeleton-ui/jiho/search.svg new file mode 100644 index 0000000..0c9648b --- /dev/null +++ b/challenge/skeleton-ui/jiho/search.svg @@ -0,0 +1,2 @@ + + diff --git a/challenge/skeleton-ui/jiho/style.css b/challenge/skeleton-ui/jiho/style.css new file mode 100644 index 0000000..37e8aba --- /dev/null +++ b/challenge/skeleton-ui/jiho/style.css @@ -0,0 +1,268 @@ +/* Resets */ +body { + margin: 0; + box-sizing: border-box; +} + +h1, +h2, +h3, +h4, +h5, +p, +img { + padding: 0; + margin: 0; +} + +img { + border: none; + outline: none; +} + +button { + all: unset; +} + +/* Typography */ +:root { + font-size: 62.5%; + font-family: "arial"; + line-height: 1.7; +} + +body { + font-size: 1.6rem; +} + +/* Components */ + +:root { + --skeleton-color: #eee; +} + +.container { + display: flex; + flex-direction: column; + height: 100vh; + box-sizing: border-box; +} + +.header { + display: flex; + align-items: center; + padding: 10px; + min-width: 0; + border-bottom: 1px solid #eee; +} + +.logo-image { + /* flex: 1; */ + width: 150px; +} + +.middle { + display: flex; + margin-left: 100px; +} + +@media (max-width: 500px) { + .middle { + display: none; + } +} + +.search-section { + display: flex; + justify-content: flex-end; + min-width: 35vw; +} + +.search-bar { + display: flex; + align-items: center; + height: 4rem; + border-radius: 2rem 0 0 2rem; + border: 1px solid grey; + box-shadow: inset 0 0 1.5px grey; + padding: 0 1rem; +} + +.search-bar:focus-within { + border: 1px solid blue; +} + +.search-icon { + width: 2rem; + height: 2rem; + padding: 0 0.5rem; +} + +.search-bar .search-icon { + display: none; +} + +.search-bar:focus-within .search-icon { + display: flex; +} + +.search-bar .search-input { + background-color: transparent; + border-style: none; + font-size: 1.6rem; + width: calc(35vw - 80px); +} + +.search-bar .search-input:focus { + outline: none; +} + +.search-button { + width: 50px; + border-radius: 0 2rem 2rem 0; + border: 1px solid grey; + border-left: none; + box-shadow: inset 0 0 1.5px grey; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; +} + +.search-button:hover { + background-color: #eee; +} + +.action-section { + display: flex; + justify-content: flex-end; + margin-left: auto; +} + +.action-section .profile { + width: 50px; + height: 50px; + background-color: orangered; + color: white; + font-weight: 700; + border: none; + border-radius: 25px; + text-align: center; + vertical-align: center; +} + +.content-container { + display: flex; + flex-grow: 1; + min-width: 0; + overflow: scroll; +} + +.content-container .sidebar { + width: 20vw; + flex-shrink: 0; + border-right: 1px solid #eee; +} + +@media screen and (max-width: 500px) { + .content-container .sidebar { + display: none; + } +} + +.content-container .content-section { + display: flex; + flex-grow: 1; +} + +/* Content 영역 */ + +.video-container { + padding: 20px; + flex-grow: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 20px; + box-sizing: border-box; + min-width: 0; + overflow: scroll; + justify-content: flex-start; +} + +.box { + width: 350px; + height: 280px; + display: flex; + flex-direction: column; + border-radius: 10px; + box-sizing: border-box; + box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.2); +} + +.box .thumbnail { + object-fit: cover; + width: 350px; + height: 200px; + overflow: hidden; + border-radius: 10px 10px 0 0; + flex-shrink: 0; +} + +.box .video-info { + display: flex; + padding: 1rem; + gap: 1rem; + overflow: hidden; +} + +.video-info .owner-icon { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: orange; +} + +.video-info .description { + flex-grow: 1; + min-height: 0; +} + +.description .title { + text-align: left; + font-size: 1.5rem; + font-weight: 700; + border-radius: 1rem; +} + +.description .summary { + margin-top: 1rem; + font-size: 1rem; + padding: 0.5rem; + line-height: 1; + border-radius: 1rem; +} + +.skeleton { + animation: skeleton-loading 1s linear infinite alternate; +} + +.skeleton-text { + height: 2rem; + margin: 0.5rem; + width: auto; +} + +.skeleton-text.thick { + height: 1rem; +} + +@keyframes skeleton-loading { + 0% { + background-color: hsl(200, 20%, 70%); + } + 100% { + background-color: hsl(200, 20%, 95%); + } +}