-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (166 loc) · 5.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="img/icon/favicon.ico" type="image/x-icon" />
<title>SCG</title>
<!-- marked -->
<script src="./library/marked.min.js"></script>
<!-- hightlight.js -->
<link rel="stylesheet" href="./library/highlight_default.min.css" />
<script src="./library/highlight_highlight.min.js"></script>
<link rel="stylesheet" href="./library/highlight_ally-light.min.css" />
<!-- custom css -->
<link rel="stylesheet" href=" style/style.css" />
<!-- tailwind -->
<script src="./library/tailwind-3.4.1.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: "#2e6ff2",
background: "#fff",
surface: "#121314",
graylv1: "#f3f5fa",
graylv2: "#d9dbe0",
graylv3: "#8d9299",
graylv4: "#47494d",
error: "#ff3440",
lowError: "#ffc533",
activation: "#dee8ff",
},
},
},
};
</script>
<!-- // tailwind -->
<style>
@keyframes slideDown {
from {
transition: all 1s;
height: 0px;
opacity: 0;
}
to {
opacity: 1;
height: 60px;
}
}
.markdown-cell > ul > li > p {
display: inline-block;
}
.top-logo {
width: 32px;
padding-bottom: 4px;
display: inline-block;
}
.top-title {
display: inline-block;
}
</style>
</head>
<body class="font-sans w-full text-surface">
<header class="relative bg-white mx-auto border-b border-gray-300">
<nav
class="container max-w-[1190px] mx-auto md:p-[19px] p-4 flex items-center relative"
>
<!-- 블로그 제목 영역 -->
<h1
id="blog-title"
class="md:text-2xl text-lg leading-6 mr-auto font-semibold text-gray-900 cursor-pointer"
>
<img class="top-logo" src="img/icon/scg_logo.png" />
<p class="top-title">SCG</p>
</h1>
<!-- // 블로그 제목 영역 -->
<!-- 메뉴 영역 -->
<div class="md:hidden w-6 h-6">
<button id="menu-button">
<span class="sr-only">메뉴 열기</span>
</button>
</div>
<div id="menu" class="hidden md:flex items-center">
<!-- 메뉴 아이템들 -->
</div>
<button id="search-button" class="ml-10 md:hidden flex">
<span class="sr-only">검색창 열기</span>
</button>
<div
class="search-cont w-80 hidden md:block md:relative absolute z-10 rounded-2xl p-4 border border-graylv2 bottom-[-12px] right-2 xl:right-0 translate-y-full bg-background w-96 max-w-full box-border md:p-0 md:top-0 md:right-0 md:border-0 md:translate-y-0 md:w-80 md:ml-10"
>
<label for="search-input">
<input
type="text"
id="search-input"
class="search-input bg-graylv1 rounded-[10px] px-5 py-2.5 placeholder:font-normal placehoder:text-graylv3 focus:outline-0 shadow-sm w-full"
placeholder="Keyword"
/></label>
<div
class="btn-cont flex gap-2 justify-cetner items-center absolute top-1/2 md:right-4 right-8 -translate-y-1/2"
>
<button class="reset-inp-btn hidden">
<span class="sr-only">검색어 초기화</span>
</button>
<button class="search-inp-btn">
<span class="sr-only">검색하기</span>
</button>
</div>
</div>
<!-- // 메뉴 영역 -->
</nav>
<!-- 모바일에서 메뉴 영역이 보이도록 하는 영역 -->
<div
id="mobileMenu"
class="absolute bg-background w-full max-w-[1190px] border-b border-graylv2 z-10 md:hidden"
></div>
<!-- // 모바일에서 메뉴 영역이 보이도록 하는 영역 -->
</header>
<main class="container p-8 pb-4 w-full mx-auto max-w-[1190px] md:pt-[60px]">
<!-- 블로그 포스트 리스트 영역 -->
<div
id="blog-posts"
class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-[25px] lg:gap-y-10 gap-y-4 mb-20"
></div>
<!-- // 블로그 포스트 리스트 영역-->
<!-- contents 영역 -->
<div
id="contents"
class="mt-6 mb-28 grid-cols-3 max-w-[990px] mx-auto"
></div>
<!-- // contents 영역-->
<!-- pagination -->
<div id="pagination"></div>
</main>
<!-- category 검색 영역 -->
<section
class="category-aside hidden md:flex flex-col border border-graylv2 bg-white rounded-[10px] fixed top-24 right-8 overflow-y-auto w-fit h-fit"
>
<header class="flex items-center">
<h2 class="aside-tit sr-only text-sm font-semibold ml-5">content</h2>
<button id="aside-button">
<span class="sr-only">카테고리 열기</span>
</button>
</header>
<aside></aside>
</section>
<!-- // category 검색 영역 -->
<!-- utils -->
<script src="js/utils.js"></script>
<!-- convert ipynb to html -->
<script src="style/convertIpynbToHtml.js"></script>
<!-- style -->
<script src="style/globalStyle.js"></script>
<script src="style/blogContentsStyle.js"></script>
<!-- mobile menu toggle -->
<script src="js/mobileMenuToggle.js"></script>
<!-- lender -->
<script src="config.js"></script>
<script src="js/URLparsing.js"></script>
<script src="js/initData.js"></script>
<script src="js/render.js"></script>
<!-- registry -->
<script src="js/registry.js"></script>
</body>
</html>