Compare commits
10 Commits
master
...
media-quer
| Author | SHA1 | Date |
|---|---|---|
 spongycake
|
0d62040180 | |
|
spongycake
|
1b35e763fe | |
|
spongycake
|
6dac5b5fa5 | |
|
spongycake
|
5ff88a4411 | |
Dooglet
|
c3b617eec6 | |
|
Dooglet
|
4b9df8ffa8 | |
|
Dooglet
|
77549ea84f | |
|
Dooglet
|
a53483a1d4 | |
|
Dooglet
|
b49dbcb976 | |
|
Dooglet
|
26aefc01be |
22
README.md
22
README.md
|
|
@ -1,2 +1,22 @@
|
|||
# libregaming-design-system
|
||||
# 🚀 LibreGaming Design System!
|
||||
|
||||
This project contains code and styles useful for those wanting to copy the look and feel of LibreGaming. This serves to bring consistency to across LibreGaming service and avoid repeating work.
|
||||
|
||||
## Run locally
|
||||
Web files are provided in `public` folder, you can view them via a Web Browser. The files are ready, no need to setup a build environment.
|
||||
|
||||
For those looking to copy beautiful layout and styles, include `style.css` inside your html files. Extra functionality, such as dropdown menus, is enabled by also including 'app.js' inside your html files.
|
||||
|
||||
Once done, you can begin using the style definitions within HTML elements. For example, `text-lightblue` renders text with LibreGaming's blue branding colours.
|
||||
|
||||
### Assets
|
||||
Assets such as logos are available inside `src/assets`.
|
||||
|
||||
## Development
|
||||
You will need Node.js installed if you want to develop the project's code.
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
to bundle your application
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "libregaming-design-system",
|
||||
"version": "0.1.0",
|
||||
"description": "Giving tools to build LibreGaming services more easily",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"hc-offcanvas-nav": "^6.1.4",
|
||||
"responsive-nav": "^1.0.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.12",
|
||||
"@babel/preset-env": "^7.16.11",
|
||||
"@webpack-cli/generators": "^2.4.1",
|
||||
"babel-loader": "^8.2.3",
|
||||
"css-loader": "^6.5.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"mini-css-extract-plugin": "^2.5.2",
|
||||
"prettier": "^2.5.1",
|
||||
"rfs": "^9.0.6",
|
||||
"sass": "^1.49.0",
|
||||
"sass-loader": "^12.4.0",
|
||||
"sass-mq": "^6.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"webpack": "^5.67.0",
|
||||
"webpack-cli": "^4.9.1",
|
||||
"webpack-dev-server": "^4.7.3",
|
||||
"workbox-webpack-plugin": "^6.4.2"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack --mode=production --node-env=production",
|
||||
"build:dev": "webpack --mode=development",
|
||||
"build:prod": "webpack --mode=production --node-env=production",
|
||||
"watch": "webpack --watch",
|
||||
"serve": "webpack serve"
|
||||
},
|
||||
"author": "spongycake",
|
||||
"license": "GPL"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
/*! responsive-nav.js 1.0.39
|
||||
* https://github.com/viljamis/responsive-nav.js
|
||||
* http://responsive-nav.com
|
||||
*
|
||||
* Copyright (c) 2015 @viljamis
|
||||
* Available under the MIT license
|
||||
*/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1 @@
|
|||
<!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="styles.css" rel="stylesheet"/><script defer="defer" src="app.js"></script><script defer="defer" src="style.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="currentColor" 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"><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><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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
if(!self.define){let e,s={};const r=(r,i)=>(r=new URL(r+".js",i).href,s[r]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=r,e.onload=s,document.head.appendChild(e)}else e=r,importScripts(r),s()})).then((()=>{let e=s[r];if(!e)throw new Error(`Module ${r} didn’t register its module`);return e})));self.define=(i,t)=>{const n=e||("document"in self?document.currentScript.src:"")||location.href;if(s[n])return;let o={};const l=e=>r(e,n),d={module:{uri:n},exports:o,require:l};s[n]=Promise.all(i.map((e=>d[e]||l(e)))).then((e=>(t(...e),o)))}}define(["./workbox-f683aea5"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"app.js",revision:"afee98f56223abdc441e859164c2d7fe"},{url:"app.js.LICENSE.txt",revision:"594215403fb173bf5a973fb21a3987b6"},{url:"assets/lg-logo.png",revision:"66af932b5315dbc55da78de466aa3ea5"},{url:"assets/member-panel-example.png",revision:"a861b458d328307ef65988b6f17556d2"},{url:"index.html",revision:"f0604cdca2e41b8e976d0b7360427e2e"},{url:"style.css",revision:"b08e40e543b3412f0398e5de7dd22e7c"},{url:"style.js",revision:"d41d8cd98f00b204e9800998ecf8427e"}],{})}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1,202 @@
|
|||
<!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="styles.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="currentColor" 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">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import Greeting from "./greeting.js";
|
||||
import responsiveNav from "responsive-nav";
|
||||
import "../assets/lg-logo.png";
|
||||
import "../assets/member-panel-example.png";
|
||||
class App {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
let greeting = new Greeting();
|
||||
greeting.printToConsole(Greeting.SOURCECODE);
|
||||
let nav = responsiveNav(".nav-collapse", {
|
||||
customToggle: ".toggle",
|
||||
jsClass: "js",
|
||||
});
|
||||
}
|
||||
}
|
||||
new App();
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default class Greeting {
|
||||
static SOURCECODE = "Hello. The source code lives via git. Find the repository here:";
|
||||
printToConsole(message) {
|
||||
console.log(message);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@each $color, $value in $utilities-text-colors {
|
||||
.text-#{$color} {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.container {
|
||||
max-width:1000px;
|
||||
margin:22px auto;
|
||||
@include padding-left(15px);
|
||||
@include padding-right(15px);
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
html body {
|
||||
background-color:$bg-color;
|
||||
}
|
||||
body
|
||||
{
|
||||
@include font-size($font-size-base);
|
||||
font-family:$font-family-sans-serif;
|
||||
line-height: 1.4;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top:0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $orange;
|
||||
text-decoration:underline;
|
||||
&:hover {
|
||||
color:darken($orange, 15%);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$utilities-text-colors: ("lightblue": $light-blue);
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// Vendor
|
||||
@import "vendor/_sass-mq.scss";
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1, .h1 { @include font-size($h1-font-size); }
|
||||
h2, .h2 { @include font-size($h2-font-size); }
|
||||
h3, .h3 { @include font-size($h3-font-size); }
|
||||
h4, .h4 { @include font-size($h4-font-size); }
|
||||
h5, .h5 { @include font-size($h5-font-size); }
|
||||
h6, .h6 { @include font-size($h6-font-size); }
|
||||
|
||||
.lead {
|
||||
@include font-size($lead-font-size);
|
||||
font-weight: $lead-font-weight;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
@mixin display-flex {
|
||||
@each $prefix in -webkit-, '' {
|
||||
display: #{$prefix}flex;
|
||||
}
|
||||
}
|
||||
@mixin flex-direction($spec...) {
|
||||
@each $prefix in -webkit-, '' {
|
||||
#{$prefix}flex-direction: $spec;
|
||||
}
|
||||
}
|
||||
@mixin justify-content($spec...) {
|
||||
@each $prefix in -webkit-, '' {
|
||||
#{$prefix}justify-content: $spec;
|
||||
}
|
||||
}
|
||||
@mixin flex($spec...) {
|
||||
@each $prefix in -webkit-, '' {
|
||||
#{$prefix}flex: $spec;
|
||||
}
|
||||
}
|
||||
@mixin flex-flow($spec...) {
|
||||
@each $prefix in -webkit-, '' {
|
||||
#{$prefix}flex-flow: $spec;
|
||||
}
|
||||
}
|
||||
@mixin align-items($spec...) {
|
||||
@each $prefix in -webkit-, '' {
|
||||
#{$prefix}align-items: $spec;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
// colours
|
||||
$darkgray: #000000;
|
||||
$white: #fff !default;
|
||||
$blue: #4fbad5 !default;
|
||||
$orange: #ff8f23 !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$dark-gray: #1c1b22 !default;
|
||||
$light-blue: lighten($blue, 20%);
|
||||
|
||||
$black: #000 !default;
|
||||
|
||||
|
||||
$bg-color: $dark-gray;
|
||||
$body-color: $gray-300;
|
||||
$border-radius: 12px;
|
||||
$headings-color:$gray-300;
|
||||
|
||||
|
||||
// fonts
|
||||
$font-family-sans-serif: '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" !default;
|
||||
$font-size-base: 1rem * 1.25 !default;
|
||||
|
||||
|
||||
|
||||
$headings-font-family: $font-family-sans-serif;
|
||||
|
||||
$headings-margin-bottom: 5px;
|
||||
$headings-font-weight: 900;
|
||||
$headings-line-height: 1.4em;
|
||||
|
||||
$h1-font-size: $font-size-base * 2.5 !default;
|
||||
$h2-font-size: $font-size-base * 2 !default;
|
||||
$h3-font-size: $font-size-base * 1.75 !default;
|
||||
$h4-font-size: $font-size-base * 1.5 !default;
|
||||
$h5-font-size: $font-size-base * 1.25 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
$lead-font-size: $font-size-base * 1.25 !default;
|
||||
$lead-font-weight: 300 !default;
|
||||
$paragraph-margin-bottom: 1rem !default;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import "components/toolbar";
|
||||
@import "components/hero";
|
||||
@import "components/posts";
|
||||
@import "components/lg-title";
|
||||
@import "components/description";
|
||||
@import "components/footer";
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
#description {
|
||||
width:100%;
|
||||
@include display-flex;
|
||||
flex-direction:row;
|
||||
@include 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:rgb(41, 0, 138) !important;
|
||||
background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
|
||||
.tile {
|
||||
border-left:7px solid $gray-500;
|
||||
width:20em;
|
||||
@include padding-left(1.4em);
|
||||
@include padding-right(1.4em);
|
||||
@include padding-bottom(2em);
|
||||
background-color:rgba(0,0,0,0.9);
|
||||
|
||||
& .content {
|
||||
|
||||
margin:0 auto;
|
||||
max-width:280px;
|
||||
& p {
|
||||
margin:0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
#footer {
|
||||
@include display-flex;
|
||||
justify-content:end;
|
||||
margin-top:3em;
|
||||
padding:2em 1em;
|
||||
ul li {
|
||||
list-style:none;
|
||||
display:inline-block;
|
||||
margin-right:.3em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.hero {
|
||||
border-radius:$border-radius;
|
||||
background: linear-gradient(to right, #159957, #155799);
|
||||
min-height:300px;
|
||||
width:100%;
|
||||
color: white;
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
flex-grow:1;
|
||||
@include padding(20px);
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
> h1 {
|
||||
margin:0;
|
||||
}
|
||||
& .message {
|
||||
@include display-flex;
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
letter-spacing:5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
.lg-title {
|
||||
|
||||
& span {
|
||||
background-color:$gray-100;
|
||||
@include padding-top(.2rem);
|
||||
@include padding-bottom(.2rem);
|
||||
@include padding-left(1rem);
|
||||
@include padding-right(1rem);
|
||||
border-radius:22px;
|
||||
color:$gray-800 !important;
|
||||
border:3px $gray-600 solid;
|
||||
display:inline-flex;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
margin:0;
|
||||
padding-top:0 !important;
|
||||
padding-bottom:0 !important;
|
||||
}
|
||||
& .icon:before {
|
||||
position:relative;
|
||||
// background: url("assets/lg-logo.png") no-repeat center center/cover;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
content: "";
|
||||
margin-top:-3px;
|
||||
margin-bottom:-3px;
|
||||
width:64px;
|
||||
@include margin-right(22px);
|
||||
margin-left:-30px;
|
||||
border-radius:100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
.posts {
|
||||
ul li {
|
||||
list-style:none;
|
||||
@include margin-bottom(4rem);
|
||||
& a {
|
||||
@include display-flex;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
}
|
||||
ul {
|
||||
|
||||
border-top:1px solid $gray-700;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
@include padding-top(5rem);
|
||||
}
|
||||
& .left {
|
||||
line-height:1em;
|
||||
@include display-flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
& .date {
|
||||
color: $blue;
|
||||
@include margin-bottom(5px);
|
||||
@include margin-right(1em);
|
||||
text-transform: uppercase;
|
||||
@include font-size(1.5rem);
|
||||
}
|
||||
& .year {
|
||||
color:$white;
|
||||
}
|
||||
& .title {
|
||||
@include font-size(2rem);
|
||||
}
|
||||
& .right {
|
||||
line-height:1.15em;
|
||||
}
|
||||
& .tags {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
.header {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
|
||||
background: $gray-900;
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
& .brand {
|
||||
|
||||
margin-left:auto;
|
||||
padding-left:1em;
|
||||
padding-right:1em;
|
||||
text-decoration:none;
|
||||
> h1 {
|
||||
color: $blue !important;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
@include font-size(26px);
|
||||
margin:0;
|
||||
}
|
||||
& .brand-img {
|
||||
margin-right:0.5rem;
|
||||
}
|
||||
& .second {
|
||||
color: $orange !important;
|
||||
}
|
||||
}
|
||||
& .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;
|
||||
}
|
||||
|
||||
.nav-collapse {
|
||||
}
|
||||
|
||||
.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: $gray-800;
|
||||
}
|
||||
|
||||
.nav-collapse a {
|
||||
color: $gray-300;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.7);
|
||||
border-bottom: 1px solid $gray-900;
|
||||
padding: 0.7em 1em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["_global.scss","_variables.scss","_container.scss","components/_toolbar.scss","components/_hero.scss","_utils.scss","components/_posts.scss","components/_lg-title.scss","components/_description.scss","components/_footer.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACC;EACA;EACA;;;AAED;EACC,kBCIU;;;ADFX;EACC;EACE;EACD,OCPS;;;ADUX;EACE;;;AAGF;EACA;;;AAGA;EACA;;;AAGA;EACA;;;AAGA;EACE;EACA,OC/BS;EDgCT;;AACA;EACF;;AAGE;EACE;;;AE1CJ;EACC;EACA;EACA;EACA;;;ACJD;EACE;EACA;EACA;EACA,YFUU;EETV;EACA;EACA;EACA;EACA;;AACA;EAEA;EACC;EACA;EACA,OFZQ;EEaR;;AACA;EACO;EACD;EACN;;AAED;EACC;;AAEA;EACA,OFtBQ;;AEyBV;EACC;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,YFpDS;;;AEuDX;EACE,OF7DS;EE8DT;EACA;EACA;EACA;EACA;EACA;;;AC1EF;EACC,eHmBe;EGlBf;EACA;EACA;EACA;EACA;EACA;ECLI;EAAA;EAyBA,qBDlBF;ECkBE,aDlBF;;AACF;ECRI;EAAA;EAUA;EAAA;EAeA,qBDdH;ECcG,aDdH;EACA;EACA;EACA;;;AEhBF;EACA;;AACA;EACA;EACA;;AACA;EDHK;EAAA;ECKJ;;AAID;EACA;;AAEA;EDZK;EAAA;ECcL;;AAEC;EACA,OLhBU;EKiBV;EACD;EACA;;AAEA;EACC,OLvBU;;AKyBX;EACC;;AAED;EACC;;AAED;EACC;;;AChCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;ACdH;EACC;EHCI;EAAA;EGCJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEA;EACA;EACA;EACA;EACC;;AAEA;EAEA;;AACC;EACA;;;AC1BH;EJEK;EAAA;EIAL;EACA;EACA;;AACA;EACA;EACA;EACA","file":"styles.css"}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@use "~sass-mq/mq";
|
||||
@import "~rfs/scss";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "maps";
|
||||
@import "utils";
|
||||
@import "global";
|
||||
@import "colors";
|
||||
@import "type";
|
||||
@import "container";
|
||||
@import "components";
|
||||
@import "~responsive-nav/responsive-nav.css";
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
// sass-mq/sass-mq
|
||||
|
||||
|
||||
/// Base font size on the `<body>` element
|
||||
/// @type Number (unit)
|
||||
$mq-base-font-size: $font-size-base !default;
|
||||
|
||||
/// Responsive mode
|
||||
///
|
||||
/// Set to `false` to enable support for browsers that do not support @media queries,
|
||||
/// (IE <= 8, Firefox <= 3, Opera <= 9)
|
||||
///
|
||||
/// You could create a stylesheet served exclusively to older browsers,
|
||||
/// where @media queries are rasterized
|
||||
///
|
||||
/// @example scss
|
||||
/// // old-ie.scss
|
||||
/// $mq-responsive: false;
|
||||
/// @import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint
|
||||
/// // larger breakpoints will be ignored
|
||||
///
|
||||
/// @type Boolean
|
||||
/// @link https://github.com/sass-mq/sass-mq#responsive-mode-off Disabled responsive mode documentation
|
||||
$mq-responsive: true !default;
|
||||
|
||||
/// Breakpoint list
|
||||
///
|
||||
/// Name your breakpoints in a way that creates a ubiquitous language
|
||||
/// across team members. It will improve communication between
|
||||
/// stakeholders, designers, developers, and testers.
|
||||
///
|
||||
/// @type Map
|
||||
/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples
|
||||
$mq-breakpoints: (
|
||||
mobile: 320px,
|
||||
tablet: 740px,
|
||||
desktop: 980px,
|
||||
wide: 1300px
|
||||
) !default;
|
||||
|
||||
/// Static breakpoint (for fixed-width layouts)
|
||||
///
|
||||
/// Define the breakpoint from $mq-breakpoints that should
|
||||
/// be used as the target width for the fixed-width layout
|
||||
/// (i.e. when $mq-responsive is set to 'false') in a old-ie.scss
|
||||
///
|
||||
/// @example scss
|
||||
/// // tablet-only.scss
|
||||
/// //
|
||||
/// // Ignore all styles above tablet breakpoint,
|
||||
/// // and fix the styles (e.g. layout) at tablet width
|
||||
/// $mq-responsive: false;
|
||||
/// $mq-static-breakpoint: tablet;
|
||||
/// @import 'main'; // @media queries in this file will be rasterized up to tablet
|
||||
/// // larger breakpoints will be ignored
|
||||
///
|
||||
/// @type String
|
||||
/// @link https://github.com/sass-mq/sass-mq#adding-custom-breakpoints Full documentation and examples
|
||||
$mq-static-breakpoint: desktop !default;
|
||||
|
||||
/// Show breakpoints in the top right corner
|
||||
///
|
||||
/// If you want to display the currently active breakpoint in the top
|
||||
/// right corner of your site during development, add the breakpoints
|
||||
/// to this list, ordered by width, e.g. (mobile, tablet, desktop).
|
||||
///
|
||||
/// @type map
|
||||
$mq-show-breakpoints: () !default;
|
||||
|
||||
/// Customize the media type (e.g. `@media screen` or `@media print`)
|
||||
/// By default sass-mq uses an "all" media type (`@media all and …`)
|
||||
///
|
||||
/// @type String
|
||||
/// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and examples
|
||||
$mq-media-type: all !default;
|
||||
|
||||
/// Convert pixels to ems
|
||||
///
|
||||
/// @param {Number} $px - value to convert
|
||||
/// @param {Number} $base-font-size ($mq-base-font-size) - `<body>` font size
|
||||
///
|
||||
/// @example scss
|
||||
/// $font-size-in-ems: mq-px2em(16px);
|
||||
/// p { font-size: mq-px2em(16px); }
|
||||
///
|
||||
/// @requires $mq-base-font-size
|
||||
/// @returns {Number}
|
||||
@function mq-px2em($px, $base-font-size: $mq-base-font-size) {
|
||||
@if unitless($px) {
|
||||
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
|
||||
@return mq-px2em($px * 1px, $base-font-size);
|
||||
} @else if unit($px) == em {
|
||||
@return $px;
|
||||
}
|
||||
@return ($px / $base-font-size) * 1em;
|
||||
}
|
||||
|
||||
/// Get a breakpoint's width
|
||||
///
|
||||
/// @param {String} $name - Name of the breakpoint. One of $mq-breakpoints
|
||||
///
|
||||
/// @example scss
|
||||
/// $tablet-width: mq-get-breakpoint-width(tablet);
|
||||
/// @media (min-width: mq-get-breakpoint-width(desktop)) {}
|
||||
///
|
||||
/// @requires {Variable} $mq-breakpoints
|
||||
///
|
||||
/// @returns {Number} Value in pixels
|
||||
@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) {
|
||||
@if map-has-key($breakpoints, $name) {
|
||||
@return map-get($breakpoints, $name);
|
||||
} @else {
|
||||
@warn "Breakpoint #{$name} wasn't found in $breakpoints.";
|
||||
}
|
||||
}
|
||||
|
||||
/// Media Query mixin
|
||||
///
|
||||
/// @param {String | Boolean} $from (false) - One of $mq-breakpoints
|
||||
/// @param {String | Boolean} $until (false) - One of $mq-breakpoints
|
||||
/// @param {String | Boolean} $and (false) - Additional media query parameters
|
||||
/// @param {String} $media-type ($mq-media-type) - Media type: screen, print…
|
||||
///
|
||||
/// @ignore Undocumented API, for advanced use only:
|
||||
/// @ignore @param {Map} $breakpoints ($mq-breakpoints)
|
||||
/// @ignore @param {String} $static-breakpoint ($mq-static-breakpoint)
|
||||
///
|
||||
/// @content styling rules, wrapped into a @media query when $responsive is true
|
||||
///
|
||||
/// @requires {Variable} $mq-media-type
|
||||
/// @requires {Variable} $mq-breakpoints
|
||||
/// @requires {Variable} $mq-static-breakpoint
|
||||
/// @requires {function} mq-px2em
|
||||
/// @requires {function} mq-get-breakpoint-width
|
||||
///
|
||||
/// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include mq($from: mobile) {
|
||||
/// color: red;
|
||||
/// }
|
||||
/// @include mq($until: tablet) {
|
||||
/// color: blue;
|
||||
/// }
|
||||
/// @include mq(mobile, tablet) {
|
||||
/// color: green;
|
||||
/// }
|
||||
/// @include mq($from: tablet, $and: '(orientation: landscape)') {
|
||||
/// color: teal;
|
||||
/// }
|
||||
/// @include mq(950px) {
|
||||
/// color: hotpink;
|
||||
/// }
|
||||
/// @include mq(tablet, $media-type: screen) {
|
||||
/// color: hotpink;
|
||||
/// }
|
||||
/// // Advanced use:
|
||||
/// $my-breakpoints: (L: 900px, XL: 1200px);
|
||||
/// @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
|
||||
/// color: hotpink;
|
||||
/// }
|
||||
/// }
|
||||
@mixin mq(
|
||||
$from: false,
|
||||
$until: false,
|
||||
$and: false,
|
||||
$media-type: $mq-media-type,
|
||||
$breakpoints: $mq-breakpoints,
|
||||
$responsive: $mq-responsive,
|
||||
$static-breakpoint: $mq-static-breakpoint
|
||||
) {
|
||||
$min-width: 0;
|
||||
$max-width: 0;
|
||||
$media-query: '';
|
||||
|
||||
// From: this breakpoint (inclusive)
|
||||
@if $from {
|
||||
@if type-of($from) == number {
|
||||
$min-width: mq-px2em($from);
|
||||
} @else {
|
||||
$min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints));
|
||||
}
|
||||
}
|
||||
|
||||
// Until: that breakpoint (exclusive)
|
||||
@if $until {
|
||||
@if type-of($until) == number {
|
||||
$max-width: mq-px2em($until);
|
||||
} @else {
|
||||
$max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive support is disabled, rasterize the output outside @media blocks
|
||||
// The browser will rely on the cascade itself.
|
||||
@if $responsive == false {
|
||||
$static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints);
|
||||
$target-width: mq-px2em($static-breakpoint-width);
|
||||
|
||||
// Output only rules that start at or span our target width
|
||||
@if (
|
||||
$and == false
|
||||
and $min-width <= $target-width
|
||||
and (
|
||||
$until == false or $max-width >= $target-width
|
||||
)
|
||||
and $media-type != 'print'
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive support is enabled, output rules inside @media queries
|
||||
@else {
|
||||
@if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; }
|
||||
@if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; }
|
||||
@if $and { $media-query: '#{$media-query} and #{$and}'; }
|
||||
|
||||
// Remove unnecessary media query prefix 'all and '
|
||||
@if ($media-type == 'all' and $media-query != '') {
|
||||
$media-type: '';
|
||||
$media-query: str-slice(unquote($media-query), 6);
|
||||
}
|
||||
|
||||
@media #{$media-type + $media-query} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Quick sort
|
||||
///
|
||||
/// @author Sam Richards
|
||||
/// @access private
|
||||
/// @param {List} $list - List to sort
|
||||
/// @returns {List} Sorted List
|
||||
@function _mq-quick-sort($list) {
|
||||
$less: ();
|
||||
$equal: ();
|
||||
$large: ();
|
||||
|
||||
@if length($list) > 1 {
|
||||
$seed: nth($list, ceil(length($list) / 2));
|
||||
|
||||
@each $item in $list {
|
||||
@if ($item == $seed) {
|
||||
$equal: append($equal, $item);
|
||||
} @else if ($item < $seed) {
|
||||
$less: append($less, $item);
|
||||
} @else if ($item > $seed) {
|
||||
$large: append($large, $item);
|
||||
}
|
||||
}
|
||||
|
||||
@return join(join(_mq-quick-sort($less), $equal), _mq-quick-sort($large));
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
|
||||
/// Sort a map by values (works with numbers only)
|
||||
///
|
||||
/// @access private
|
||||
/// @param {Map} $map - Map to sort
|
||||
/// @returns {Map} Map sorted by value
|
||||
@function _mq-map-sort-by-value($map) {
|
||||
$map-sorted: ();
|
||||
$map-keys: map-keys($map);
|
||||
$map-values: map-values($map);
|
||||
$map-values-sorted: _mq-quick-sort($map-values);
|
||||
|
||||
// Reorder key/value pairs based on key values
|
||||
@each $value in $map-values-sorted {
|
||||
$index: index($map-values, $value);
|
||||
$key: nth($map-keys, $index);
|
||||
$map-sorted: map-merge($map-sorted, ($key: $value));
|
||||
|
||||
// Unset the value in $map-values to prevent the loop
|
||||
// from finding the same index twice
|
||||
$map-values: set-nth($map-values, $index, 0);
|
||||
}
|
||||
|
||||
@return $map-sorted;
|
||||
}
|
||||
|
||||
/// Add a breakpoint
|
||||
///
|
||||
/// @param {String} $name - Name of the breakpoint
|
||||
/// @param {Number} $width - Width of the breakpoint
|
||||
///
|
||||
/// @requires {Variable} $mq-breakpoints
|
||||
///
|
||||
/// @example scss
|
||||
/// @include mq-add-breakpoint(tvscreen, 1920px);
|
||||
/// @include mq(tvscreen) {}
|
||||
@mixin mq-add-breakpoint($name, $width) {
|
||||
$new-breakpoint: ($name: $width);
|
||||
$mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global;
|
||||
$mq-breakpoints: _mq-map-sort-by-value($mq-breakpoints) !global;
|
||||
}
|
||||
|
||||
/// Show the active breakpoint in the top right corner of the viewport
|
||||
/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint
|
||||
///
|
||||
/// @param {List} $show-breakpoints ($mq-show-breakpoints) - List of breakpoints to show in the top right corner
|
||||
/// @param {Map} $breakpoints ($mq-breakpoints) - Breakpoint names and sizes
|
||||
///
|
||||
/// @requires {Variable} $mq-breakpoints
|
||||
/// @requires {Variable} $mq-show-breakpoints
|
||||
///
|
||||
/// @example scss
|
||||
/// // Show breakpoints using global settings
|
||||
/// @include mq-show-breakpoints;
|
||||
///
|
||||
/// // Show breakpoints using custom settings
|
||||
/// @include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));
|
||||
@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) {
|
||||
body:before {
|
||||
background-color: #FCF8E3;
|
||||
border-bottom: 1px solid #FBEED5;
|
||||
border-left: 1px solid #FBEED5;
|
||||
color: #C09853;
|
||||
font: small-caption;
|
||||
padding: 3px 6px;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
// Loop through the breakpoints that should be shown
|
||||
@each $show-breakpoint in $show-breakpoints {
|
||||
$width: mq-get-breakpoint-width($show-breakpoint, $breakpoints);
|
||||
@include mq($show-breakpoint, $breakpoints: $breakpoints) {
|
||||
content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if length($mq-show-breakpoints) > 0 {
|
||||
@include mq-show-breakpoints;
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
// Generated using webpack-cli https://github.com/webpack/webpack-cli
|
||||
|
||||
const path = require("path");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
|
||||
|
||||
const isProduction = process.env.NODE_ENV == "production";
|
||||
|
||||
const stylesHandler = isProduction
|
||||
? MiniCssExtractPlugin.loader
|
||||
: "style-loader";
|
||||
|
||||
const config = {
|
||||
entry: { app: "./src/js/app.js",
|
||||
style: ["./src/scss/styles.scss"]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "public"),
|
||||
},
|
||||
devServer: {
|
||||
open: true,
|
||||
host: "localhost",
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "src/index.html",
|
||||
}),
|
||||
|
||||
// Add your plugins here
|
||||
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/i,
|
||||
loader: "babel-loader",
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [stylesHandler, "css-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [stylesHandler, "css-loader", "sass-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
||||
use: {
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "[name].[ext]",
|
||||
outputPath: "assets",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Add your rules for custom modules here
|
||||
// Learn more about loaders from https://webpack.js.org/loaders/
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
if (isProduction) {
|
||||
config.mode = "production";
|
||||
|
||||
config.plugins.push(new MiniCssExtractPlugin());
|
||||
|
||||
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
|
||||
} else {
|
||||
config.mode = "development";
|
||||
}
|
||||
return config;
|
||||
};
|
||||
Loading…
Reference in New Issue