pallote-css 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Arnaud Darré
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+# Pallote CSS
+
+Lightweight CSS component library
+
+## Run and deploy
+
+### Run the website locally
+
+- Install [Jekyll](https://jekyllrb.com/). Jekyll is a Ruby Gem that can be installed on most systems ([Installation manual](https://jekyllrb.com/docs/installation/)).
+
+- Run the website in development mode
+
+```shell
+jekyll serve
+```
+
+### Branches and environments
+
+| Environment | Branch | URL |
+| --- | --- | --- |
+| Local | | [localhost:4000](http://localhost:4000) |
+| Staging | `develop` | [develop.pallote.com](https://develop.pallote.com/) |
+| Production | `production` | [pallote.com](https://pallote.com/) |
+
+### Deployment
+
+We use git flow for versioning and version tagging. On branch develop:
+
+- Pull the latest changes
+
+```shell
+git pull | git pull origin production
+```
+
+- Initiate your feature
+
+```shell
+git flow feature start my-feature
+```
+
+- This will automatically create a new branch to work on your feature
+- Once the feature/update is done, close the feature
+
+```shell
+git flow feature finish my-feature
+```
+
+- push the changes to the remote `develop` branch, to test on the staging environment
+
+```shell
+git push
+```
+
+- Once the tests have passed, publish the release (adding the version tag at the end)
+
+```shell
+git flow release start x.x.x
+git flow release finish x.x.x
+```
+
+- push the changes
+
+```shell
+git push | git push origin develop | git push --tags
+```
+
+Deployment is automated with Netlify. The production and staging environments are deployed automatically when the corresponding branches are pushed.
+
+## Dependencies & Methodologies
+
+### SASS
+
+Styling is powered with Sass, a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).
+Style files are located in the assets/_sass folder. You don't need to run any additional command to compile, it does it automatically with `jekyll serve` ([installation manual](https://sass-lang.com/install)).
+
+### Jekyll plugins
+
+#### Compress
+
+A Jekyll layout that compresses HTML ([documentation](http://jch.penibelst.de/)).
+
+#### Jekyll Inline SVG
+
+SVG optimizer and inliner for jekyll ([documentation](https://github.com/sdumetz/jekyll-inline-svg)).
+
+#### Liquify
+
+A Jekyll filter that can parse Liquid in front matter ([documentation](https://github.com/gemfarmer/jekyll-liquify)).

package/_site/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Arnaud Darré
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/_site/README.md

@@ -0,0 +1,88 @@
+# Pallote CSS
+
+Lightweight CSS component library
+
+## Run and deploy
+
+### Run the website locally
+
+- Install [Jekyll](https://jekyllrb.com/). Jekyll is a Ruby Gem that can be installed on most systems ([Installation manual](https://jekyllrb.com/docs/installation/)).
+
+- Run the website in development mode
+
+```shell
+jekyll serve
+```
+
+### Branches and environments
+
+| Environment | Branch | URL |
+| --- | --- | --- |
+| Local | | [localhost:4000](http://localhost:4000) |
+| Staging | `develop` | [develop.pallote.com](https://develop.pallote.com/) |
+| Production | `production` | [pallote.com](https://pallote.com/) |
+
+### Deployment
+
+We use git flow for versioning and version tagging. On branch develop:
+
+- Pull the latest changes
+
+```shell
+git pull | git pull origin production
+```
+
+- Initiate your feature
+
+```shell
+git flow feature start my-feature
+```
+
+- This will automatically create a new branch to work on your feature
+- Once the feature/update is done, close the feature
+
+```shell
+git flow feature finish my-feature
+```
+
+- push the changes to the remote `develop` branch, to test on the staging environment
+
+```shell
+git push
+```
+
+- Once the tests have passed, publish the release (adding the version tag at the end)
+
+```shell
+git flow release start x.x.x
+git flow release finish x.x.x
+```
+
+- push the changes
+
+```shell
+git push | git push origin develop | git push --tags
+```
+
+Deployment is automated with Netlify. The production and staging environments are deployed automatically when the corresponding branches are pushed.
+
+## Dependencies & Methodologies
+
+### SASS
+
+Styling is powered with Sass, a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).
+Style files are located in the assets/_sass folder. You don't need to run any additional command to compile, it does it automatically with `jekyll serve` ([installation manual](https://sass-lang.com/install)).
+
+### Jekyll plugins
+
+#### Compress
+
+A Jekyll layout that compresses HTML ([documentation](http://jch.penibelst.de/)).
+
+#### Jekyll Inline SVG
+
+SVG optimizer and inliner for jekyll ([documentation](https://github.com/sdumetz/jekyll-inline-svg)).
+
+#### Liquify
+
+A Jekyll filter that can parse Liquid in front matter ([documentation](https://github.com/gemfarmer/jekyll-liquify)).

package/_site/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pallote-css",
+  "version": "0.0.0",
+  "description": "CSS component library",
+  "main": "_site/assets/css/pallote.css",
+  "files": [
+    "_site/assets/css/pallote.css",
+    "assets/_sass/*"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArnaudDarre/pallote-css.git"
+  },
+  "keywords": [
+    "CSS library",
+    "CSS Components",
+    "SASS"
+  ],
+  "author": "Nocheke",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ArnaudDarre/pallote-css/issues"
+  },
+  "homepage": "https://github.com/ArnaudDarre/pallote-css#readme"
+}

package/assets/_sass/common/_editor.scss

@@ -0,0 +1,166 @@
+// —————————————————————————————————————————————————————————————————
+// text
+// lists
+// table
+// —————————————————————————————————————————————————————————————————
+
+.editor, %editor {
+  max-width: $max-width-editor;
+
+  // —————————————————————————————————————————————————————————————————
+  // text
+  // —————————————————————————————————————————————————————————————————
+
+  h2 { @extend %h3; }
+  h3 { @extend %h4; }
+  h4 { @extend %h5; }
+  h5 { @extend %h6; }
+  h6 { @extend %subtitle; }
+  blockquote { @extend %subtitle; }
+
+  h2 {
+    color: $primary;
+  }
+
+  h2, h3, h4, h5, h6 {
+    
+    &:not(:first-child) { margin-top: 1.5em; }
+    &:not(:last-child) { margin-bottom: .75em; }
+  }
+
+  p,
+  ol, ul,
+  p + a, a + p {
+
+    &:not(:first-child) { margin-top: 0.75em; }
+  }
+
+  .highlighter-rouge,
+  .alert {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    width: fit-content;
+  }
+
+  a {
+    color: $primary;
+    text-decoration: underline;
+  }
+
+  strong {
+    font-weight: $font-bold;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  blockquote {
+    position: relative;
+    background-color: $background-paper;
+    padding: $spacing-md $spacing-lg;
+    border-radius: $border-radius-md;
+
+    &:before {
+      @include pseudo-element('”', -$spacing-md, auto, auto, -$spacing-sm, auto, auto);
+      font-size: $spacing-xxl;
+      color: $primary;
+      line-height: 1;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  // —————————————————————————————————————————————————————————————————
+  // lists
+  // —————————————————————————————————————————————————————————————————
+
+  ol,
+  ul {
+    margin-left: $spacing-md;
+  }
+
+  ol { list-style: decimal; }
+  ul { list-style: disc; }
+
+  li + li { margin-top: $spacing-xs; }
+
+  li {
+
+    > ul {
+      margin-top: 0.25rem !important;
+      margin-left: 0;
+
+      li + li { margin-top: 0; }
+    }
+
+    &:not(:last-child) {
+
+      > ul {
+        margin-bottom: 0.25rem;
+      }
+    }
+  }
+
+  // —————————————————————————————————————————————————————————————————
+  // table
+  // —————————————————————————————————————————————————————————————————
+
+  table {
+    border-collapse: separate;
+    border: $border;
+    border-radius: $border-radius-sm;
+
+    &.table--dense {
+
+      th { font-size: 0.65rem; }
+      td { font-size: 0.75rem;; }
+      td, th { padding: 1px $spacing-xs; }
+    }
+  }
+
+  thead {
+    background-color: $background-paper;
+
+    tr:first-child {
+
+      th {
+        border-top: none;
+
+        &:first-of-type { border-top-left-radius: $border-radius-sm; }
+        &:last-of-type { border-top-right-radius: $border-radius-sm; }
+      }
+    }
+  }
+
+  tbody {
+
+    tr:last-child {
+
+      th, td {
+
+        &:first-of-type { border-bottom-left-radius: $border-radius-sm; }
+        &:last-of-type { border-bottom-right-radius: $border-radius-sm; }
+      }
+    }
+  }
+
+  td,
+  th {
+    padding: $spacing-xs $spacing-sm $spacing-sm;
+    border-top: $border;
+
+    &:not(:first-child) {
+      border-left: $border;
+    }
+  }
+
+  th {
+    font-size: 0.875rem;
+    font-weight: bold;
+    color: $text-alt;
+  }
+}

package/assets/_sass/common/_fontface.scss

@@ -0,0 +1,28 @@
+// In order to have a clean a easy to use font, give the same font-family name to all styles.
+// You can then sort them by using the font-style (normal or italic) property
+
+// —————————————————————————————————————————————————————————————————
+// list of styles and their weight equivalent
+// —————————————————————————————————————————————————————————————————
+// style name               weight  variable
+// —————————————————————————————————————————————————————————————————
+// thin, hairline           100     $thin
+// extralight, ultralight   200     $extralight
+// light                    300     $light
+// normal, regular          400     $regular
+// medium                   500     $medium
+// semibold, demibold       600     $semibold
+// bold                     700     $bold
+// extrabold, ultrabold     800     $extrabold
+// black, heavy             900     $black
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// barlow
+// —————————————————————————————————————————————————————————————————
+
+@include fontface('Barlow', barlow/barlow-regular, $font-regular, normal);
+@include fontface('Barlow', barlow/barlow-italic, $font-regular, italic);
+
+@include fontface('Barlow', barlow/barlow-semibold, $font-bold, normal);
+@include fontface('Barlow', barlow/barlow-semibold-italic, $font-bold, italic);

package/assets/_sass/common/_global.scss

@@ -0,0 +1,132 @@
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family: $font;
+	font-size: 16px;
+	line-height: 1.5;
+	font-weight: $font-regular;
+	background-color: $background-default;
+	color: $text;
+	// needed for footer margin-top: auto if content smaller than viewport height
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	
+	&.js-freeze {
+		overflow: hidden;
+	}
+}
+
+// stick to bottom of page when page height smaller than viewport height
+footer {
+	margin-top: auto;
+}
+
+// embed responsively
+
+.embed-container { 
+	position: relative; 
+	padding-bottom: 56.25%; 
+	height: 0; 
+	overflow: hidden; 
+	max-width: 100%;
+	border-radius: $spacing-md;
+	
+	iframe, object, embed { 
+		position: absolute; 
+		top: 0; 
+		left: 0; 
+		width: 100%; 
+		height: 100%; 
+	}
+}        
+
+// text selection
+::-moz-selection {
+	background: $primary;
+	color: $primary-text;
+}
+
+::selection {
+	background: $primary;
+	color: $primary-text;
+}
+
+::-moz-selection {
+	background: $primary;
+	color: $primary-text;
+}
+
+// remove autocomplete from webkit browsers
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover, 
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+	-webkit-box-shadow: 0 0 0px 1000px $primary-light inset;
+	@include transition($transition-md, background-color);
+}
+
+// prevent images from stretching with flex 
+
+img {
+	align-self: center;
+	width: 100%;
+}
+
+// lists
+
+ul {
+	list-style: disc;
+}
+
+li {
+	margin-left: $spacing-md;
+
+	& + & {
+		padding-top: $spacing-xs;
+	}
+}
+
+// buttons and links
+
+button,
+a {
+	outline-color: $primary;
+	cursor: pointer;
+}
+
+// iframe
+
+iframe {
+	display: block; // remove bottom spacing
+	width: 100%;
+	border-radius: $border-radius-md;
+	border: $border;
+}
+
+strong {
+	font-weight: $font-bold;
+}
+
+// z-index
+
+@for $i from 0 through 9 {
+	.z-index--#{$i} { z-index: $i; }
+}
+
+.cookie { z-index: 10; }
+header { z-index: 11; }
+
+// background
+
+.background-cover {
+	@include background(50% 50%, cover);
+}