VSinerva/freesewing
1
0
Fork 0
Code Activity

🚧 CSS and component changes for dev site

Browse source
This commit is contained in:
Joost De Cock 2019-05-15 16:06:38 +02:00
parent f910b02317
commit 377bfcf12b
22 changed files with 426 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/components/src/Emblem/index.js
View file

@ -3,25 +3,19 @@ import PropTypes from "prop-types";
const Emblem = props => (
<React.Fragment>
<span className="emb" style={{color: props.c1, fontSize: props.size+"px"}}>{props.t1}</span>
<span className="lem" style={{color: props.c2, fontSize: props.size+"px"}}>{props.t2}</span>
<span className="emb">{props.t1}</span>
<span className="lem">{props.t2}</span>
</React.Fragment>
);
Emblem.propTypes = {
size: PropTypes.number,
c1: PropTypes.string,
c2: PropTypes.string,
t1: PropTypes.string,
t2: PropTypes.string,
t2: PropTypes.string
};
Emblem.defaultProps = {
size: 36,
c1: "#111111",
c2: "#111111",
t1: "",
t2: "",
t1: "Free",
t2: "Sewing"
};
export default Emblem;

13
packages/components/src/Footer/index.js
View file

@ -14,18 +14,16 @@ const Footer = props => {
};
const links = {
docs: {
blog: "https://" + props.language + ".freesewing.org/blog",
aboutFreesewing:
"https://" + props.language + ".freesewing.org/docs/about",
faq: "https://" + props.language + ".freesewing.org/docs/faq",
makerDocs: "https://" + props.language + ".freesewing.org/docs/",
devDocs: "https://" + props.language + ".freesewing.dev/"
faq: "https://" + props.language + ".freesewing.org/docs/faq"
},
community: {
becomeAPatron:
"https://" + props.language + ".freesewing.org/patrons/join",
showcase: "https://" + props.language + ".freesewing.org/showcase",
makerBlog: "https://" + props.language + ".freesewing.org/blog",
devBlog: "https://" + props.language + ".freesewing.dev/blog"
makerDocs: "https://" + props.language + ".freesewing.org/docs/",
devDocs: "https://" + props.language + ".freesewing.dev/"
}
};
const styles = {
@ -63,9 +61,6 @@ const Footer = props => {
}
return (
<div key={l}>
<h4>
<FormattedMessage id={"app." + l} />
</h4>
<ul>{items}</ul>
</div>
);

42
packages/components/src/Navbar/index.js
View file

@ -43,25 +43,51 @@ const Navbar = props => {
if (typeof props.home === "function") homeProps.onClick = props.home;
else homeProps.href = props.home;
return (
<header className="navbar">
<div>
let logo = (
<div className="logo">
<a id="home" {...homeProps}>
{props.logo}
</a>
</div>
);
let emblem = (
<div className="emblem">
<a {...homeProps}>{props.emblem}</a>
</div>
);
return (
<header className="navbar">
<div>
<div className="only-xs">
{Object.keys(props.navs.mleft).map(key =>
renderNav(key, props.navs.mleft[key])
)}
</div>
<div className="not-xs">
{logo}
{emblem}
{Object.keys(props.navs.left).map(key =>
renderNav(key, props.navs.left[key])
)}
<div className="spread" />
</div>
<div className="spread">
<div className="only-xs">
{logo}
{emblem}
</div>
</div>
<div className="only-xs">
{Object.keys(props.navs.mright).map(key =>
renderNav(key, props.navs.mright[key])
)}
</div>
<div className="not-xs">
{Object.keys(props.navs.right).map(key =>
renderNav(key, props.navs.right[key])
)}
</div>
</div>
</header>
);
};
@ -70,13 +96,15 @@ Navbar.propTypes = {
navs: PropTypes.object,
logo: PropTypes.node,
emblem: PropTypes.node,
home: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
home: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
toggleMenu: PropTypes.func,
toggleToc: PropTypes.func
};
Navbar.defaultProps = {
home: "https://freesewing.org/",
navs: { left: [], right: [] },
logo: <Logo size={32} color="#e9ecef" />,
emblem: <Emblem t1="Free" t2="Sewing" size={20} c1="#74c0fc" c2="#e9ecef" />
logo: <Logo embed color="#e9ecef" />,
emblem: <Emblem />
};
export default Navbar;

2
packages/css-theme/src/_components.scss
View file

@ -3,3 +3,5 @@
@import "components/draft";
@import "components/draft-configurator";
@import "components/draft-design";
@import "components/topicstoc";
@import "components/breadcrumbs";

1
packages/css-theme/src/_layout.scss
View file

@ -1,2 +1,3 @@
@import "layout/section-aside";
@import "layout/menu-toc";

9
packages/css-theme/src/_mixins.scss
View file

@ -1,3 +1,10 @@
@mixin body-font { font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; }
@mixin xs-screen {
@media (max-width: 599px) { @content; }
}
@mixin sm-screen {
@media (min-width: 600px) and (max-width: 959px) { @content; }
}
@mixin body-font { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
@mixin title-font { font-family: 'Roboto Condensed', sans-serif; }
@mixin fixed-font { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }

6
packages/css-theme/src/_reset.scss
View file

@ -1,3 +1,9 @@
body {
margin: 0;
font-size: 18px;
line-height: 1.5;
scroll-behavior: smooth;
}
img {
max-width: 100%;
}

6
packages/css-theme/src/_theme-wrapper.scss
View file

@ -10,10 +10,16 @@
.theme-wrapper.light {
background: $fc-bg-light;
color: $fc-bg-dark;
.altbg {
background: $fc-altbg-light;
}
}
.theme-wrapper.dark {
background: $fc-bg-dark;
color: $fc-bg-light;
.altbg {
background: $fc-altbg-dark;
}
}

61
packages/css-theme/src/_typography.scss Normal file
View file

@ -0,0 +1,61 @@
h1,h2,h3,h4,h5,h6,button { @include title-font; }
h1 {
font-size: 3.5rem;
font-weight: 200;
margin: 1rem 0 2rem;
}
h2 {
font-size: 2.5rem;
border-top: 1px solid $oc-gray-4;
margin: 3.5rem 0 1rem;
padding: 1.5rem 0 1rem;
font-weight: 400;
}
.theme-wrapper.dark h2 {
border-color: $oc-gray-7;
}
h2.bare {
border: none;
margin: 0;
}
h3 {
font-size: 2rem;
margin: 1.75rem 0 1rem;
}
h4 {
font-size: 1.75rem;
margin: 1.5rem 0 0.75rem;
}
h5 {
font-size: 1.5rem;
margin: 1.25rem 0 0.5rem;
}
h6 {
font-size: 1.25rem;
margin: 1rem 0 0.25rem;
}
h2 a.anchor,
h3 a.anchor,
h4 a.anchor,
h5 a.anchor,
h6 a.anchor {
margin-left: -20px;
margin-right: 4px;
}
@include sm-screen {
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
}
@include xs-screen {
h1 {
font-size: 2.5rem;
margin: 1rem 0 1.5rem;
}
h2 {
font-size: 2rem;
margin: 2.5rem 0 0.5rem;
}
h3 { font-size: 1.85rem; }
h4 { font-size: 1.65rem; }
}

7
packages/css-theme/src/_utility.scss Normal file
View file

@ -0,0 +1,7 @@
@include xs-screen {
.only-xs { display: inherit!important; }
.not-xs { display: none!important; }
}
.only-xs { display: none; }
.not-xs { display: inherit; }

2
packages/css-theme/src/_variables.scss
View file

@ -2,6 +2,8 @@ $fc-text-light: $oc-gray-9;
$fc-text-dark: $oc-gray-0;
$fc-bg-light: $oc-gray-0;
$fc-bg-dark: $oc-gray-9;
$fc-altbg-light: $oc-gray-1;
$fc-altbg-dark: $oc-gray-8;
$fc-notice-light: $oc-yellow-7;
$fc-notice-dark: $oc-lime-3;
$fc-hoverbg-light: $oc-gray-1;

31
packages/css-theme/src/components/_breadcrumbs.scss Normal file
View file

@ -0,0 +1,31 @@
nav.breadcrumbs {
ul {
@include title-font;
margin-left: 0;
padding-left: 0;
font-size: 95%;
li {
list-style-type: none;
display: inline-block;
}
li:first-child:before {
content: "";
padding: 0;
}
li:before {
content: "»";
padding: 0 0.25rem;
font-size: 125%;
}
}
}
.theme-wrapper.dark {
nav.breadcrumbs {
ul {
li {
}
}
}
}

94
packages/css-theme/src/components/_navbar.scss
View file

@ -5,6 +5,10 @@ header.navbar {
padding: 0 26px;
background: $fc-bg-dark;
z-index: 15;
div.only-xs,
div.not-xs {
align-items: center;
}
div.logo {
height: 64px;
@ -14,20 +18,35 @@ header.navbar {
display: flex;
align-items: center;
color: $oc-gray-2;
a { text-decoration: none; }
a {
text-decoration: none;
height: 42px;
width: 42px;
}
}
div.emblem {
margin-right: 26px;
a { text-decoration: none; }
a {
text-decoration: none!important;
@include title-font;
font-size: 26px;
span.lem { color: $oc-gray-2; }
span.emb { color: $fc-link-dark; }
}
}
div.spread {
flex-grow: 1;
display: flex;
align-items: center;
}
div.spread { flex-grow: 1}
a.nav,
button {
@include title-font;
text-decoration: none!important;
margin: 0;
padding: 0 13px;
height: 60px;
color: $fc-text-dark;
color: $fc-text-dark!important;
border: 0;
line-height: 64px;
border-bottom: 4px solid $fc-bg-dark;
@ -65,3 +84,70 @@ header.navbar > div {
align-items: center;
}
@include xs-screen {
header.navbar {
position: fixed;
bottom: 0;
left: 0;
height: 42px;
width: calc(100% - 26px);
padding: 0 13px;
> div {
height: 42px;
}
div.spread {
justify-content: center;
}
div.logo,
div.emblem {
margin-right: 12px;
}
div.logo a {
height: 32px;
width: 32px;
}
div.emblem a {
font-size: 22px;
}
a.nav,
button {
border: 0;
padding: 0 6px;
height: 42px;
line-height: 42px;
}
}
}
@include sm-screen {
header.navbar {
height: 54px;
width: calc(100% - 36px);
padding: 0 18px;
> div {
height: 54px;
}
div.logo,
div.emblem {
margin-right: 12px;
}
div.logo a {
height: 32px;
width: 32px;
}
div.emblem a {
font-size: 22px;
}
a.nav {
padding: 0 6px;
line-height: 54px;
height: 50px;
}
button {
padding: 0 6px;
height: 54px;
line-height: 54px;
}
}
}

83
packages/css-theme/src/components/_topicstoc.scss Normal file
View file

@ -0,0 +1,83 @@
ul.topics {
margin: 0;
padding: 0;
}
ul.topics > li.topic {
@include title-font;
list-style-type: none;
//text-transform: uppercase;
margin: 0;
padding: 0;
a.topic {
display: block;
padding: 0.25rem 0.5rem;
border-left: 4px solid transparent;
color: $fc-text-light!important;
}
a.topic:hover {
background: $oc-gray-5;
text-decoration: none!important;
}
}
ul.topics > li.topic.active {
font-weight: bold;
a.topic {
border-left: 4px solid $fc-link-light;
}
}
ul.topics > li.topic > ul.topics.l1 {
font-weight: normal;
a {
color: $fc-text-light!important;
padding-left: 2.5rem;
display: block;
}
a:hover {
background: $oc-gray-3;
text-decoration: none!important;
}
li.active a {
font-weight: bold;
}
ul.links {
margin-left: 1.5rem;
> li > a {
display: inline;
padding: 0;
color: $fc-link-light!important;
font-weight: normal;
}
> li > a:hover {
text-decoration: underline!important;
background: transparent;
}
}
}
.theme-wrapper.dark {
ul.topics > li.topic {
a.topic {
color: $fc-text-dark!important;
}
a.topic:hover {
background: $oc-gray-6;
}
}
ul.topics > li.topic > ul.topics.l1 {
a {
color: $fc-text-dark!important;
}
a:hover {
background: $oc-gray-7;
}
ul.links {
> li > a {
color: $fc-link-dark!important;
}
> li > a:hover {
text-decoration: underline!important;
background: transparent;
}
}
}
}

8
packages/css-theme/src/elements/_a.scss
View file

@ -1,12 +1,12 @@
.theme-wrapper a {
.theme-wrapper a:not([role="button"]) {
text-decoration: none;
}
.theme-wrapper a:hover {
.theme-wrapper a:not([role="button"]):hover {
text-decoration: underline;
}
.theme-wrapper.light a {
.theme-wrapper.light a:not([role="button"]) {
color: $fc-link-light;
}
.theme-wrapper.dark a {
.theme-wrapper.dark a:not([role="button"]) {
color: $fc-link-dark;
}

21
packages/css-theme/src/elements/_code.scss
View file

@ -1,21 +1,21 @@
.theme-wrapper.light :not(pre) > code[class*="language-"] {
padding: 0.125rem 0.5rem;
background: $oc-gray-6;
border: 1px $oc-gray-5 solid;
padding: 0.1rem 0.25rem;
background: $oc-gray-2;
border: 1px $oc-gray-3 solid;
color: $oc-gray-9;
}
.theme-wrapper.dark :not(pre) > code[class*="language-"] {
padding: 0.125rem 0.5rem;
background: $oc-gray-6;
border: 1px $oc-gray-5 solid;
color: $oc-gray-9;
background: $oc-gray-9;
border: 1px $oc-gray-7 solid;
color: $oc-gray-1;
}
div.gatsby-highlight {
position: relative;
}
div.gatsby-highlight pre.language-js {
padding-top: 1rem;
div.gatsby-highlight pre {
padding: 1.5rem 1rem;
}
pre.language-js:before,
@ -50,5 +50,8 @@ pre.language-svg:before {
content: "svg";
background: rgba(129, 197, 255, 0.9);
}
code[class*="language-"],
pre[class*="language-"] {
white-space: pre-wrap;
}

2
packages/css-theme/src/elements/_footer.scss
View file

@ -1,4 +1,6 @@
footer {
@include title-font;
font-size: 90%;
background: $fc-bg-dark;
color: $fc-text-dark;
margin: 0;

8
packages/css-theme/src/elements/_ul.scss
View file

@ -1,8 +1,13 @@
ul.links {
padding-left: 1rem;
padding-left: 1.5rem;
line-height: 1.35;
font-size: 95%;
font-weight: normal;
li {
list-style-type: none;
a { display: inline-block; }
}
li.active { font-weight: bold; }
li:before {
content: "\00a0";
background: $oc-gray-5;
@ -18,6 +23,7 @@ ul.links {
li.nodot:before {
content: none;
}
li.active:before,
li:hover:before {
background: $fc-link-light;
}

45
packages/css-theme/src/layout/_menu-toc.scss Normal file
View file

@ -0,0 +1,45 @@
@include xs-screen {
.theme-wrapper.light div.fs-sa aside,
.theme-wrapper.dark div.fs-sa aside,
.theme-wrapper.light div.menu,
.theme-wrapper.dark div.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
padding: 2rem;
padding-top: 4rem;
max-width: 600px;
z-index: -10;
transition: opacity 0.5s ease 0s;
opacity: 0;
> ul,
> div {
transform: translate(0px, 20px);
transition: transform 0.5s ease 0s;
}
}
}
.theme-wrapper.show-toc div.fs-sa aside {
opacity: 1;
z-index: 10;
> ul {
transform: translate(0px, 0px);
}
}
.theme-wrapper.light div.menu {
background: $oc-gray-1;
}
.theme-wrapper.dark div.menu {
background: $oc-gray-8;
}
.theme-wrapper.show-menu div.menu {
opacity: 1;
z-index: 10;
> div {
transform: translate(0px, 0px);
}
}

5
packages/css-theme/src/layout/_section-aside.scss
View file

@ -3,13 +3,13 @@ div.fs-sa {
section{
width: 100%;
padding: 1rem;
padding: 1rem 1.5rem;
}
aside {
padding: 1rem 0;
max-width: 400px;
min-width: 200px;
width: 30%;
width: 40%;
background: $oc-gray-1;
border-left: 1px solid $oc-gray-3;
}
@ -21,7 +21,6 @@ div.fs-sa {
}
}
.theme-wrapper.dark {
div.fs-sa {
section {

3
packages/css-theme/src/theme.scss
View file

@ -4,7 +4,10 @@
@import "mixins";
@import "prism";
@import "theme-wrapper";
@import "typography";
@import "layout";
@import "scroll";
@import "components";
@import "elements";
@import "utility";

1
packages/i18n/src/locales/en/app.yaml
View file

@ -221,3 +221,4 @@ makerDocs: Maker documentation
devDocs: Developer documentation
makerBlog: Maker blog
devBlog: Developer blog
slogan: A JavaScript library for made-to-measure sewing patterns