v0.1.2 build
This commit is contained in:
nx
parent
f0d21f7182
commit
8f3b53f5d2
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -1 +1,202 @@
|
|||
<!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="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>
|
||||
<!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.min.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">
|
||||
<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>
|
||||
|
|
|
|||
120
public/style.css
120
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%;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Reference in New Issue