commit 26aefc01be4b1d69d5a344ad714a3addea8d5ec4 Author: Dooglet Date: Sun Jan 23 19:09:33 2022 +0000 css,js sources diff --git a/src/assets/lg-logo.png b/src/assets/lg-logo.png new file mode 100644 index 0000000..b46d8a5 Binary files /dev/null and b/src/assets/lg-logo.png differ diff --git a/src/assets/member-panel-example.png b/src/assets/member-panel-example.png new file mode 100644 index 0000000..19170ac Binary files /dev/null and b/src/assets/member-panel-example.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..f7d041a --- /dev/null +++ b/src/index.html @@ -0,0 +1,202 @@ + + + + + + + + + + +

+

+

+

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/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..b322b57 --- /dev/null +++ b/src/js/app.js @@ -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(); diff --git a/src/js/greeting.js b/src/js/greeting.js new file mode 100644 index 0000000..b4874f8 --- /dev/null +++ b/src/js/greeting.js @@ -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); + } +} diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss new file mode 100644 index 0000000..5e8681f --- /dev/null +++ b/src/scss/_colors.scss @@ -0,0 +1,5 @@ +@each $color, $value in $utilities-text-colors { + .text-#{$color} { + color: $value; + } +} diff --git a/src/scss/_container.scss b/src/scss/_container.scss new file mode 100644 index 0000000..828477c --- /dev/null +++ b/src/scss/_container.scss @@ -0,0 +1,6 @@ +.container { + max-width:1000px; + margin:22px auto; + @include padding-left(15px); +@include padding-right(15px); +} diff --git a/src/scss/_global.scss b/src/scss/_global.scss new file mode 100644 index 0000000..d884bac --- /dev/null +++ b/src/scss/_global.scss @@ -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; + } +} diff --git a/src/scss/_maps.scss b/src/scss/_maps.scss new file mode 100644 index 0000000..1b91a42 --- /dev/null +++ b/src/scss/_maps.scss @@ -0,0 +1,2 @@ +$utilities-text-colors: ("lightblue": $light-blue); + diff --git a/src/scss/_type.scss b/src/scss/_type.scss new file mode 100644 index 0000000..fc4c3f6 --- /dev/null +++ b/src/scss/_type.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; +} diff --git a/src/scss/_utils.scss b/src/scss/_utils.scss new file mode 100644 index 0000000..a9d2888 --- /dev/null +++ b/src/scss/_utils.scss @@ -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; + } + } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..ac01a27 --- /dev/null +++ b/src/scss/_variables.scss @@ -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; diff --git a/src/scss/components.scss b/src/scss/components.scss new file mode 100644 index 0000000..406087d --- /dev/null +++ b/src/scss/components.scss @@ -0,0 +1,6 @@ +@import "components/toolbar"; +@import "components/hero"; +@import "components/posts"; +@import "components/lg-title"; +@import "components/description"; +@import "components/footer"; diff --git a/src/scss/components/_description.scss b/src/scss/components/_description.scss new file mode 100644 index 0000000..91eaaca --- /dev/null +++ b/src/scss/components/_description.scss @@ -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; + } + } + } +} diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss new file mode 100644 index 0000000..7891cf9 --- /dev/null +++ b/src/scss/components/_footer.scss @@ -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; +} +} diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss new file mode 100644 index 0000000..ce51a71 --- /dev/null +++ b/src/scss/components/_hero.scss @@ -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; + } +} diff --git a/src/scss/components/_lg-title.scss b/src/scss/components/_lg-title.scss new file mode 100644 index 0000000..ae46168 --- /dev/null +++ b/src/scss/components/_lg-title.scss @@ -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%; + } +} diff --git a/src/scss/components/_posts.scss b/src/scss/components/_posts.scss new file mode 100644 index 0000000..716a316 --- /dev/null +++ b/src/scss/components/_posts.scss @@ -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 { +} +} diff --git a/src/scss/components/_toolbar.scss b/src/scss/components/_toolbar.scss new file mode 100644 index 0000000..3a6faae --- /dev/null +++ b/src/scss/components/_toolbar.scss @@ -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; +} + diff --git a/src/scss/styles.css.map b/src/scss/styles.css.map new file mode 100644 index 0000000..fd60306 --- /dev/null +++ b/src/scss/styles.css.map @@ -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"} \ No newline at end of file diff --git a/src/scss/styles.scss b/src/scss/styles.scss new file mode 100644 index 0000000..193f3c2 --- /dev/null +++ b/src/scss/styles.scss @@ -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";