Init commit

1 files changed, 171 insertions, 0 deletions

diff --git a/assets/style/style.css b/assets/style/style.css
new file mode 100644
index 0000000..00a06b3
--- /dev/null
+++ b/assets/style/style.css
@@ -0,0 +1,171 @@
+/* Root */
+:root 
+{
+    /* Dark mode */
+    --dark-bg: #0d0d0d;
+    --dark-text: #ffdab9;
+    --dark-link: black;
+    --dark-link-bg: #f08080;
+    --dark-title: #f08080;
+
+    /* Light mode */
+    --light-bg: #ffdab9;
+    --light-text: #0d0d0d;
+    --light-link: black;
+    --light-link-bg: #f08080;
+    --light-title: #f08080;
+
+    /* Default mode */
+    --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);
+}
+
+
+/* Page default disposition */
+body 
+{
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    border: 1px solid var(--link-bg-color);
+
+    width: 90vw;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* Navbar & Contact */
+#contact 
+{
+    margin-top: 2vh;
+}
+
+nav ul, #contact ul
+{
+    display: flex;
+    justify-content: center;
+}
+
+nav a, #contact a
+{
+    padding: 0.1rem 1rem;
+    margin: 0rem 0.3rem;
+
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    color: var(--link-color);
+    background-color: var(--link-bg-color);
+}
+
+nav a:hover, #contact a:hover
+{
+    color: var(--link-bg-color);
+    background-color: var(--link-color);
+    border: 1px solid var(--link-bg-color);
+}
+
+/* pre */
+pre 
+{
+    color: var(--link-bg-color);
+}
+
+pre:hover 
+{
+    animation: fadePreColor 4s infinite alternate;
+}
+
+@keyframes fadePreColor {
+    0%   {color: var(--lightred);}
+    25%  {color: #ff5a5f;}
+    50%  {color: #c81d25;}
+    100% {color: #370617;}
+}
+
+/* top */
+.top
+{
+    background-color: var(--link-bg-color);
+    color: var(--link-color);
+    font-weight: bold;
+}
+
+.top:after {
+    content: "HTTPS://ARKA.ROCKS"
+}
+
+/* main */
+main
+{
+    margin: 2vw;
+    text-align: left;
+}
+
+main a
+{
+    color: var(--link-bg-color);
+}
+
+/* titles */
+h1, h2, h3, h4 {
+    color: var(--title-color);
+}
+
+h1 {
+    border-bottom: 1px solid var(--title-color);
+}
+
+/* Responsive design */
+@media screen and (max-width: 700px) 
+{
+    body 
+    {
+	font-size: 10px;
+    }
+}
+
+@media screen and (max-width: 500px) 
+{
+    nav ul, #contact ul
+    {
+	flex-direction: column;
+	gap: 0.5rem;
+    }
+}
+
+/* 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);
+    }
+}
+
+/* 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);
+    }
+}