feat: components (buttons, inputfields, dropdowns, quotes / codes)

9 files changed, 437 insertions, 0 deletions

diff --git a/CSS/button.css b/CSS/button.css
new file mode 100644
index 0000000..b0833f6
--- /dev/null
+++ b/CSS/button.css
@@ -0,0 +1,65 @@
+/* Button style */
+
+/* Default button */
+a.button, button.button
+{
+    padding: 0.1rem 1rem;
+    margin: 0rem 0.3rem;
+
+	border: none;
+	cursor: pointer;
+
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+	font-weight: bold;
+
+    background-color: var(--link-bg-color);
+    color: var(--link-color); 
+	border: 1px solid var(--link-bg-color);
+}
+
+a.button:hover, button.button:hover
+{ 
+    color: var(--link-bg-color);
+    background-color: var(--link-color);
+}
+
+/* Reversed button */
+a.button-reversed, button.button-reversed
+{
+    padding: 0.1rem 1rem;
+    margin: 0rem 0.3rem;
+
+	border: none;
+	cursor: pointer;
+
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+	font-weight: bold;
+
+    background-color: var(--link-color);
+    color: var(--link-bg-color); 
+    border: 1px solid var(--link-color);
+}
+
+a.button-reversed:hover, button.button-reversed:hover
+{ 
+    color: var(--link-color);
+    background-color: var(--link-bg-color);
+}
+
+/* Button disabled */
+button:disabled, button[disabled]
+{
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* Link */
+a.link 
+{
+	color: var(--link-bg-color);
+	text-decoration: underline;
+}
diff --git a/CSS/default.css b/CSS/default.css
new file mode 100644
index 0000000..3253f7c
--- /dev/null
+++ b/CSS/default.css
@@ -0,0 +1,84 @@
+/* Default css, here is defined all colors, night / light mode colors
+
+/* Root */
+:root 
+{
+
+    /* Dark mode */
+    --dark-bg: #191919;
+    --dark-text: #BBBBBB;
+    --dark-link: #191919;
+    --dark-link-bg: #f08080;
+    --dark-title: #f08080;
+	--dark-quote-border: #fbc4ab; /* Quotebar color */
+	--dark-quote-bg: #3D3D3D;
+
+    /* Light mode */
+    --light-bg: #ffdab9;
+    --light-text: #191919;
+    --light-link: #191919;
+    --light-link-bg: #DE6E7C;
+    --light-title: #DE6E7C;
+	--light-quote-border: #6a040f; /* Quotebar color */
+	--light-quote-bg: #F9AD8A;
+
+    /* Default (will automatically be crushed by light/dark mode detection )*/
+    --bg-color: var(--dark-bg);
+    --text-color: var(--dark-text);
+    --link-color: var(--dark-link);
+    --link-bg-color: var(--dark-link-bg);
+	--title-color: var(--dark-title);
+    --quote-border: var(--dark-quote-border);
+	--quote-bg: var(--dark-quote-bg);
+}
+
+/* Body */
+body
+{
+	/* Reponsive font size */
+	font-size: calc(10px + 0.390625vw);
+	font-family: 'Courier New', monospace;
+	font-weight: normal;
+
+    background-color: var(--bg-color);
+    color: var(--text-color);
+
+    margin: 2vh auto;
+    max-width: 80vw;
+}
+
+h1, h2, h3, h4, h5, h6 
+{
+    color: var(--title-color);
+}
+
+/* Night mode */
+@media (prefers-color-scheme: dark) 
+{
+    :root 
+    {
+	--bg-color: var(--dark-bg);
+    --text-color: var(--dark-text);
+    --link-color: var(--dark-link);
+    --link-bg-color: var(--dark-link-bg);
+    --title-color: var(--dark-title);
+    --quote-border: var(--dark-quote-border);
+	--quote-bg: var(--dark-quote-bg);
+    }
+}
+
+/* Day mode */
+@media (prefers-color-scheme: light)
+{
+    :root
+    {
+	--bg-color: var(--light-bg);
+    --text-color: var(--light-text);
+    --link-color: var(--light-link);
+    --link-bg-color: var(--light-link-bg);
+    --title-color: var(--light-title);
+    --quote-border: var(--light-quote-border);
+	--quote-bg: var(--light-quote-bg);
+    }
+}
+
diff --git a/CSS/dropdown.css b/CSS/dropdown.css
new file mode 100644
index 0000000..b8288d6
--- /dev/null
+++ b/CSS/dropdown.css
@@ -0,0 +1,12 @@
+/* Dropdown style */
+
+select
+{
+	padding: 0.1rem 1rem;
+	margin: 0rem 0.3rem;
+
+	cursor: pointer;
+	background-color: var(--bg-color);
+	color: var(--title-color);
+	border: 2px solid var(--title-color);
+}
diff --git a/CSS/inputfield.css b/CSS/inputfield.css
new file mode 100644
index 0000000..4f01ad5
--- /dev/null
+++ b/CSS/inputfield.css
@@ -0,0 +1,57 @@
+/* Inputfield style */
+
+input[type=text], input[type=password], input[type=number], input[type=email], input[type=month], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week], textarea
+{
+	padding: 0.1rem 1rem;
+	margin: 0rem 0.3rem;
+
+	box-sizing: border-box;
+	
+	background-color: var(--bg-color);
+	color: var(--text-color);
+	border: 2px solid var(--title-color);
+}
+
+input[type=button], input[type=submit], input[type=reset], input[type=date], input[type=file], input[type=datetime-local], input[type=image]
+{
+    padding: 0.1rem 1rem;
+    margin: 0rem 0.3rem;
+
+	cursor: pointer;
+
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+	font-weight: bold;
+
+    background-color: var(--link-bg-color);
+    color: var(--link-color); 
+	border: 1px solid var(--link-bg-color);
+}
+
+input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=date]:hover, input[type=datetime-local]:hover
+
+{ 
+    color: var(--link-bg-color);
+    background-color: var(--link-color);
+}
+
+input[type="file"]::file-selector-button
+{ 
+	text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+	font-weight: bold;
+
+    color: var(--link-bg-color);
+    background-color: var(--link-color);
+	border: 1px solid var(--link-color);
+}
+
+input[type=color]
+{
+	cursor: pointer;
+
+    background-color: var(--link-bg-color);
+	border: 1px solid var(--link-bg-color);
+}
diff --git a/CSS/quote-code.css b/CSS/quote-code.css
new file mode 100644
index 0000000..87cb60e
--- /dev/null
+++ b/CSS/quote-code.css
@@ -0,0 +1,35 @@
+code, pre, blockquote
+{
+	margin: 3vh 0px;
+	padding: 1.5vh 2vw;
+
+	background-color: var(--quote-bg);
+	border-left: 2px solid var(--quote-border);
+}
+
+
+
+blockquote 
+{
+	text-indent: calc(-10px - 0.390625vw);
+	font-style: italic;
+}
+
+@supports ( hanging-punctuation: first) 
+{
+	blockquote
+	{
+		text-indent: 0;
+		hanging-punctuation: first;
+	}
+}
+
+blockquote::before
+{
+	content: open-quote;
+}
+
+blockquote::after
+{
+	content: close-quote;
+}
diff --git a/HTML/buttons.html b/HTML/buttons.html
new file mode 100644
index 0000000..d2aebf9
--- /dev/null
+++ b/HTML/buttons.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="stylesheet" href="../CSS/default.css">
+    <link rel="stylesheet" href="../CSS/button.css">
+
+    <title>Button</title>
+</head>
+<body>
+	<div style="margin: 5px">
+		<a class="button">Default a button</a>
+		<button class="button">Default button</button>
+	</div>
+
+	<div style="margin: 5px">
+		<a class="button-reversed">Reversed a button</a>
+		<button class="button-reversed">Reversed button</button>
+	</div>
+
+	<div style="margin: 5px">
+		<a class="link">Link</a>
+	</div>
+
+	<div style="margin: 5px">
+		<button class="button" disabled>Disabled default button</button>
+		<button class="button-reversed" disabled>Disabled reversed button</button>
+	</div>
+</body>
+</html>
diff --git a/HTML/dropdowns.html b/HTML/dropdowns.html
new file mode 100644
index 0000000..6c921cc
--- /dev/null
+++ b/HTML/dropdowns.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="stylesheet" href="../CSS/default.css">
+    <link rel="stylesheet" href="../CSS/dropdown.css">
+
+    <title>Dropdown</title>
+</head>
+<body>
+	<div style="margin: 5px">
+		<select name="cars" id="cars">
+			<option value="volvo">Volvo</option>
+			<option value="saab">Saab</option>
+			<option value="opel">Opel</option>
+			<option value="audi">Audi</option>
+		</select>
+	</div>
+	
+
+	<div style="margin: 5px">
+		<select name="cars" id="cars">
+			<optgroup label="Swedish Cars">
+				<option value="volvo">Volvo</option>
+				<option value="saab">Saab</option>
+			</optgroup>
+			<optgroup label="German Cars">
+				<option value="mercedes">Mercedes</option>
+				<option value="audi">Audi</option>
+			</optgroup>
+		</select>
+	</div>
+</body>
+</html>
diff --git a/HTML/inputfields.html b/HTML/inputfields.html
new file mode 100644
index 0000000..c2263ae
--- /dev/null
+++ b/HTML/inputfields.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="stylesheet" href="../CSS/default.css">
+    <link rel="stylesheet" href="../CSS/inputfield.css">
+
+    <title>Inputfield</title>
+</head>
+<body>
+	<div style="margin: 5px">
+		<input type="text" id="username">
+	</div>
+
+	<div style="margin: 5px">
+		<input type="checkbox">
+	</div>
+
+	<div style="margin: 5px">
+		<input type="color">
+	</div>
+
+	<div style="margin: 5px">
+		<input type="date">
+	</div>
+
+	<div style="margin: 5px">
+		<input type="file">
+	</div>
+
+	<div style="margin: 5px">
+		<input type="radio">
+	</div>
+
+	<div style="margin: 5px">
+		<input type="range">
+	</div>
+
+	<div style="margin: 5px">
+		<textarea id="text-zone" rows="4" cols="50">
+			Text zone, text area...
+		</textarea>
+	</div>
+
+	<div style="margin: 5px">
+		<input list="browsers" name="browser" id="browser" type="text">
+
+		<datalist id="browsers">
+			<option value="Edge">
+			<option value="Firefox">
+			<option value="Chrome">
+			<option value="Opera">
+			<option value="Safari">
+		</datalist>
+	</div>
+
+	<div style="margin: 5px">
+		<input type="submit" value="Submit">
+	</div>
+</body>
+</html>
diff --git a/HTML/quotes-code.html b/HTML/quotes-code.html
new file mode 100644
index 0000000..355f1c9
--- /dev/null
+++ b/HTML/quotes-code.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="stylesheet" href="../CSS/default.css">
+    <link rel="stylesheet" href="../CSS/quote-code.css">
+
+    <title>Quotes and code</title>
+</head>
+<body>
+	<div style="margin: 5px">
+		<code>#include <stdio.h>
+			int main(void) {
+				printf("Hello world !");
+			}
+		</code>
+
+	</div>
+
+	<div style="margin: 5px">
+		 <pre>
+#include <stdio.h>
+
+int main(void) {
+	printf("Hello world !");
+}
+		</pre>
+	</div>
+
+	<div style="margin: 5px">
+		<blockquote cite="http://www.worldwildlife.org/who/index.html">
+			For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
+		</blockquote> 
+	</div>
+
+	<div style="margin: 5px">
+		<details>
+			<summary>Epcot Center</summary>
+			<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
+		</details> 
+	</div>
+</body>
+</html>