css,js sources

This commit is contained in:
Dooglet 2022-01-23 19:09:33 +00:00
commit 26aefc01be
21 changed files with 621 additions and 0 deletions

BIN
src/assets/lg-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

202
src/index.html Normal file
View File

@ -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>

18
src/js/app.js Normal file
View File

@ -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();

6
src/js/greeting.js Normal file
View File

@ -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);
}
}

5
src/scss/_colors.scss Normal file
View File

@ -0,0 +1,5 @@
@each $color, $value in $utilities-text-colors {
.text-#{$color} {
color: $value;
}
}

6
src/scss/_container.scss Normal file
View File

@ -0,0 +1,6 @@
.container {
max-width:1000px;
margin:22px auto;
@include padding-left(15px);
@include padding-right(15px);
}

48
src/scss/_global.scss Normal file
View File

@ -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;
}
}

2
src/scss/_maps.scss Normal file
View File

@ -0,0 +1,2 @@
$utilities-text-colors: ("lightblue": $light-blue);

20
src/scss/_type.scss Normal file
View File

@ -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;
}

30
src/scss/_utils.scss Normal file
View File

@ -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;
}
}

48
src/scss/_variables.scss Normal file
View File

@ -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;

6
src/scss/components.scss Normal file
View File

@ -0,0 +1,6 @@
@import "components/toolbar";
@import "components/hero";
@import "components/posts";
@import "components/lg-title";
@import "components/description";
@import "components/footer";

View File

@ -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;
}
}
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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%;
}
}

View File

@ -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 {
}
}

View File

@ -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;
}

1
src/scss/styles.css.map Normal file
View File

@ -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"}

10
src/scss/styles.scss Normal file
View File

@ -0,0 +1,10 @@
@import "~rfs/scss";
@import "variables";
@import "maps";
@import "utils";
@import "global";
@import "colors";
@import "type";
@import "container";
@import "components";
@import "~responsive-nav/responsive-nav.css";