@documental-xyz/core 0.1.0

package/src/assets/styles/config/_vars.scss

@@ -0,0 +1,16 @@
+$default_prefix: 'atnlbs';
+$rt: '.rt';
+$default_text_margin: 20px;
+$default_vertical_spacer: 40px;
+$default_transition: ease .3s;
+$media_max_height: 81dvh;
+
+// to use only in places where the content might respect user definitions
+$clr-txt: var(--clr-txt, var(--clr-black));
+$clr-txt-rgb: var(--clr-txt-rgb, var(--clr-black-rgb));
+$clr-bg: var(--clr-bg, var(--clr-white));
+$clr-bg-rgb: var(--clr-bg-rgb, var(--clr-white-rgb));
+$clr-hl: var(--clr-hl, var(--clr-highlight));
+$clr-hl-rgb: var(--clr-hl-rgb, var(--clr-highlight-rgb));
+$clr-bg-hl: var(--clr-bg-hl, var(--clr--bg-highlight));
+$clr-bg-hl-rgb: var(--clr-bg-hl-rgb, var(--clr--bg-highlight-rgb));

package/src/assets/styles/globals/_content.scss

@@ -0,0 +1,47 @@
+
+// &#{&}--post-type-page{ //Variation Page
+// 	&:not(#{$content}--template-front-page){ 	//when we have further a template grid modification, you must deny it.
+// 		@extend .grrr--fluid;
+// 		--content-area: board-start 5 / board-end 11; //defines the default alignment for content inside the grid.
+// 	}
+// }
+@mixin content{
+	$content: &; 	//use the variable content for nested child.
+	&{
+		@extend .grrr--content;
+		@include type('text');
+		grid-column: 1 / -1;
+		display: grid;
+		background-color: inherit;
+		color: inherit;
+
+		--content-area: content;
+		--content-size: #{grrr-cols-size(8)};
+
+		@include media-break-down('m'){
+			--content-size: calc( ( var(--atnl-col-responsive-size) * 4 ) + ( var(--atnl-gutter) * 3 ) );
+		}
+	}
+
+	.backend &{
+		min-height: 80px;
+	}
+
+	.frontend &{
+		padding-block: 80px;
+	}
+
+	&#{&}--template-front-page{
+		@extend .grrr--board;
+		--content-area: board-start 5 / board-end 11;
+
+		@include media-break-down('m'){
+			--content-area: content;
+
+		}
+	}
+}
+
+.content {
+	@include content;
+}

package/src/assets/styles/globals/_grrr.scss

@@ -0,0 +1,18 @@
+@use '../utils/grrr/grrr' as *;
+
+%grrr--board{
+	@include grrr();
+}
+
+%grrr--fluid{
+	@include grrr('fluid');
+}
+
+%grrr--content{
+	@include media-grrr-up(6,true){
+		@include grrr-content('board', $content-start: 4, $content-end: 9);
+	}
+	@include media-grrr-down(6,true){
+		@include grrr();
+	}
+}

package/src/assets/styles/globals/_html.scss

@@ -0,0 +1,25 @@
+@use '../config/config' as *;
+
+html{
+	scroll-behavior: smooth;
+	overflow-x: hidden;
+	width: 100%;
+	height: 100%;
+	max-width: 100dvw;
+
+	&:has(.gallery-modal[aria-hidden="false"]) {
+		overflow: hidden;
+	}
+}
+
+body{
+	@include type('b-m');
+	color: $clr-txt;
+	background-color: $clr-bg;
+	max-width: 100vw;
+	box-sizing: border-box;
+
+	&.debug-map-transitions .map__view {
+    opacity: 1;
+  }
+}

package/src/assets/styles/globals/_lists.scss

@@ -0,0 +1,19 @@
+@use "../utils/list-styles/list-styles" as *;
+
+.text {
+  > ul {
+    @extend .atnl-ul;
+
+    li + li {
+      margin-top: 8px;
+    }
+  }
+ 
+  > ol {
+    @extend .atnl-ol;
+
+    li + li {
+      margin-top: 8px;
+    }
+  }
+}

package/src/assets/styles/globals/_map-anchors.scss

@@ -0,0 +1,32 @@
+[data-map-anchor]{
+  position: absolute;
+  left:20px;
+  opacity: 0;
+  border-bottom: 1px solid yellow;
+  border-left: 1px dashed yellow;
+  color: black;
+  max-width: 200px;
+  font-size: 12px;
+  line-height: 14px;
+  span{
+    background-color: rgba(255, 255, 0, 0.9);
+  }
+}
+
+[data-map-anchor].odd{
+  border-color: yellowgreen;
+  span{
+    background-color: rgba(153, 205, 50, 0.9);;
+  }
+}
+
+[data-map-displacer]{
+  border-top: 1px solid magenta;
+  height: 1px;
+  opacity: 0;
+}
+
+.debug-map-transitions [data-map-anchor],
+.debug-map-transitions [data-map-displacer]{
+  opacity: 1;
+}

package/src/assets/styles/globals/_reset.scss

@@ -0,0 +1,240 @@
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-size: 100%;
+}
+
+html,
+body {
+  font-size: 100%;
+  margin: 0;
+  width: 100%;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+  margin: 0;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+a {
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 0;
+}
+
+img[class^='wp-image']{
+	display: inline-block;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+pre {
+  overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  margin: 0;
+}
+
+button {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  appearance: button;
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type='search'] {
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+textarea {
+  overflow-x: none;
+  overflow-y: auto;
+}
+
+a,
+a:visited,
+a:focus,
+a:active {
+  color: inherit;
+  text-decoration: none;
+}
+
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+li,
+ul {
+  margin: 0;
+  font-size: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+  counter-reset: listCounter calc(var(--listCounter, 1) - 1);
+  li {
+    counter-increment: listCounter;
+  }
+}

package/src/assets/styles/globals/_reveal-animations.scss

@@ -0,0 +1,104 @@
+$animations: fadeIn, fadeInUp, fadeInDown, fadeInLeft, zoomIn, curtainUp, curtainDown;
+
+@each $anim in $animations {
+  .reveal {
+    &--#{$anim} {
+      opacity: 0;
+      visibility: hidden;
+
+      animation: $anim 1s ease forwards;
+      animation-play-state: paused;     
+    }
+  }
+
+  .animation-disabled {
+    .reveal {
+      &--#{$anim} {
+        opacity: 1;
+        visibility: visible;
+  
+        animation: none;
+      }
+    }
+  }
+}
+
+.reveal {
+  visibility: visible;
+  animation-play-state: running;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes curtainUp {
+  0% {
+    opacity: 0;
+    clip-path: inset(100% 0 0 0);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes curtainDown {
+  0% {
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}

package/src/assets/styles/globals/_root.scss

@@ -0,0 +1,6 @@
+@use '../config/config' as *;
+
+:root{
+	@include print_colors_vars();
+	@include typeVars();
+}

package/src/assets/styles/globals/_scroll-progression-bar.scss

@@ -0,0 +1,8 @@
+.scroll-progression-bar {
+  height: 8px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: var(--clr-hl);
+}

package/src/assets/styles/main.scss

@@ -0,0 +1,17 @@
+// config
+$context: 'frontend';
+@forward './globals/grrr';
+
+// // content block mixin
+// @use 'globals/content';
+
+// // base
+@forward 'globals/reset';
+@forward 'globals/root';
+@forward 'globals/html';
+@forward 'globals/lists';
+@forward 'globals/map-anchors';
+@forward 'globals/reveal-animations';
+@forward 'globals/scroll-progression-bar';
+
+