body { margin: 0px 0px 20px 0px; background: #1d1f21; } a { color: #f0c674; text-decoration: underline; } a:link { color: #f0c674; text-decoration: underline; } a:visited { color: #de935f; text-decoration: underline; } a:active { color: #b294bb; } a:hover { color: #b294bb; } h1, h2, h3 { margin: 0px; padding: 0px; } abbr, acronym, .help { cursor: help; } pre, blockquote { font-family: monospace; /*geneva, verdana, arial, sans-serif;*/ font-size: 13px; color: #eaeaea; line-height: 15px; background-color: #282a2e; border: 1px dashed #eaeaea; padding: 2px; padding-left: 10px; margin-left: 30px; margin-right: 75px; overflow: auto; } strong { color: #ffcc66; } input, textarea { color: #1d1f21; } input:focus, textarea:focus { background: #8abeb7; } input[type="button"]:focus { background: button-highlight; } input:invalid { border: red dashed 3px; } input:invalid + mark::before { content: "(格式有誤,請檢查)"; } code { color: #81a2be; } #banner { /* -position: relative; -width: 95%; -padding: 2em 15px 15px; */ font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; color: #c5c8c6; font-size: x-large; font-weight: normal; border-top: 4px double #969896; z-index: 10; } #banner *.eng { font-family: palatino, georgia, verdana, arial, sans-serif; } #banner a, #banner a:link, #banner a:visited, #banner a:active, #banner a:hover { font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; font-size: xx-large; color: #c5c8c6; text-decoration: none; } #banner a *.eng, #banner a:link *.eng, #banner a:visited *.eng, #banner a:active *.eng, #banner a:hover *.eng { font-family: palatino, georgia, verdana, arial, sans-serif; } .description { font-family: palatino, georgia, "times new roman", serif; color: #c5c8c6; font-size: medium; text-transform: none; } #banner .description a, #banner .description a:link { font-size: medium; color: #f0c674; text-decoration: underline; } #banner .description a:visited { font-size: medium; color: #de935f; text-decoration: underline; } #banner .description a:active, #banner .description a:hover { font-size: medium; color: #b294bb; } #content { /* -position: absolute; -margin-right: 20px; -margin-bottom: 20px; -top: 8em; -left: 225px; -right: 60px; */ /* max-width: 60em; */ background: transparent; border: 1px solid #1d1f21; } #container { /* -position: absolute; -top: 8em; -left: 3em; -right: 60px; -max-width: 55em; */ background: transparent; border: 1px solid #1d1f21; overflow: visible; } #links { /* -padding: 0 15px 15px; -width: 200px; */ border: 1px solid #1d1f21; margin-left: 0; } #content .twitter { float: right; } .blog { padding: 15px; background: #1d1f21; float: left; clear: both; max-width: 60em; } .blogbody { font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; color: #c5c8c6; font-size: medium; font-weight: normal; background: transparent; line-height: 170%; } .blogbody *.eng { font-family: palatino, georgia, verdana, arial, sans-serif; } #container .blogbody { font-size: x-large; } #container h3 { font-size: xx-large; } .blogbody a, .blogbody a:link, .blogbody a:visited, .blogbody a:active, .blogbody a:hover { font-weight: normal; text-decoration: underline; } .title { font-family: "標楷體", palatino, georgia, "times new roman", serif; font-size: x-large; color: #969896; } .title *.eng { font-family: palatino, georgia, "times new roman", serif; } .pre { font-family: geneva, verdana, arial, sans-serif; color: #eaeaea; background-color: #282a2e; border: 1px solid #eaeaea; padding: 2px; padding-left: 10px; padding-right: 10px; margin-left: 30px; margin-right: 75px; } .codenote { color: #969896; float: right; } #menu { color: #c5c8c6; margin-bottom: 15px; background: transparent; text-align: center; } .date { font-family: palatino, georgia, "times new roman", serif; font-size: large; color: #c5c8c6; border-bottom: 1px solid #969896; margin-bottom: 10px; font-weight: bold; } .posted { font-family: verdana, arial, sans-serif; font-size: small; color: #8abeb7; margin-bottom: 25px; clear: both; } .calendar { font-family: verdana, arial, sans-serif; color: #969896; font-size: x-small; font-weight: normal; background: transparent; line-height: 140%; padding: 2px; text-align: left; } .calendarhead { font-family: palatino, georgia, "times new roman", serif; color: #81a2be; font-size: small; font-weight: normal; padding: 2px; letter-spacing: .3em; background: transparent; text-transform: uppercase; text-align: right; } .side { font-family: verdana, arial, sans-serif; color: #c5c8c6; font-size: small; font-weight: normal; background: transparent; line-height: 140%; padding: 2px; } .sidetitle { font-family: palatino, georgia, "times new roman", serif; color: #81a2be; font-size: medium; font-weight: normal; padding: 2px; margin-top: 10px; letter-spacing: .3em; background: transparent; text-transform: uppercase; } .syndicate { color: #c5c8c6; font-family: verdana, arial, sans-serif; font-size: xx-small; line-height: 140%; padding: 2px; margin-top: 15px; background: #1d1f21; } .powered { font-family: palatino, georgia, "times new roman", serif; color: #969896; font-size: x-small; line-height: 140%; text-transform: uppercase; padding: 2px; margin-top: 50px; letter-spacing: .2em; background: #1d1f21; } .comments-body { font-family: palatino, georgia, verdana, arial, sans-serif; color: #969896; font-size: medium; font-weight: normal; background: transparent; line-height: 140%; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px dotted #373b41; padding-left: 3em; padding-right: 60px; max-width: 50em; overflow: visible; } .comments-post { font-family: verdana, arial, sans-serif; color: #969896; font-size: medium; font-weight: normal; background: transparent; } form#comments_form { display: grid; grid-template-columns: min-content auto; grid-gap: 1em; } form#comments_form textarea { height: 20em; width: 95%; max-width: 40em; } .trackback-url { font-family: palatino, georgia, verdana, arial, sans-serif; color: #969896; font-size: large; font-weight: normal; background: transparent; line-height: 140%; padding: 5px; border: 1px dotted #373b41; } .trackback-body { font-family: palatino, georgia, verdana, arial, sans-serif; color: #969896; font-size: large; font-weight: normal; background: transparent; line-height: 140%; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px dotted #373b41; } .trackback-post { font-family: verdana, arial, sans-serif; color: #969896; font-size: medium; font-weight: normal; background: transparent; } .comments-head { font-family: palatino, georgia, verdana, arial, sans-serif; font-size: medium; color: #969896; border-bottom: 1px solid #373b41; margin-top: 20px; font-weight: bold; background: transparent; } #banner-commentspop { font-family: palatino, georgia, verdana, arial, sans-serif; color: #1d1f21; font-size: large; font-weight: bold; border-left: 1px solid #1d1f21; border-right: 1px solid #1d1f21; border-top: 1px solid #1d1f21; background: #f0c674; padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; } #crosssitenavigation, #navigation { /* -position: absolute; -left: 0; -top: 1em; -width: 95%; */ background-color: transparent; color: #c5c8c6; font-family: Tahoma, sans-serif; z-index:10000; font-size: 90%; } #crosssitenavigation .inner { margin: 0; padding: 3px; text-align: right; } #categories { /* -position: absolute; -right: 0; -top: 9em; */ text-align: right; padding-right: 20px; } .side ul, .syndicate ul, .powered ul { margin-left: 0; padding-left: 0; list-style: none; } del { color: #4d4d4c; } ins { color: #8abeb7; } .ins { text-decoration: none; padding: 0 2px 0 2px; background-color: #8959a8; } .del { text-decoration: none; padding: 0 2px 0 2px; background-color: #718c00; } span.book { background: url(http://jedi.org/blog/bookmark-white.png) bottom repeat-x; padding-bottom:2px; } span.noprint iframe { vertical-align: middle; } table { border-collapse: collapse; border: 1px solid black; } table th, table td { border: 1px solid; padding: 5px; } mark { background: darkslateblue; color: white; } /* dirty hack div.blog+pre {display:none;} */ /* image switcher in div */ div.img_switch label + input { margin-left: 1.2em; } div.img_switch img { width: 0px; height: 0px; } div.img_switch input#check_img_switch_a:checked ~ img#img_switch_a { width: auto; height: auto; } div.img_switch input#check_img_switch_b:checked ~ img#img_switch_b { width: auto; height: auto; } div.img_switch input#check_img_switch_c:checked ~ img#img_switch_c { width: auto; height: auto; } div.img_switch input#check_img_switch_d:checked ~ img#img_switch_d { width: auto; height: auto; } /* font */ @font-face { font-family: "Fingerspelling"; src: url("<$MTBlogURL$>fingerspelling.eot?") format("eot"),url("<$MTBlogURL$>fingerspelling.woff") format("woff"),url("<$MTBlogURL$>fingerspelling.ttf") format("truetype"),url("<$MTBlogURL$>fingerspelling.svg#Fingerspelling") format("svg"); font-weight: normal; font-style: normal; } .asl { font-family: "Fingerspelling"; font-size: 1.2em; } /* GRID */ body { display: grid; grid-column-gap: 0.5em; grid-template-columns: 2em 1fr minmax(auto, 20em) minmax(auto, 50em) auto 1fr 2em; grid-template-rows: auto 6em 1fr; grid-template-areas: "... ... ...... crosssitenav crosssitenav ... ..." "... ... banner banner banner ... ..." "... ... side content category ... ..." } div#banner, div#banner-commentspop { grid-area: banner; } div#content { grid-area: content; } div#content img, div#container img { max-width: 100% !important; height: auto; } div#categories { grid-area: category; padding: 0; } div#categories ul { list-style: none; display: grid; grid-template-columns: 1fr; padding-inline-start: 0; } div#links { grid-area: side; } div#container, div.blog { grid-column-start: side; grid-row-start: side; grid-column-end: category; grid-row-end: category; justify-self: center; } div#crosssitenavigation { grid-area: crosssitenav; }