Commit f30a18c6 authored by Ibnu Daru Aji's avatar Ibnu Daru Aji

added templates

parent 2c11ea64
......@@ -56,13 +56,7 @@ instance Yesod App where
maut <- maybeAuth
mmessage <- getMessage
pagecontent <- widgetToPageContent $ do
[whamlet|
$maybe aut <- maut
<a [email protected]{SigninR LogoutR}> Logout
$nothing
<a [email protected]{SigninR LoginR}> Login
^{widget}
|]
$(widgetFile "def")
withUrlRenderer $(hamletFile "templates/wrapper.hamlet")
authRoute _ = Just $ SigninR LoginR
isAuthorized (SigninR _) _ = return Authorized
......
......@@ -15,6 +15,7 @@ import Database.Persist.Postgresql
import Language.Haskell.TH.Syntax
import Network.Wai.Handler.Warp
import Yesod.Default.Config2
import Yesod.Default.Util
data ApplicationSettings = ApplicationSettings
{ appStaticDir :: String
......@@ -50,3 +51,19 @@ configSettingsYmlBS = $(embedFile configSettingsYml)
configSettingsYmlValue :: Value
configSettingsYmlValue = either Exception.throw id $ decodeEither' configSettingsYmlBS
compileTimeAppSettings :: ApplicationSettings
compileTimeAppSettings =
case fromJSON $ applyEnvValue False mempty configSettingsYmlValue of
Error e -> error e
Success s -> s
widgetFile :: String -> Q Exp
widgetFile =
(if appReloadTemplate compileTimeAppSettings
then widgetFileReload
else widgetFileNoReload)
widgetFileSettings
where
widgetFileSettings :: WidgetFileSettings
widgetFileSettings = def
body {
background-color: #d6d6d6;
}
.wrapper {
background-color: #d6d6d6;
color: #242424;
display: block;
overflow: hidden;
position: relative;
width: 100%;
}
.wrapper .container {
max-width: 90%;
}
.wrapper>.container {
padding-bottom: 7.5rem;
padding-top: 7.5rem
}
.header {
background-color: #444444;
padding-top: 1rem
}
@media(min-width:40rem) {
.header {
padding-top: 5rem
}
}
.header+section {
border-top: 0
}
.header .container {
border-top: 0;
padding-bottom: 7.5rem;
padding-top: 7.5rem;
position: relative;
text-align: center
}
.header .title {
font-family: Gotham Rounded A, Gotham Rounded B, Helvetica Neue, Arial, sans-serif
}
.header .img {
height: 15rem;
margin-bottom: 2rem
}
.header .img path {
animation: 7s a forwards;
fill: #f2f2f4;
stroke: #f2f2f4;
stroke-dasharray: 38321;
stroke-miterlimit: 10;
stroke-width: 15px
}
.header .button {
margin-bottom: 4rem;
margin-top: 2rem
}
@media(min-width:40rem) {
.header .button {
margin-bottom: 4rem;
margin-top: 2rem
}
}
@keyframes a {
0% {
fill-opacity: 0;
stroke-dashoffset: 38321
}
25% {
fill-opacity: 0;
stroke: #f2f2f4
}
to {
fill-opacity: 1;
stroke-dashoffset: 0
}
}
.navigation {
background: #464646;
border-bottom: .1rem solid #d1d1d1;
display: block;
height: 5.2rem;
left: 0;
max-width: 100%;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1;
color: #f0f0f0;
}
.navigation .container {
padding-bottom: 0;
padding-top: 0
}
.navigation .navigation-list {
list-style: none;
margin-bottom: 0;
margin-right: 5rem
}
@media(min-width:80rem) {
.navigation .navigation-list {
margin-right: 0
}
}
.navigation .navigation-item {
float: left;
margin-bottom: 0;
margin-left: 2.5rem;
position: relative
}
.navigation .img {
fill: #f2f2f4;
height: 2rem;
position: relative;
top: .3rem
}
.navigation .navigation-title,
.navigation .title {
color: #606c76;
font-family: Gotham Rounded A, Gotham Rounded B, Helvetica Neue, Arial, sans-serif;
position: relative
}
.navigation .navigation-link,
.navigation .navigation-title,
.navigation .title {
color: #f0f0f0;
display: inline;
font-size: 1.6rem;
line-height: 5.2rem;
padding: 0;
text-decoration: none
}
.navigation .navigation-link.active {
color: #606c76
}
@keyframes b {
0%,
50% {
transform: rotate(0)
}
25%,
75% {
transform: rotate(-25deg)
}
}
@media(min-width:40rem) {
.only-mobile {
display: none
}
}
.prettyprint.code {
border: 0;
border-left: .3rem solid #f2f2f4;
color: #655d5d
}
.prettyprint.code .str {
color: #4b8b8b
}
.prettyprint.code .kwd {
color: #8464c4
}
.prettyprint.code .com {
color: #adadad
}
.prettyprint.code .typ {
color: #7272ca
}
.prettyprint.code .lit {
color: #f2f2f4
}
.prettyprint.code .pun {
color: #5485b6
}
.prettyprint.code .clo,
.prettyprint.code .opn {
color: #f4ecec
}
.prettyprint.code .atn,
.prettyprint.code .tag {
color: #f2f2f4
}
.prettyprint.code .atv {
color: #5485b6
}
.prettyprint.code .dec {
color: #b45a3c
}
.prettyprint.code .var {
color: #ca4949
}
.prettyprint.code .fun {
color: #7272ca
}
.prettyprint.code.lang-md * {
color: #655d5d
}
.column.column-20 {
background-color: #d6d6d6;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.banned {
text-align: center;
color: #f22424;
}
.locked {
text-align: center;
color: #aaafff;
}
.not-signed-in {
text-align: center;
}
*,
*:after,
*:before {
box-sizing: inherit
}
html {
box-sizing: border-box;
font-size: 62.5%
}
body {
color: #606c76;
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-size: 1.6em;
font-weight: 300;
letter-spacing: .01em;
line-height: 1.6
}
blockquote {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
margin-right: 0;
padding: 1rem 1.5rem
}
blockquote *:last-child {
margin-bottom: 0
}
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
background-color: #242424;
color: #f0f0f0;
border: 0.1rem solid #f0f0f0;
border-radius: .4rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
height: 3.8rem;
letter-spacing: .1rem;
line-height: 3.8rem;
padding: 0 3.0rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap
}
.button:focus,
.button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
background-color: #f0f0f0;
border-color: #242424;
color: #fff;
outline: 0
}
.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
cursor: default;
opacity: .5
}
.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
background-color: #9b4dca;
border-color: #9b4dca
}
.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
background-color: transparent;
color: #9b4dca
}
.button.button-outline:focus,
.button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
background-color: transparent;
border-color: #606c76;
color: #606c76
}
.button.button-outline[disabled]:focus,
.button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
border-color: inherit;
color: #9b4dca
}
.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
background-color: transparent;
border-color: transparent;
color: #9b4dca
}
.button.button-clear:focus,
.button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
background-color: transparent;
border-color: transparent;
color: #606c76
}
.button.button-clear[disabled]:focus,
.button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {
color: #9b4dca
}
code {
background: #f4f5f6;
border-radius: .4rem;
font-size: 86%;
margin: 0 .2rem;
padding: .2rem .5rem;
white-space: nowrap
}
pre {
background: #f4f5f6;
border-left: 0.3rem solid #9b4dca;
overflow-y: hidden
}
pre>code {
border-radius: 0;
display: block;
padding: 1rem 1.5rem;
white-space: pre
}
hr {
border: 0;
border-top: 0.1rem solid #f4f5f6;
margin: 3.0rem 0
}
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='color'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='datetime'],
input[type='datetime-local'],
input:not([type]),
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 0.1rem solid #242424;
border-radius: .4rem;
box-shadow: none;
box-sizing: inherit;
height: 3.8rem;
padding: .6rem 1.0rem;
width: 100%
}
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='color']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='week']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
border-color: #242424;
outline: 0
}
select {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
padding-right: 3.0rem
}
select:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
}
textarea {
min-height: 6.5rem
}
label,
legend {
display: block;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: .5rem
}
fieldset {
border-width: 0;
padding: 0
}
input[type='checkbox'],
input[type='radio'] {
display: inline
}
.label-inline {
display: inline-block;
font-weight: normal;
margin-left: .5rem
}
.container {
margin: 0 auto;
max-width: 112.0rem;
padding: 0 2.0rem;
position: relative;
width: 100%
}
.row {
display: flex;
flex-direction: column;
padding: 0;
width: 100%
}
.row.row-no-padding {
padding: 0
}
.row.row-no-padding>.column {
padding: 0
}
.row.row-wrap {
flex-wrap: wrap
}
.row.row-top {
align-items: flex-start
}
.row.row-bottom {
align-items: flex-end
}