diff --git a/app/css/accomplishments.css b/app/css/accomplishments.css new file mode 100644 index 0000000..63371db --- /dev/null +++ b/app/css/accomplishments.css @@ -0,0 +1,21 @@ +.accomplishment .text { + @apply flex-grow; +} + +.accomplishment .difficulty { + @apply flex-shrink-0 pl-1 font-bold text-right; + min-width: 3em; +} + +.difficulty-easy { + @apply text-green-700; +} + +.difficulty-medium { + @apply text-orange-700; +} + +.difficulty-hard { + @apply text-red-700; +} + diff --git a/app/css/common.css b/app/css/common.css new file mode 100644 index 0000000..ab2f32c --- /dev/null +++ b/app/css/common.css @@ -0,0 +1,29 @@ +.section { + @apply w-full; + @apply max-w-lg; + @apply m-auto; + &.section-wider { + @apply max-w-xl; + } +} + + +.card { + @apply px-8; + @apply pt-6; + @apply pb-6; + @apply my-4; + @apply bg-white; + @apply rounded; + @apply shadow-md; +} + + +.link { + @apply text-blue-700; + @apply underline; + + &:hover { + @apply text-blue-500; + } +} diff --git a/app/css/forms.css b/app/css/forms.css new file mode 100644 index 0000000..4509bd7 --- /dev/null +++ b/app/css/forms.css @@ -0,0 +1,89 @@ +.form { + @apply w-full; + @apply mx-auto; + &.form-narrow { + @apply max-w-xs; + } +} + + +.btn, input:not([type=submit]), select { + @apply shadow; + @apply appearance-none; + @apply outline-none; + @apply rounded; + @apply py-2; + @apply px-3; + @apply block; + @apply text-gray-700; + @apply leading-tight; + @apply transition-all; + @apply duration-75; + + &:focus { + @apply shadow-outline; + } +} + + +input:not([type=submit]), select { + @apply w-full; + /* rounded borders look weird on buttons in firefox, so we only apply that here */ + @apply border-gray-300; + @apply border; + @apply mx-auto; +} + + + +.input[type=submit] { + @apply bg-none; +} + +.btn, input[type="submit"] { + @apply border-none; + + &.btn-blue { + @apply text-white; + @apply bg-blue-600; + &:hover { @apply bg-blue-800; } + &:focus { @apply bg-blue-900; } + } + + &.btn-green { + @apply text-white; + @apply bg-green-500; + &:hover { @apply bg-green-600; } + &:focus { @apply bg-green-700; } + } + + &.btn-orange { + @apply text-white; + @apply bg-orange-500; + &:hover { @apply bg-orange-600; } + &:focus { @apply bg-orange-700; } + } + + &.btn-red { + @apply text-white; + @apply bg-red-500; + &:hover { @apply bg-red-600; } + &:focus { @apply bg-red-700; } + } + + &.btn-wide { + @apply px-6; + } + + &.btn-inline { + @apply inline-block; + } + + + &.btn-center { @apply mx-auto; } +} + +.field.error input { + @apply border-red-500; +} + diff --git a/app/css/main.css b/app/css/main.css index 7d8f99c..bd8b23f 100644 --- a/app/css/main.css +++ b/app/css/main.css @@ -1,126 +1,21 @@ -@tailwind base; +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; -@tailwind components; - -@tailwind utilities; +@import 'accomplishments.css'; +@import 'common.css'; +@import 'forms.css'; body { @apply bg-gray-200; } -form input[type=text], -form input[type=password], -form input[type=number], -form select { - @apply shadow; - @apply appearance-none; - @apply border; - @apply rounded; - @apply w-full; - @apply py-2; - @apply px-3; - @apply text-gray-700; - @apply leading-tight; -} - -form input:focus, -form select:focus { - @apply outline-none; - @apply shadow-outline; -} - -form div.error input { - @apply border-red-500; -} - -form div.error ul.errors { - @apply pt-1 pl-1; -} - -form div.error ul.errors li { - @apply text-xs italic text-red-500; -} - -form input[type=text]:focus, -form input[type=password]:focus { - @apply outline-none; - @apply shadow-outline; -} - -form input[type=submit] { - @apply px-4 py-2 mt-2 font-bold rounded; -} - -form.auth-form input[type=submit] { - @apply w-full text-white bg-blue-500; -} - -.green-btn { - @apply text-white bg-green-500; -} - -.accomplishment .text { - @apply flex-grow; -} - -.accomplishment .difficulty { - @apply flex-shrink-0 pl-1 font-bold text-right; - min-width: 3em; -} - -.difficulty-easy { - @apply text-green-700; -} - -.difficulty-medium { - @apply text-orange-700; -} - -.difficulty-hard { - @apply text-red-700; -} - -.green-btn:hover { - @apply bg-green-700; -} - -.orange-btn { - @apply text-white bg-orange-500; -} - -.orange-btn:hover { - @apply bg-orange-700; -} - -.red-btn { - @apply text-white bg-red-500; -} - -.red-btn:hover { - @apply bg-red-700; -} - - -form.auth-form input[type=submit]:hover { - @apply bg-blue-700; -} - -form input[type=submit]:focus { - @apply shadow-outline outline-none; -} - -.link { - @apply text-blue-700 underline; -} - -.link:hover { - @apply text-blue-500; -} - -.card { - @apply px-8 pt-6 pb-6 mt-4 mb-4 bg-white rounded shadow-md; -} - -.auth-form.card { - @apply pb-4; +.screencap { + @apply overflow-hidden; + @apply border-2; + @apply border-black; + @apply border-gray-500; + @apply border-solid; + @apply rounded-lg; + @apply shadow-xl; } diff --git a/app/templates/_formhelpers.html b/app/templates/_formhelpers.html index 852fe44..c8a9879 100644 --- a/app/templates/_formhelpers.html +++ b/app/templates/_formhelpers.html @@ -1,8 +1,9 @@ -{% macro render_field(field, label=True, wrapper_class="", description="") %} -