Retro Macintosh OS Window

index.html

<div class="flex-grid-center">
			<div class="mac-window">
				<div class="title-bar">
					<div class="bars-container">
						<div class="bar"></div>
						<div class="bar"></div>
						<div class="bar"></div>
						<div class="bar"></div>
						<div class="bar"></div>
						<div class="bar"></div>
					</div>
					<div class="close"><div class="inner"></div></div>
					<div class="title">404 Not Found</div>
				</div>
				<p>This page cannot be found on the server. Check the URL and try again.</p>
			</div>
		</div>

Retro Macintosh OS Window.markdown

Retro Macintosh OS Window

Class Macintosh OS window, for displaying alert messages or other information. The window is fully scalable, and makes use of the flex grid system.

A Pen by Adam Denoon on CodePen.

License.

script.js

// IDEA: Send window.location back to referrer when .close is clicked! (or use it to close the Macintosh OS window itself)

style.css

/* Inspired by Travis Arnold - http://codepen.io/harbingerlabs/pen/pJqNyb */

/* Used https://upload.wikimedia.org/wikipedia/en/5/50/Apple_Macintosh_Desktop.png for reference */

/* Feel free to download 24x24 background image and Chicago.ttf for hosting on your own server */

/* Enjoy! */

@font-face {
    font-family: Chicago;
    src: url('https://dl.dropbox.com/s/ueoh9twyvz4bwkr/ChicagoFLF.ttf?dl=0');
}

*, *:after, *:before {
	box-sizing: border-box;
}

body {
  padding: 10em;
	background: url("http://i62.tinypic.com/2a0mcyf.jpg");
}

.flex-grid-center {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: center;
}

.mac-window {
	background: white;
	color: black;
	border: 1px solid black;
	width: 600px;
	border-radius: 1px;
	box-shadow: 1px 1px 0 black;
	font-family: Chicago;
}

.mac-window .title-bar {
	text-align: center;
	border-bottom: 1px solid black;
	width: 100%;
	position: relative;
}

.mac-window .title-bar .bars-container {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	justify-content: center;
	margin: 3px 1px 2px 1px; 
	position: relative;
}

.mac-window .title-bar .bars-container .bar {
	margin-bottom: 1px;
	border-bottom: 1px solid black;
	width: 100%;
}

.mac-window .title-bar .close {
	width: 13px;
	height: 13px;
	position: absolute;
	top: -1px;
	left: 7px;
	background: white;
	padding: 1px;
	z-index: 2;
}

.mac-window .title-bar .close .inner {
width: 100%;
height: 100%;
border: 1px solid black;
}

.mac-window .title-bar .title {
	display: inline;
	position: absolute;
	top: -3px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	box-sizing: none;
	padding: 0 6px;
	background: white;
	font-size: .8em;
	height: 100%;
	*white-space: nowrap;
	overflow: hidden;
}

.mac-window p {
	padding: 0 10px;
}