main.css (2906B)
1 body { 2 font-family: mono; 3 background-color: #121414; 4 color: #BABABA; 5 line-height: 1.3em; 6 } 7 8 header { 9 max-width: 60%; 10 margin: 0 auto; 11 padding-top: 25px; 12 } 13 14 main { 15 max-width: 45%; 16 margin: 3em auto; 17 } 18 19 .title { 20 color: #FFFFFF; 21 font-size: 140%; 22 font-weight: bold; 23 text-decoration: none; 24 float: right; 25 margin: 0px; 26 display: inline-block; 27 vertical-align: bottom; 28 } 29 30 /* NAV BAR */ 31 nav { 32 float: left; 33 font-size: 120%; 34 } 35 nav ul { 36 list-style-type: none; 37 margin: -5px 0px 0px 0px; 38 padding: 0px; 39 background-color: #54595D; 40 overflow: hidden; 41 } 42 nav li { 43 float: left; 44 text-align: center; 45 padding: 5px 0px; 46 } 47 nav a { 48 color: #FFFFFF; 49 padding: 5px 10px; 50 text-decoration: none; 51 } 52 nav a:hover { 53 text-decoration: underline; 54 } 55 nav a:visited { 56 color: #FFFFFF; 57 } 58 nav>ul>li a:hover:not(.active){ 59 background-color: #0E904C; 60 } 61 .active { 62 background-color: #0E904C; 63 } 64 /* END NAV BAR */ 65 66 /* HEADERS */ 67 h1 { 68 margin-bottom:.1em; 69 line-height:1.1em 70 } 71 h2, h3, h4, h5, h6 { 72 margin: 2em 0px 1em 0px 73 } 74 /* END HEADERS */ 75 76 /* LINKS */ 77 a { 78 color: #0E904C ; 79 } 80 a:hover { 81 text-decoration: none; 82 } 83 a:visited { 84 color: #8B8335; 85 } 86 /* END LINKS */ 87 88 /* IMAGES */ 89 img { 90 max-width: 100%; 91 margin-top: 10px; 92 margin-bottom: 10px; 93 } 94 /* END IMAGES */ 95 96 /* SERVICE CARDS */ 97 .card-wrapper { 98 display: grid; 99 width: 100%; 100 flex-wrap: wrap; 101 grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); 102 grid-gap: 0.5em; 103 justify-content: center; 104 } 105 .card { 106 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5); 107 margin: 5px; 108 transition: 0.3s; 109 border-radius: 5px; 110 background-color: #54595D; 111 color: #FFFFFF; 112 padding: 1em; 113 font-size: 0.9rem; 114 text-align: center; 115 display: flex; 116 flex-direction: column; 117 } 118 .card .buttons { 119 margin-top:auto; 120 } 121 .card p { 122 text-align: left; 123 line-height: 1.2em; 124 } 125 .card h2 { 126 margin: 5px 0; 127 text-decoration: underline; 128 } 129 .card:hover { 130 box-shadow: 0 6px 10px 0 rgba(16,123,76,0.5); 131 } 132 .button { 133 border-radius: 5px; 134 border: 2px outset #000000; 135 color: #000000; 136 background-color: white; 137 padding: 8px 16px; 138 text-align: center; 139 text-decoration: none; 140 display: inline-block; 141 margin: 4px 2px; 142 transition-duration: 0.2s; 143 } 144 .button:hover, .button:visited:hover { 145 background-color: #0E904C; 146 color: #FFFFFF; 147 cursor: crosshair; 148 } 149 .button:focus { 150 border-style: inset; 151 } 152 .button:visited { 153 color: #000000; 154 } 155 /* END SERVICE CARDS */ 156 157 pre { 158 line-height: initial; 159 font-size: 140%; 160 } 161 162 @media only screen and (max-width: 900px) { 163 header, main { 164 max-width: 90%; 165 } 166 .title { 167 display: block; 168 margin: 0px auto 0.5em auto; 169 text-align: center; 170 float: none; 171 } 172 nav { 173 float: right; 174 position: relative; 175 left: -50%; 176 text-align: left; 177 } 178 nav ul { 179 position: relative; 180 left: 50%; 181 } 182 .card { 183 width: 40% 184 } 185 } 186 187 @media only screen and (max-width: 490px) { 188 .card { 189 width: 100%; 190 } 191 } 192 193 @media only screen and (max-width: 360px) { 194 nav li { 195 float: none; 196 } 197 main { 198 margin: 6em auto; 199 } 200 }