diff --git a/README.md b/README.md index e911b49..e414f9e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -# Luna CSS -A recreation of the Windows XP Luna theme in HTML+CSS. An example webpage is provided. +# w9x +A recreation of the Windows 95 theme in HTML+CSS. An example webpage is provided. -![Example webpage screenshot](https://git.colean.cc/threeoh6000/luna/raw/branch/master/ss.png) +[Based off of Luna CSS.](https://git.colean.cc/threeoh6000/luna) + +![Example webpage screenshot](https://git.colean.cc/threeoh6000/w9xcss/raw/branch/master/ss.png) diff --git a/index.html b/index.html index 900c05c..763cc1a 100644 --- a/index.html +++ b/index.html @@ -1,41 +1,26 @@ - Windows XP + Windows 95 -
-
-

Windows XP

-

🗙

-

🗗

-

🗕

-
-
-
- -

|

-

Edit

-

|

-

Preferences

+
+
+
+

Windows 95

+

X

-
-

Hello, world!

-

- Veritatis facilis et odio voluptas recusandae. Dolore alias doloribus aut. Quasi distinctio voluptates sed.

- - Aut autem voluptates eum ut recusandae. Eveniet aut enim voluptas quasi commodi exercitationem dicta. Placeat cupiditate non et reprehenderit perferendis. A tempora exercitationem beatae qui dicta maiores est amet. Sint assumenda rerum sed placeat natus qui odio aut.

- - Dicta ea nihil accusamus. Et sequi quia in ipsam ut quia non. Consequatur ut qui est velit et. Ratione eligendi est nisi a modi atque fugit dolor.

- - Et commodi ratione voluptatum in. Aut fugit omnis suscipit voluptatem voluptates. Illo excepturi officiis quia temporibus suscipit eos. Eligendi ut sunt ut animi assumenda quaerat.

- - Deleniti praesentium saepe et ut magni accusamus ipsum. Omnis delectus velit aut delectus ut ut rerum ipsum. Sequi veniam sapiente fugiat. Aut et minus sunt neque vel. -

+
+
+

Hello, world!

+
+ +
+
diff --git a/mssansserif.ttf b/mssansserif.ttf new file mode 100644 index 0000000..f5a2881 Binary files /dev/null and b/mssansserif.ttf differ diff --git a/ss.png b/ss.png index a31802a..0d12c08 100644 Binary files a/ss.png and b/ss.png differ diff --git a/style.css b/style.css index ba063ab..cbebc49 100644 --- a/style.css +++ b/style.css @@ -1,64 +1,123 @@ @font-face { - font-family: "Trebuchet MS"; - src: url(trebuchet.ttf); + font-family: "W95FA"; + src: url(w95fa.woff); font-display: swap; } @font-face { - font-family: "Tahoma"; - src: url(tahoma.ttf); + font-family: "MS Sans Serif"; + src: url(mssansserif.ttf); font-display: swap; } .container { display: flex; - min-height: 95vh; + min-height: 65vh; margin: 0; flex-direction: column; - background: #0157e8; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - background-image: linear-gradient(to bottom, #2b90ff, #004de3 8.5%); + background: #c0c0c0; + border-top: 2px solid #ffffff; + border-left: 2px solid #ffffff; + border-right: 2px solid #808080; + border-bottom: 2px solid #808080; +} + +.border { + border-top: 2px solid #c0c0c0; + border-left: 2px solid #c0c0c0; + border-bottom: 2px solid #000000; + border-right: 2px solid #000000; + margin-left: 200px; + margin-right: 200px; + margin-top: 15vh; + padding: 0; + justify-content: center; +} + +.border-button { + display: inline; + float: right; + border-top: 2px solid #ffffff; + border-left: 2px solid #ffffff; + border-bottom: 2px solid #000000; + border-right: 2px solid #000000; + margin: 0; + margin-top: 3px; + margin-right: 3px; + margin-bottom: 3px; + padding: 0; +} + +.button-border { + display: inline-block; + border-top: 2px solid #ffffff; + border-left: 2px solid #ffffff; + border-bottom: 2px solid #000000; + border-right: 2px solid #000000; + padding: 0; + margin: 0; +} + +.button-border:active { + border-top: 2px solid #808080; + border-left: 2px solid #808080; + border-bottom: 2px solid #ffffff; + border-right: 2px solid #ffffff; +} + +button { + background-color: #c0c0c0; + border: none; + border-bottom: 1px solid #808080; + border-right: 1px solid #808080; + font-family: "W95FA"; + font-size: 150%; + padding: 0.1em; + padding-left: 0.3em; + padding-right: 0.3em; +} + +button:active { + border: none; + border-left: 2px solid #000; + border-top: 2px solid #000; } body { margin: 1em; - background: url(bliss.jpg); - background-repeat: no-repeat; - background-size: cover; + background: #008080; } .header { padding: 0; margin: 0; margin-top: 5px; - margin-left: 8px; - margin-right: 3px; + margin-left: 2px; + margin-right: 1px; color: #fff; + background: #000080; } .header h1 { - font-family: "Trebuchet MS"; + font-family: "W95FA"; float: left; display: inline; margin: 0; margin-left: 0.15em; - margin-top: 0.2em; + margin-top: 0.35em; + padding: 2px; + padding-bottom: 5px; + font-size: 160%; } .header .header-button { - background: #025af0; - display: inline; - float: right; - margin: 0; - padding: 2px; width: 2em; - margin-right: 0.2em; - border: 2px solid white; + border-bottom: 2px solid #808080; + border-right: 2px solid #808080; text-align: center; - border-radius: 3px; - background-image: linear-gradient(160deg, #90aff9, #025af0 70%); + background: #c0c0c0; + color: #000; } .header .header-button #minimise { @@ -74,9 +133,9 @@ body { } .header .header-button p { - font-family: "Trebuchet MS"; + font-family: "MS Sans Serif"; margin: 0; - font-size: 140%; + font-size: 160%; } .header .header-button img { @@ -86,16 +145,10 @@ body { min-width: 100%; } -#red { - background: #e03802; - background-image: linear-gradient(160deg, #f1ac9a, #e03802 70%); -} - .formarea { display: flex; flex-direction: column; flex: 1; - background: #fff; padding-top: 0; margin: 0.2em; } @@ -104,14 +157,14 @@ body { padding-left: 0.5em; padding-right: 0.5em; margin: 0; - font-family: "Tahoma"; + font-family: "W95FA"; } .ribbon { padding-top: 3px; padding-bottom: 3px; font-size: 110%; - font-family: "Tahoma"; + font-family: "W95FA"; min-width: 1%; max-height: 3.2em; background: #ece9d8; diff --git a/tahoma.ttf b/tahoma.ttf deleted file mode 100644 index 95009c1..0000000 Binary files a/tahoma.ttf and /dev/null differ diff --git a/trebuchet.ttf b/trebuchet.ttf deleted file mode 100644 index b3bd292..0000000 Binary files a/trebuchet.ttf and /dev/null differ diff --git a/w95fa.woff b/w95fa.woff new file mode 100644 index 0000000..433ece2 Binary files /dev/null and b/w95fa.woff differ