LibreGaming
/
frontend-styles
Archived
14
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Compare commits

base: LibreGaming:master
Branches Tags
LibreGaming:master
LibreGaming:grid
LibreGaming:images-fluid
..
compare: LibreGaming:grid
Branches Tags
LibreGaming:master
LibreGaming:grid
LibreGaming:images-fluid

1 Commits
master ... grid

Author SHA1 Message Date
spongycake 0545085e74 Grid, with rows and columns, see -> 
A number of classes have been added to control the layout in a
grid-based way.

To start `row` is wrapped the elements you wish to group in a horizontal
line.

Next up, `grid-small` and `grid-large` relate to columns and behavior on
screen size. For example, `grid-large` will trigger layout changes when
the screen reaches a "desktop size" and `grid-small` for "mobile size".

The list of available column widths:

* half
* one-fourth
* three-fourths
* one-third
* two-thirds

Going in the order they are declared, for example, columns A,B - when A is
one-third and B is two-thirds. This means A will occupy 33% and B will
occupy 66%.

Additionally, look at _sass-mq.scss file if you want to define different
screen sizes.

EXAMPLE:
```
<div class="row">
  <div class="grid-large two-thirds">
    2/3
  </div>
  <div class="grid-large one-third">
    1/3
  </div>
</div>
```

===Sass API===
We have a helper called `media-query`. It directs calls to the sass-mq
library. Say we wanted to include a breakpoint in your sass files, do the following:

```
@include media-query($from: mobile) {
  // content
}
```
You are now generating a media-queries for mobile screens.

To understand what arguments can be passed to `media-query` then look at
the sass-mq documentation. [https://sass-mq.github.io/sass-mq/](https://sass-mq.github.io/sass-mq/)

=== Other ===
Technical - implementation being used in grid is flexbox. Do not expect
support for standard HTML Grid Layout.
 2022-02-26 14:28:51 +00:00
22 changed files with 952 additions and 9144 deletions
Show Stats Expand all files Collapse all files

8740
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "libregaming-design-system",
"version": "0.1.4",
"version": "0.1.3",
"description": "Giving tools to build LibreGaming services more easily",
"main": "index.js",
"dependencies": {

210
public/index.html
View File

@ -1,209 +1 @@
<!DOCTYPE text/html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" />
<script defer src="scripts.js"></script><script defer src="styles.js"></script><link href="style.css" rel="stylesheet"></head>
<body>
<div class="header">
<a class="toggle header__menu-toggle bi bi-list"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="black" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</a>
<a href="/" class="brand">
<h1>
<img height="32" class="brand-img" src="assets/lg-logo.png" />
Libre<span class="second">Gaming</span>
</h1>
</a>
<div class="lang-select">EN</div>
</div>
<aside>
<nav class="nav-collapse" role="navigation">
<div class="side-nav__content">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</aside>
<main role="main">
<div class="container">
<section class="hero" style="margin:30px 0;">
<h1 class="message">The Quick Brown Fox</h1>
<p class="lead">The quick brown fox jumps over the lazy dog</p>
</section>
</div> <!-- end container -->
<div class="container">
<div class="row">
<div class="grid-large two-thirds">
<p>The quick brown fox jumps over the lazy dog</p>
</div>
<div class="grid-large one-third">Jeb</div>
</div>
<h2 class="lg-title"><span>GAMING</span></h2>
<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>
<img class="img-fluid" src="assets/boxes.png" />
<h2 class="lg-title">NEWS</h2>
<div class="posts">
<p class="body-font">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 <a href="/news/feed">RSS feed</a> you can filter those out if you don't want them!</p>
<ul>
<li>
<a href="#">
<span class="left">
<span class="date">10/Dec</span>
<span class="year">2016</span>
</span>
<span class="right">
<span class="title">🌟 When everything's important, nothing is! 🌟</span>
<span class="tags">
#performance,
#loading
</span>
</span>
<span class="clear"></span>
</a>
</li>
<li>
<a href="#">
<span class="left">
<span class="date">30/Aug</span>
<span class="year">2016</span>
</span>
<span class="right">
<span class="title">There's a new streamer in town!</span>
<span class="tags">
#streaming,
#gaming,
#entertainment
</span>
</span>
<span class="clear"></span>
</a>
</li>
<li>
<a href="#">
<span class="left">
<span class="date">15/Feb</span>
<span class="year">2016</span>
</span>
<span class="right">
<span class="title">Ranking each survival horror game</span>
<span class="tags">
#horror
</span>
</span>
<span class="clear"></span>
</a>
</li>
<li>
<a href="#">
<span class="left">
<span class="date">25/Jan</span>
<span class="year">2016</span>
</span>
<span class="right">
<span class="title">The Hack is Back!</span>
<span class="tags">
#images,
#code
</span>
</span>
<span class="clear"></span>
</a>
</li>
<li>
<a href="#">
<span class="left">
<span class="date">16/Nov</span>
<span class="year">2015</span>
</span>
<span class="right">
<span class="title">Easist modding protocols,</span>
<span class="tags">
#frameworks,
#modding
</span>
</span>
<span class="clear"></span>
</a>
</li>
</ul></div>
</div>
</div> <!-- end container -->
<section id="description">
<div class="tile">
<div class="content">
<h3 class="text-lightblue">Desciption</h3>
<p>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.</p>
</div>
</div>
<div class="tile">
<div class="content">
<h3 class="text-lightblue">Members</h3>
<img src="assets/member-panel-example.png" />
</div>
</div>
</section>
</main>
<footer id="footer">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact</a></li>
</ul>
</ul>
</ul>
</nav>
</footer>
<script src="main.js"></script>
</body>
</html>
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.min.css" rel="stylesheet"/><script defer="defer" src="scripts.js"></script><script defer="defer" src="styles.js"></script><link href="style.min.css" rel="stylesheet"></head><body><div class="header"><a class="toggle header__menu-toggle bi bi-list"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="black" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg> </a><a href="/" class="brand"><h1><img height="32" class="brand-img" src="assets/lg-logo.png"/> Libre<span class="second">Gaming</span></h1></a><div class="lang-select">EN</div></div><aside><nav class="nav-collapse" role="navigation"><div class="side-nav__content"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Projects</a></li><li><a href="#">Contact</a></li></ul></div></nav></aside><main role="main"><div class="container"><section class="hero" style="margin:30px 0;"><h1 class="message">The Quick Brown Fox</h1><p class="lead">The quick brown fox jumps over the lazy dog</p></section></div><div class="container"><h2 class="lg-title"><span>GAMING</span></h2><h1>h1. heading</h1><h2>h2. heading</h2><h3>h3. heading</h3><h4>h4. heading</h4><h5>h5. heading</h5><h6>h6. heading</h6><img class="img-fluid" src="assets/boxes.png"/><h2 class="lg-title">NEWS</h2><div class="posts"><p>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 <a href="/news/feed">RSS feed</a> you can filter those out if you don't want them!</p><ul><li><a href="#"><span class="left"><span class="date">10/Dec</span> <span class="year">2016</span> </span><span class="right"><span class="title">🌟 When everything's important, nothing is! 🌟</span> <span class="tags">#performance, #loading </span></span><span class="clear"></span></a></li><li><a href="#"><span class="left"><span class="date">30/Aug</span> <span class="year">2016</span> </span><span class="right"><span class="title">There's a new streamer in town!</span> <span class="tags">#streaming, #gaming, #entertainment </span></span><span class="clear"></span></a></li><li><a href="#"><span class="left"><span class="date">15/Feb</span> <span class="year">2016</span> </span><span class="right"><span class="title">Ranking each survival horror game</span> <span class="tags">#horror </span></span><span class="clear"></span></a></li><li><a href="#"><span class="left"><span class="date">25/Jan</span> <span class="year">2016</span> </span><span class="right"><span class="title">The Hack is Back!</span> <span class="tags">#images, #code </span></span><span class="clear"></span></a></li><li><a href="#"><span class="left"><span class="date">16/Nov</span> <span class="year">2015</span> </span><span class="right"><span class="title">Easist modding protocols,</span> <span class="tags">#frameworks, #modding </span></span><span class="clear"></span></a></li></ul></div></div><section id="description"><div class="tile"><div class="content"><h3 class="text-lightblue">Desciption</h3><p>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.</p></div></div><div class="tile"><div class="content"><h3 class="text-lightblue">Members</h3><img src="assets/member-panel-example.png"/></div></div></section></main><footer id="footer"><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Sitemap</a></li><li><a href="#">Contact</a></li></ul></nav></footer><script src="main.js"></script></body></html>

775
public/scripts.js
View File

File diff suppressed because one or more lines are too long

56
public/style-0.1.4.min.css vendored
View File

File diff suppressed because one or more lines are too long

100
public/style-0.1.4.css → public/style.css
View File

@ -1,8 +1,3 @@
/*!
* @license https://www.gnu.org/licenses/gpl-3.0.en.html GNU General Public License
* @name styles.css by libregaming.org
* @version v0.1.4
*/
/*!**************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/responsive-nav/responsive-nav.css ***!
\**************************************************************************************************/
@ -122,17 +117,6 @@ h6, .h6 {
font-size: 1.25rem;
}
.body-font {
font-size: calc(1.2625rem + 0.15vw);
max-width: 45rem;
line-height: 1.5;
}
@media (min-width: 1200px) {
.body-font {
font-size: 1.375rem;
}
}
.lead {
color: #212529;
font-size: calc(1.28125rem + 0.375vw);
@ -171,18 +155,18 @@ p {
}
a {
color: #04768F;
font-weight: 700;
text-decoration: none;
color: #ff8f23;
text-decoration: underline;
}
a:hover {
color: #059fc1;
color: #ff6a23;
}
a:visited {
color: #04768F;
color: #ff8f23;
}
a:active {
color: #04768F;
color: #ffb423;
}
.text-lightblue {
@ -196,8 +180,8 @@ a:active {
}
@media (max-width: 78.75em) {
.container {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
margin-left: 15px;
margin-right: 15px;
}
}
@ -207,6 +191,76 @@ a:active {
margin-right: 15px;
}
/**
* Grid
*/
.grid-small,
.grid-large {
padding-left: 1rem;
padding-right: 1rem;
}
.row {
margin-left: -1rem;
margin-right: -1rem;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid-small,
.grid-large {
flex-basis: 100%;
margin-bottom: 1rem;
}
/* Small screen breakpoint */
@media (min-width: 20em) {
.grid-small {
flex: 1;
margin-bottom: 0;
}
.grid-small.half {
flex: 0 0 50%;
}
.grid-small.one-fourth {
flex: 0 0 25%;
}
.grid-small.three-fourths {
flex: 0 0 75%;
}
.grid-small.one-third {
flex: 0 0 33.3333333333%;
}
.grid-small.two-thirds {
flex: 0 0 66.6666666667%;
}
}
/* Large screen breakpoint */
@media (min-width: 61.25em) {
.grid-large {
flex: 1;
margin-bottom: 0;
}
.grid-large.half {
flex: 0 0 50%;
}
.grid-large.one-fourth {
flex: 0 0 25%;
}
.grid-large.three-fourths {
flex: 0 0 75%;
}
.grid-large.one-third {
flex: 0 0 33.3333333333%;
}
.grid-large.two-thirds {
flex: 0 0 66.6666666667%;
}
}
.header {
width: 100%;
height: 56px;

51
public/style.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
src/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" />
<link href="style.min.css" rel="stylesheet" />
</head>
<body>
<div class="header">
@ -40,12 +40,6 @@
</section>
</div> <!-- end container -->
<div class="container">
<div class="row">
<div class="grid-large two-thirds">
<p>The quick brown fox jumps over the lazy dog</p>
</div>
<div class="grid-large one-third">Jeb</div>
</div>
<h2 class="lg-title"><span>GAMING</span></h2>
<h1>h1. heading</h1>
<h2>h2. heading</h2>
@ -56,7 +50,7 @@
<img class="img-fluid" src="assets/boxes.png" />
<h2 class="lg-title">NEWS</h2>
<div class="posts">
<p class="body-font">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 <a href="/news/feed">RSS feed</a> you can filter those out if you don't want them!</p>
<p>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 <a href="/news/feed">RSS feed</a> you can filter those out if you don't want them!</p>
<ul>
<li>
<a href="#">

7
src/scss/components/_container.scss → src/scss/_container.scss
View File

@ -7,10 +7,9 @@
margin-right: auto;
// As soon as the viewport is less than page width plus both gutters,
// then add gutter spacing to container
// TODO: change to media-query helper instead of mq.mq
@include mq.mq($until: $container-page-width + $gutter * 2) {
@include padding-left($gutter-half);
@include padding-right($gutter-half);
margin-left: $gutter-half;
margin-right: $gutter-half;
}
}
// Full width container
@ -19,3 +18,5 @@
margin-left: $gutter-half;
margin-right: $gutter-half;
}

9
src/scss/_global.scss
View File

@ -5,12 +5,11 @@ html,body {
margin:0;
padding:0;
}
html body {
background-color:$bg-color;
}
body {
body
{
@include font-size($font-size-base);
font-family:$font-family-sans-serif;
line-height: 1.4;
@ -23,12 +22,12 @@ p {
}
a {
text-decoration: none;
color: $link-color;
font-weight: $link-font-weight;
text-decoration:underline;
&:hover {
color:$link-hover-color;
}
}
&:visited {
color: $link-visited-color;

2
src/scss/_mixins.scss
View File

@ -1,2 +0,0 @@
// Vendor
@import "vendor/_sass-mq.scss";

1
src/scss/components.scss
View File

@ -1,4 +1,3 @@
@import "components/container";
@import "components/toolbar";
@import "components/hero";
@import "components/posts";

8
src/scss/core/_type.scss
View File

@ -16,13 +16,6 @@ h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }
.body-font {
@include font-size(22px);
max-width: $paragraph-reading-width;
line-height: 1.5;
}
// lead paragraph
.lead {
@ -31,3 +24,4 @@ h6, .h6 { @include font-size($h6-font-size); }
font-weight: $lead-font-weight;
margin-top:0;
}

1
src/scss/helpers.scss
View File

@ -1 +1,2 @@
@import "helpers/image";
@import "helpers/media-query";

7
src/scss/helpers/_media-query.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../vendor/_sass-mq.scss";
@mixin media-query($args...) {
@include mq.mq($args...) {
@content;
}
}

1
src/scss/objects.scss Normal file
View File

@ -0,0 +1 @@
@import "objects/grid";

79
src/scss/objects/_grid.scss Normal file
View File

@ -0,0 +1,79 @@
/**
* Grid
*/
$column-padding: 1rem;
$margin-bottom: 1rem;
// The rows have a negative margin which are offset by the padding on the columns.
%column-padding {
@include padding-left($column-padding);
@include padding-right($column-padding);
}
%row-margin {
@include margin-left(-$column-padding);
@include margin-right(-$column-padding);
}
// Flex row
.row {
@extend %row-margin;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid-small,
.grid-large {
@extend %column-padding;
flex-basis: 100%;
margin-bottom: $margin-bottom;
}
/* Small screen breakpoint */
@include media-query($from: mobile) {
.grid-small {
flex: 1;
margin-bottom: 0;
&.half {
flex: 0 0 calc(1 / 2 * 100%);
}
&.one-fourth {
flex: 0 0 calc(1 / 4 * 100%);
}
&.three-fourths {
flex: 0 0 calc(3 / 4 * 100%);
}
&.one-third {
flex: 0 0 calc(1 / 3 * 100%);
}
&.two-thirds {
flex: 0 0 calc(2 / 3 * 100%);
}
}
}
/* Large screen breakpoint */
@include media-query($from: desktop) {
.grid-large {
flex: 1;
margin-bottom: 0;
&.half {
flex: 0 0 calc(1 / 2 * 100%);
}
&.one-fourth {
flex: 0 0 calc(1 / 4 * 100%);
}
&.three-fourths {
flex: 0 0 calc(3 / 4 * 100%);
}
&.one-third {
flex: 0 0 calc(1 / 3 * 100%);
}
&.two-thirds {
flex: 0 0 calc(2 / 3 * 100%);
}
}
}

2
src/scss/settings.scss
View File

@ -1,6 +1,6 @@
@import "settings/colors";
@import "settings/font";
@import "settings/font-families";
@import "settings/headings";
@import "settings/measurements";
@import "settings/spacing";
@import "settings/colors";

14
src/scss/settings/_colors.scss
View File

@ -32,10 +32,6 @@ $secondary-color: $orange !default;
$orange-100: adjust-hue($orange,10%);
$orange-900: adjust-hue($orange,-10%);
$blue-shade-1: adjust-hue($blue,10%);
$blue-shade-9: adjust-hue($blue,-10%);
// body background color
$bg-color: $white !default;
@ -63,18 +59,16 @@ $success-text: $green !default;
// =============================================================================
// normal link color
$link-color: #04768F !default;
$link-color: $orange !default;
// visted link color
$link-visited-color: $link-color !default;
$link-visited-color:$orange !default;
// link hover color
$link-hover-color: lighten($link-color,10%) !default;
$link-hover-color:$orange-900 !default;
// active link color
$link-active-color: $link-color !default;
$link-font-weight: $font-weight-bold !default;
$link-active-color:$orange-100 !default;
// =============================================================================
// Nav

7
src/scss/settings/_measurements.scss
View File

@ -14,10 +14,3 @@ $gutter-half: $gutter / 2;
// Border radius
$border-radius: 5px;
// =========================================================
// Paragraph
// =========================================================
$paragraph-reading-width: 45rem;

5
src/scss/styles.scss
View File

@ -1,12 +1,13 @@
@use "~sass-mq/mq";
@import "helpers";
@import "~rfs/scss";
@import "settings";
@import "mixins";
@import "helpers";
@import "maps";
@import "utils";
@import "core";
@import "global";
@import "colors";
@import "container";
@import "objects";
@import "components";
@import "~responsive-nav/responsive-nav.css";

9
webpack.config.js
View File

@ -1,7 +1,5 @@
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const webpack = require("webpack");
const package = require('./package.json');
const buildVersion = package.version;
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
@ -28,10 +26,7 @@ const config = {
new HtmlWebpackPlugin({
template: "src/index.html",
}),
new webpack.BannerPlugin({
banner:
`@license https://www.gnu.org/licenses/gpl-3.0.en.html GNU General Public License \n@name [name][ext] by libregaming.org \n@version v${buildVersion}`
}),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],