mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-10-16 05:37:28 +00:00
Second commit
This commit is contained in:
parent
06c20d9fe1
commit
1004dcb61b
3 changed files with 141 additions and 58 deletions
6
.idea/discord.xml
Normal file
6
.idea/discord.xml
Normal file
|
|
@ -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>
|
||||
148
bluelib.css
148
bluelib.css
|
|
@ -10,22 +10,18 @@
|
|||
--accent: #ffffff;
|
||||
|
||||
/* Panel background */
|
||||
--panel: rgba(160, 204, 255, 0.05); /* It's --foreground, but with 5% alpha */
|
||||
--table: 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 */
|
||||
--panel: rgba(160, 204, 255, 0.02); /* It's --foreground, but with 2% alpha */
|
||||
--border: rgba(160, 204, 255, 0.10); /* It's --foreground, but with 10% 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 {
|
||||
/* Use the accent color for titles */
|
||||
h1, h2, h3, h4, h5, h6, thead,
|
||||
.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 {
|
||||
/* By default h1 are as large as h2, make them larger */
|
||||
font-size: xx-large;
|
||||
h1,
|
||||
.xxl {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
h2,
|
||||
.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;
|
||||
|
||||
/* As it is a "panel" element, apply the panel background */
|
||||
background-color: var(--panel);
|
||||
|
||||
/* Display a little border on the left side */
|
||||
border-left-width: 3px;
|
||||
border-left-width: 2px;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
/* Border width is doubled by browsers */
|
||||
hr,
|
||||
.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 {
|
||||
/* Make the header background a bit lighter */
|
||||
background-color: var(--table);
|
||||
|
||||
/* Render the headers as a title aligned to the left */
|
||||
color: var(--accent);
|
||||
font-family: var(--font-title);
|
||||
font-weight: normal;
|
||||
thead,
|
||||
.table-head {
|
||||
background-color: var(--border);
|
||||
}
|
||||
|
||||
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 {
|
||||
/* Distinguish bold elements by changing their color */
|
||||
b,
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
/* Change the cursor while hovering an abbr */
|
||||
i,
|
||||
.italic {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
.with-title-text {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Asides should be small panels with smaller text inside */
|
||||
aside {
|
||||
margin: 4px 0;
|
||||
padding: 4px;
|
||||
aside,
|
||||
.aside {
|
||||
font-size: smaller;
|
||||
background-color: var(--panel);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
45
index.html
Normal file
45
index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue