Second commit

.idea/discord.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT_FILES" />
+  </component>
+</project>

bluelib.css

@@ -10,22 +10,18 @@
     --accent: #ffffff;
 
     /* Panel background */
-    --panel: rgba(160, 204, 255, 0.05);  /* It's --foreground, but with 5% alpha */
+    --panel: rgba(160, 204, 255, 0.02);  /* It's --foreground, but with 2% alpha */
-    --table: rgba(160, 204, 255, 0.10);  /* It's --foreground, but with 10% alpha */
+    --border: rgba(160, 204, 255, 0.10);  /* It's --foreground, but with 10% alpha */
-    --border: rgba(160, 204, 255, 0.20);  /* It's --foreground, but with 20% alpha */
 
     /* Link colors */
     --link: #00caca;
     --link-hover: #00ffff;
     --link-active: #a0ffff;
 
-    /* Other colors */
-    --moon: #dccc4f; /* The color of the moon in the server invite background */
-
     /* Fonts */
     --font-text: sans-serif;
     --font-title: serif;
-    --font-code: monospace
+    --font-code: monospace;
 }
 
 * {
@@ -35,113 +31,149 @@
     /* Set the default border color and style on all elements */
     border-color: var(--border);
     border-style: solid;
+    border-width: 0;
 }
 
 body {
+    background-color: var(--background);
+    color: var(--foreground);
     font-family: var(--font-text);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, thead,
-    /* Use the accent color for titles */
+.title {
     color: var(--accent);
 
-    /* Use a non-bold title font */
     font-family: var(--font-title);
     font-weight: normal;
+}
 
-    /* Center titles */
+h1, h2, h3, h4, h5, h6,
+.centered {
     text-align: center;
 }
 
-h1 {
+h1,
-   /* By default h1 are as large as h2, make them larger */
+.xxl {
-   font-size: xx-large;
+    font-size: xx-large;
 }
 
-a {
+h2,
-    color: var(--link);
+.xl {
+    font-size: x-large;
+}
 
-    /* Remove the underline from links */
+h3,
+.l {
+    font-size: large;
+}
+
+h4,
+.m {
+    font-size: medium;
+}
+
+h5,
+.s {
+    font-size: small;
+}
+
+h6,
+.xs {
+    font-size: x-small;
+}
+
+.xxs {
+    font-size: xx-small;
+}
+
+a,
+.link {
+    color: var(--link);
     text-decoration: none;
 }
 
-a:hover {
+a:hover,
+.link:hover {
     color: var(--link-hover);
 }
 
-a:active {
+a:active,
+.link:active {
     color: var(--link-active);
 }
 
-pre, code {
+pre, code,
+.monospace {
     font-family: var(--font-code);
-    font-size: 14px;
 }
 
-blockquote {
+blockquote, aside,
+.panel {
+    padding: 8px;
+    border-radius: 4px;
+    border-width: 2px;
+    background-color: var(--panel);
+}
+
+blockquote,
+.blockquote {
     padding: 4px 4px 4px 8px;
     margin: 8px 0;
-
+    border-left-width: 2px;
-    /* As it is a "panel" element, apply the panel background */
+    border-top-width: 0;
-    background-color: var(--panel);
+    border-bottom-width: 0;
-
+    border-right-width: 0;
-    /* Display a little border on the left side */
-    border-left-width: 3px;
 }
 
-hr {
+hr,
-    /* Border width is doubled by browsers */
+.separator {
     border-width: 1px;
-
-    /* Leave a big margin between the top and the bottom */
     margin-top: 24px;
     margin-bottom: 24px;
 }
 
-table {
+table,
+.table {
     border-spacing: 0;
     border-width: 2px;
     border-collapse: collapse;
 }
 
-thead {
+thead,
-    /* Make the header background a bit lighter */
+.table-head {
-    background-color: var(--table);
+    background-color: var(--border);
-
-    /* Render the headers as a title aligned to the left */
-    color: var(--accent);
-    font-family: var(--font-title);
-    font-weight: normal;
 }
 
-th, td {
+th, td,
+.table-cell {
     padding: 4px;
-
-    /* Border width is doubled by browsers */
     border-width: 1px;
-    /* Make the border of the same color as the header */
-    border-color: var(--table);
 }
 
-li {
+li,
+.list-element {
     margin: 10px 0;
 }
 
-b {
+b,
-    /* Distinguish bold elements by changing their color */
+.bold {
+    font-weight: bold;
     color: var(--accent);
 }
 
-abbr[title] {
+i,
-    /* Change the cursor while hovering an abbr */
+.italic {
+    font-style: italic;
+    color: var(--accent);
+}
+
+abbr[title],
+.with-title-text {
     cursor: help;
 }
 
-/* Asides should be small panels with smaller text inside */
+aside,
-aside {
+.aside {
-    margin: 4px 0;
-    padding: 4px;
     font-size: smaller;
-    background-color: var(--panel);
-    border-radius: 4px;
 }

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="bluelib.css">
+    <title>Bluelib 2</title>
+</head>
+<body>
+    <h1>
+        Bluelib 2
+    </h1>
+    <h2>
+        A new beginning
+    </h2>
+    <h3>
+        With no weird stuff
+    </h3>
+    <h4>
+        Just pure CSS
+    </h4>
+    <h5>
+        It's magic, isn't it?
+    </h5>
+    <h6>
+        yes it is
+    </h6>
+    <div class="panel" title="WOAH">
+        <h2>
+            This.
+        </h2>
+        <h3>
+            Is a panel.
+        </h3>
+        <p>
+            Dear God...
+        </p>
+        <p>
+            But wait, there's more!
+        </p>
+        <p>
+            Noooooooooooo...
+        </p>
+    </div>
+</body>
+</html>