110 lines
2.1 KiB
Elm
110 lines
2.1 KiB
Elm
module SiteComponents exposing (basedBackground, basedBrightText, basedGreen, basedNavBack, basedPurple, basedText, basicNiceHeader, edges, greenLines, niceHeader, patternBack, rawTextToId)
|
|
|
|
import Element exposing (..)
|
|
import Element.Font as Font
|
|
import Html.Attributes
|
|
import Regex
|
|
|
|
|
|
edges =
|
|
{ top = 0
|
|
, right = 0
|
|
, bottom = 0
|
|
, left = 0
|
|
}
|
|
|
|
|
|
basedPurple =
|
|
rgb255 15 0 40
|
|
|
|
|
|
basedGreen =
|
|
rgb255 5 150 5
|
|
|
|
|
|
basedBrightText =
|
|
rgb255 255 255 255
|
|
|
|
|
|
basedText =
|
|
rgb255 240 240 240
|
|
|
|
|
|
basedBackground =
|
|
rgb255 28 28 28
|
|
|
|
|
|
basedNavBack =
|
|
rgb255 20 20 20
|
|
|
|
|
|
patternBack color =
|
|
htmlAttribute <|
|
|
Html.Attributes.style "background"
|
|
(let
|
|
c =
|
|
toRgb color
|
|
|
|
cs cc =
|
|
String.fromInt (round (cc * 255))
|
|
|
|
fc =
|
|
"rgb(" ++ cs c.red ++ ", " ++ cs c.green ++ ", " ++ cs c.blue ++ ")"
|
|
in
|
|
"repeating-linear-gradient(90deg, " ++ fc ++ ", " ++ fc ++ "1px, #000 1px, #000 2px)"
|
|
)
|
|
|
|
|
|
greenLines =
|
|
patternBack (rgb255 0 90 0)
|
|
|
|
|
|
rawTextToId rawText =
|
|
(case Regex.fromString "^[^a-zA-Z]|[^a-zA-Z0-9_:. -]" of
|
|
Nothing ->
|
|
rawText
|
|
|
|
Just regex ->
|
|
Regex.replace regex (\_ -> "") rawText
|
|
)
|
|
|> String.toLower
|
|
|> String.replace " " "-"
|
|
|
|
|
|
niceHeader level rawText children =
|
|
let
|
|
fontSize =
|
|
case level of
|
|
1 ->
|
|
36
|
|
|
|
2 ->
|
|
24
|
|
|
|
3 ->
|
|
20
|
|
|
|
_ ->
|
|
15
|
|
in
|
|
paragraph
|
|
[ width
|
|
(if level < 4 then
|
|
fill
|
|
|
|
else
|
|
shrink
|
|
)
|
|
, height shrink
|
|
, padding 10
|
|
, Font.size fontSize
|
|
, greenLines
|
|
, Element.htmlAttribute (Html.Attributes.attribute "name" (rawTextToId rawText))
|
|
, Element.htmlAttribute (Html.Attributes.id (rawTextToId rawText))
|
|
]
|
|
children
|
|
|
|
|
|
basicNiceHeader size t =
|
|
niceHeader size t [ text t ]
|