jaderune.net

Files for https://jaderune.net
Log | Files | Refs | README | LICENSE

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 }