commit b12be077af5883e0a85a3f1210a2ba48bbbe9baa
parent b37740f5a25aa616c8a5f734dabde08288a0b94c
Author: Nathanael Gentry <ngentry1@liberty.edu>
Date: Wed, 19 Jun 2019 21:08:41 -0400
Upgrade to Mac OS 8.1
(sans the internal brushed-metal frame on titlebar)
Diffstat:
4 files changed, 65 insertions(+), 69 deletions(-)
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
# New Dawn
-A framework for presenting a Web interface as a Classic Mac window. The name is a play on After Dark, as [`after-dark-css`](https://github.com/bryanbraun/after-dark-css) inspired this extension and provided the basic System 7.1.1 window layout. We will also support the more sophisticated Mac OS 8.1 window layout.
+A framework for presenting a Web interface using native CSS replications of the Mac OS 8.1 interface components. The project's name is a play on After Dark, as [`after-dark-css`](https://github.com/bryanbraun/after-dark-css) inspired this framework and provided the foundational window layout.
## Acknowledgements
- - `after-dark-css`, for the basic System 7 interface
+ - `after-dark-css`, for the basic System 7.1.1 interface
- [`flyer`](https://www.masswerk.at/flyer/), for further inspiration
- Robin Casady, for releasing ChicagoFLF into the public domain
- - Apple, who maintains the copyright on the background patterns
+ - Apple, who maintains the copyright on the background patterns and interface components
diff --git a/base.css b/base.css
@@ -43,34 +43,30 @@ a {
width: 260px;
margin: 100px auto 0;
border: 1px solid #111;
- background: #fff;
- box-shadow: 1px 1px #111;
+ background: #ccc;
+ box-shadow:
+ 1px 2px #111,
+ inset 1px 1px 0px 0px #fff,
+ inset -1px -1px 0px 0px #999;
+}
+.content .inner {
+ margin: 2px 4px 4px 4px;
+ border: 1px solid #111;
+ background-color: #ddd;
+ box-shadow:
+ -1px -1px 0px 0px #999,
+ 1px 1px 0px 0px #fff,
+ inset 1px 1px 0px 0px #fff,
+ inset -1px -1px 0px 0px #999;
}
.title {
+ width: 100%;
text-align: center;
font-size: inherit;
font-weight: inherit;
padding: 1px 0;
- margin: 1px 0 0 0;
- border-bottom: 1px solid #111;
- background-color: #f0f0f0;
- box-shadow: inset 1px -3px 0px -2px #a8a9b6;
-}
-.title:before {
- height: 11px;
- width: 64px;
- display: inline-block;
- content: "";
- background: url(img/lines.png) repeat;
- margin-right: 8px;
-}
-.title:after {
- height: 11px;
- width: 64px;
- display: inline-block;
- content: "";
- background: url(img/lines.png) repeat;
- margin-left: 8px;
+ background-size: 3px 2px;
+ margin: 0 0 0 0;
}
.content .icon {
text-align: center;
@@ -88,53 +84,50 @@ a {
margin: 2em auto 0;
font-size: 12px;
}
-.closebox {
+.control-box {
position: absolute;
top: 3px;
- left: 10px;
padding: 1px;
- background-color: #d1d2e3;
- border-top: 1px solid #38394a;
- border-left: 1px solid #38394a;
- box-shadow: 0 0 0px 1px #f0f0f0;
+ background-color: #222;
+ box-shadow:
+ inset -1px -1px 0px 0px #fff,
+ inset 1px 1px 0px 0px #888;
}
-.closebox-innr {
+.close-box.control-box {
+ left: 4px;
+}
+.control-box-inner {
display: block;
- height: 8px;
- width: 8px;
- background-color: #a2a5ae;
- border-bottom: 1px solid #38394a;
- border-right: 1px solid #38394a;
+ height: 12px;
+ width: 12px;
+ background-image:
+ linear-gradient(to bottom right, #999, #aaa, #bbb, #ccc, #ddd, #eee, #fff);
+ border: 1px solid #222;
+ box-shadow:
+ inset 1px 1px 0px 0px #ccc,
+ inset -1px -1px 0px 0px #888;
text-indent: -99999em;
}
-.closebox-innr:hover {
- background-color: #ccc;
+.control-box-inner:active {
+ box-shadow: none;
}
-.maxbox {
- position: absolute;
- top: 3px;
- right: 10px;
- padding: 1px;
- background-color: #d1d2e3;
- border-top: 1px solid #38394a;
- border-left: 1px solid #38394a;
- box-shadow: 0 0 0px 1px #f0f0f0;
-}
-.maxbox-innr {
- height: 8px;
- width: 8px;
- background-color: #a2a5ae;
- border-bottom: 1px solid #38394a;
- border-right: 1px solid #38394a;
+.zoom-box.control-box {
+ right: 20px;
}
-.maxbox-innr:before {
- height: 5px;
- width: 5px;
+.zoom-box-inner {
+ height: 6px;
+ width: 7px;
border-bottom: 1px solid #38394a;
border-right: 1px solid #38394a;
- background-color: #a2a4ae;
- display: block;
- content: "";
+}
+.windowshade-box.control-box {
+ right: 4px;
+}
+.windowshade-box-inner {
+ margin-top: 3px;
+ height: 3px;
+ border-top: 1px solid #000;
+ border-bottom: 1px solid #000;
}
.content .command_button,
.content .command_button:active {
diff --git a/img/lines.png b/img/lines.png
Binary files differ.
diff --git a/index.html b/index.html
@@ -2,21 +2,24 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>System 7</title>
+ <title>Mac OS 8.1</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" href="base.css">
</head>
<body>
<noscript><p><em>This page requires JavaScript.</em></p></noscript>
<div id="content" class="content">
- <div class="closebox"><a class="closebox-innr"></a></div>
- <div class="maxbox"><div class="maxbox-innr"></div></div>
+ <div class="control-box close-box"><a class="control-box-inner"></a></div>
+ <div class="control-box zoom-box"><div class="control-box-inner"><div class="zoom-box-inner"></div></div></div>
+ <div class="control-box windowshade-box"><div class="control-box-inner"><div class="windowshade-box-inner"></div></div></div>
<h1 class="title">Unimplemented!</h1>
- <div class="icon"><img src="img/bomb.png" /></div>
- <ul>
- <li><class "s">A system error has occurred. Please reboot your Mac.</li>
- </ul>
- <button class="command_button">Reboot</button>
+ <div class="inner">
+ <div class="icon"><img src="img/bomb.png" /></div>
+ <ul>
+ <li><class "s">A system error has occurred. Please reboot your Mac.</li>
+ </ul>
+ <button class="command_button">Reboot</button>
+ </div>
</div>
</body>
</html>
