gnaa/assets/style.css

1 行
4.3 KiB
CSS

html{scroll-behavior:smooth}body{display:block;margin:0;padding:0;font-family:Arial,sans-serif;font-size:1.1em;background-color:#fff;color:#444;overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth}.neat{min-width:960px;width:60%;max-width:1180px;margin-left:auto;margin-right:auto}.page{min-height:calc(100vh - 14em - 34px)}.navbar{position:sticky;position:-webkit-sticky;top:0;width:100%;background-color:#27568b;box-shadow:0 8px 8px 0 rgba(0,0,0,.3);line-height:1.15em}.navbar ul{display:block;list-style-type:none;margin-top:0;margin-bottom:0;padding:0;overflow:hidden}.navbar li{float:left}.navbar li:last-of-type{float:right}.navbar li a{display:block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none;outline:none}.navbar li a:hover:not(.active){color:#7593b5}.navbar li a.active{background-color:#28415b}.good{color:green}.bad{color:red}.dropdown{display:block;width:90%;padding:14px 16px;background-color:#27568b;color:#fff}.dropdown button{outline:none;position:absolute;top:.6em;right:14px;width:48px;height:32px;cursor:pointer;background-color:#27568b;border:1px solid #fff;padding-top:4px;padding-left:7px}.icon-bar{display:block;width:32px;height:2px;background-color:#fff;margin-bottom:4px}.dropdown-content{position:absolute;top:calc(1em + 30px);left:0;display:none;width:100%;height:0;max-height:max-content;overflow-y:hidden;background-color:#27568b;box-shadow:0 8px 8px 0 rgba(0,0,0,.3)}.dropdown-content.shown{animation:drop-down .5s ease;height:max-content}.dropdown-content.hidden{animation:drop-up .5s ease;height:0}.dropdown-content ul{width:100%}.dropdown-content ul li{width:100%;border-top:1px solid #fff}.content{padding-top:20px;padding-left:20px;padding-right:20px;line-height:1.6em;text-align:justify}.logo{display:block;width:400px;max-width:80vw;margin:32px;margin-left:auto;margin-right:auto}.title{display:block;width:100%;margin-bottom:8px;text-align:center;border:none;line-height:1}.subtitle{display:block;width:100%;text-align:center;color:#666;font-style:italic}h1{border-bottom:4px solid #888;line-height:.7}h2,h3,h4,h5,h6{color:#27568b;margin-bottom:0}a{color:#27568b}a:hover,a:focus{outline:none;color:red;cursor:pointer}ul,ol{margin-top:0}.form{margin-left:auto;margin-right:auto}.form tr td:first-child{font-weight:700;text-align:right;padding-right:8px;vertical-align:text-top;padding-top:8px}.form input,.form textarea{width:512px;height:3em;border:1px solid #888;border-radius:8px;padding-left:8px;padding-right:8px;outline:none}.form textarea{height:10em;padding:8px;resize:vertical;font-family:Arial,sans-serif}.form input[type=submit]{background-color:#27568b;color:#fff;font-weight:700;border:2px solid #27568b}.form input[type=submit]:hover,.form input[type=submit]:focus{background-color:#2e4660;cursor:pointer;border:2px solid #2e4660}.form input[type=submit]:active{background-color:#fff;color:#27568b;border:2px solid #27568b}.thumb{width:128px}input{width:256px}input,textarea{box-sizing:border-box;max-width:100%}.gallery tr td:first-child{width:136px}.gallery tr td img{margin-left:auto;float:left}.leaders{width:100%}.leaders td{width:33%;vertical-align:top;padding:16px 16px 0}.leaders img{width:100%}blockquote{font-style:italic;margin-bottom:4px;margin-left:16px;padding-left:28px;border-left:4px solid #27568b}.author{margin-left:16px}.large-text{max-width:100%;font-size:5em;line-height:1em}.footer{text-align:right;color:#888;margin-bottom:8px}.footer .footer-paragraph{width:calc(50% - 32px);display:inline-block;text-align:justify;vertical-align:top;margin-right:24px}.footer .footer-paragraph:last-of-type{text-align:right}.footer hr{border:none;height:4px;background-color:#888}.footer img{width:64px;float:left}@media only screen and (max-width:1280px){.neat{min-width:460px;width:88%;max-width:1080px}.navbar .neat{width:100%}.page{min-height:calc(100vh - 15em - 34px)}}@media only screen and (max-device-width:960px){.neat{min-width:0;width:88%;max-width:1080px}.page{min-height:calc(100vh - 26em - 36px)}.gallery tr td:first-child{display:none}.gallery tr td img{margin-right:16px}.leaders td{width:100%;display:inherit}.leaders td img{margin-top:16px}h1{line-height:calc(2/3)}form table tr td:first-of-type{display:none}form table tr td input,form table tr td textarea{max-width:80vw}.footer .footer-paragraph{width:100%;margin-right:0}.footer .footer-paragraph:last-of-type{text-align:left}}