Skip to content

Instantly share code, notes, and snippets.

@jeovazero

jeovazero/refactor.patch

Created October 29, 2019 19:09
Show Gist options
  • Save jeovazero/72fe65738a5badf80e36e308a65e82c0 to your computer and use it in GitHub Desktop.
Save jeovazero/72fe65738a5badf80e36e308a65e82c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
refactor.patch
diff --git a/src/CombinatorsAnimated.elm b/src/CombinatorsAnimated.elm
index 297029f..2afadc4 100644
--- a/src/CombinatorsAnimated.elm
+++ b/src/CombinatorsAnimated.elm
@@ -19,18 +19,6 @@ import Html.Styled.Attributes as Attrs exposing (..)
import Html.Styled.Keyed as Keyed
import Html.Styled.Lazy exposing (lazy)
import StyleGuide as Theme
-import Styles
- exposing
- ( backgroundStyle
- , borderPink
- , font
- , linkColor
- , paddingLarge
- , textColor
- , textLarge
- , textMedium
- , textXLarge
- )
import Task
import Time
@@ -249,11 +237,9 @@ combinatorWrapper { position, letter, opacity, delay } =
, fontSize (px 36)
, left (pct x)
, bottom (px -36)
- , color Theme.colors.pink
- , fontFamilies [ "Rhodium Libre", "serif" ]
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ fontSize (px 18) ]
+ , color Theme.color.primary
+ , Theme.fontFamily.secondary
+ , Theme.breakpoint.tablet [ Theme.textSize.normal ]
]
, style "opacity" (String.fromFloat opacity)
, style "transform" translateStr
diff --git a/src/Elements.elm b/src/Elements.elm
index 93c1bdf..fa9675d 100644
--- a/src/Elements.elm
+++ b/src/Elements.elm
@@ -6,25 +6,12 @@ import Css.Media as Media exposing (only, screen, withMedia)
import Html.Styled exposing (..)
import Html.Styled.Attributes as Attrs exposing (..)
import StyleGuide as Theme
-import Styles
- exposing
- ( backgroundStyle
- , borderPink
- , font
- , linkColor
- , paddingLarge
- , textColor
- , textLarge
- , textMedium
- , textXLarge
- )
import Svg.Styled exposing (path, svg)
import Svg.Styled.Attributes as SAttr
--- TODO: order the elements by role
--- TODO: all elements 'styled' must have the name with suffix "Styled"
+-- LAMBDA LOGO --
animFill =
@@ -63,19 +50,19 @@ lambdaPath =
118.533 157.129 116.138 162.663C112.792 170.394 107.436 174.866 100.401 175.805C99.4399
175.933 97.1579 175.987 96.2288 175.903Z
"""
- , SAttr.fill "#D872E9"
+ , SAttr.fill Theme.colorRaw.primary
, SAttr.css
[ animationName
(Anima.keyframes
[ ( 0, [ animFill "none", animStrokeDash "1000" ] )
- , ( 80, [ animFill "black" ] )
- , ( 100, [ animFill "#D872E9", animStrokeDash "0" ] )
+ , ( 80, [ animFill Theme.colorRaw.background ] )
+ , ( 100, [ animFill Theme.colorRaw.primary, animStrokeDash "0" ] )
]
)
, Css.property "stroke-dasharray" "1000"
, Css.property "animation-duration" "2s"
, Css.property "animation-timing-function" "ease-in-out"
- , Css.property "stroke" "#D872E9"
+ , Css.property "stroke" Theme.colorRaw.primary
, Css.property "stroke-width" "2px"
]
]
@@ -90,28 +77,12 @@ lambdaSvg width1 width2 =
, SAttr.css
[ Css.width (px width1)
, Css.height auto
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ Css.width (px width2) ]
+ , Theme.breakpoint.tablet [ Css.width (px width2) ]
]
]
[ lambdaPath ]
-lambdaLogo : Float -> Float -> Html msg
-lambdaLogo width1 width2 =
- img
- [ src "assets/logo.svg"
- , css
- [ Css.width (px width1)
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ Css.width (px width2) ]
- ]
- ]
- []
-
-
lambdaLogoLarge =
lambdaSvg 120 60
@@ -124,12 +95,12 @@ lambdaLogoSmall =
lambdaSvg 18 10
-contentWrapper =
+contentWrapperStyled =
styled div
- [ borderPink
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ Css.borderWidth (px 0) ]
+ [ borderWidth (px 2)
+ , borderColor Theme.color.primary
+ , borderStyle solid
+ , Theme.breakpoint.tablet [ borderWidth (px 0) ]
]
@@ -137,14 +108,14 @@ textStyled =
styled p
[ margin (px 0)
, padding (rem 1.2)
- , textColor
- , font
+ , color Theme.color.text
+ , Theme.fontFamily.primary
]
spanStyled =
styled span
- [ textColor, font ]
+ [ color Theme.color.text, Theme.fontFamily.primary ]
type HeaderSize
@@ -158,7 +129,7 @@ headerSize hsize =
batch [ fontSize (px 32) ]
XLarge ->
- textXLarge
+ Theme.textSize.xxLarge
headerSizeSecondary hsize =
@@ -174,11 +145,11 @@ headerTitle : HeaderSize -> String -> Html msg
headerTitle size txt =
h2
[ css
- [ textColor
+ [ color Theme.color.text
, padding (px 0)
, margin2 (rem 1.5) (rem 0)
, headerSize size
- , font
+ , Theme.fontFamily.primary
, withMedia
[ only screen [ Media.maxWidth (px 800) ] ]
[ headerSizeSecondary size ]
@@ -187,20 +158,25 @@ headerTitle size txt =
[ text txt ]
-link color { url, label } =
+link themeColor { url, label } =
a
[ href url
- , css [ color ]
+ , css
+ [ color themeColor
+ , hover
+ [ color Theme.color.linkHover
+ ]
+ ]
]
[ text label ]
linkDefault =
- link linkColor
+ link Theme.color.link
linkText =
- link textColor
+ link Theme.color.text
icon srcIcon =
@@ -253,10 +229,9 @@ repositoryRow repoLinkData =
-- TODO: transform the link* in a styled element
[ spanStyled
[ css
- [ textMedium
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ fontSize (rem 1.5) ]
+ [ Theme.textSize.large
+ , Theme.breakpoint.tablet
+ [ Theme.textSize.medium ]
]
]
[ linkText repoLinkData ]
@@ -278,32 +253,32 @@ repositoryContainer { title, content } =
]
]
-- TODO: add an interation here
- [ contentWrapper
+ [ contentWrapperStyled
[ css
[ display inlineBlock
, padding2 (rem 1) (rem 2)
- , backgroundStyle
+ , backgroundColor Theme.color.background
, marginBottom (rem -2)
]
]
[ spanStyled
[ css
- [ textLarge
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ textMedium ]
+ [ Theme.textSize.xLarge
+ , Theme.breakpoint.tablet [ Theme.textSize.large ]
]
]
[ text title ]
]
- , contentWrapper
+ , contentWrapperStyled
[ css
[ Css.width (px 490)
, padding3 (rem 3.5) (rem 3) (rem 3)
, marginLeft (rem 2)
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ Css.maxWidth (pct 100), padding3 (rem 1.5) (rem 2) (rem 1), marginLeft (rem 0) ]
+ , Theme.breakpoint.tablet
+ [ Css.maxWidth (pct 100)
+ , padding3 (rem 1.5) (rem 2) (rem 1)
+ , marginLeft (rem 0)
+ ]
]
]
(List.map repositoryRow content)
@@ -317,19 +292,16 @@ languageWrapper ({ label, rot } as lang) =
in
div
[ css
- [ color Theme.colors.language
+ [ color Theme.color.language
, transforms
[ rotate (deg rot)
, scale lang.scale
, translate2 (px tx) (px ty)
]
, Css.property "transform-origin" "center center"
- , textLarge
- , Styles.font
+ , Theme.textSize.xLarge
, Css.height (rem 2.5)
- , withMedia
- [ only screen [ Media.maxWidth (px 800) ] ]
- [ fontSize (rem 1.5) ]
+ , Theme.breakpoint.tablet [ Theme.textSize.medium ]
]
]
[ text label ]
diff --git a/src/Main.elm b/src/Main.elm
index e056fff..e4d3bfe 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -12,7 +12,7 @@ import Css.Media as Media exposing (only, screen, withMedia)
import Elements
exposing
( HeaderSize(..)
- , contentWrapper
+ , contentWrapperStyled
, githubIcon
, headerTitle
, lambdaLogoLarge
@@ -30,7 +30,6 @@ import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes as Attr exposing (..)
import StyleGuide as Theme
-import Styles exposing (backgroundStyle, paddingLarge, paddingSmall, textMedium, textNormal)
@@ -42,7 +41,7 @@ globalCss =
[ body
[ padding (px 0)
, margin (px 0)
- , backgroundStyle
+ , backgroundColor Theme.color.background
]
]
@@ -59,7 +58,7 @@ lambdaSeparator =
div
[ css
[ Css.width (px 120)
- , backgroundColor Theme.colors.pink
+ , backgroundColor Theme.color.primary
, Css.height (px 4)
, margin3 (rem 1.5) (rem 0) (rem 3)
]
@@ -69,7 +68,7 @@ lambdaSeparator =
homeParagraph =
styled textStyled
- [ textMedium
+ [ Theme.textSize.large
, textAlign center
-- todo: centralize the breakpoints
@@ -79,12 +78,11 @@ homeParagraph =
lambdaDescription =
- contentWrapper
+ contentWrapperStyled
[ css
- [ paddingLarge
- , backgroundColor (hex "00000042")
- , withMedia [ only screen [ Media.maxWidth (px 800) ] ]
- [ paddingSmall ]
+ [ padding (rem 4)
+ , backgroundColor Theme.color.backgroundAlpha
+ , Theme.breakpoint.tablet [ padding (rem 1) ]
]
]
[ homeParagraph []
@@ -193,9 +191,8 @@ footerLink { icon, link } =
, div [ css [ paddingLeft (rem 1.5) ] ]
[ spanStyled
[ css
- [ textMedium
- , withMedia [ only screen [ Media.maxWidth (px 800) ] ]
- [ fontSize (rem 1.5) ]
+ [ Theme.textSize.large
+ , Theme.breakpoint.tablet [ Theme.textSize.medium ]
]
]
[ linkText link ]
@@ -212,7 +209,7 @@ lambdaFooter =
, alignItems center
, justifyContent center
, padding2 (rem 3) (rem 0)
- , backgroundColor Theme.colors.footer
+ , backgroundColor Theme.color.footer
]
]
-- Split this elements
diff --git a/src/StyleGuide.elm b/src/StyleGuide.elm
index 22523f7..dccd7ac 100644
--- a/src/StyleGuide.elm
+++ b/src/StyleGuide.elm
@@ -1,30 +1,36 @@
-module StyleGuide exposing (colors, fontFamily, spacing, textSize)
+module StyleGuide exposing (breakpoint, color, colorRaw, fontFamily, spacing, textSize)
-import Css exposing (batch, fontFamilies, fontWeight, hex, normal, rem)
+import Css exposing (fontFamilies, fontSize, hex, px, rem)
+import Css.Media as Media exposing (only, screen, withMedia)
-colors =
- { text = hex "ffffff"
- , link = hex "e499f0"
- , icon = hex "ffffff"
- , background = hex "000000"
+colorRaw =
+ { primary = "#D872E9"
+ , background = "000000"
+ }
+
+
+color =
+ { text = hex "FFFFFF"
+ , link = hex "E499F0"
+ , linkHover = hex "C770D5"
+ , icon = hex "FFFFFF"
+ , background = hex colorRaw.background
+ , backgroundAlpha = hex "00000042"
, combinator = hex "36223A"
, language = hex "C770D5"
- , pink = hex "d872e9"
+ , primary = hex colorRaw.primary
, footer = hex "1C1C1C"
}
-
--- Remove rem unit?
-
-
textSize =
- { small = rem 0.75
- , normal = rem 1
- , medium = rem 2
- , large = rem 2.5
- , xLarge = rem 4
+ { small = fontSize (rem 0.75)
+ , normal = fontSize (rem 1)
+ , medium = fontSize (rem 1.5)
+ , large = fontSize (rem 2)
+ , xLarge = fontSize (rem 2.5)
+ , xxLarge = fontSize (rem 4)
}
@@ -38,9 +44,11 @@ spacing =
fontFamily =
- [ "Ropa Sans", "sans-serif" ]
-
+ { primary = fontFamilies [ "Ropa Sans", "sans-serif" ]
+ , secondary = fontFamilies [ "Rhodium Libre", "serif" ]
+ }
--- # TODO
--- add breakpoints
+breakpoint =
+ { tablet = withMedia [ only screen [ Media.maxWidth (px 800) ] ]
+ }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment