chore: use bluesky4-based structure

dist/style.css

@@ -1190,7 +1190,6 @@ ul.card-list {
   background-color: #859900 !important;
   color: #fdf6e3; }
 
-/* ------------------ BUTTONS ------------------- */
 /*
  * 3. Buttons and labels
  * All clickable elements
@@ -1599,7 +1598,11 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     .btn-mastodon:hover:before, .btn-mastodon:active:before, .btn-mastodon:focus:before, a:hover > .btn-mastodon:before, a:active > .btn-mastodon:before, a:focus > .btn-mastodon:before, .btn-mastodon:not(.disabled):not(:disabled):hover:before, .btn-mastodon:not(.disabled):not(:disabled):active:before, .btn-mastodon:not(.disabled):not(:disabled):focus:before, a:hover > .btn-mastodon:not(.disabled):not(:disabled):before, a:active > .btn-mastodon:not(.disabled):not(:disabled):before, a:focus > .btn-mastodon:not(.disabled):not(:disabled):before, a.btn-mastodon:hover:before, a.btn-mastodon:active:before, a.btn-mastodon:focus:before, a:hover > a.btn-mastodon:before, a:active > a.btn-mastodon:before, a:focus > a.btn-mastodon:before, a.btn-mastodon:not(.disabled):not(:disabled):hover:before, a.btn-mastodon:not(.disabled):not(:disabled):active:before, a.btn-mastodon:not(.disabled):not(:disabled):focus:before, a:hover > a.btn-mastodon:not(.disabled):not(:disabled):before, a:active > a.btn-mastodon:not(.disabled):not(:disabled):before, a:focus > a.btn-mastodon:not(.disabled):not(:disabled):before {
       background-color: #181a21; }
 
-/* ------------------ PREVIEWS ------------------- */
+/*
+ * 4. Previews
+ * Special style for previews cards
+ *
+*/
 .previews-section {
   display: grid;
   grid-template-columns: auto auto auto;

src/scss/_drawing.scss

@@ -0,0 +1,5 @@
+@import 'components/cards';
+
+@import 'components/buttons';
+
+@import 'components/previews';

src/scss/components/_previews.scss

@@ -1,13 +1,8 @@
-@import 'global';
-
-@import 'cards';
-
-/* ------------------ BUTTONS ------------------- */
-
-@import 'buttons';
-
-/* ------------------ PREVIEWS ------------------- */
-
+/*
+ * 4. Previews
+ * Special style for previews cards
+ *
+*/
 $preview-height: 8*1.5rem;
 
 .previews-section {
@@ -60,7 +55,7 @@ $preview-height: 8*1.5rem;
   background-color:rgba(0,0,0,0.00);
   color:rgba(0,0,0,0.4);
 	position: relative;
-	
+
 	display: flex;
   -ms-flex-align: center !important;
   align-items: center !important;
@@ -200,4 +195,4 @@ $preview-height: 8*1.5rem;
   height:auto;
   display:block;
   margin:auto;
-}
+}

src/scss/style.scss

@@ -4,4 +4,6 @@
 
 @import 'typography';
 
-@import 'commons';
+@import 'global';
+
+@import 'drawing';