circuhub

Website for CircuHub for more circulair waste-recycling
Log | Files | Refs

style.css (2245B)

      1 body {
      2     padding: 0;
      3     margin: 0;
      4 }
      5 
      6 main {
      7     margin-top: 60px;
      8     background-color: #fff;
      9     min-height: calc(100vh - 60px);
     10     justify-content: space-between;
     11 }
     12 
     13 #sidebar {
     14     position: fixed;
     15     background-color: #bff3b8;
     16     padding: 10px;
     17     height: 100%;
     18     width: 300px;
     19     float: left;
     20     border-right: 1px solid black;
     21 }
     22 
     23 #sidebar tr {
     24     margin: 0 5px;
     25 }
     26 
     27 #sidebar #zipcode-view {
     28     text-align: center;
     29 }
     30 
     31 #results {
     32     margin-left: 325px;
     33     display: grid;
     34     grid-template-columns: 50% 50%;
     35     max-height: 200px;
     36 }
     37 
     38 .substainable {
     39     border: 2px solid green;
     40 }
     41 
     42 .substainable p {
     43     border: 2px solid green;
     44     background: green;
     45     color: white;
     46 }
     47 
     48 .non-substainable {
     49     border: 2px solid black;
     50 }
     51 
     52 .non-substainable p {
     53     border: 2px solid black;
     54 }
     55 
     56 #results div {
     57     padding: 10px;
     58     margin: 20px;
     59     border-radius: 5px;
     60     text-align: center;
     61     cursor: pointer;
     62 }
     63 
     64 #results img {
     65     width: 250px;
     66 }
     67 
     68 #results span {
     69     font-style: italic;
     70     display: inline-block;
     71 }
     72 
     73 #results p {
     74     margin-top: 5px;
     75     font-size: 15pt;
     76 }
     77 
     78 #logo-preview {
     79     background-color: white;
     80     padding: 10px;
     81     width: 70%;
     82     border: 1px solid black;
     83 }
     84 
     85 #resources {
     86     margin-left: 325px;
     87     padding-top: 10px;
     88 }
     89 
     90 #resources .resource {
     91     padding: 10px;
     92     margin: 20px;
     93     border: 2px solid black;
     94     border-radius: 5px;
     95     display: grid;
     96     grid-template-columns: 30% 70%;
     97 }
     98 
     99 #resources input[type=number],
    100 #resources input[type=entry] {
    101     background: inherit;
    102     border: none;
    103     border-bottom: 1px solid black;
    104 }
    105 
    106 .resource-foto-frame {
    107     border-top: 2px solid black;
    108     grid-column: span 2;
    109     display: flex;
    110     overflow-x: auto;
    111     padding-top: 5px;
    112 }
    113 
    114 .resource-foto {
    115     flex: 0 0 auto;
    116     margin-right: 10px;
    117 }
    118 
    119 .resource-foto img {
    120     max-height: 200px;
    121     width: auto;
    122     max-width: 100%;
    123     display: block;
    124 }
    125 
    126 .resource-foto-empty {
    127     flex: 0 0 auto;
    128     display: flex;
    129     align-items: center;
    130     justify-content: center;
    131     background-color: #ccc;
    132     cursor: pointer;
    133     padding: 10px;
    134 }
    135 
    136 .resource-foto-empty:hover {
    137     background-color: #ddd;
    138 }
    139 
    140 .resource-foto-empty::before {
    141     content: '+';
    142     font-size: 20px;
    143 }
    144 
    145 .resource-owner {
    146     width: 100%;
    147 }