From 8f3b53f5d28ca50d1c6502faee53e728cea75a25 Mon Sep 17 00:00:00 2001 From: nx Date: Fri, 4 Feb 2022 02:00:13 +0000 Subject: [PATCH] v0.1.2 build --- package.json | 2 +- public/index.html | 203 ++++++++++++++++++++++++++++++++++++++++++- public/style.css | 120 ++++++++++++------------- public/style.min.css | 2 +- 4 files changed, 261 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index 6c7f9c0..5a4cd81 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "libregaming-design-system", - "version": "0.1.1", + "version": "0.1.2", "description": "Giving tools to build LibreGaming services more easily", "main": "index.js", "dependencies": { diff --git a/public/index.html b/public/index.html index 57440df..a78aebe 100644 --- a/public/index.html +++ b/public/index.html @@ -1 +1,202 @@ -

LibreGaming

EN

The Quick Brown Fox

The quick brown fox jumps over the lazy dog

GAMING

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
h6. heading

NEWS

Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them!

Desciption

Currently, our main channels of communication are instant messaging rooms hosted on the Matrix network. They are also accessible via Jabber/XMPP and IRC protocols, so that contributors can use their favorite client to join us.

Members

\ No newline at end of file + + + + + + + + +
+ + + + + + +

+ + LibreGaming +

+ +
EN
+
+ +
+
+
+

The Quick Brown Fox

+

The quick brown fox jumps over the lazy dog

+
+
+
+

GAMING

+

h1. heading

+

h2. heading

+

h3. heading

+

h4. heading

+
h5. heading
+
h6. heading
+

NEWS

+
+

Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them!

+
+
+ +
+
+
+

Desciption

+

Currently, our main channels of communication are instant messaging rooms hosted on the Matrix network. They are also accessible via Jabber/XMPP and IRC protocols, so that contributors can use their favorite client to join us.

+
+
+
+
+

Members

+ +
+
+
+ +
+ + + + diff --git a/public/style.css b/public/style.css index e773d14..e01dcd7 100644 --- a/public/style.css +++ b/public/style.css @@ -54,65 +54,13 @@ /*!*******************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/styles.scss ***! \*******************************************************************************************************************************************/ -* { - box-sizing: border-box; -} - -html, body { - margin: 0; - padding: 0; -} - -html body { - background-color: #1c1b22; -} - -body { - font-size: 1.25rem; - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - line-height: 1.4; - color: #dee2e6; -} - -h1, h2, h3, h4, h5, h6 { - font-family: inherit; -} - -h2 { - font-size: 2rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -a { - text-decoration: none; - color: #ff8f23; - text-decoration: underline; -} -a:hover { - color: #daf2ee; -} -a:visited { - color: #ff820a; -} -a:active { - color: #fff; -} - -.text-lightblue { - color: #b6e2ee; -} - h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - margin-bottom: 5px; - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-weight: 900; - line-height: 1.4em; - color: #dee2e6; + margin-top: 0; + margin-bottom: 1.25rem; + font-family: Arial, sans-serif; + font-weight: 700; + color: #212529; } h1, .h1 { @@ -165,8 +113,10 @@ h6, .h6 { } .lead { + color: #212529; font-size: calc(1.28125rem + 0.375vw); - font-weight: 300; + font-weight: 400; + margin-top: 0; } @media (min-width: 1200px) { .lead { @@ -174,6 +124,50 @@ h6, .h6 { } } +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +html body { + background-color: #fff; +} + +body { + font-size: 1.25rem; + font-family: Arial, sans-serif; + line-height: 1.4; + color: #212529; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +a { + text-decoration: none; + color: #ff8f23; + text-decoration: underline; +} +a:hover { + color: #ff6a23; +} +a:visited { + color: #ff8f23; +} +a:active { + color: #ffb423; +} + +.text-lightblue { + color: #b6e2ee; +} + .container { max-width: 1200px; margin-left: auto; @@ -196,8 +190,8 @@ h6, .h6 { width: 100%; height: 56px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); - background: #212529; - color: #FFF; + background: transparent; + color: #212529; display: flex; flex-direction: row; align-items: center; @@ -264,17 +258,17 @@ h6, .h6 { } .nav-collapse a { - color: #dee2e6; + color: #000; text-decoration: none; width: 100%; - background: rgba(0, 0, 0, 0.7); + background: #fff; border-bottom: 1px solid #212529; padding: 0.7em 1em; float: left; } .hero { - border-radius: 12px; + border-radius: 5px; background: linear-gradient(to right, #159957, #155799); min-height: 300px; width: 100%; diff --git a/public/style.min.css b/public/style.min.css index ab59c58..c4a161e 100644 --- a/public/style.min.css +++ b/public/style.min.css @@ -48,4 +48,4 @@ } } -*{box-sizing:border-box}html,body{margin:0;padding:0}html body{background-color:#1c1b22}body{font-size:1.25rem;font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.4;color:#dee2e6}h1,h2,h3,h4,h5,h6{font-family:inherit}h2{font-size:2rem}p{margin-top:0;margin-bottom:1rem}a{text-decoration:none;color:#ff8f23;text-decoration:underline}a:hover{color:#daf2ee}a:visited{color:#ff820a}a:active{color:#fff}.text-lightblue{color:#b6e2ee}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:5px;font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight:900;line-height:1.4em;color:#dee2e6}h1,.h1{font-size:calc(1.4375rem + 2.25vw)}@media(min-width: 1200px){h1,.h1{font-size:3.125rem}}h2,.h2{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h2,.h2{font-size:2.5rem}}h3,.h3{font-size:calc(1.34375rem + 1.125vw)}@media(min-width: 1200px){h3,.h3{font-size:2.1875rem}}h4,.h4{font-size:calc(1.3125rem + 0.75vw)}@media(min-width: 1200px){h4,.h4{font-size:1.875rem}}h5,.h5{font-size:calc(1.28125rem + 0.375vw)}@media(min-width: 1200px){h5,.h5{font-size:1.5625rem}}h6,.h6{font-size:1.25rem}.lead{font-size:calc(1.28125rem + 0.375vw);font-weight:300}@media(min-width: 1200px){.lead{font-size:1.5625rem}}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{margin-left:15px;margin-right:15px}}.full-width-container{max-width:100%;margin-left:15px;margin-right:15px}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,.4);background:#212529;color:#fff;display:flex;flex-direction:row;align-items:center;padding:0 16px}.header .brand{margin-left:auto;padding-left:1em;padding-right:1em;text-decoration:none}.header .brand>h1{color:#4fbad5 !important;display:inline-flex;align-items:center;font-size:calc(1.2875rem + 0.45vw);margin:0}@media(min-width: 1200px){.header .brand>h1{font-size:1.625rem}}.header .brand .brand-img{margin-right:.5rem}.header .brand .second{color:#ff8f23 !important}.header .lang-select{display:inline-flex;vertical-align:middle;margin-left:auto}.header__menu-toggle{background:none;border:none;width:24px;height:24px;padding:0;margin:0 24px 0 0;color:#fff}.side-nav__content{padding-top:32px;flex:1;list-style:none;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-nav__content li{min-height:48px;line-height:48px}.side-nav__content li a:hover{background:#343a40}.nav-collapse a{color:#dee2e6;text-decoration:none;width:100%;background:rgba(0,0,0,.7);border-bottom:1px solid #212529;padding:.7em 1em;float:left}.hero{border-radius:12px;background:linear-gradient(to right, #159957, #155799);min-height:300px;width:100%;color:#fff;justify-content:center;flex-direction:column;flex-grow:1;padding:1.25rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.hero>h1{margin:0}.hero .message{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;letter-spacing:5px}.posts ul li{list-style:none;margin-bottom:calc(1.525rem + 3.3vw)}@media(min-width: 1200px){.posts ul li{margin-bottom:4rem}}.posts ul li a{display:-webkit-flex;display:flex;text-decoration:none}.posts ul{border-top:1px solid #495057;padding-left:0;padding-right:0;padding-top:calc(1.625rem + 4.5vw)}@media(min-width: 1200px){.posts ul{padding-top:5rem}}.posts .left{line-height:1em;display:-webkit-flex;display:flex;flex-direction:column}.posts .date{color:#4fbad5;margin-bottom:0.3125rem;margin-right:1em;text-transform:uppercase;font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){.posts .date{font-size:1.5rem}}.posts .year{color:#fff}.posts .title{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){.posts .title{font-size:2rem}}.posts .right{line-height:1.15em}.lg-title span{background-color:#f8f9fa;padding-top:0.2rem;padding-bottom:0.2rem;padding-left:1rem;padding-right:1rem;border-radius:22px;color:#343a40 !important;border:3px #6c757d solid;display:inline-flex}.lg-title .icon{margin:0;padding-top:0 !important;padding-bottom:0 !important}.lg-title .icon:before{position:relative;top:0;left:0;bottom:0;content:"";margin-top:-3px;margin-bottom:-3px;width:64px;margin-right:calc(1.2625rem + 0.15vw);margin-left:-30px;border-radius:100%}@media(min-width: 1200px){.lg-title .icon:before{margin-right:1.375rem}}#description{width:100%;display:-webkit-flex;display:flex;flex-direction:row;padding:2em;column-gap:20px;border-width:.5em 0 0;border-style:solid;align-items:center;justify-content:center;border-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;background-color:#29008a !important;background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0))}#description .tile{border-left:7px solid #adb5bd;width:20em;padding-left:1.4em;padding-right:1.4em;padding-bottom:2em;background-color:rgba(0,0,0,.9)}#description .tile .content{margin:0 auto;max-width:280px}#description .tile .content p{margin:0 auto}#footer{display:-webkit-flex;display:flex;justify-content:end;margin-top:3em;padding:2em 1em}#footer ul li{list-style:none;display:inline-block;margin-right:.3em} +h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-top:0;margin-bottom:1.25rem;font-family:Arial,sans-serif;font-weight:700;color:#212529}h1,.h1{font-size:calc(1.4375rem + 2.25vw)}@media(min-width: 1200px){h1,.h1{font-size:3.125rem}}h2,.h2{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h2,.h2{font-size:2.5rem}}h3,.h3{font-size:calc(1.34375rem + 1.125vw)}@media(min-width: 1200px){h3,.h3{font-size:2.1875rem}}h4,.h4{font-size:calc(1.3125rem + 0.75vw)}@media(min-width: 1200px){h4,.h4{font-size:1.875rem}}h5,.h5{font-size:calc(1.28125rem + 0.375vw)}@media(min-width: 1200px){h5,.h5{font-size:1.5625rem}}h6,.h6{font-size:1.25rem}.lead{color:#212529;font-size:calc(1.28125rem + 0.375vw);font-weight:400;margin-top:0}@media(min-width: 1200px){.lead{font-size:1.5625rem}}*{box-sizing:border-box}html,body{margin:0;padding:0}html body{background-color:#fff}body{font-size:1.25rem;font-family:Arial,sans-serif;line-height:1.4;color:#212529}p{margin-top:0;margin-bottom:1rem}a{text-decoration:none;color:#ff8f23;text-decoration:underline}a:hover{color:#ff6a23}a:visited{color:#ff8f23}a:active{color:#ffb423}.text-lightblue{color:#b6e2ee}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{margin-left:15px;margin-right:15px}}.full-width-container{max-width:100%;margin-left:15px;margin-right:15px}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,.4);background:transparent;color:#212529;display:flex;flex-direction:row;align-items:center;padding:0 16px}.header .brand{margin-left:auto;padding-left:1em;padding-right:1em;text-decoration:none}.header .brand>h1{color:#4fbad5 !important;display:inline-flex;align-items:center;font-size:calc(1.2875rem + 0.45vw);margin:0}@media(min-width: 1200px){.header .brand>h1{font-size:1.625rem}}.header .brand .brand-img{margin-right:.5rem}.header .brand .second{color:#ff8f23 !important}.header .lang-select{display:inline-flex;vertical-align:middle;margin-left:auto}.header__menu-toggle{background:none;border:none;width:24px;height:24px;padding:0;margin:0 24px 0 0;color:#fff}.side-nav__content{padding-top:32px;flex:1;list-style:none;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-nav__content li{min-height:48px;line-height:48px}.side-nav__content li a:hover{background:#343a40}.nav-collapse a{color:#000;text-decoration:none;width:100%;background:#fff;border-bottom:1px solid #212529;padding:.7em 1em;float:left}.hero{border-radius:5px;background:linear-gradient(to right, #159957, #155799);min-height:300px;width:100%;color:#fff;justify-content:center;flex-direction:column;flex-grow:1;padding:1.25rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.hero>h1{margin:0}.hero .message{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;letter-spacing:5px}.posts ul li{list-style:none;margin-bottom:calc(1.525rem + 3.3vw)}@media(min-width: 1200px){.posts ul li{margin-bottom:4rem}}.posts ul li a{display:-webkit-flex;display:flex;text-decoration:none}.posts ul{border-top:1px solid #495057;padding-left:0;padding-right:0;padding-top:calc(1.625rem + 4.5vw)}@media(min-width: 1200px){.posts ul{padding-top:5rem}}.posts .left{line-height:1em;display:-webkit-flex;display:flex;flex-direction:column}.posts .date{color:#4fbad5;margin-bottom:0.3125rem;margin-right:1em;text-transform:uppercase;font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){.posts .date{font-size:1.5rem}}.posts .year{color:#fff}.posts .title{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){.posts .title{font-size:2rem}}.posts .right{line-height:1.15em}.lg-title span{background-color:#f8f9fa;padding-top:0.2rem;padding-bottom:0.2rem;padding-left:1rem;padding-right:1rem;border-radius:22px;color:#343a40 !important;border:3px #6c757d solid;display:inline-flex}.lg-title .icon{margin:0;padding-top:0 !important;padding-bottom:0 !important}.lg-title .icon:before{position:relative;top:0;left:0;bottom:0;content:"";margin-top:-3px;margin-bottom:-3px;width:64px;margin-right:calc(1.2625rem + 0.15vw);margin-left:-30px;border-radius:100%}@media(min-width: 1200px){.lg-title .icon:before{margin-right:1.375rem}}#description{width:100%;display:-webkit-flex;display:flex;flex-direction:row;padding:2em;column-gap:20px;border-width:.5em 0 0;border-style:solid;align-items:center;justify-content:center;border-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;background-color:#29008a !important;background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0))}#description .tile{border-left:7px solid #adb5bd;width:20em;padding-left:1.4em;padding-right:1.4em;padding-bottom:2em;background-color:rgba(0,0,0,.9)}#description .tile .content{margin:0 auto;max-width:280px}#description .tile .content p{margin:0 auto}#footer{display:-webkit-flex;display:flex;justify-content:end;margin-top:3em;padding:2em 1em}#footer ul li{list-style:none;display:inline-block;margin-right:.3em}