Added comments to media queries

lbryio · Dec 14, 2018 · b9cc8bf · b9cc8bf
1 parent 2f8d812
commit b9cc8bf
Show file tree

Hide file tree

Showing 31 changed files with 210 additions and 206 deletions.
diff --git a/src/renderer/scss/component/_animation.scss b/src/renderer/scss/component/_animation.scss
@@ -1,3 +1,15 @@
+@keyframes expand {
+  0% {
+    margin-top: 200px;
+    opacity: 0;
+  }
+
+  100% {
+    margin-top: $spacing-vertical;
+    opacity: 1;
+  }
+}
+
 @keyframes loading-animation {
   0% {
     background-position: -500px 0;

diff --git a/src/renderer/scss/component/_badge.scss b/src/renderer/scss/component/_badge.scss
@@ -9,8 +9,8 @@
     font-size: 0.8rem;
     letter-spacing: 0.05rem;
     line-height: 2;
-    padding-right: var(--spacing-vertical-small); // 0.5rem;
-    padding-left: var(--spacing-vertical-small); // 0.55rem;
+    padding-right: var(--spacing-vertical-small);
+    padding-left: var(--spacing-vertical-small);
   }
 }
 

diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
@@ -80,7 +80,7 @@
   border: 1px solid $lbry-gray-1;
   border-radius: 1rem;
   color: inherit;
-  padding: var(--spacing-vertical-small) var(--spacing-vertical-medium); // 0.5rem 1rem;
+  padding: var(--spacing-vertical-small) var(--spacing-vertical-medium);
   transition: background-color 0.2s;
 
   html[data-theme='dark'] & {
@@ -107,7 +107,7 @@
       height: 1rem;
 
       color: $lbry-gray-4;
-      margin-right: var(--spacing-vertical-small); // 0.25rem;
+      margin-right: var(--spacing-vertical-small);
     }
 
     .btn__label {
@@ -130,7 +130,7 @@
   align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
   border-radius: 1rem;
   color: $lbry-white;
-  padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-medium); // 0.5rem 1rem;
+  padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-medium);
   transition: background-color 0.2s;
 
   &:not(:hover) {
@@ -155,7 +155,7 @@
     width: 1rem !important;
     height: 1rem !important;
 
-    margin-right: var(--spacing-vertical-small); // 0.5rem;
+    margin-right: var(--spacing-vertical-small);
     position: relative;
     top: 0.1rem;
   }

diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
@@ -2,7 +2,7 @@
   background-color: $lbry-white;
   border: 1px solid $lbry-gray-1;
   border-radius: 0.5rem;
-  margin-bottom: var(--spacing-vertical-large); // 1.5rem;
+  margin-bottom: var(--spacing-vertical-large);
   position: relative;
 
   html[data-theme='dark'] & {
@@ -21,10 +21,10 @@
 }
 
 .card--section {
-  padding: var(--spacing-vertical-large); // 2rem;
+  padding: var(--spacing-vertical-large);
 
   .card__content:not(:last-of-type) {
-    margin-bottom: var(--spacing-vertical-large); // 1.5rem;
+    margin-bottom: var(--spacing-vertical-large);
   }
 }
 
@@ -45,7 +45,7 @@
 
 .card__actions {
   > *:not(:last-child) {
-    margin-right: var(--spacing-vertical-large); // 1.5rem;
+    margin-right: var(--spacing-vertical-large);
   }
 }
 
@@ -71,7 +71,7 @@
 }
 
 .card__actions--top-space {
-  padding-top: var(--spacing-vertical-small); // 0.5rem;
+  padding-top: var(--spacing-vertical-small);
 }
 
 //  C A R D
@@ -81,7 +81,7 @@
   font-size: 1.15rem;
 
   p:not(:last-of-type) {
-    margin-bottom: var(--spacing-vertical-medium); // 1rem;
+    margin-bottom: var(--spacing-vertical-medium);
   }
 }
 
@@ -92,11 +92,11 @@
   position: relative;
 
   + .card__content {
-    padding-top: var(--spacing-vertical-medium); // 2rem;
+    padding-top: var(--spacing-vertical-medium);
   }
 
   &:not(.card__header--flat) {
-    margin-bottom: var(--spacing-vertical-small); // 0.5rem;
+    margin-bottom: var(--spacing-vertical-small);
   }
 }
 
@@ -114,16 +114,16 @@
 
 .card__list {
   display: grid;
-  grid-gap: var(--spacing-vertical-medium); // 1rem;
+  grid-gap: var(--spacing-vertical-medium);
 }
 
 //  C A R D
 //  M E T A
 
 .card__meta {
   color: $lbry-gray-5;
-  padding-top: var(--spacing-vertical-medium); // 1rem;
-  padding-bottom: var(--spacing-vertical-medium); // 1rem;
+  padding-top: var(--spacing-vertical-medium);
+  padding-bottom: var(--spacing-vertical-medium);
 }
 
 //  C A R D
@@ -132,7 +132,7 @@
 .card__message {
   border-left: 0.5rem solid;
   padding: var(--spacing-vertical-medium) var(--spacing-vertical-medium)
-    var(--spacing-vertical-medium) var(--spacing-vertical-large); // 1rem 1rem 1rem 1.5rem;
+    var(--spacing-vertical-medium) var(--spacing-vertical-large);
 
   &:not(&--error):not(&--failure):not(&--success) {
     background-color: rgba($lbry-teal-1, 0.1);
@@ -160,7 +160,7 @@
 
 .card__subtitle {
   font-size: 1.25rem;
-  margin-bottom: var(--spacing-vertical-small); // 0.5rem;
+  margin-bottom: var(--spacing-vertical-small);
 
   .badge {
     bottom: -0.12rem;

diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
@@ -39,7 +39,7 @@
   background-color: $lbry-black;
   display: flex;
   justify-content: center;
-  margin-bottom: var(--spacing-vertical-large); // 2rem;
+  margin-bottom: var(--spacing-vertical-large);
   max-height: 60vh;
   position: relative;
   width: 100%;
@@ -80,7 +80,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 var(--spacing-vertical-large); // 0 20px;
+  padding: 0 var(--spacing-vertical-large);
 }
 
 .content__loading-text {

diff --git a/src/renderer/scss/component/_expandable.scss b/src/renderer/scss/component/_expandable.scss
@@ -1,7 +1,7 @@
 .expandable {
   border-bottom: 1px solid $lbry-gray-1;
-  margin-bottom: var(--spacing-vertical-medium); // 1rem;
-  padding-bottom: var(--spacing-vertical-medium); // 1rem;
+  margin-bottom: var(--spacing-vertical-medium);
+  padding-bottom: var(--spacing-vertical-medium);
 
   html[data-theme='dark'] & {
     border-color: rgba($lbry-gray-5, 0.2);
@@ -14,7 +14,7 @@
 
 .expandable--closed,
 .expandable--open {
-  margin-bottom: var(--spacing-vertical-small); // 0.5rem;
+  margin-bottom: var(--spacing-vertical-small);
 }
 
 .expandable--closed {

diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss
@@ -39,7 +39,7 @@
   .markdown-preview {
     height: 100%;
     overflow: auto;
-    padding: var(--spacing-vertical-large); // 2rem 3rem;
+    padding: var(--spacing-vertical-large);
   }
 }
 
@@ -62,7 +62,7 @@
 
   .CodeMirror .CodeMirror-lines {
     // is there really a .CodeMirror inside a .CodeMirror?
-    padding: var(--spacing-vertical-small) 0; // 4px 0;
+    padding: var(--spacing-vertical-small) 0;
   }
 
   .CodeMirror-code {
@@ -73,11 +73,11 @@
   .CodeMirror-gutters {
     background-color: $lbry-gray-1;
     border-right: 1px solid $lbry-gray-2;
-    padding-right: var(--spacing-vertical-medium); // 0.8rem;
+    padding-right: var(--spacing-vertical-medium);
   }
 
   .CodeMirror-line {
-    padding-left: var(--spacing-vertical-medium); // 1.2rem;
+    padding-left: var(--spacing-vertical-medium);
   }
 
   .CodeMirror-linenumber {

diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
@@ -1,6 +1,6 @@
 .form-field {
   &:not(:last-of-type) {
-    margin-bottom: var(--spacing-vertical-small); // 0.5rem;
+    margin-bottom: var(--spacing-vertical-small);
   }
 
   &.form-field--disabled {
@@ -18,7 +18,7 @@
   align-items: center;
   display: flex;
   font-size: 1.25rem;
-  margin-bottom: var(--spacing-vertical-small); // 0.25rem;
+  margin-bottom: var(--spacing-vertical-small);
 
   &.form-field--auto-height {
     height: auto;
@@ -61,7 +61,7 @@
 
 .form-field__help {
   color: $lbry-gray-5;
-  padding-top: var(--spacing-vertical-small); // $spacing-vertical * 1/3;
+  padding-top: var(--spacing-vertical-small);
 }
 
 .form-field__label {
@@ -85,11 +85,11 @@
 }
 
 .form-field__prefix {
-  padding-right: var(--spacing-vertical-small); // 0.5rem;
+  padding-right: var(--spacing-vertical-small);
 }
 
 .form-field__postfix {
-  padding-left: var(--spacing-vertical-small); // 0.5rem;
+  padding-left: var(--spacing-vertical-small);
 }
 
 .form-field__select-wrapper {
@@ -120,7 +120,7 @@
 
   background-color: $lbry-gray-1;
   border-radius: 0;
-  padding: var(--spacing-vertical-small); // 0.5rem;
+  padding: var(--spacing-vertical-small);
 
   -webkit-appearance: none;
 

diff --git a/src/renderer/scss/component/_form-row.scss b/src/renderer/scss/component/_form-row.scss
@@ -8,7 +8,7 @@
 
   .form-field {
     &:not(:first-of-type) {
-      padding-left: var(--spacing-vertical-medium); // 1rem;
+      padding-left: var(--spacing-vertical-medium);
     }
 
     &.form-field--stretch {
@@ -23,7 +23,7 @@
 
   button + input,
   input + button {
-    margin-left: var(--spacing-vertical-medium); // 1rem;
+    margin-left: var(--spacing-vertical-medium);
   }
 }
 
@@ -32,8 +32,8 @@
 }
 
 .form-row--padded {
-  padding-top: var(--spacing-vertical-medium); // 1rem;
-  padding-bottom: var(--spacing-vertical-medium); // 1rem;
+  padding-top: var(--spacing-vertical-medium);
+  padding-bottom: var(--spacing-vertical-medium);
 }
 
 .form-row--right {

diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss
@@ -23,6 +23,9 @@
       border-color: $lbry-gray-5;
     }
 
+    // Main navigation collapses into a menu button
+    // at smaller screen widths
+
     @media (min-width: 601px) {
       width: 250px;
     }
@@ -95,13 +98,19 @@
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3E path %7B fill: none; fill-rule: evenodd; stroke: %23fff; stroke-width: 1; %7D %3C/style%3E %3Cpath d='M3.5, 7 C3.5, 7.27910535 3.72002141, 7.5 3.99339768, 7.5 L20.0066023, 7.5 C20.2782464, 7.5 20.5, 7.27680164 20.5, 7 C20.5, 6.72089465 20.2799786, 6.5 20.0066023, 6.5 L3.99339768, 6.5 C3.72175357, 6.5 3.5, 6.72319836 3.5, 7 Z M3.5, 12 C3.5, 12.2791054 3.72002141, 12.5 3.99339768, 12.5 L20.0066023, 12.5 C20.2782464, 12.5 20.5, 12.2768016 20.5, 12 C20.5, 11.7208946 20.2799786, 11.5 20.0066023, 11.5 L3.99339768, 11.5 C3.72175357, 11.5 3.5, 11.7231984 3.5, 12 Z M3.5, 17 C3.5, 17.2791054 3.72002141, 17.5 3.99339768, 17.5 L20.0066023, 17.5 C20.2782464, 17.5 20.5, 17.2768016 20.5, 17 C20.5, 16.7208946 20.2799786, 16.5 20.0066023, 16.5 L3.99339768, 16.5 C3.72175357, 16.5 3.5, 16.7231984 3.5, 17 Z'/%3E %3C/svg%3E");
   }
 
+  // This menu button does not need to be seen
+  // at larger screen widths
+
   @media (min-width: 601px) {
     display: none;
   }
 }
 
 .header__navigation-item--publish,
 .header__navigation-item--wallet {
+  // Publish and Wallet links are collapsed
+  // into a menu at smaller screen widths
+
   @media (max-width: 600px) {
     display: none;
   }
@@ -111,7 +120,7 @@
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round'%3E %3Cpath d='M8, 18 L5, 18 L5, 18 C2.790861, 18 1, 16.209139 1, 14 C1, 11.790861 2.790861, 10 5, 10 C5.35840468, 10 5.70579988, 10.0471371 6.03632437, 10.1355501 C6.01233106, 9.92702603 6, 9.71495305 6, 9.5 C6, 6.46243388 8.46243388, 4 11.5, 4 C14.0673313, 4 16.2238156, 5.7590449 16.8299648, 8.1376465 C17.2052921, 8.04765874 17.5970804, 8 18, 8 C20.7614237, 8 23, 10.2385763 23, 13 C23, 15.7614237 20.7614237, 18 18, 18 L16, 18' stroke-linejoin='round'/%3E %3Cpath d='M12, 13 L12, 21'/%3E %3Cpolyline stroke-linejoin='round' transform='translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000)' points='15 11 12 14 9 11'/%3E %3C/g%3E %3C/svg%3E");
   background-position: 20% center;
   background-size: 18%;
-  padding-left: var(--spacing-vertical-large); // 1.75rem;
+  padding-left: var(--spacing-vertical-large);
   position: relative;
   width: 100%;
 
@@ -134,14 +143,5 @@
     text-align: center;
     text-overflow: ellipsis;
     width: 100%;
-
-    &::after {
-      top: -0.5rem;
-      right: 2.85rem;
-
-      content: ''; // ℄
-      opacity: 0.3;
-      position: absolute;
-    }
   }
 }
diff --git a/src/renderer/scss/component/_icon.scss b/src/renderer/scss/component/_icon.scss
@@ -2,5 +2,5 @@
 // Same for prices on cards
 .icon + .icon,
 .credit-amount + .icon {
-  margin-left: var(--spacing-vertical-small); // $spacing-vertical * 1/3;
+  margin-left: var(--spacing-vertical-small);
 }
diff --git a/src/renderer/scss/component/_item-list.scss b/src/renderer/scss/component/_item-list.scss
@@ -1,7 +1,7 @@
 .item-list {
   background-color: $lbry-white;
-  margin-top: var(--spacing-vertical-large); // $spacing-vertical;
-  padding: var(--spacing-vertical-large); // $spacing-vertical;
+  margin-top: var(--spacing-vertical-large);
+  padding: var(--spacing-vertical-large);
 
   html[data-theme='dark'] & {
     background-color: rgba($lbry-white, 0.1);
@@ -11,11 +11,11 @@
 .item-list__item {
   align-items: center;
   display: flex;
-  padding: var(--spacing-vertical-small); // $spacing-vertical * 1/3;
+  padding: var(--spacing-vertical-small);
 
   input,
-  &--cutoff {
-    margin-right: var(--spacing-vertical-large); // $spacing-vertical;
+  .item-list__item--cutoff {
+    margin-right: var(--spacing-vertical-large);
   }
 }