-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.css
2 lines (2 loc) · 1.91 KB
/
styles.css
1
2
:root{--dark-color:#333;--color-primary:#e52434;--color-primary-darker:#d61929;--color-primary-darkest:#bf1725}*,::before,::after{box-sizing:border-box}html,body{margin:0;padding:0;font-family:"Comic Sans MS";font-size:18px}nav ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(10px, 1fr));margin:0;padding:0}nav li{display:inline-block;text-align:center;background-color:var(--dark-color)}nav li a{color:#fff;display:block;width:100%;height:100%;padding:8px}nav li:hover,nav li:focus,nav li:focus-within{background-color:var(--color-primary)}article{padding:16px;max-width:720px;margin:0 auto}article figure{max-width:80%;display:block}article figure img{max-width:100%;display:block}article figure figcaption{width:100%}.Comments{max-width:720px;padding:16px;margin:0 auto}@media (min-width:768px){.Comments-newCommentNames{display:flex;flex-direction:row;gap:16px}.Comments-newCommentNames label{flex-grow:1}}.Comments-newComment label{font-weight:bold}.Comments-newComment label input,.Comments-newComment label textarea{font-weight:normal;display:block;width:100%;margin-top:4px;margin-bottom:8px;padding:4px}.Comments-newComment textarea{width:100%;min-height:80px;max-height:100vh;resize:vertical}.Comments-newComment button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--color-primary);color:white;padding:8px 16px;border-radius:6px;cursor:pointer}.Comments-newComment button:hover,.Comments-newComment button:focus{background:var(--color-primary-darker)}.Comments-newComment button:active{background:var(--color-primary-darkest)}.Comments-list{display:flex;flex-direction:column;margin-top:24px}.Comments .Comment{border:1px solid var(--dark-color);padding:16px}.Comments .Comment:not(:last-child){margin-bottom:16px}.Comments .Comment::before{display:block;content:attr(data-header);font-size:.8em;font-weight:bold;margin-bottom:8px}
/*# sourceMappingURL=./styles.css.map */