From 742f2d7d428a0095c779113cc16774c6f6739cab Mon Sep 17 00:00:00 2001 From: Nick Van Doorn Date: Mon, 3 Jul 2017 20:59:27 -0700 Subject: Adjust global css variables Some new variables in here for round buttons and other classes to use as mixins --- src/globals.css | 53 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 8 deletions(-) diff --git a/src/globals.css b/src/globals.css index fb562bc..eca4fcb 100644 --- a/src/globals.css +++ b/src/globals.css @@ -4,8 +4,20 @@ :root { --red: #F35656; + --green: #5cb85c; --fontColor: #ffffff; --bgColor: #3C7BAE; + --baseFontSize: 18px; + + --pSize { + line-height: 2em; + @media(--breakpointSm): { + font-size: 1.2em; + } + @media(--breakpointMd): { + font-size: 1.5em; + } + } --logoColor: #ffffff; --logoSize { @@ -21,23 +33,38 @@ --marginXs: 8px; --marginSm: 16px; --marginMd: 24px; - --marginLg: 48px; + --marginLg: 30px; --btnFontSize: { font-size: 1em; @media(--breakpointSm) { - font-size: 1.6vw; + font-size: 1.2em; + } + @media(--breakpointMd) { + font-size: 1.5em; } } --btnBorder: 0.5px solid #ffffff; --borderRadiusBtn: 6px; - --btnPaddingVertical: 10px; - --btnPaddingHorziontal: 10px; - --btnPadding: { - padding: 2vw 4vw; - @media(--breakpointLg) { - padding: 1vw 2vw; + --btnSize { + width: 135px; + height: 35px; + @media(--breakpointSm) { + width: 150px; + height: 50px; } + @media(--breakpointMd) { + width: 200px; + height: 65px; + } + } + + --roundBtnDim: 50px; + --roundBtnSize { + width: var(--roundBtnDim); + height: var(--roundBtnDim); + border-radius: calc(var(--roundBtnDim)/2); + box-shadow: 0 5px 8px rgba(0, 0, 0,.35); } --hoverTransition { @@ -57,3 +84,13 @@ margin: var(--marginLg) 0; } } + +.flexCenter { + display: flex; + justify-content: center; + align-items: center; +} + +.centerText { + text-align: center; +} -- cgit v1.2.3