共有 1 個文件被更改,包括 332 次插入 和 0 次删除
分割檢視
Diff Options
-
332test.css
@ -0,0 +1,332 @@ |
|||
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, |
|||
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, |
|||
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, |
|||
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, |
|||
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, |
|||
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, |
|||
mark, audio, video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
box-sizing: border-box |
|||
} |
|||
|
|||
article, aside, details, figcaption, figure, footer, header, hgroup, |
|||
menu, nav, section { |
|||
display: block |
|||
} |
|||
|
|||
body { |
|||
line-height: 1 |
|||
} |
|||
|
|||
ol, ul { |
|||
list-style: none |
|||
} |
|||
|
|||
blockquote, q { |
|||
quotes: none |
|||
} |
|||
|
|||
blockquote:before, blockquote:after, q:before, q:after { |
|||
content: ''; |
|||
content: none |
|||
} |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0 |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: 'Range Mono'; |
|||
font-display: auto; |
|||
src: url('fonts/range-mono-light-webfont.woff2') format('woff2'), url('fonts/range-mono-light-webfont.woff') format('woff'); |
|||
font-weight: 300; |
|||
font-style: normal; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: 'Range Mono'; |
|||
font-display: auto; |
|||
src: url('fonts/range-mono-normal-webfont.woff2') format('woff2'), url('fonts/range-mono-normal-webfont.woff') format('woff'); |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: 'Range Mono'; |
|||
font-display: auto; |
|||
src: url('fonts/range-mono-bold-webfont.woff2') format('woff2'), url('fonts/range-mono-bold-webfont.woff') format('woff'); |
|||
font-weight: 700; |
|||
font-style: normal; |
|||
} |
|||
.center { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
width: 50%; |
|||
max-width: 400px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.tm { |
|||
margin: 10px 0 20px 0 !important; |
|||
} |
|||
|
|||
html, body { |
|||
position: relative; |
|||
width: 100%; |
|||
|
|||
padding-bottom: 10px; |
|||
font-family: 'Range Mono', Helvetica, sans-serif |
|||
} |
|||
|
|||
img { |
|||
display:inline-block; |
|||
margin:auto; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
section { |
|||
position: relative; |
|||
margin: 80px 0 0 0 |
|||
} |
|||
|
|||
section:after { |
|||
content: ''; |
|||
display: table; |
|||
clear: both |
|||
} |
|||
|
|||
section#subsections + section { |
|||
margin: 40px 0 0 0 |
|||
} |
|||
|
|||
section#footer { |
|||
margin: 80px 0 80px 0 |
|||
} |
|||
|
|||
section article.halfsection { |
|||
float: left; |
|||
width: 50%; |
|||
padding: 0 20px 40px 0 |
|||
} |
|||
|
|||
section article.subsection { |
|||
float: left; |
|||
width: 25%; |
|||
padding: 0 20px 40px 0 |
|||
} |
|||
|
|||
@media (max-width: 1040px) { |
|||
section { |
|||
margin: 40px 0 0 0 |
|||
} |
|||
|
|||
section#subsections + section { |
|||
margin: 20px 0 0 0 |
|||
} |
|||
|
|||
section#footer { |
|||
margin: 40px 0 40px 0 |
|||
} |
|||
|
|||
section article.halfsection { |
|||
padding: 0 20px 20px 0 |
|||
} |
|||
|
|||
section article.subsection { |
|||
width: 33%; |
|||
padding: 0 10px 40px 0 |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 640px) { |
|||
article.subsection { |
|||
width: 50% !important |
|||
} |
|||
} |
|||
|
|||
footer { |
|||
position: relative; |
|||
margin: 40px 0 80px 0; |
|||
text-align: right |
|||
} |
|||
|
|||
footer span { |
|||
color: #bcbdc2; |
|||
font-size: 0.7em; |
|||
font-weight: 700 |
|||
} |
|||
|
|||
@media (max-width: 1040px) { |
|||
footer { |
|||
margin: 20px 0 40px 0 |
|||
} |
|||
} |
|||
|
|||
.full-width { |
|||
width: 100% |
|||
} |
|||
|
|||
.body-width { |
|||
width: 1040px; |
|||
padding: 0 80px 0 80px |
|||
} |
|||
|
|||
@media (max-width: 1040px) { |
|||
.body-width { |
|||
width: 100%; |
|||
padding: 0 40px 0 40px |
|||
} |
|||
} |
|||
|
|||
h1 { |
|||
text-align: center; |
|||
color: #d2a668; |
|||
font-weight: 400; |
|||
margin: 20px 0 20px 0; |
|||
|
|||
} |
|||
|
|||
h2 { |
|||
text-align: center; |
|||
color: #d2a668; |
|||
font-weight: 400; |
|||
font-size: 0.7em; |
|||
margin: 20px 0 20px 0 |
|||
} |
|||
|
|||
h3 { |
|||
text-align: center; |
|||
font-weight: 400; |
|||
margin: 20px 0 20px 0 |
|||
} |
|||
|
|||
p { |
|||
color: #595f6e; |
|||
font-size: 0.8em; |
|||
font-weight: 300; |
|||
line-height: 1.8em |
|||
} |
|||
|
|||
p a { |
|||
color: #595f6e; |
|||
font-weight: 700; |
|||
text-decoration: underline |
|||
} |
|||
|
|||
@media (max-width: 1040px) { |
|||
p { |
|||
font-size: 0.7em |
|||
} |
|||
} |
|||
|
|||
iframe { |
|||
text-align: center; |
|||
display:block; |
|||
border: none; |
|||
} |
|||
|
|||
ul li { |
|||
text-align: center; |
|||
margin: 12px 0 20px 0 |
|||
} |
|||
|
|||
ul li a { |
|||
color: #595f6e; |
|||
font-size: 0.8em; |
|||
font-weight: 300; |
|||
text-decoration: underline |
|||
} |
|||
|
|||
@media (max-width: 1040px) { |
|||
ul li { |
|||
margin: 8px 0 0 0 |
|||
} |
|||
|
|||
ul li a { |
|||
padding-top: 5px; |
|||
font-size: 0.7em |
|||
} |
|||
} |
|||
|
|||
#stream { |
|||
display: block; |
|||
position: relative; |
|||
width: 100%; |
|||
height: 80px |
|||
} |
|||
|
|||
.your-centered-div img { |
|||
display: block; |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
|
|||
.container { |
|||
width: 100%; |
|||
float: left; |
|||
/* border: 1px solid orange; */ |
|||
} |
|||
|
|||
.youtube-centered-div { |
|||
max-width: 560px; /* you have to have a size or this method doesn't work */ |
|||
max-height: 315px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
margin-bottom: 10px; |
|||
|
|||
} |
|||
.youtube-centered-div iframe { |
|||
margin-right: 10px; |
|||
} |
|||
.bandcamp-centered-div { |
|||
max-width: 560px; /* you have to have a size or this method doesn't work */ |
|||
max-height: 680px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
} |
|||
|
|||
@media only screen |
|||
and (min-device-width: 300px) |
|||
and (max-device-width: 600px) |
|||
and (-webkit-min-device-pixel-ratio: 2) { |
|||
|
|||
.youtube-centered-div iframe { |
|||
margin-right: 10px; |
|||
width: 100vw; |
|||
height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */ |
|||
} |
|||
.bandcamp-centered-div iframe { |
|||
margin-right: 10px; |
|||
height: 420px; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
@media only screen |
|||
and (min-device-width: 800px) |
|||
and (max-device-width: 3000px) |
|||
and (-webkit-min-device-pixel-ratio: 2) { |
|||
|
|||
.youtube-centered-div iframe { |
|||
margin-right: 10px; |
|||
height: 680px; |
|||
width: 100%; |
|||
height: 315px; |
|||
} |
|||
|
|||
.bandcamp-centered-div iframe { |
|||
margin-right: 10px; |
|||
height: 680px; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
Write
Preview
Loading…
取消
儲存