Skip to content

Commit

Permalink
[#9] 메인 페이지 수정
Browse files Browse the repository at this point in the history 
안깨지게 수정 및 기타 등등
  • Loading branch information
@sap03110 @dlckdduq1107
sap03110 authored and dlckdduq1107 committed Sep 23, 2021
1 parent bffac43 commit 42b7e80
Show file tree
Hide file tree
Showing 12 changed files with 253 additions and 5,774 deletions.
5,739 changes: 13 additions & 5,726 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"dev": "webpack --config webpack.config.js"
},
"dependencies": {
"concurrency": "^0.1.4",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
Expand Down
25 changes: 11 additions & 14 deletions public/html/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head>
<title>I'm everywhere</title>
<link rel="icon" href="/image/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
<script defer src="././javascripts/main_bundle.js"></script></head>
<body>
Expand All @@ -13,26 +14,22 @@
</div>
</header>
<div class='main_contents_wrap'>
<div class='left_btn_wrap'>
<button type='button'>
<img class='move_btn' id='left_move' src='/image/left_btn.svg' />
</button>
</div>
<div class='main_wrap'>
<div id='main_video'>
<iframe width="900" height="600" src="https://www.youtube.com/embed/S91wQbYYX3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>
</div>
</div>
<div class='right_btn_wrap'>
<button type='button'>
<img class='move_btn' id='right_move' src='/image/right_btn.svg' />
</button>
<button type='button' id='left_move'>
<img class='move_btn' src='/image/left_btn.svg' />
</button>
<div id='main_video'>
<iframe src="https://www.youtube.com/embed/S91wQbYYX3Q?autoplay=1&mute=1&autohide=1" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>
<div class="video_cover"></div>
</div>
<button type='button' id='right_move'>
<img class='move_btn' src='/image/right_btn.svg' />
</button>
</div>
<footer>
<button type="button" class="btn share-btn"></button>
<div class="share-btn-list">
<button type="button" class="btn copy-btn"></button>
<button type="button" class="btn naver-btn"></button>
<button type="button" class="btn kakao-btn"></button>
</div>
<button type="button" class="write-btn">add the video</button>
Expand Down
55 changes: 55 additions & 0 deletions public/images/ic_copy.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 35 additions & 2 deletions public/javascripts/main_bundle.js
View file

Large diffs are not rendered by default.

47 changes: 37 additions & 10 deletions src/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,20 @@
body {
background: $black;
color: $white;
font-family: 'Ubuntu', sans-serif;
font-family: 'SpoqaHanSansNeo-Regular';
header {
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
margin-top: 25px;
margin-bottom: 50px;
padding: 25px 0 50px 0;
width: 100%;
top: 0;
position: absolute;
#main_logo {
font-weight: 700;
font-size: 35px;
font-family: 'GowunBatang-Bold';
font-size: 1.5rem;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
Expand All @@ -27,26 +30,50 @@ body {
justify-content: flex-end;
align-items: center;
text-align: end;
font-size: 25px;
font-size: 1rem;
line-height: 25px;
margin-right: 20px;
.address_icon {
width: 25px;
width: 21px;
height: 25px;
margin-right:5px;
}
#address_text {
font-size: .85rem;
}
}
}
.main_contents_wrap {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
#main_video {
> iframe {
width: 100%;
height: 100vh;
}
}
.video_cover {
width: 100%;
height: 100vh;
top: 0;
position: absolute;
z-index: 1;
background-color: #1111116b;
}
button {
background: transparent;
border: none;
top: 50%;
z-index: 2;
position: absolute;
:hover {
cursor: pointer;
}
&#left_move {
left: 1.5rem;
}
&#right_move {
right: 1.5rem;
}
}
.move_btn {
width: 25px;
Expand Down
10 changes: 9 additions & 1 deletion src/css/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
body {
padding: 0;
margin: 0;
height: calc(100vh - 25px);
height: 100vh;
overflow-y: hidden;
position: relative;
background-color: #111;
}
Expand All @@ -16,6 +17,7 @@ body {
position: absolute;
bottom: 0;
padding: 1rem;
z-index: 2;
}

button {
Expand All @@ -41,6 +43,11 @@ body {
}
}

.copy-btn {
background: #fff url(../image/ic_copy.svg) no-repeat center/20px;
border-width: 0;
}

.kakao-btn {
background: url(../image/ic_kakao.svg) no-repeat center, #FBE300;
border-width: 0;
Expand Down Expand Up @@ -157,6 +164,7 @@ body {
}

.title {
color: #111;
font-weight: 600;
font-size: 1.15rem;
margin: 1rem 0 1.2rem 0;
Expand Down
14 changes: 14 additions & 0 deletions src/css/utils.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
@font-face {
font-family: 'GowunBatang-Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GowunBatang-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'SpoqaHanSansNeo-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SpoqaHanSansNeo-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

* {
padding: 0px;
margin: 0px;
Expand Down
25 changes: 11 additions & 14 deletions src/html/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head>
<title>I'm everywhere</title>
<link rel="icon" href="/image/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
Expand All @@ -13,26 +14,22 @@
</div>
</header>
<div class='main_contents_wrap'>
<div class='left_btn_wrap'>
<button type='button'>
<img class='move_btn' id='left_move' src='/image/left_btn.svg' />
</button>
</div>
<div class='main_wrap'>
<div id='main_video'>
<iframe width="900" height="600" src="https://www.youtube.com/embed/S91wQbYYX3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>
</div>
</div>
<div class='right_btn_wrap'>
<button type='button'>
<img class='move_btn' id='right_move' src='/image/right_btn.svg' />
</button>
<button type='button' id='left_move'>
<img class='move_btn' src='/image/left_btn.svg' />
</button>
<div id='main_video'>
<iframe src="https://www.youtube.com/embed/S91wQbYYX3Q?autoplay=1&mute=1&autohide=1" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>
<div class="video_cover"></div>
</div>
<button type='button' id='right_move'>
<img class='move_btn' src='/image/right_btn.svg' />
</button>
</div>
<footer>
<button type="button" class="btn share-btn"></button>
<div class="share-btn-list">
<button type="button" class="btn copy-btn"></button>
<button type="button" class="btn naver-btn"></button>
<button type="button" class="btn kakao-btn"></button>
</div>
<button type="button" class="write-btn">add the video</button>
Expand Down
Binary file added src/image/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions src/image/ic_copy.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 42b7e80

Please sign in to comment.