/* Project: Hello World Personal Page Project URI: http://timpotter.github.io Author: Tim Potter Author URI: http://littlethunder.co */ /* Reset Browser Defaults*/ * { padding: 0; margin: 0; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Typography */ body { font-family: 'ZCOOL KuaiLe', sans-serif; font-weight: 300; color: #444; -webkit-font-smoothing: antialiased; } header { text-align: center; text-transform: uppercase; } header p { letter-spacing: 2px; font-weight: 300; } h1 { font-weight: 100; font-size: 3em; /* 48/16 */ margin-bottom: 40px; line-height: 1em; } p { line-height: 1.75em; } .about p:nth-of-type(1) { font-size: 1.5em; /* 24/16 */ line-height: 1.5em; } .about p { padding-bottom: 20px; text-align: justify; } footer p { text-align: center; font-size: 0.625em; /* 10/16 */ } small { text-align: center; } strong { font-weight: 400; } a { text-decoration: none; font-weight: 400; color: #333; } a:hover { text-decoration: underline; color: #666; } .social a { opacity: 0.3; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .social a:hover { opacity: 0.8; } .social li { display: inline; margin: 5px; color: #444; } /* Images */ .background { /* Delete background class from for a vanilla style */ background: url(https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images) top center no-repeat; } img.avatar { margin-bottom: 30px; border-radius: 50%; width: 125px; height: 125px; margin-top: -62.5px; } .social li img { width: 50px; } /* Layout */ .container { width: 600px; margin: 100px auto 25px; background-color: rgba(255, 255, 255, 0.5); padding: 0 60px 30px; border-radius: 6px; backdrop-filter: blur(4px); } .social { margin-top: 60px; text-align: center; } footer { margin-top: 30px; } /* Responsive Styles */ @media only screen and (min-width: 1920px) { .background { background-size: 100%; } } @media only screen and (max-width: 600px) { .container { width: 90%; margin-top: 50px; padding: 0 30px 30px; } h1 { font-size: 2.25em; /* 36/16 */ margin-bottom: 20px; } .social { margin-top: 20px; } .about p { text-align: left; padding-bottom: 15px; } .about p:nth-of-type(1) { font-size: 1.25em; /* 20/16 */ text-align: center; } } /* 骨架屏样式 */ .skeleton { width: 100%; height: 20px; border-radius: 2px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }