all repos — site @ 7072ae0cd847b528fb52143a363eb0e714d0507b

source for my site, found at icyphox.sh

static/style.css (view raw)

  1html,
  2body {
  3	background: #021012;
  4}
  5
  6a {
  7	color: #00ffff;
  8	display: inline-block;
  9	/* margin: 0 20px; */
 10	position: relative;
 11	text-decoration: none;
 12}
 13
 14a:after {
 15	content: "";
 16	height: 1px;
 17	background: white;
 18	position: absolute;
 19	pointer-events: none;
 20	bottom: -5px;
 21	left: 0;
 22	right: 0;
 23	opacity: 0;
 24	transform: scale(0, 1);
 25	transition: all 200ms;
 26}
 27
 28a:hover:after {
 29	opacity: 1;
 30	transform: scale(1, 1);
 31}
 32
 33code {
 34	background: #222;
 35	padding: 5px;
 36}
 37
 38.container {
 39	position: absolute;
 40	/* overflow: hidden; */
 41	top: 0;
 42	bottom: 0;
 43	left: 0;
 44	right: 0;
 45	color: white;
 46	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 47
 48	-webkit-animation: fadein 3s;
 49	   -moz-animation: fadein 3s;
 50	    -ms-animation: fadein 3s;
 51	     -o-animation: fadein 3s;
 52	        animation: fadein 3s;
 53}
 54
 55@keyframes fadein {
 56	from { opacity: 0; }
 57	to   { opacity: 1; }
 58}
 59
 60@-moz-keyframes fadein {
 61	from { opacity: 0; }
 62	to   { opacity: 1; }
 63}
 64
 65@-webkit-keyframes fadein {
 66	from { opacity: 0; }
 67	to   { opacity: 1; }
 68}
 69
 70.introduction {
 71	position: absolute;
 72	top: 50%;
 73	transform: translateY(-50%);
 74	width: 100%;
 75}
 76
 77.content {
 78	position: absolute;
 79	left: 25%;
 80	width: 50%;
 81}
 82
 83.logo {
 84	width: 250px;
 85}
 86
 87.footer {
 88	color: #666;
 89	bottom: 20px;
 90	font-size: 14px;
 91	position: absolute;
 92	width: 100%;
 93	text-align: center;
 94	margin-bottom: 20px;
 95}
 96
 97.footer a {
 98	color: #666;
 99	margin: 0;
100	transition: all 200ms;
101}
102
103.footer a:hover {
104	color: white;
105}
106
107.header {
108	color: #666;
109	top: 20px;
110	font-size: 14px;
111	position: absolute;
112	width: 100%;
113	text-align: center;
114	margin-top: 20px;
115}
116
117.header a {
118	color: #666;
119	margin: 0;
120	transition: all 200ms;
121}
122
123.header a:hover {
124	color: white;
125}
126
127.left {
128	display: inline-block;
129	margin-bottom: 30px;
130	margin-left: 0;
131	margin-right: 30px;
132}
133
134.right {
135	display: inline-block;
136}
137
138.right a {
139	display: inline-block;
140	margin-right: 30px;
141}
142
143@media only screen and (max-width: 40em) {
144	.left {
145		display: block;
146		margin-right: 0;
147	}
148	.right {
149		display: block;
150	}
151	.right a:last-child {
152		margin-right: 0;
153	}
154	.content {
155		left: 15%;
156		width: 70%;
157	}
158}