123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- /* variables */
-
- $black: #000000;
- $white: #ffffff;
- $blue: #496893;
- $red: #ff0000;
- $light-gray: #f5f5f5;
- $medium-gray: #c8c8c8;
-
- $body-font-family: Georgia, serif;
-
- $body-font-size: 18px;
- $heading-font-size: 26px;
-
- /* global */
-
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
-
- ul {
- list-style: none;
- }
-
- a {
- color: $blue;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- body {
- font-family: $body-font-family;
- font-size: $body-font-size;
- line-height: 1.5;
- min-height: 100vh;
- }
-
- .heading {
- border-bottom: 1px solid $black;
- font-size: $heading-font-size;
- margin-bottom: 15px;
- }
-
- /* layout */
-
- .container {
- border-left: 1px solid $medium-gray;
- border-right: 1px solid $medium-gray;
- display: flex;
- flex-direction: column;
- margin: auto;
- max-width: 768px;
- min-height: 100vh;
- }
-
- .main {
- background: $light-gray;
- display: flex;
- flex: 1;
- padding: 20px;
- width: 100%;
- }
-
- /* header */
- .header {
- background: $blue;
- color: $white;
-
- @media(max-width: 1000px) {
- min-height: auto;
- width: 100%;
- }
- }
-
- .header__title {
- color: $white;
- font-size: 24px;
- padding: 15px;
- }
-
- .nav {
- background: $white;
- display: flex;
- justify-content: space-between;
- padding: 10px 0;
- }
-
- .nav__item {
- padding: 5px 10px;
- }
-
- /* forms */
-
- .form {
- width: 100%;
- }
-
- .form__field {
- display: flex;
- flex-direction: column;
- margin: 15px 0;
- width: 100%;
- }
-
- .form__field--submit {
- display: block;
- }
-
- .form__field,
- .form__label {
- margin-bottom: 5px;
- }
-
- .form__date-field,
- .form__textarea,
- .form__text-field {
- border: 1px solid $medium-gray;
- font-family: $body-font-family;
- font-size: $body-font-size;
- padding: 10px;
- }
-
- .form__textarea {
- resize: vertical;
- }
-
- .button.form__submit {
- background: $white;
- border: 1px solid $medium-gray;
- cursor: pointer;
- font-family: $body-font-family;
- font-size: $body-font-size;
- padding: 10px;
-
- &:hover {
- background: $light-gray;
- }
-
- @media(max-width: 500px) {
- width: 100%;
- }
- }
-
- /* post listing */
-
- .post-listing {
- width: 100%;
- }
-
- .post-listing__item {
- display: flex;
- padding: 10px;
- position: relative;
- width: 100%;
-
- &:nth-child(even) {
- background: white;
- }
- }
-
- .post-listing__item--changed:before {
- color: $red;
- content: '•';
- display: block;
- font-size: $heading-font-size;
- left: -15px;
- line-height: 16px;
- position: absolute;
- }
-
- .post-listing__link {
- flex: 1;
- }
|