diff --git a/src/assets/icons/left-chevron.svg b/src/assets/icons/left-chevron.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7bc87a5439b3a8fe6f7e864c32a601f7dcf33b76
--- /dev/null
+++ b/src/assets/icons/left-chevron.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 444.531 444.531" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<g xmlns="http://www.w3.org/2000/svg">
+ <path d="M213.13,222.409L351.88,83.653c7.05-7.043,10.567-15.657,10.567-25.841c0-10.183-3.518-18.793-10.567-25.835 l-21.409-21.416C323.432,3.521,314.817,0,304.637,0s-18.791,3.521-25.841,10.561L92.649,196.425 c-7.044,7.043-10.566,15.656-10.566,25.841s3.521,18.791,10.566,25.837l186.146,185.864c7.05,7.043,15.66,10.564,25.841,10.564 s18.795-3.521,25.834-10.564l21.409-21.412c7.05-7.039,10.567-15.604,10.567-25.697c0-10.085-3.518-18.746-10.567-25.978 L213.13,222.409z" fill="#e3b82a" data-original="#000000" style="" class=""/>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f10dac893bf00b10e9bc0acd3212bf0166f7ffdc
--- /dev/null
+++ b/src/assets/icons/menu.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 384 384" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<g xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <g>
+ <rect x="0" y="277.333" width="384" height="42.667" fill="#e3b82a" data-original="#000000" style="" class=""/>
+ <rect x="0" y="170.667" width="384" height="42.667" fill="#e3b82a" data-original="#000000" style="" class=""/>
+ <rect x="0" y="64" width="384" height="42.667" fill="#e3b82a" data-original="#000000" style="" class=""/>
+ </g>
+ </g>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/src/assets/icons/right-chevron.svg b/src/assets/icons/right-chevron.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2e9b14e43c18e4cdbf24a4c5ed7eeb1f76757cd7
--- /dev/null
+++ b/src/assets/icons/right-chevron.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 444.819 444.819" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<g xmlns="http://www.w3.org/2000/svg">
+ <path d="M352.025,196.712L165.884,10.848C159.029,3.615,150.469,0,140.187,0c-10.282,0-18.842,3.619-25.697,10.848L92.792,32.264 c-7.044,7.043-10.566,15.604-10.566,25.692c0,9.897,3.521,18.56,10.566,25.981l138.753,138.473L92.786,361.168 c-7.042,7.043-10.564,15.604-10.564,25.693c0,9.896,3.521,18.562,10.564,25.98l21.7,21.413 c7.043,7.043,15.612,10.564,25.697,10.564c10.089,0,18.656-3.521,25.697-10.564l186.145-185.864 c7.046-7.423,10.571-16.084,10.571-25.981C362.597,212.321,359.071,203.755,352.025,196.712z" fill="#e3b82a" data-original="#000000" style="" class=""/>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx
index 9cce4ff2ffc8d632929916ab2ab36727fb656b5f..aebd7a3a7be7fdaa150e2c46a7452831350c4013 100644
--- a/src/components/DateSelector/DateSelector.tsx
+++ b/src/components/DateSelector/DateSelector.tsx
@@ -1,22 +1,46 @@
import React from 'react'
-import DatePicker from 'react-datepicker'
import './dateSelector.scss'
+import leftChevron from '../../assets/icons/left-chevron.svg'
+import rightChevron from '../../assets/icons/right-chevron.svg'
+
interface DateSelectorProps {
- date: string
- setDate: React.Dispatch<React.SetStateAction<string>>
+ date: Date
+ setDate: React.Dispatch<React.SetStateAction<Date>>
}
const DateSelector: React.FC<DateSelectorProps> = ({
date,
setDate,
}: DateSelectorProps) => {
- const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- setDate(e.target.value)
+ const handleNextMonth = () => {
+ const incremented: Date = new Date(date.setMonth(date.getMonth() + 1))
+ console.log('incremented', incremented)
+ setDate(incremented)
+ }
+
+ const handlePrevMonth = () => {
+ const decremented: Date = new Date(date.setMonth(date.getMonth() - 1))
+ setDate(decremented)
}
return (
<div className="date-selector">
- <div className="text">Edition du mois de : </div>
- <input type="month" value={date} onChange={handleOnChange}></input>
+ <img
+ src={leftChevron}
+ alt="Previous Month"
+ onClick={handlePrevMonth}
+ className="arrow"
+ />
+ <div className="text">
+ <span>
+ {date.toLocaleString('default', { month: 'long', year: 'numeric' })}
+ </span>
+ </div>
+ <img
+ src={rightChevron}
+ alt="Next Month"
+ onClick={handleNextMonth}
+ className="arrow"
+ />
</div>
)
}
diff --git a/src/components/DateSelector/dateSelector.scss b/src/components/DateSelector/dateSelector.scss
index e9204bccea8fd0907859608f0c9c9090fc1b62c1..81c753132870aefb1acb3ab3eae450e5f935b6d5 100644
--- a/src/components/DateSelector/dateSelector.scss
+++ b/src/components/DateSelector/dateSelector.scss
@@ -1,29 +1,33 @@
@import '../../styles/config/colors';
+@import '../../styles/config/typography';
.date-selector {
display: flex;
align-items: center;
- height: 4rem;
+ justify-content: center;
+ height: 3rem;
+ margin: auto;
+ max-width: 250px;
.text {
span {
- color: $gold;
+ @include text-large();
+ color: white;
font-weight: 600;
margin: 0 0.4rem;
}
}
- input[type='month'] {
- display: block;
- background: $text-grey;
- border: none;
- color: $dark-light;
- padding: 0 0.5rem;
- margin: 0 0.4rem;
- font-size: 1rem;
- max-width: 200px;
- fill: $gold;
- border-radius: 5px;
- height: 30px;
- &::-webkit-calendar-picker-indicator {
- color: $gold;
+ .arrow {
+ cursor: pointer;
+ width: 2rem;
+ padding: 0.5rem;
+ border-radius: 50%;
+ background: #343641;
+ margin: 0 0.5rem;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ 0px 8px 10px rgb(0 0 0 / 14%);
+ transition: all 300ms ease;
+ &:hover {
+ background: $text-grey;
+ opacity: 0.9;
}
}
}
diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 22a098db33e377b0e1c3a4a8266e7233f0c5f2ea..17ed3747df5a06226e946b0f4dfbde5847155ce8 100644
--- a/src/components/Editing/Editing.tsx
+++ b/src/components/Editing/Editing.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
import 'react-datepicker/dist/react-datepicker.css'
import { Editor } from '@tinymce/tinymce-react'
import DateSelector from '../DateSelector/DateSelector'
@@ -6,7 +6,7 @@ import './editing.scss'
import { EditorService } from '../../services/editor.service'
const Editing: React.FC = () => {
- const [date, setDate] = useState<string>('')
+ const [date, setDate] = useState<Date>(new Date())
const [header, setHeader] = useState<string>('')
const [quote, setQuote] = useState<string>('')
@@ -15,15 +15,10 @@ const Editing: React.FC = () => {
await editorService.sendQuotation(date, header, quote)
}
- useEffect(() => {
- const today: string = new Date().toISOString()
- const formatted: string = today.split('-').slice(0, 2).join('-')
- setDate(formatted)
- }, [])
return (
<>
<div className="header">
- <p className="title">
+ <p className="title pagetitle">
Édition des informations et de la citation du mois
</p>
</div>
@@ -56,8 +51,8 @@ const Editing: React.FC = () => {
}}
onEditorChange={(newQuote, editor) => setQuote(newQuote)}
/>
-
- <button className="button is-link" onClick={handleSave}>
+ <button className="btnCancel">Annuler</button>
+ <button className="btnValid" onClick={handleSave}>
Sauvegarder
</button>
</div>
diff --git a/src/components/Editing/editing.scss b/src/components/Editing/editing.scss
index 1bebdaa739d7ad0a105922c5a6ac48e8fc2d3ccf..1343a1b050d5361ffb00488a6641c59feaf148b7 100644
--- a/src/components/Editing/editing.scss
+++ b/src/components/Editing/editing.scss
@@ -1,3 +1,4 @@
+@import '../../styles/config/typography.scss';
.header {
background: radial-gradient(
74.83% 76.97% at 50% 13.64%,
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index eb7decbb65402ae327731714d158ef113ea47da9..9dd09a7d1959a2f32d3f0f26b735934c25c34b9e 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
import styles from './layout.module.scss'
import Menu from '../Menu/Menu'
import Navbar from '../Navbar/Navbar'
@@ -8,11 +8,37 @@ interface LayoutProps {
}
const Layout: React.FC<LayoutProps> = ({ children }: LayoutProps) => {
+ const [isMobile, setisMobile] = useState<boolean>(false)
+ useEffect(() => {
+ function handleResize() {
+ const test: boolean =
+ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+ navigator.userAgent
+ )
+ ? true
+ : window.innerWidth < 768
+ ? true
+ : false
+ setisMobile(test)
+ }
+ handleResize()
+
+ window.addEventListener('resize', handleResize)
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [])
return (
<div className={styles.root}>
- <div className={styles.menuWrapper}>
- <Menu />
- </div>
+ {!isMobile ? (
+ <div className={styles.menuWrapper}>
+ <Menu />
+ </div>
+ ) : (
+ <div className={styles.mobileNavWrapper}>
+ <Navbar />
+ </div>
+ )}
<div className={styles.wrapper}>
<main>{children}</main>
</div>
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index c95548b12acdfe127f2b490284f5dffa8ae78bba..59439161a7eb6ae422bc2643c407840a1676db07 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -1,5 +1,6 @@
@import '../../styles/config/layout';
@import '../../styles/config/colors';
+@import '../../styles/config/breakpoints';
.root {
display: flex;
min-height: 100vh;
@@ -11,6 +12,17 @@
left: 0;
width: $menu-width;
height: 100vh;
+ @media screen and(max-width: $width-phone) {
+ width: 0;
+ display: none;
+ }
+}
+.mobileNavWrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: $navbar-height;
+ width: 100%;
}
.wrapper {
flex: 1;
@@ -20,6 +32,10 @@
box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
0px 8px 10px rgb(0 0 0 / 14%);
background: $dark-light;
+ @media screen and(max-width: $width-phone) {
+ margin-left: 0;
+ margin-top: $navbar-height;
+ }
main {
width: 100%;
}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 65b188b6366e4196d9bce724ec270f29e16769d9..07e3a2b31de2a309a2a43b6e5b197c4939ead190 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,15 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
import routes from '../../constants/routes.json'
import logo from '../../assets/icons/ecolyo-logo.svg'
-
import './menu.scss'
-import { NavLink, Router, useHistory } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
+
const Menu: React.FC = () => {
- // TODO class is-active if link is activated
+ const [isLogged] = useState<boolean>(false)
- const history = useHistory()
return (
- <nav className="menu">
+ <nav className={'menu'}>
<div className="logo-container">
<img src={logo} alt="Ecolyo logo" className="logo" />
</div>
@@ -23,12 +22,13 @@ const Menu: React.FC = () => {
})}
</div>
<div className="administration">
- <NavLink to="/login" activeClassName="active">
- Login
- </NavLink>
- <NavLink to="/login" activeClassName="active">
- Signup
- </NavLink>
+ {isLogged ? (
+ <p>Account</p>
+ ) : (
+ <NavLink to="/login" activeClassName="active">
+ Login
+ </NavLink>
+ )}
</div>
</nav>
)
diff --git a/src/components/Menu/menu.scss b/src/components/Menu/menu.scss
index f2ac09fb048930394db468e9ad66976d0317f52e..09c90162de9d1199922ae0b1cba795e2103d1344 100644
--- a/src/components/Menu/menu.scss
+++ b/src/components/Menu/menu.scss
@@ -1,4 +1,5 @@
@import '../../styles/config/colors';
+@import '../../styles/config/layout';
.menu {
display: flex;
flex-direction: column;
@@ -35,3 +36,6 @@
margin-top: auto;
}
}
+.mobileMenu {
+ margin-left: -$menu-width;
+}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 3c941759860a67d26d8a0a9dfd22c1c9d3942c35..ec6161f135d5002be0809c2c100d1f0c373047fa 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,29 +1,37 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import routes from '../../constants/routes.json'
+import burger from '../../assets/icons/menu.svg'
+import logo from '../../assets/icons/ecolyo-logo.svg'
+
import './navbar.scss'
const Navbar: React.FC = () => {
+ const [isLogged] = useState<boolean>(false)
return (
- // <nav className="navbar" role="navigation" aria-label="main navigation">
- // <div className="navbar-brand">
- // <div className="navbar-menu">
- // <div className="navbar-start"></div>
- // <div className="navbar-end">
- // <div className="navbar-item">
- // <div className="buttons">
- // <a href="/" className="button is-primary">
- // <strong>Sign up</strong>
- // </a>
- // <a href="/" className="button is-light">
- // Log in
- // </a>
- // </div>
- // </div>
- // </div>
- // </div>
- // </div>
- // </nav>
+ <div className="navbar">
+ {/* <img src={burger} alt="Menu Icon" className="burger" /> */}
+ <img src={logo} alt="Ecolyo logo" className="logo" />
- <></>
+ <div className="menu-list">
+ {routes.map((route: any, index: number) => {
+ return (
+ <NavLink key={index} to={route.path} activeClassName="active">
+ {route.label}
+ </NavLink>
+ )
+ })}
+ </div>
+ <div className="administration">
+ {isLogged ? (
+ <p>Account</p>
+ ) : (
+ <NavLink to="/login" activeClassName="active">
+ Login
+ </NavLink>
+ )}
+ </div>
+ </div>
)
}
diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss
index ffb90dc183498428bdff4ee2f3165f9efe9273ed..070ad66d5abf050c76668880f4bc3d8a44f59c92 100644
--- a/src/components/Navbar/navbar.scss
+++ b/src/components/Navbar/navbar.scss
@@ -1,11 +1,27 @@
@import '../../styles/config/colors';
.navbar {
- height: 6rem;
- box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
- 0px 8px 10px rgb(0 0 0 / 14%);
+ height: inherit;
background: radial-gradient(
74.83% 76.97% at 50% 13.64%,
#343641 0%,
#1b1c22 100%
);
+ display: flex;
+ align-items: center;
+ padding: 0 1rem;
+ .burger,
+ .logo {
+ width: 2rem;
+ margin-right: 1rem;
+ }
+ a {
+ text-decoration: none;
+ margin-left: 0.5rem;
+ }
+ .active {
+ color: $gold;
+ }
+ .administration {
+ margin-left: auto;
+ }
}
diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts
index dbf75c2c412b6cab1bdce554fed31e9c8c14a934..245c8e04c33f7a99cf88ab8b16f8f98bf58c72a5 100644
--- a/src/services/editor.service.ts
+++ b/src/services/editor.service.ts
@@ -6,7 +6,7 @@ export class EditorService {
* @param quote
*/
public sendQuotation = async (
- date: string,
+ date: Date,
header: string,
quote: string
): Promise<void> => {
@@ -16,8 +16,8 @@ export class EditorService {
{
method: 'POST',
body: JSON.stringify({
- month: date.split('-')[0],
- year: date.split('-')[1],
+ month: date.getMonth(),
+ year: date.getFullYear(),
header: header,
quote: quote,
}),
diff --git a/src/styles/config/_layout.scss b/src/styles/config/_layout.scss
index 8a3357ec5066f89eb9df355dfa62c54ec189b291..1a3df8c1bcdb958279ae7e3a449e1989642de78f 100644
--- a/src/styles/config/_layout.scss
+++ b/src/styles/config/_layout.scss
@@ -1 +1,2 @@
$menu-width: 8rem;
+$navbar-height: 3.5rem;
diff --git a/src/styles/config/_typography.scss b/src/styles/config/_typography.scss
index b672e396e9801084f86b2b14ca51b1d5e34e3ccb..54f65d944936d2614ee1cf923325d5309f09db0d 100644
--- a/src/styles/config/_typography.scss
+++ b/src/styles/config/_typography.scss
@@ -1,4 +1,5 @@
@import 'breakpoints';
+@import 'colors';
$text-font: Lato, sans-serif;
$main-spacing: 4px;
@@ -22,3 +23,39 @@ $main-spacing: 4px;
font-size: 1.25rem;
}
}
+@mixin baseButton {
+ cursor: pointer;
+ border: solid 1px transparent;
+ color: $dark-light;
+ background: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(226, 137, 4, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #f1c017;
+ font-weight: 600;
+ border-radius: 5px;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ 0px 8px 10px rgb(0 0 0 / 14%);
+ padding: 0.5rem 1rem;
+ margin-top: 1rem;
+ transition: all 300ms ease;
+ font-size: 1.05rem;
+ min-width: 130px;
+ margin-right: 0.5rem;
+ &:hover {
+ background-color: #b89318;
+ }
+}
+.btnValid {
+ @include baseButton();
+}
+.btnCancel {
+ @include baseButton();
+ background: $text-grey;
+ color: $dark-light;
+ opacity: 0.7;
+ &:hover {
+ background: darken($text-grey, 20%);
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index cf4aeb0bc3a85e37fa636030f69ad5db0b572d23..222fb1933bf89cb70182a2a4bc1919e7d1d8f041 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,4 +16,8 @@
color: $gold;
font-weight: 600;
font-size: 1.3rem;
+ @include text-large();
+}
+.pagetitle {
+ color: #fafafa;
}