@dodlhuat/basix 1.0.0

package/css/gallery.scss

@@ -0,0 +1,63 @@
+@use "properties";
+@use "parameters" as *;
+
+.masonry-container {
+    display: flex;
+    gap: $spacing;
+    justify-content: center;
+    margin: 0 auto;
+    align-items: flex-start;
+}
+
+.masonry-column {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing;
+    flex: 1;
+    min-width: 0;
+}
+
+.masonry-item {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: $shadow;
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    position: relative;
+}
+
+.masonry-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 0.5s ease-in;
+}
+
+.masonry-item img.loaded {
+    opacity: 1;
+}
+
+.masonry-item-info {
+    padding: 15px;
+}
+
+.masonry-item-title {
+    margin: 0 0 5px;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.masonry-item-desc {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #666;
+}
+
+.loader {
+    text-align: center;
+    padding: 40px;
+}

package/css/grid.css

@@ -0,0 +1,44 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.row.spacing-top {
+  padding-top: 0.5rem;
+}
+.row .column {
+  flex: 1;
+  padding: 1rem;
+}
+.row .column.grow-2 {
+  flex-grow: 2;
+}
+.row .column.grow-3 {
+  flex-grow: 3;
+}
+.row .column.grow-4 {
+  flex-grow: 4;
+}
+.row .column.grow-5 {
+  flex-grow: 5;
+}
+.row .column.grow-6 {
+  flex-grow: 6;
+}
+.row .column .column {
+  padding: 0;
+}
+.row .column .row {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .row {
+    flex-wrap: wrap;
+  }
+  .row .column {
+    flex-basis: 100%;
+    overflow: hidden;
+  }
+}/*# sourceMappingURL=grid.css.map */

package/css/grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["grid.scss","parameters.scss","grid.css"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,mBAAA;EACA,SCLQ;EDMR,mBCNQ;ACKV;AFGE;EACE,mBAAA;AEDJ;AFIE;EACE,OAAA;EACA,aCdM;ACYV;AFKM;EACE,YAFS;AEDjB;AFEM;EACE,YAFS;AEEjB;AFDM;EACE,YAFS;AEKjB;AFJM;EACE,YAFS;AEQjB;AFPM;EACE,YAFS;AEWjB;AFLI;EACE,UAAA;AEON;AFJI;EACE,gBAAA;AEMN;;AFDA;EACE;IACE,eAAA;EEIF;EFHE;IACE,gBAAA;IACA,gBAAA;EEKJ;AACF","file":"grid.css"}

package/css/grid.scss

@@ -0,0 +1,41 @@
+@use "parameters" as *;
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: $spacing;
+  margin-bottom: $spacing;
+
+  &.spacing-top {
+    padding-top: calc($spacing / 2);
+  }
+
+  .column {
+    flex: 1;
+    padding: $spacing;
+
+    @for $i from 2 through 6 {
+      &.grow-#{$i} {
+        flex-grow: $i;
+      }
+    }
+
+    .column {
+      padding: 0;
+    }
+
+    .row {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media screen and (max-width:768px) {
+  .row {
+    flex-wrap: wrap;
+    .column {
+      flex-basis: 100%;
+      overflow: hidden;
+    }
+  }
+}

package/css/guitar-chords.css

@@ -0,0 +1,251 @@
+.controls-container {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.chord-display {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.fretboard-container {
+    overflow-x: auto;
+    padding: 1rem 0;
+}
+
+.fretboard {
+    display: flex;
+    flex-direction: column;
+    background-color: #5d4037;
+    /* Fretboard wood color */
+    padding: 20px;
+    border-radius: 4px;
+    position: relative;
+    min-width: 800px;
+}
+
+.string {
+    display: flex;
+    position: relative;
+    height: 40px;
+    /* Spacing between strings */
+    align-items: center;
+}
+
+.string::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 2px;
+    /* String thickness */
+    background-color: #c0c0c0;
+    /* String color */
+    z-index: 1;
+    transform: translateY(-50%);
+}
+
+/* Make lower strings thicker */
+.string:nth-child(1)::before {
+    height: 4px;
+}
+
+.string:nth-child(2)::before {
+    height: 3.5px;
+}
+
+.string:nth-child(3)::before {
+    height: 3px;
+}
+
+.string:nth-child(4)::before {
+    height: 2.5px;
+}
+
+.string:nth-child(5)::before {
+    height: 2px;
+}
+
+.string:nth-child(6)::before {
+    height: 1.5px;
+}
+
+.fret {
+    flex: 1;
+    border-right: 4px solid #aaa;
+    /* Fret wire */
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.fret.nut {
+    border-right: 8px solid #ddd;
+    /* Nut */
+    flex: 0 0 50px;
+    /* Nut width */
+    background-color: #3e2723;
+}
+
+.note-marker {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.8rem;
+    font-weight: bold;
+    z-index: 3;
+    opacity: 0;
+    transition: opacity 0.2s;
+    pointer-events: none;
+    /* Let clicks pass through to fret */
+}
+
+.fret.active .note-marker {
+    opacity: 1;
+}
+
+/* Fret markers (dots) */
+.fretboard::after {
+    content: '';
+    position: absolute;
+    /* This is tricky with flexbox, might need a different approach for dots 
+       or just put them on specific frets in JS or specific nth-child CSS 
+    */
+}
+
+/* Simple single dots */
+.string:nth-child(3) .fret:nth-child(4)::after,
+/* 3rd fret */
+.string:nth-child(3) .fret:nth-child(6)::after,
+/* 5th fret */
+.string:nth-child(3) .fret:nth-child(8)::after,
+/* 7th fret */
+.string:nth-child(3) .fret:nth-child(10)::after
+
+/* 9th fret */
+    {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    z-index: 0;
+    top: 100%;
+    /* Position below the 3rd string (between 3 and 4 visually) */
+    transform: translate(50%, -50%);
+    /* Center on the fret wire? No, center in fret */
+    left: 50%;
+    transform: translate(-50%, 20px);
+    /* Push down to between strings */
+}
+
+/* Double dot at 12th fret */
+.string:nth-child(2) .fret:nth-child(13)::after,
+.string:nth-child(4) .fret:nth-child(13)::after {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    z-index: 0;
+    left: 50%;
+    transform: translate(-50%, 20px);
+}
+
+@media (max-width: 768px) {
+    .controls-container {
+        gap: 1rem;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .control-group {
+        width: 100%;
+    }
+
+    .button-group {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .button-group button {
+        flex: 1;
+    }
+
+    .fretboard-container {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* Hide overflow as requested */
+    }
+
+
+    .fretboard {
+        min-width: 0;
+        /* Allow it to shrink to fit screen */
+        width: 100%;
+        padding: 10px 0;
+        /* Reduce padding */
+        box-sizing: border-box;
+        /* Ensure padding is included */
+    }
+
+    .fret-numbers {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+/* Fret Numbers Styles */
+.fret-numbers {
+    display: flex;
+    height: 30px;
+    align-items: center;
+    margin-top: 5px;
+    padding-left: 20px;
+    /* Match fretboard padding */
+    padding-right: 20px;
+}
+
+.fret-number {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    /* Increased size */
+    color: var(--primary-text);
+    /* Higher contrast */
+    font-weight: bold;
+    border-right: 4px solid transparent;
+    /* Match fret wire width to align perfectly */
+    box-sizing: border-box;
+    /* Ensure border is calculated in size if we switch that on */
+}
+
+/* Ensure frets also use consistent box sizing if not already */
+.fret {
+    box-sizing: border-box;
+}

package/css/icons.css

@@ -0,0 +1,327 @@
+@font-face {
+  font-family: "Material Symbols Outlined 24pt";
+  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
+}
+.icon {
+  font-family: "Material Symbols Outlined 24pt", serif;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 24px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-delete:before {
+  content: "\e872";
+}
+
+.icon-search:before {
+  content: "\e8b6";
+}
+
+.icon-splitscreen_vertical_add:before {
+  content: "\f4fc";
+}
+
+.icon-splitscreen_add:before {
+  content: "\f4fd";
+}
+
+.icon-push_pin:before {
+  content: "\f10d";
+}
+
+.icon-block:before {
+  content: "\e033";
+}
+
+.icon-check_circle:before {
+  content: "\e86c";
+}
+
+.icon-stars:before {
+  content: "\e8d0";
+}
+
+.icon-support:before {
+  content: "\ef73";
+}
+
+.icon-refresh:before {
+  content: "\e5d5";
+}
+
+.icon-sync:before {
+  content: "\e627";
+}
+
+.icon-language:before {
+  content: "\e894";
+}
+
+.icon-article:before {
+  content: "\ef42";
+}
+
+.icon-list_alt:before {
+  content: "\e0ee";
+}
+
+.icon-add_box:before {
+  content: "\e146";
+}
+
+.icon-disabled_by_default:before {
+  content: "\f230";
+}
+
+.icon-help_center:before {
+  content: "\f1c0";
+}
+
+.icon-pages:before {
+  content: "\e7f9";
+}
+
+.icon-add_photo_alternate:before {
+  content: "\e43e";
+}
+
+.icon-calendar_today:before {
+  content: "\e935";
+}
+
+.icon-assignment_turned_in:before {
+  content: "\e862";
+}
+
+.icon-finance:before {
+  content: "\e6bf";
+}
+
+.icon-save:before {
+  content: "\e161";
+}
+
+.icon-folder:before {
+  content: "\e2c7";
+}
+
+.icon-folder_off:before {
+  content: "\eb83";
+}
+
+.icon-folder_open:before {
+  content: "\e2c8";
+}
+
+.icon-mail:before {
+  content: "\e0be";
+}
+
+.icon-attach_file:before {
+  content: "\e226";
+}
+
+.icon-chat_bubble:before {
+  content: "\e0ca";
+}
+
+.icon-cases:before {
+  content: "\e992";
+}
+
+.icon-send:before {
+  content: "\e163";
+}
+
+.icon-bookmark:before {
+  content: "\e866";
+}
+
+.icon-label:before {
+  content: "\e892";
+}
+
+.icon-filter_alt:before {
+  content: "\ef4f";
+}
+
+.icon-filter_alt_off:before {
+  content: "\eb32";
+}
+
+.icon-notifications_active:before {
+  content: "\e7f7";
+}
+
+.icon-more_horiz:before {
+  content: "\e5d3";
+}
+
+.icon-more_vert:before {
+  content: "\e5d4";
+}
+
+.icon-navigate_before:before {
+  content: "\e408";
+}
+
+.icon-navigate_next:before {
+  content: "\e409";
+}
+
+.icon-keyboard_double_arrow_left:before {
+  content: "\eac3";
+}
+
+.icon-keyboard_double_arrow_right:before {
+  content: "\eac9";
+}
+
+.icon-first_page:before {
+  content: "\e5dc";
+}
+
+.icon-last_page:before {
+  content: "\e5dd";
+}
+
+.icon-expand_less:before {
+  content: "\e5ce";
+}
+
+.icon-expand_more:before {
+  content: "\e5cf";
+}
+
+.icon-zoom_in_map:before {
+  content: "\eb2d";
+}
+
+.icon-zoom_out_map:before {
+  content: "\e56b";
+}
+
+.icon-drag_pan:before {
+  content: "\f71e";
+}
+
+.icon-format_list_bulleted:before {
+  content: "\e241";
+}
+
+.icon-format_list_numbered:before {
+  content: "\e242";
+}
+
+.icon-check:before {
+  content: "\e5ca";
+}
+
+.icon-remove:before {
+  content: "\e15b";
+}
+
+.icon-add:before {
+  content: "\e145";
+}
+
+.icon-close:before {
+  content: "\e14c";
+}
+
+.icon-format_bold:before {
+  content: "\e238";
+}
+
+.icon-format_italic:before {
+  content: "\e23f";
+}
+
+.icon-format_underlined:before {
+  content: "\e249";
+}
+
+.icon-home:before {
+  content: "\e88a";
+}
+
+.icon-favorite:before {
+  content: "\e87d";
+}
+
+.icon-edit:before {
+  content: "\e150";
+}
+
+.icon-layers:before {
+  content: "\e53b";
+}
+
+.icon-cloud:before {
+  content: "\e2bd";
+}
+
+.icon-print:before {
+  content: "\e555";
+}
+
+.icon-share:before {
+  content: "\e80d";
+}
+
+.icon-tune:before {
+  content: "\e429";
+}
+
+.icon-power_settings_new:before {
+  content: "\e8ac";
+}
+
+.icon-timeline:before {
+  content: "\e922";
+}
+
+.icon-bar_chart:before {
+  content: "\e26b";
+}
+
+.icon-bar_chart_4_bars:before {
+  content: "\f681";
+}
+
+.icon-finance_mode:before {
+  content: "\ef92";
+}
+
+.icon-database:before {
+  content: "\f20e";
+}
+
+.icon-settings:before {
+  content: "\e8b8";
+}
+
+.icon-person:before {
+  content: "\e7fd";
+}
+
+.icon-menu_open:before {
+  content: "\e7ad";
+}
+
+.icon-menu:before {
+  content: "\e7ac";
+}
+
+.icon-light:before {
+  content: "\e81a";
+}
+
+.icon-dark:before {
+  content: "\ef44";
+}/*# sourceMappingURL=icons.css.map */

package/css/icons.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["icons.scss","icons.css"],"names":[],"mappings":"AACA;EACE,6CAAA;EACA,iEAAA;ACAF;ADIA;EACE,oDAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;EACA,mCAAA;EACA,kCAAA;ACFF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF;;ADMA;EACE,gBAAA;ACHF","file":"icons.css"}