Template:Tongji Software/app/base css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

• ,

  after,

  before {

box-sizing: border-box; }

root {

font-size: 16px; }

body, html, main, .frame{

width: 100%;
height: 100%;

}

body { position: fixed; top: 0; left: 0; --color-text: #fff; --color-bg: #0e0e0f; --color-link: #0f51e4; --color-link-hover: #ebd944; color: var(--color-text); background-color: var(--color-bg); font-family: Futura, "futura-pt", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

a { display: inline-block; text-decoration: none; color: var(--color-link); outline: none; transition: color 0.2s, transform 0.2s; transform: translate(0px, 0px); }

a:hover, a:focus { color: var(--color-link-hover); outline: none; transform: translate(0px, -2px); }

.message { background: var(--color-text); color: var(--color-bg); padding: 1rem; text-align: center; }

.frame { padding: 3rem 5vw; text-align: center; position: relative; z-index: 1000; }

.frame__title { font-size: 1rem; margin: 0 0 1rem; font-weight: normal; }

.frame__links { display: inline; }

.frame a { text-transform: lowercase; }

.frame__github, .frame__links a:not(:last-child), .frame__demos a:not(:last-child) { margin-right: 1rem; }

.frame__demos { width: 100%; padding: 0 2.5rem; margin: 1rem 0; position: absolute; bottom: 1rem; left: 50%; transform: translate(-50%, 0); } /* .frame__demo:after { content: ; position:absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--color-text); transition: width 0.2s; } */

.frame__demo { margin-top: 1rem; }

.frame__demo--current, .frame__demo:hover { color: var(--color-text); } .frame__demo--current { border-bottom: 2px solid var(--color-text); transform: none; }

.content { display: flex; flex-direction: column; width: 100vw; height: calc(100vh - 13rem); position: relative; justify-content: flex-start; align-items: center; }

.overlay { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background-color: #0e0e0f; opacity: 1; }

@media screen and (min-width: 53em) { .message { display: none; } .frame { position: fixed; text-align: left; z-index: 10000; top: 0; left: 0; display: grid; align-content: space-between; width: 100%; max-width: none; height: 100vh; padding: 3rem; pointer-events: none; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: 'title links'\ '... ...'\ 'github demos'\ ; } .frame__title-wrap { grid-area: title; display: flex; } .frame__title { margin: 0; } .frame__tagline { position: relative; margin: 0 0 0 4rem; padding: 0 0 0 1rem; } .frame__tagline::before { content: ; position: absolute; right: 100%; top: 50%; height: 1px; width: 3rem; background: var(--color-text); } .frame__github { grid-area: github; justify-self: start; margin: 0; } .frame__demos { position: initial; left: initial; width: auto; transform: none; margin: 0; padding: 0; grid-area: demos; justify-self: end; } .frame__demo { margin-top: 0; } .frame__links { grid-area: links; padding: 0; justify-self: end; } .frame a { pointer-events: auto; } .content { height: 100vh; justify-content: center; } }