Merge pull request #21 from nphillips-dev/release/2.1.0

Release/2.1.0

README.md

@@ -13,7 +13,7 @@ The idea here is you can build a quick and dirty site. It works on the concept t
 
 Active nav item and a submit button - both need seperate CSS written but in Unholy both use the same colour variable, change that variable and both elements restyle. See section on variables.
 
-I appriciate this might be restrictive to some really flashy front end humans, I've tried to make this easy to overrude (no !important) but for those with the style sense of a fish i.e. me, this is a nice quick way to style a site.
+I appriciate this might be restrictive to some really flashy front end humans, I've tried to make this easy to override (no !important) but for those with the style sense of a fish i.e. me, this is a nice quick way to style a site.
 
 ## Version 2 and Rules
 
@@ -61,12 +61,14 @@ Inside a row there are 3 types of basic boxes:
 * .box-medium (50%)
 * .box-large (100%)
 
-Images would be structured as follows:
+Images do not require special structure:
 
-        <div class="wrapper">
-            <img card-img-bottom" src="" alt="">
-        </div>
+    <img src="" alt="">
+
+Combine with utility for effects e.g.
 
+    <img class="circle shadow" src="" alt="">
+        
 Lists are straight forward:
 
     <ul class="list">
@@ -164,6 +166,7 @@ Feel free to pull down, mangle and use to your hearts content but please, please
 * Ham nav: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/
 * Cards based on: https://materializecss.com/
 * List items: https://getbootstrap.com/
+* Images: https://www.freecodecamp.org/news/time-saving-css-techniques-to-create-responsive-images-ebb1e84f90d5/ 
 * Ideas and inspiration from:
 * https://milligram.io/
 * http://getskeleton.com/

unholy-core.css

@@ -1,11 +1,7 @@
 @import url('https://rsms.me/inter/inter.css');
- html {
-     font-family: 'Inter', sans-serif;
-}
+ html {font-family: 'Inter', sans-serif;}
  @supports (font-variation-settings: normal) {
-     html {
-         font-family: 'Inter var', sans-serif;
-    }
+     html {font-family: 'Inter var', sans-serif;}
 }
 
 @import "core/unholy-variables.css";
@@ -35,6 +31,9 @@
    margin: 5px;
    flex: auto;
 }
+@media screen and (min-width : 320px) and (max-width : 670px) {
+    .row > div.box-small{width: 100%;}
+}
 
 .row > div.box-medium{
    width: 48%;
@@ -66,22 +65,12 @@
        margin-left: 8%;
   }
 }
-/* unvisited link */
- a:link {
-     color: var(--unholy-main);
-}
-/* visited link */
- a:visited {
-     color: var(--unholy-font);
-}
-/* mouse over link */
- a:hover {
-     color: var(--unholy-secondary);
-}
-/* selected link */
- a:active {
-     color: var(--unholy-secondary);
-}
+
+ a:link {color: var(--unholy-main);}
+ a:visited {color: var(--unholy-font);}
+ a:hover { color: var(--unholy-secondary)}
+ a:active {color: var(--unholy-secondary);}
+
  a.button{
      display:inline-block;
      padding:0.3em 1.2em;
@@ -96,8 +85,7 @@
      text-align:center;
      transition: all 0.2s;
 }
- a.button:hover{
-     background-color: var(--unholy-secondary);
+ a.button:hover{background-color: var(--unholy-secondary);
 }
  @media all and (max-width:30em) {
      a.button {
@@ -115,8 +103,7 @@
      box-sizing: border-box;
      resize: vertical;
 }
- option:checked {
-     box-shadow: 0 0 10px 100px var(--unholy-main) inset;
+ option:checked {box-shadow: 0 0 10px 100px var(--unholy-main) inset;
 }
 /* Style the label to display next to the inputs */
  label {
@@ -173,14 +160,10 @@
      text-align: inherit;
 }
  @media screen and (min-width : 320px) {
-     .list-item {
-         margin-right: 10%;
-    }
+     .list-item {margin-right: 10%;}
 }
  @media screen and (min-width: 680px) {
-     .container {
-         margin-right: 5%;
-    }
+     .container {margin-right: 5%;}
 }
  .list--item-action:hover, .list-group-item-action:focus {
      z-index: 1;
@@ -210,18 +193,12 @@
      border-bottom-left-radius: 0.25rem;
 }
 /*Images*/
- .wrapper {
-     position: relative;
-     padding-top: 56.25%;
-    /* 16:9 Aspect Ratio */
-}
- img {
-     position: absolute;
-     left: 0;
-     top: 0;
-     width: 100%;
-     height: auto;
-}
+img {
+    height: auto;
+    width: 100%;
+    max-width: 720px;
+  }
+
 /*Cards*/
  .card {
      position: relative;
@@ -238,9 +215,7 @@
      background-color: var(--unholy-background);
      color:var(--unholy-font);
 }
- .card-action {
-     text-transform: uppercase;
-}
+ .card-action {text-transform: uppercase;}
 
  /*table*/
  .table-container {overflow-x:auto;}