git.r.bdr.sh - rbdr/dasein/blob - static/css/app.css

   1 * {
   2   margin: 0;
   3   padding: 0;
   4 }
   5
   6 /* General styles */
   7
   8 body {
   9   font-family: "VT323", sans-serif;
  10 }
  11
  12 a {
  13         color: #00e;
  14 }
  15
  16 a:active {
  17         color: #e00;
  18 }
  19
  20 a:visited {
  21         color: #551a8b;
  22 }
  23
  24 h1 {
  25         font-size: 48px;
  26 }
  27
  28 section {
  29         padding: 24px;
  30 }
  31
  32 /* Header */
  33
  34 #dasein .dasein-header {
  35         text-align: center;
  36 }
  37
  38 #dasein .dasein-header a {
  39   font-size: 96px;
  40 }
  41
  42 .welcome-container,
  43 .login-container {
  44   font-size: 24px;
  45   padding: 50px 10px 10px;
  46 }
  47
  48 /* The stream */
  49
  50 .comments-container .comment .comment-meta,
  51 .posts-container .post .post-meta {
  52   background-color: lightgray;
  53   display: flex;
  54   align-items: center;
  55   font-size: 20px;
  56 }
  57
  58 .comment-meta time, .comment-meta a,
  59 .post-meta time, .post-meta a {
  60   padding: 0 10px;
  61 }
  62
  63 .comments-container .comment .comment-content,
  64 .comment-form-container .comment-content-input,
  65 .comment-form-container .comment-submit,
  66 .posts-container .post .post-content,
  67 .post-form-container .post-content-input,
  68 .post-form-container .post-submit {
  69   font-family: -apple-system, BlinkMacSystemFont,
  70       "Segoe UI", "Roboto", "Oxygen",
  71       "Ubuntu", "Cantarell", "Fira Sans",
  72       "Droid Sans", "Helvetica Neue", sans-serif;
  73   font-size: 24px;
  74   padding: 10px;
  75 }
  76
  77 .comments-container .comment .comment-content,
  78 .posts-container .post .post-content {
  79   white-space: pre-wrap;
  80   word-wrap: break-word;
  81 }
  82
  83 .comment-form-container .comment-content-input,
  84 .post-form-container .post-content-input {
  85   display: block;
  86   margin: 10px;
  87   width: 90%;
  88   resize: none;
  89   height: 140px;
  90 }
  91
  92 .comment-form-container .comment-submit,
  93 .comment-form-container .comment-activate,
  94 .post-form-container .post-submit {
  95   margin: 10px auto;
  96   display: block;
  97   background-color: lightgray;
  98 }
  99
 100 .post-form-container .post-submit:active {
 101   background-color: cyan;
 102 }
 103
 104 .posts-error,
 105 .comments-error,
 106 .post-form-error {
 107   color: red;
 108   padding: 10px;
 109 }
 110
 111 /* Comments */
 112
 113 .comments-container .comment .comment-meta {
 114   background-color: ghostwhite;
 115   font-size: 16px;
 116 }
 117
 118 .comments-container .comment .comment-meta img {
 119   width: 24px;
 120   height: 24px;
 121 }
 122
 123 .comments-container .comment .comment-content,
 124 .comment-form-container .comment-content-input,
 125 .comment-form-container .comment-submit {
 126   font-size: 16px;
 127 }
 128
 129 .comment-form-container .comment-activate {
 130   padding: 2px;
 131   font-size: 12px;
 132 }
 133
 134 .comment-form-container .comment-content-input {
 135   height: 70px;
 136 }
 137
 138 .comment-form-container .comment-activate:active,
 139 .comment-form-container .comment-submit:active {
 140   background-color: magenta;
 141 }