under construction
This commit is contained in:
23
mdc-theme/.gitignore
vendored
Normal file
23
mdc-theme/.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
## editors
|
||||
/.idea
|
||||
/.vscode
|
||||
|
||||
## system files
|
||||
.DS_Store
|
||||
|
||||
## npm
|
||||
/node_modules/
|
||||
/npm-debug.log
|
||||
|
||||
## testing
|
||||
/coverage/
|
||||
|
||||
## temp folders
|
||||
/.tmp/
|
||||
|
||||
# build
|
||||
/_site/
|
||||
/dist/
|
||||
/out-tsc/
|
||||
|
||||
storybook-static
|
||||
202
mdc-theme/editor.html
Normal file
202
mdc-theme/editor.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!--
|
||||
~ Project Asgard
|
||||
~
|
||||
~ Copyright (c) 2021. Elex. All Rights Reserved.
|
||||
~ https://www.elex-project.com/
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./dist/bundle.css" />
|
||||
<title>Hello</title>
|
||||
<script src="./dist/bundle.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/easymde/dist/easymde.min.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@highlightjs/cdn-assets@10.7.1/styles/default.min.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.1/highlight.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let mde = new EasyMDE({
|
||||
element: document.querySelector("#editor"),
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
|
||||
<div class="mdc-drawer__header">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
<div class="mdc-drawer__content">
|
||||
<nav class="mdc-list mdc-list--dense">
|
||||
<a
|
||||
class="mdc-list-item mdc-list-item--activated"
|
||||
href="#"
|
||||
aria-current="page"
|
||||
>
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Inbox</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Outgoing</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item mdc-list-item--depth-2" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text"
|
||||
>Drafts Drafts Drafts Drafts Drafts Drafts Drafts</span
|
||||
>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="layout-content" class="mdc-drawer-app-content">
|
||||
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
|
||||
<div class="mdc-elevation-overlay"></div>
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section
|
||||
class="
|
||||
mdc-top-app-bar__section mdc-top-app-bar__section--align-start
|
||||
"
|
||||
>
|
||||
<button
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__navigation-icon
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Open navigation menu"
|
||||
>
|
||||
menu
|
||||
</button>
|
||||
<span class="mdc-top-app-bar__title">Page title.</span>
|
||||
</section>
|
||||
<section
|
||||
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
|
||||
role="toolbar"
|
||||
>
|
||||
<button
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__action-item
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Favorite"
|
||||
>
|
||||
favorite
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__action-item
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Search"
|
||||
>
|
||||
search
|
||||
</button>
|
||||
<div class="mdc-menu-surface--anchor">
|
||||
<button
|
||||
id="btn-overflow"
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__action-item
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Options"
|
||||
>
|
||||
more_vert
|
||||
</button>
|
||||
<div class="mdc-menu mdc-menu-surface">
|
||||
<ul
|
||||
class="mdc-list"
|
||||
role="menu"
|
||||
aria-hidden="true"
|
||||
aria-orientation="vertical"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li class="mdc-list-item" role="menuitem">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">A Menu Item</span>
|
||||
</li>
|
||||
<li class="mdc-list-item" role="menuitem">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Another Menu Item</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
<div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
|
||||
<textarea id="editor"></textarea>
|
||||
<footer class="mdc-layout-grid">
|
||||
<p>Copyright © 2021</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
238
mdc-theme/index.html
Normal file
238
mdc-theme/index.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<!--
|
||||
~ Project Asgard
|
||||
~
|
||||
~ Copyright (c) 2021. Elex. All Rights Reserved.
|
||||
~ https://www.elex-project.com/
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./dist/bundle.css" />
|
||||
<title>Hello</title>
|
||||
<script src="./dist/bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
|
||||
<div class="mdc-drawer__header">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
<div class="mdc-drawer__content">
|
||||
<nav class="mdc-list mdc-list--dense">
|
||||
<a
|
||||
class="mdc-list-item mdc-list-item--activated"
|
||||
href="#"
|
||||
aria-current="page"
|
||||
>
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Inbox</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Outgoing</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item mdc-list-item--depth-2" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text"
|
||||
>Drafts Drafts Drafts Drafts Drafts Drafts Drafts</span
|
||||
>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="#">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Drafts</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="layout-content" class="mdc-drawer-app-content">
|
||||
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
|
||||
<div class="mdc-elevation-overlay"></div>
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section
|
||||
class="
|
||||
mdc-top-app-bar__section mdc-top-app-bar__section--align-start
|
||||
"
|
||||
>
|
||||
<button
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__navigation-icon
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Open navigation menu"
|
||||
>
|
||||
menu
|
||||
</button>
|
||||
<span class="mdc-top-app-bar__title">Page title.</span>
|
||||
</section>
|
||||
<section
|
||||
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
|
||||
role="toolbar"
|
||||
>
|
||||
<button
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__action-item
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Favorite"
|
||||
>
|
||||
favorite
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__action-item
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Search"
|
||||
>
|
||||
search
|
||||
</button>
|
||||
<div class="mdc-menu-surface--anchor">
|
||||
<button
|
||||
id="btn-overflow"
|
||||
class="
|
||||
material-icons
|
||||
mdc-top-app-bar__action-item
|
||||
mdc-icon-button
|
||||
"
|
||||
aria-label="Options"
|
||||
>
|
||||
more_vert
|
||||
</button>
|
||||
<div class="mdc-menu mdc-menu-surface">
|
||||
<ul
|
||||
class="mdc-list"
|
||||
role="menu"
|
||||
aria-hidden="true"
|
||||
aria-orientation="vertical"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li class="mdc-list-item" role="menuitem">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">A Menu Item</span>
|
||||
</li>
|
||||
<li class="mdc-list-item" role="menuitem">
|
||||
<span class="mdc-list-item__ripple"></span>
|
||||
<span class="mdc-list-item__text">Another Menu Item</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
<div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
|
||||
<main class="mdc-layout-grid">
|
||||
<article>
|
||||
<h1>Heading 1</h1>
|
||||
<p>Ha<em>Hehe</em>hoho.</p>
|
||||
<button class="mdc-button mdc-button--raised">
|
||||
<div class="mdc-button__ripple"></div>
|
||||
<span class="mdc-button__label">Button</span>
|
||||
</button>
|
||||
<div>
|
||||
<label class="mdc-text-field mdc-text-field--filled username">
|
||||
<span class="mdc-text-field__ripple"></span>
|
||||
<input
|
||||
type="text"
|
||||
class="mdc-text-field__input"
|
||||
aria-labelledby="username-label"
|
||||
name="username"
|
||||
/>
|
||||
<span class="mdc-floating-label" id="username-label"
|
||||
>Username</span
|
||||
>
|
||||
<span class="mdc-line-ripple"></span>
|
||||
</label>
|
||||
<label class="mdc-text-field mdc-text-field--filled password">
|
||||
<span class="mdc-text-field__ripple"></span>
|
||||
<input
|
||||
type="password"
|
||||
class="mdc-text-field__input"
|
||||
aria-labelledby="password-label"
|
||||
name="password"
|
||||
/>
|
||||
<span class="mdc-floating-label" id="password-label"
|
||||
>Password</span
|
||||
>
|
||||
<span class="mdc-line-ripple"></span>
|
||||
</label>
|
||||
</div>
|
||||
<blockquote>Hahaha</blockquote>
|
||||
<p>동해물과 백두산이 마르고 닳도록</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
<strong>Ut enim ad minim</strong> veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer class="mdc-layout-grid">
|
||||
<p>Copyright © 2021</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
mdc-theme/package.json
Normal file
34
mdc-theme/package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "mdc-theme",
|
||||
"version": "1.0.0",
|
||||
"description": "MDC Theme",
|
||||
"main": "index.js",
|
||||
"author": "Elex",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"easymde": "^2.14.0",
|
||||
"highlight.js": "^10.7.1",
|
||||
"material-components-web": "^10.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.13.8",
|
||||
"@babel/preset-env": "^7.13.8",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"babel-loader": "^8.2.2",
|
||||
"css-loader": "^5.1.0",
|
||||
"extract-loader": "^5.1.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"postcss-loader": "^5.0.0",
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
"webpack": "^5.24.2",
|
||||
"webpack-cli": "^4.5.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"build": "webpack",
|
||||
"dist": "cp ./dist/*.css ./dist/*.js ../app/src/main/resources/static"
|
||||
}
|
||||
}
|
||||
252
mdc-theme/src/_article.scss
Normal file
252
mdc-theme/src/_article.scss
Normal file
@@ -0,0 +1,252 @@
|
||||
main article {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
border-bottom: thin solid $color-primary;
|
||||
margin: {
|
||||
top: 2.4rem;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
padding-bottom: 0.3rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.4rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.2rem;
|
||||
padding-left: 2.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
pre,
|
||||
code {
|
||||
font-family: monospace;
|
||||
}
|
||||
pre {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2;
|
||||
word-wrap: normal;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&.scrollable {
|
||||
max-height: 280px;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
border-left: 0.43rem solid $color-gray-light;
|
||||
padding: 0.43rem 0 0.43rem 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
p,
|
||||
pre,
|
||||
blockquote {
|
||||
margin: {
|
||||
top: 0.2rem;
|
||||
bottom: 0.82rem;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $color-primary;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
color: $color-primary;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
border-bottom: thin solid $color-primary;
|
||||
}
|
||||
mark {
|
||||
background-color: $color-primary;
|
||||
color: $color-on-primary;
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
kbd {
|
||||
font-family: monospace;
|
||||
background-color: $color-primary;
|
||||
color: $color-on-primary;
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
del,
|
||||
s {
|
||||
text-decoration: line-through;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
ins,
|
||||
u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
small {
|
||||
color: $color-gray-dark;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed inherit;
|
||||
&[title] {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed inherit;
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
address {
|
||||
white-space: nowrap;
|
||||
}
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
samp {
|
||||
font-family: monospace;
|
||||
border-radius: 4px;
|
||||
font-size: 0.88rem;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
code {
|
||||
font-family: monospace;
|
||||
border-radius: 4px;
|
||||
font-size: 0.88rem;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
pre > code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
}
|
||||
img {
|
||||
border-style: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin: {
|
||||
top: 0.2rem;
|
||||
bottom: 0.82rem;
|
||||
}
|
||||
&.hover tbody tr:hover {
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
border-bottom: 2px solid $color-primary;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: $color-on-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border: 1px solid $color-gray-light;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
tr {
|
||||
background-color: $color-background;
|
||||
border-top: 1px solid $color-gray-light;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
list-style-position: outside;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
ol ol,
|
||||
ul,
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
ol ol ol,
|
||||
ol ul ol,
|
||||
ul ol ol,
|
||||
ul ul ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
li {
|
||||
display: list-item;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dt::after {
|
||||
content: " :";
|
||||
}
|
||||
dd {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: transparent;
|
||||
border: 1px solid $color-gray-light;
|
||||
height: 0;
|
||||
margin: 2.34rem 0;
|
||||
}
|
||||
details {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
57
mdc-theme/src/_layout.scss
Normal file
57
mdc-theme/src/_layout.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
.mdc-top-app-bar--fixed-adjust {
|
||||
padding-top: 0 !important;
|
||||
margin-top: 64px;
|
||||
}
|
||||
#layout-drawer {
|
||||
.mdc-list-item {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
border-radius: 0;
|
||||
&.mdc-list-item--depth-1 {
|
||||
padding-left: 24px;
|
||||
}
|
||||
&.mdc-list-item--depth-2 {
|
||||
padding-left: 40px;
|
||||
}
|
||||
&.mdc-list-item--depth-3 {
|
||||
padding-left: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#layout-content {
|
||||
flex: auto;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
//overflow: hidden;
|
||||
//height: 100%;
|
||||
//box-sizing: content-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > header {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
& > #layout-main {
|
||||
overflow: auto;
|
||||
//height: 100%;
|
||||
box-sizing: content-box;
|
||||
flex-grow: 1;
|
||||
& > footer {
|
||||
background-color: #242424;
|
||||
color: #767676;
|
||||
}
|
||||
}
|
||||
}
|
||||
73
mdc-theme/src/app.js
Normal file
73
mdc-theme/src/app.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import {MDCRipple} from '@material/ripple';
|
||||
import {MDCDrawer} from "@material/drawer";
|
||||
import {MDCTopAppBar} from "@material/top-app-bar";
|
||||
import {MDCTextField} from '@material/textfield';
|
||||
import {MDCList} from '@material/list';
|
||||
import {MDCMenu} from '@material/menu';
|
||||
import autoInit from '@material/auto-init';
|
||||
|
||||
const App = {
|
||||
appBar:null,
|
||||
drawer:null,
|
||||
init: function(){
|
||||
autoInit();
|
||||
document.querySelectorAll('.mdc-list-item').forEach(function(item){
|
||||
new MDCRipple(item);
|
||||
});
|
||||
document.querySelectorAll('.mdc-button').forEach(function(item){
|
||||
new MDCRipple(item);
|
||||
});
|
||||
document.querySelectorAll('.mdc-list').forEach(function(item){
|
||||
new MDCList(item);
|
||||
});
|
||||
document.querySelectorAll('.mdc-text-field').forEach(function(item){
|
||||
new MDCTextField(item);
|
||||
});
|
||||
|
||||
this.initDrawer();
|
||||
|
||||
this.appBar = MDCTopAppBar.attachTo(document.querySelector('#layout-content > header'));
|
||||
this.appBar.setScrollTarget(document.querySelector('#layout-content > #layout-main'));
|
||||
this.appBar.listen('MDCTopAppBar:nav', () => {
|
||||
this.drawer.open = !this.drawer.open;
|
||||
});
|
||||
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
|
||||
// item.style.marginTop = this.appBar.;
|
||||
//});
|
||||
|
||||
const menu = new MDCMenu(document.querySelector('.mdc-menu'));
|
||||
document.querySelector('#btn-overflow').addEventListener('click', function(){
|
||||
menu.open = true;
|
||||
});
|
||||
|
||||
console.log('hello world.');
|
||||
window.addEventListener('resize', this.initDrawer);
|
||||
},
|
||||
|
||||
initDrawer: function(){
|
||||
const drawerElement = document.querySelector('#layout-drawer');
|
||||
if (document.body.offsetWidth>600){
|
||||
drawerElement.classList.remove('mdc-drawer--modal');
|
||||
drawerElement.classList.add('mdc-drawer--dismissible');
|
||||
try {
|
||||
document.removeChild(document.querySelector('mdc-drawer-scrim'));
|
||||
} catch (ex){ }
|
||||
|
||||
} else {
|
||||
drawerElement.classList.add('mdc-drawer--modal');
|
||||
drawerElement.classList.remove('mdc-drawer--dismissible');
|
||||
const scrimElement = document.createElement('div');
|
||||
scrimElement.classList.add('mdc-drawer-scrim');
|
||||
drawerElement.parentNode.insertBefore(scrimElement, drawerElement.nextSibling);
|
||||
}
|
||||
|
||||
this.drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
|
||||
if (document.body.offsetWidth>600) {
|
||||
this.drawer.open = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
App.init();
|
||||
});
|
||||
36
mdc-theme/src/app.scss
Normal file
36
mdc-theme/src/app.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
$color-primary: #0f4c81;
|
||||
$color-secondary: #ffbf00;
|
||||
$color-on-primary: #eaeaea;
|
||||
$color-on-secondary: #efefef;
|
||||
$color-background: #e4e4e4;
|
||||
$color-surface: #fdfdfd;
|
||||
$color-on-surface: #242424;
|
||||
$color-gray-light: #a0a0a0;
|
||||
$color-gray-dark: #6f6f6f;
|
||||
//@use "normalize-scss/sass/normalize";
|
||||
@use "@material/theme" with (
|
||||
$primary: $color-primary,
|
||||
$secondary: $color-secondary,
|
||||
$on-primary: $color-on-primary,
|
||||
$on-secondary: $color-on-secondary,
|
||||
$background: $color-background,
|
||||
$surface: $color-surface,
|
||||
$on-surface: $color-on-surface
|
||||
);
|
||||
@use "@material/typography" with (
|
||||
$font-family: unquote("Noto Sans CJK KR, Roboto, sans-serif")
|
||||
);
|
||||
@use "@material/icon-button/mdc-icon-button";
|
||||
@use "@material/top-app-bar/mdc-top-app-bar";
|
||||
@use "@material/drawer/mdc-drawer";
|
||||
@use "@material/menu-surface/mdc-menu-surface";
|
||||
@use "@material/menu/mdc-menu";
|
||||
@use "@material/list";
|
||||
@use "@material/list/mdc-list";
|
||||
@use '@material/button/mdc-button';
|
||||
@use "@material/textfield/mdc-text-field";
|
||||
@use "@material/layout-grid/mdc-layout-grid";
|
||||
@use "@material/elevation/mdc-elevation";
|
||||
|
||||
@import "./layout";
|
||||
@import "./article";
|
||||
103
mdc-theme/webpack.config.js
Normal file
103
mdc-theme/webpack.config.js
Normal file
@@ -0,0 +1,103 @@
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const path = require("path");
|
||||
|
||||
function tryResolve_(url, sourceFilename) {
|
||||
// Put require.resolve in a try/catch to avoid node-sass failing with cryptic libsass errors
|
||||
// when the importer throws
|
||||
try {
|
||||
return require.resolve(url, { paths: [path.dirname(sourceFilename)] });
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function tryResolveScss(url, sourceFilename) {
|
||||
// Support omission of .scss and leading _
|
||||
const normalizedUrl = url.endsWith(".scss") ? url : `${url}.scss`;
|
||||
return (
|
||||
tryResolve_(normalizedUrl, sourceFilename) ||
|
||||
tryResolve_(
|
||||
path.join(
|
||||
path.dirname(normalizedUrl),
|
||||
`_${path.basename(normalizedUrl)}`
|
||||
),
|
||||
sourceFilename
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function materialImporter(url, prev) {
|
||||
if (url.startsWith("@material")) {
|
||||
const resolved = tryResolveScss(url, prev);
|
||||
return { file: resolved || url };
|
||||
}
|
||||
return { file: url };
|
||||
}
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
entry: {
|
||||
app: ["./src/app.scss", "./src/app.js"],
|
||||
//editor: [
|
||||
// "./node_modules/easymde/src/css/easymde.css",
|
||||
// "./node_modules/easymde/src/js/easymde.js",
|
||||
//],
|
||||
//hljs: ["./node_modules/highlight.js/lib/index.js"],
|
||||
},
|
||||
output: {
|
||||
filename: "[name].js",
|
||||
},
|
||||
mode: "production",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(css|scss)$/,
|
||||
use: [
|
||||
{
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "[name].css",
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "extract-loader",
|
||||
},
|
||||
{
|
||||
loader: "css-loader",
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
postcssOptions: {
|
||||
plugins: [autoprefixer()],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
implementation: require("sass"),
|
||||
webpackImporter: false,
|
||||
sassOptions: {
|
||||
importer: materialImporter,
|
||||
includePaths: ["./node_modules"],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: [
|
||||
{
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["@babel/preset-env"],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
44
mdc-theme/yarn-error.log
Normal file
44
mdc-theme/yarn-error.log
Normal file
@@ -0,0 +1,44 @@
|
||||
Arguments:
|
||||
/snap/node/3292/bin/node /snap/node/3292/bin/yarn.js add material-componets-web
|
||||
|
||||
PATH:
|
||||
/home/elex/perl5/bin:/opt/proguard/7.0.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
|
||||
|
||||
Yarn version:
|
||||
1.22.5
|
||||
|
||||
Node version:
|
||||
12.19.0
|
||||
|
||||
Platform:
|
||||
linux x64
|
||||
|
||||
Trace:
|
||||
Error: https://repository.elex-project.com/repository/npm/material-componets-web: Not found
|
||||
at Request.params.callback [as _callback] (/snap/node/3292/lib/cli.js:66988:18)
|
||||
at Request.self.callback (/snap/node/3292/lib/cli.js:140749:22)
|
||||
at Request.emit (events.js:314:20)
|
||||
at Request.<anonymous> (/snap/node/3292/lib/cli.js:141721:10)
|
||||
at Request.emit (events.js:314:20)
|
||||
at IncomingMessage.<anonymous> (/snap/node/3292/lib/cli.js:141643:12)
|
||||
at Object.onceWrapper (events.js:420:28)
|
||||
at IncomingMessage.emit (events.js:326:22)
|
||||
at endReadableNT (_stream_readable.js:1223:12)
|
||||
at processTicksAndRejections (internal/process/task_queues.js:84:21)
|
||||
|
||||
npm manifest:
|
||||
{
|
||||
"name": "hello-mdc",
|
||||
"version": "1.0.0",
|
||||
"description": "aaa",
|
||||
"main": "index.js",
|
||||
"author": "Elex",
|
||||
"license": "MIT",
|
||||
"private": true
|
||||
}
|
||||
|
||||
yarn manifest:
|
||||
No manifest
|
||||
|
||||
Lockfile:
|
||||
No lockfile
|
||||
6034
mdc-theme/yarn.lock
Normal file
6034
mdc-theme/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user