pn

the website
git clone https://git.pastanoggin.com/pn.git
Log | Files | Refs | README | LICENSE

main.css (2536B)

      1 :root {
      2 	--color-grey: #222222;
      3 	--text-color: #f9f9f9;
      4 	--color-purple: #8f60af;
      5 	--background-img: url(/static/tile.png);
      6 	--banner-img: url(/static/banner.png);
      7 }
      8 
      9 * {
     10 	cursor: url("/static/cursor.png"), auto;
     11 }
     12 
     13 body {
     14 	min-width: 20rem;
     15 	max-width: 60rem;
     16 	margin: auto;
     17 	padding: 1em;
     18 	color: var(--text-color);
     19 	background-image: var(--background-img);
     20 	display: flex;
     21 	gap: 1em;
     22 	flex-wrap: wrap;
     23 	flex-direction: row-reverse;
     24 }
     25 
     26 header {
     27 	flex-basis: 100%;
     28 	display: flex;
     29 	position: relative;
     30 	justify-content: center;
     31 }
     32 
     33 nav {
     34 	flex-basis: 10%;
     35 	flex-grow: 1;
     36 	display: flex;
     37 	align-items: start;
     38 }
     39 
     40 main {
     41 	flex-basis: 70%;
     42 	flex-grow: 1;
     43 }
     44 
     45 footer {
     46 	flex-basis: 100%;
     47 	display: flex;
     48 	flex-wrap: wrap;
     49 	gap: 0.5em;
     50 }
     51 
     52 a {
     53 	color: lightblue;
     54 }
     55 
     56 .nav-list {
     57 	width: 100%;
     58 	margin: 0;
     59 	padding: 0;
     60 	list-style: none;
     61 	display: flex;
     62 	gap: 1em;
     63 	flex-wrap: wrap;
     64 }
     65 
     66 .nav-item {
     67 	flex-grow: 1;
     68 	flex-shrink: 1;
     69 	flex-basis: 0;
     70 	display: flex;
     71 }
     72 
     73 .box {
     74 	padding: 1em;
     75 	border-style: groove;
     76 	border-width: 0.5em;
     77     background-color: var(--color-grey);
     78 	border-color: var(--color-purple);
     79 }
     80 
     81 .lighten:hover {
     82 	filter: brightness(110%);
     83 }
     84 
     85 .nav-link {
     86 	width: 100%;
     87 	text-align: center;
     88 	align-content: center;
     89 	color: var(--color-grey);
     90     text-decoration: none;
     91 	background: var(--color-purple);
     92 	border-style: outset;
     93 	border-color: var(--color-purple);
     94 	padding: 0.5em;
     95 	font-family: monospace;
     96 	font-weight: bold;
     97 	font-size: 1.5em;
     98 }
     99 
    100 .nav-link:hover {
    101 	filter: brightness(130%);
    102 }
    103 
    104 .buttonbadge {
    105 	width: 88px;
    106 	height: 31px;
    107 	vertical-align: middle;
    108 }
    109 
    110 .codeblock {
    111     white-space: pre-wrap;
    112     word-break: break-all;
    113     background: black;
    114     color: lightgreen;
    115 }
    116 
    117 #banner {
    118 	max-width: 100%;
    119 	object-fit: contain;
    120 	image-rendering: pixelated;
    121 }
    122 
    123 #construction {
    124 	position: absolute;
    125 	bottom: 0;
    126 	right: 0;
    127 	height: auto;
    128 	width: 30%;
    129 	max-width: 125px;
    130 	max-height: 100%;
    131 }
    132 
    133 #status {
    134 	margin: 0;
    135     background-color: #8f60af;
    136     color: var(--color-grey);
    137     border-radius: 1.5em;
    138     padding: 0.5em;
    139     display: flex;
    140     align-items: center;
    141     gap: 1em;
    142     flex-basis: 100%;
    143     border-color: var(--color-grey);
    144     border-width: 0.1em;
    145     border-style: solid;
    146 }
    147 
    148 #status-header {
    149     padding: 0.1em 1em;
    150     background: white;
    151     height: 100%;
    152     border-radius: 1em;
    153     text-align: center;
    154     align-content: center;
    155 }
    156 
    157 #status-body {
    158     margin: 0;
    159     font-size: 1.2em;
    160     color: white;
    161 	word-break: break-word;
    162 }
    163 
    164 @media only screen and (min-width: 800px) {
    165 	ul {
    166 		flex-direction: column;
    167 	}
    168 }