under construction
This commit is contained in:
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";
|
||||
Reference in New Issue
Block a user