Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
code
Public Stack Site
Commits
3605c781
Commit
3605c781
authored
Aug 05, 2020
by
alain
🐙
Browse files
setup scss
parent
6113a595
Changes
5
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/layout.js
View file @
3605c781
...
@@ -2,8 +2,10 @@ import React from "react"
...
@@ -2,8 +2,10 @@ import React from "react"
import
PropTypes
from
"
prop-types
"
import
PropTypes
from
"
prop-types
"
import
{
useStaticQuery
,
graphql
}
from
"
gatsby
"
import
{
useStaticQuery
,
graphql
}
from
"
gatsby
"
import
"
../styles/styles.scss
"
import
Header
from
"
./header
"
import
Header
from
"
./header
"
import
"
./layout.css
"
const
Layout
=
({
children
})
=>
{
const
Layout
=
({
children
})
=>
{
const
data
=
useStaticQuery
(
graphql
`
const
data
=
useStaticQuery
(
graphql
`
...
...
frontend/src/styles/_header.scss
0 → 100644
View file @
3605c781
.menu-container
{
position
:
relative
;
display
:
flex
;
align-items
:
flex-end
;
margin-bottom
:
20px
;
background
:
#fff
;
color
:
#000
;
padding
:
20px
;
z-index
:
1
;
-webkit-user-select
:
none
;
user-select
:
none
;
box-sizing
:
border-box
;
font-weight
:
500
;
}
.menu-logo
{
margin
:
0
20px
;
white-space
:
nowrap
;
font-size
:
44px
;
margin-bottom
:
0
;
}
.menu-container
a
{
text-decoration
:
none
;
color
:
#000
;
transition
:
color
0
.1s
ease
;
text-transform
:
lowercase
;
&
:hover
{
color
:
#2FB6BC
;
}
}
.menu-container
input
{
display
:
block
;
width
:
30px
;
height
:
30px
;
right
:
10px
;
top
:
10px
;
margin
:
0
;
position
:
absolute
;
cursor
:
pointer
;
opacity
:
0
;
/* hide this */
z-index
:
2
;
/* and place it over the hamburger */
-webkit-touch-callout
:
none
;
}
/* Burger menu */
.menu-container
span
{
display
:
block
;
width
:
14px
;
height
:
2px
;
margin-bottom
:
2px
;
position
:
relative
;
background
:
#000
;
border-radius
:
2px
;
z-index
:
1
;
transform-origin
:
3px
0px
;
transition
:
all
0
.1s
ease
;
}
.menu-container
span
:first-child
{
transform-origin
:
0%
0%
;
}
.menu-container
span
:nth-child
(
3
)
{
transform-origin
:
0%
100%
;
}
.menu-container
input
:checked
~
span
{
opacity
:
1
;
transform
:
rotate
(
45deg
)
translate
(
3px
,-
1px
);
}
.menu-container
input
:checked
~
span
:nth-child
(
4
)
{
opacity
:
0
;
transform
:
rotate
(
0deg
)
scale
(
0
.1
,
0
.1
);
}
.menu-container
input
:checked
~
span
:nth-child
(
3
)
{
transform
:
rotate
(
-45deg
)
translate
(
-1px
,
6px
);
}
.menu
{
list-style
:
none
;
margin
:
0
;
}
.menu
li
{
margin-bottom
:
0
;
padding
:
10px
0
;
font-size
:
20px
;
}
/* mobile styles */
@media
only
screen
and
(
max-width
:
1000px
)
{
.menu-container
{
flex-direction
:
column
;
align-items
:
flex-end
;
}
.menu-logo
{
position
:
absolute
;
left
:
0
;
top
:
50%
;
transform
:
translateY
(
-50%
);
}
.menu-logo
img
{
max-height
:
30px
;
}
.menu
{
position
:
absolute
;
box-sizing
:
border-box
;
width
:
300px
;
right
:
-300px
;
top
:
0
;
margin
:
-20px
;
padding
:
75px
50px
50px
;
background
:
#eee
;
-webkit-font-smoothing
:
antialiased
;
/* to stop flickering of text in safari */
transform-origin
:
0%
0%
;
transform
:
translateX
(
0%
);
transition
:
transform
0
.1s
cubic-bezier
(
0
.77
,
0
.2
,
0
.05
,
1
.0
);
}
.menu-container
input
:checked
~
.menu
{
transform
:
translateX
(
-100%
);
}
}
/* desktop styles */
@media
only
screen
and
(
min-width
:
1001px
)
{
.menu-container
{
width
:
100%
;
}
.menu-container
a
{
color
:
#000
;
}
.menu-container
input
{
display
:
none
;
}
/* Burger menu */
.menu-container
span
{
display
:
none
;
}
.menu
{
position
:
relative
;
width
:
100%
;
display
:
flex
;
justify-content
:
flex-end
;
}
.menu
ul
{
display
:
flex
;
padding
:
0
;
}
.menu
li
{
padding
:
0
20px
;
}
}
\ No newline at end of file
frontend/src/
components/layou
t.css
→
frontend/src/
styles/_rese
t.
s
css
View file @
3605c781
...
@@ -8,26 +8,6 @@ body {
...
@@ -8,26 +8,6 @@ body {
-webkit-font-smoothing
:
antialiased
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
-moz-osx-font-smoothing
:
grayscale
;
}
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
main
,
menu
,
nav
,
section
,
summary
{
display
:
block
;
}
audio
,
canvas
,
progress
,
video
{
display
:
inline-block
;
}
audio
:not
([
controls
])
{
audio
:not
([
controls
])
{
display
:
none
;
display
:
none
;
height
:
0
;
height
:
0
;
...
@@ -57,17 +37,6 @@ strong {
...
@@ -57,17 +37,6 @@ strong {
font-weight
:
inherit
;
font-weight
:
inherit
;
font-weight
:
bolder
;
font-weight
:
bolder
;
}
}
dfn
{
font-style
:
italic
;
}
h1
{
font-size
:
2em
;
margin
:
0.67em
0
;
}
mark
{
background-color
:
#ff0
;
color
:
#000
;
}
small
{
small
{
font-size
:
80%
;
font-size
:
80%
;
}
}
...
@@ -105,85 +74,7 @@ hr {
...
@@ -105,85 +74,7 @@ hr {
height
:
0
;
height
:
0
;
overflow
:
visible
;
overflow
:
visible
;
}
}
button
,
input
,
optgroup
,
select
,
textarea
{
font
:
inherit
;
margin
:
0
;
}
optgroup
{
font-weight
:
700
;
}
button
,
input
{
overflow
:
visible
;
}
button
,
select
{
text-transform
:
none
;
}
[
type
=
"reset"
],
[
type
=
"submit"
],
button
,
html
[
type
=
"button"
]
{
-webkit-appearance
:
button
;
}
[
type
=
"button"
]
::-moz-focus-inner
,
[
type
=
"reset"
]
::-moz-focus-inner
,
[
type
=
"submit"
]
::-moz-focus-inner
,
button
::-moz-focus-inner
{
border-style
:
none
;
padding
:
0
;
}
[
type
=
"button"
]
:-moz-focusring
,
[
type
=
"reset"
]
:-moz-focusring
,
[
type
=
"submit"
]
:-moz-focusring
,
button
:-moz-focusring
{
outline
:
1px
dotted
ButtonText
;
}
fieldset
{
border
:
1px
solid
silver
;
margin
:
0
2px
;
padding
:
0.35em
0.625em
0.75em
;
}
legend
{
box-sizing
:
border-box
;
color
:
inherit
;
display
:
table
;
max-width
:
100%
;
padding
:
0
;
white-space
:
normal
;
}
textarea
{
overflow
:
auto
;
}
[
type
=
"checkbox"
],
[
type
=
"radio"
]
{
box-sizing
:
border-box
;
padding
:
0
;
}
[
type
=
"number"
]
::-webkit-inner-spin-button
,
[
type
=
"number"
]
::-webkit-outer-spin-button
{
height
:
auto
;
}
[
type
=
"search"
]
{
-webkit-appearance
:
textfield
;
outline-offset
:
-2px
;
}
[
type
=
"search"
]
::-webkit-search-cancel-button
,
[
type
=
"search"
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
;
}
::-webkit-input-placeholder
{
color
:
inherit
;
opacity
:
0.54
;
}
::-webkit-file-upload-button
{
-webkit-appearance
:
button
;
font
:
inherit
;
}
html
{
html
{
font
:
112
.5%
/
1
.45em
georgia
,
serif
;
font
:
112
.5%
/
1
.45em
georgia
,
serif
;
box-sizing
:
border-box
;
box-sizing
:
border-box
;
...
@@ -200,7 +91,6 @@ html {
...
@@ -200,7 +91,6 @@ html {
}
}
body
{
body
{
color
:
#000
;
color
:
#000
;
font-family
:
georgia
,
serif
;
font-weight
:
normal
;
font-weight
:
normal
;
word-wrap
:
break-word
;
word-wrap
:
break-word
;
font-kerning
:
normal
;
font-kerning
:
normal
;
...
@@ -220,118 +110,6 @@ img {
...
@@ -220,118 +110,6 @@ img {
padding-top
:
0
;
padding-top
:
0
;
margin-bottom
:
1
.45rem
;
margin-bottom
:
1
.45rem
;
}
}
h1
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
color
:
inherit
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Oxygen
,
Ubuntu
,
Cantarell
,
Fira
Sans
,
Droid
Sans
,
Helvetica
Neue
,
sans-serif
;
font-weight
:
bold
;
text-rendering
:
optimizeLegibility
;
font-size
:
2.25rem
;
line-height
:
1.1
;
}
h2
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
color
:
inherit
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Oxygen
,
Ubuntu
,
Cantarell
,
Fira
Sans
,
Droid
Sans
,
Helvetica
Neue
,
sans-serif
;
font-weight
:
bold
;
text-rendering
:
optimizeLegibility
;
font-size
:
1.62671rem
;
line-height
:
1.1
;
}
h3
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
color
:
inherit
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Oxygen
,
Ubuntu
,
Cantarell
,
Fira
Sans
,
Droid
Sans
,
Helvetica
Neue
,
sans-serif
;
font-weight
:
bold
;
text-rendering
:
optimizeLegibility
;
font-size
:
1.38316rem
;
line-height
:
1.1
;
}
h4
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
color
:
inherit
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Oxygen
,
Ubuntu
,
Cantarell
,
Fira
Sans
,
Droid
Sans
,
Helvetica
Neue
,
sans-serif
;
font-weight
:
bold
;
text-rendering
:
optimizeLegibility
;
font-size
:
1rem
;
line-height
:
1.1
;
}
h5
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
color
:
inherit
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Oxygen
,
Ubuntu
,
Cantarell
,
Fira
Sans
,
Droid
Sans
,
Helvetica
Neue
,
sans-serif
;
font-weight
:
bold
;
text-rendering
:
optimizeLegibility
;
font-size
:
0.85028rem
;
line-height
:
1.1
;
}
h6
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
color
:
inherit
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Oxygen
,
Ubuntu
,
Cantarell
,
Fira
Sans
,
Droid
Sans
,
Helvetica
Neue
,
sans-serif
;
font-weight
:
bold
;
text-rendering
:
optimizeLegibility
;
font-size
:
0.78405rem
;
line-height
:
1.1
;
}
hgroup
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
}
ul
{
ul
{
margin-left
:
1
.45rem
;
margin-left
:
1
.45rem
;
margin-right
:
0
;
margin-right
:
0
;
...
@@ -356,26 +134,6 @@ ol {
...
@@ -356,26 +134,6 @@ ol {
list-style-position
:
outside
;
list-style-position
:
outside
;
list-style-image
:
none
;
list-style-image
:
none
;
}
}
dl
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
}
dd
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
}
p
{
p
{
margin-left
:
0
;
margin-left
:
0
;
margin-right
:
0
;
margin-right
:
0
;
...
@@ -423,16 +181,6 @@ table {
...
@@ -423,16 +181,6 @@ table {
border-collapse
:
collapse
;
border-collapse
:
collapse
;
width
:
100%
;
width
:
100%
;
}
}
fieldset
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
}
blockquote
{
blockquote
{
margin-left
:
1
.45rem
;
margin-left
:
1
.45rem
;
margin-right
:
1
.45rem
;
margin-right
:
1
.45rem
;
...
@@ -443,16 +191,6 @@ blockquote {
...
@@ -443,16 +191,6 @@ blockquote {
padding-top
:
0
;
padding-top
:
0
;
margin-bottom
:
1
.45rem
;
margin-bottom
:
1
.45rem
;
}
}
form
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
}
noscript
{
noscript
{
margin-left
:
0
;
margin-left
:
0
;
margin-right
:
0
;
margin-right
:
0
;
...
@@ -486,16 +224,6 @@ hr {
...
@@ -486,16 +224,6 @@ hr {
border
:
none
;
border
:
none
;
height
:
1px
;
height
:
1px
;
}
}
address
{
margin-left
:
0
;
margin-right
:
0
;
margin-top
:
0
;
padding-bottom
:
0
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
margin-bottom
:
1.45rem
;
}
b
{
b
{
font-weight
:
bold
;
font-weight
:
bold
;
}
}
...
@@ -543,27 +271,6 @@ code {
...
@@ -543,27 +271,6 @@ code {
font-size
:
0
.85rem
;
font-size
:
0
.85rem
;
line-height
:
1
.45rem
;
line-height
:
1
.45rem
;
}
}
kbd
{
font-size
:
0.85rem
;
line-height
:
1.45rem
;
}
samp
{
font-size
:
0.85rem
;
line-height
:
1.45rem
;
}
abbr
{
border-bottom
:
1px
dotted
hsla
(
0
,
0%
,
0%
,
0.5
);
cursor
:
help
;
}
acronym
{
border-bottom
:
1px
dotted
hsla
(
0
,
0%
,
0%
,
0.5
);
cursor
:
help
;
}
abbr
[
title
]
{
border-bottom
:
1px
dotted
hsla
(
0
,
0%
,
0%
,
0.5
);
cursor
:
help
;
text-decoration
:
none
;
}
thead
{
thead
{
text-align
:
left
;
text-align
:
left
;
}
}
...
...
frontend/src/styles/_typography.scss
0 → 100644
View file @
3605c781
body
{
font-family
:
maax
,
sans-serif
;
}
frontend/src/styles/styles.scss
0 → 100644
View file @
3605c781
@import
"reset"
;
@import
"typography"
;
@import
"header"
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment