From 157468b84553c47d0f5ba312d815ea7195b0d6b5 Mon Sep 17 00:00:00 2001 From: Oxbian Date: Sun, 13 Oct 2024 14:21:34 -0400 Subject: feat: components (buttons, inputfields, dropdowns, quotes / codes) --- CSS/button.css | 65 +++++++++++++++++++++++++++++++++++++++ CSS/default.css | 84 +++++++++++++++++++++++++++++++++++++++++++++++++++ CSS/dropdown.css | 12 ++++++++ CSS/inputfield.css | 57 ++++++++++++++++++++++++++++++++++ CSS/quote-code.css | 35 +++++++++++++++++++++ HTML/buttons.html | 34 +++++++++++++++++++++ HTML/dropdowns.html | 38 +++++++++++++++++++++++ HTML/inputfields.html | 65 +++++++++++++++++++++++++++++++++++++++ HTML/quotes-code.html | 47 ++++++++++++++++++++++++++++ 9 files changed, 437 insertions(+) create mode 100644 CSS/button.css create mode 100644 CSS/default.css create mode 100644 CSS/dropdown.css create mode 100644 CSS/inputfield.css create mode 100644 CSS/quote-code.css create mode 100644 HTML/buttons.html create mode 100644 HTML/dropdowns.html create mode 100644 HTML/inputfields.html create mode 100644 HTML/quotes-code.html 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 @@ + + + + + + + + + + + + Button + + +
+ Default a button + +
+ +
+ Reversed a button + +
+ +
+ Link +
+ +
+ + +
+ + 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 @@ + + + + + + + + + + + + Dropdown + + +
+ +
+ + +
+ +
+ + 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 @@ + + + + + + + + + + + + Inputfield + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + +
+ +
+ +
+ + 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 @@ + + + + + + + + + + + + Quotes and code + + +
+ #include + int main(void) { + printf("Hello world !"); + } + + +
+ +
+ 
+#include 
+
+int main(void) {
+	printf("Hello world !");
+}
+
+
+ +
+
+ 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. +
+
+ +
+
+ Epcot Center +

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

+
+
+ + -- cgit v1.2.3