Skip to content

GitLab

Commit 3605c781 authored by alain's avatar alain 🐙
Browse files

setup scss

parent 6113a595
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/layout.css → frontend/src/styles/_reset.scss
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";
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment