From 04f10627a9ddd08d58d931487319606574b6b1be Mon Sep 17 00:00:00 2001
From: Hactarus <859868+Hactarus@users.noreply.github.com>
Date: Tue, 14 Mar 2023 00:48:05 +0100
Subject: [PATCH] Feat(css) Split css into files

---
 assets/css/1024_screen.css | 246 +++++++++++++++++++++++++++++++++++++
 assets/css/750_phone.css   | 147 ++++++++++++++++++++++
 assets/css/800_tablet.css  |  76 ++++++++++++
 assets/css/datk_theme.css  |  21 ++++
 assets/css/imports.css     |  26 ++++
 assets/css/light_theme.css |  22 ++++
 index.html                 |  14 ++-
 7 files changed, 550 insertions(+), 2 deletions(-)
 create mode 100644 assets/css/1024_screen.css
 create mode 100644 assets/css/750_phone.css
 create mode 100644 assets/css/800_tablet.css
 create mode 100644 assets/css/datk_theme.css
 create mode 100644 assets/css/imports.css
 create mode 100644 assets/css/light_theme.css

diff --git a/assets/css/1024_screen.css b/assets/css/1024_screen.css
new file mode 100644
index 0000000..a932500
--- /dev/null
+++ b/assets/css/1024_screen.css
@@ -0,0 +1,246 @@
+/*GRID*/
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
+  padding-left: 0;
+  padding-right: 0;
+  gap: 3em 20px;
+}
+
+.grid>* {
+  grid-column: 1/-1;
+}
+
+.grid>figure {
+  margin: 0;
+}
+
+.grid__discu {
+  display: grid;
+  grid-template-columns: 1fr 3fr 3fr 3fr 3fr 1fr;
+  grid-template-rows: 125px repeat(1, 1fr);
+  padding-left: 30px;
+  padding-right: 30px;
+  gap: 3em 20px;
+  margin-top: 2em;
+}
+
+
+.dgrid-start01 {
+  grid-column-start: 1;
+}
+
+.dgrid-start02 {
+  grid-column-start: 2;
+}
+
+.dgrid-start03 {
+  grid-column-start: 3;
+}
+
+.dgrid-start04 {
+  grid-column-start: 4;
+}
+
+.dgrid-start05 {
+  grid-column-start: 5;
+
+}
+
+.dgrid-start06 {
+  grid-column-start: 5;
+
+}
+
+.dgrid-end01 {
+  grid-column-end: 1;
+}
+
+.dgrid-end02 {
+  grid-column-end: 2;
+}
+
+.dgrid-end03 {
+  grid-column-end: 3;
+}
+
+.dgrid-end04 {
+  grid-column-end: 4;
+}
+
+.dgrid-end05 {
+  grid-column-end: 5;
+}
+
+.dgrid-end06 {
+  grid-column-end: 6;
+}
+
+.dgrid-end07 {
+  grid-column-end: 7;
+}
+
+.grid__title {
+  display: grid;
+  grid-template-columns: 1fr;
+  padding-left: 30px;
+  padding-right: 30px;
+  gap: 3em 20px;
+}
+
+.grid--content {
+  gap: 9em 20px;
+}
+
+
+/*HEADER*/
+header {
+  height: 6%;
+}
+
+.header--second {
+  box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
+  border: none;
+}
+
+.list--header,
+.list {
+  gap: 25vh;
+}
+
+/*Natif Heading*/
+.title {
+  margin-right: 0;
+  font-size: 75px;
+}
+
+p {
+  max-width: 43ch;
+  font-size: 21px;
+}
+
+figcaption {
+  font-size: 18px;
+}
+
+.img__content {
+  padding-bottom: 3em;
+}
+
+.content__objet {
+  margin-left: -1em;
+  margin-right: -1rem;
+}
+
+.partie1_blackfill {
+  padding: 2.25em 18px;
+}
+
+/*STRIP*/
+.strip {
+  height: 7em;
+}
+
+.strip--1 {
+  top: 116rem;
+}
+
+.strip--2 {
+  top: 164rem;
+}
+
+/*PHILACTÈRE*/
+.discu__liste {
+  display: inline-flex;
+  gap: 1rem;
+}
+
+.discu__el {
+  display: flex;
+}
+
+.discu__el--pink {
+  padding: 3rem;
+}
+
+.discu__el--green {
+  padding: 3rem;
+}
+
+.discu__el--blue {
+  padding: 3rem;
+}
+
+/*images*/
+.image_undertxt--slide {
+  min-width: 36%;
+  max-width: 77%;
+}
+
+/*footer*/
+footer {
+  display: flex;
+  padding-bottom: 10px;
+  padding-top: 15px;
+  color: var(--color-primary);
+  border-top: solid 3px;
+  justify-content: center;
+}
+
+.DWT {
+  margin-top: -9rem;
+  width: 95px;
+
+  height: 100px;
+  filter: drop-shadow(2px 4px 6px black);
+}
+
+/*list--footer*/
+.footer__liste {
+
+  padding-bottom: 0em;
+}
+
+.strip--3 {
+  display: none;
+}
+
+a:hover {
+  color: #00fa6c;
+  font-weight: 700;
+}
+
+a {
+  color: var(--color-active);
+  text-decoration: none;
+}
+
+.list--header,
+.list {
+  gap: 11vh;
+}
+
+.strip--cash {
+  margin-top: -21em;
+  position: static;
+  margin-left: 34em;
+}
+
+.discu__liste {
+  display: inline-flex;
+  gap: 1rem;
+  margin-bottom: 3rem;
+}
+
+.title--medium {
+  font-size: 28px;
+  text-align: center;
+}
+
+.equipe__liste {
+  display: flex;
+}
+
+.equipe__txt {
+  margin-left: 2rem;
+}
\ No newline at end of file
diff --git a/assets/css/750_phone.css b/assets/css/750_phone.css
new file mode 100644
index 0000000..77dc635
--- /dev/null
+++ b/assets/css/750_phone.css
@@ -0,0 +1,147 @@
+.header__navigation {
+  display: flex;
+  z-index: 3;
+
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
+  padding-left: 0;
+  padding-right: 0;
+  gap: 3em 20px;
+}
+
+.grid>* {
+  grid-column: 1/-1;
+}
+
+.grid>figure {
+  margin: 0;
+}
+
+
+.tgrid-start01 {
+  grid-column-start: 1;
+}
+
+.tgrid-start02 {
+  grid-column-start: 2;
+}
+
+.tgrid-start03 {
+  grid-column-start: 3;
+}
+
+.tgrid-start04 {
+  grid-column-start: 4;
+}
+
+.tgrid-start05 {
+  grid-column-start: 5;
+
+}
+
+.tgrid-start06 {
+  grid-column-start: 5;
+
+}
+
+.tgrid-end01 {
+  grid-column-end: 1;
+}
+
+.tgrid-end02 {
+  grid-column-end: 2;
+}
+
+.tgrid-end03 {
+  grid-column-end: 3;
+}
+
+.tgrid-end04 {
+  grid-column-end: 4;
+}
+
+.tgrid-end05 {
+  grid-column-end: 5;
+}
+
+.tgrid-end06 {
+  grid-column-end: 6;
+}
+
+.tgrid-end07 {
+  grid-column-end: 7;
+}
+
+.title {
+  font-size: 47px;
+  margin-top: 0;
+  text-align: center;
+  font-family: 'moodboardFont';
+  font-weight: 300;
+}
+
+
+.header--second {
+  border: none;
+  box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
+}
+
+p {
+  max-width: 55ch;
+  font-size: 21px;
+}
+
+figcaption {
+  font-size: 19px;
+}
+
+.image_sequence {
+  min-width: 25%;
+}
+
+.image_sequence--m {
+  max-width: 10%;
+}
+
+a {
+  color: #00fa6c;
+}
+
+.strip--cash {
+  max-width: 47%;
+  background-image: url(/assets/images/stripeuro.png);
+  background-size: cover;
+  filter: invert(1);
+  margin-top: -17em;
+  position: static;
+}
+
+.discu__liste {
+  display: inline-flex;
+  gap: 1rem;
+  margin-bottom: 5rem;
+}
+
+.number-nav {
+  font-family: "Queensides";
+}
+
+.js-theme-trigger {
+  width: 6%;
+}
+
+footer {
+  display: flex;
+  padding-bottom: 10px;
+  padding-top: 15px;
+  color: var(--color-primary);
+  border-top: solid 3px;
+  justify-content: center;
+}
+
+.slide {
+  height: 500px;
+}
\ No newline at end of file
diff --git a/assets/css/800_tablet.css b/assets/css/800_tablet.css
new file mode 100644
index 0000000..550ceb3
--- /dev/null
+++ b/assets/css/800_tablet.css
@@ -0,0 +1,76 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
+  padding-left: 0;
+  padding-right: 0;
+  gap: 3em 20px;
+}
+
+.grid>* {
+  grid-column: 1/-1;
+}
+
+.grid>figure {
+  margin: 0;
+}
+
+
+.tgrid-start01 {
+  grid-column-start: 1;
+}
+
+.tgrid-start02 {
+  grid-column-start: 2;
+}
+
+.tgrid-start03 {
+  grid-column-start: 3;
+}
+
+.tgrid-start04 {
+  grid-column-start: 4;
+}
+
+.tgrid-start05 {
+  grid-column-start: 5;
+
+}
+
+.tgrid-start06 {
+  grid-column-start: 5;
+
+}
+
+.tgrid-end01 {
+  grid-column-end: 1;
+}
+
+.tgrid-end02 {
+  grid-column-end: 2;
+}
+
+.tgrid-end03 {
+  grid-column-end: 3;
+}
+
+.tgrid-end04 {
+  grid-column-end: 4;
+}
+
+.tgrid-end05 {
+  grid-column-end: 5;
+}
+
+.tgrid-end06 {
+  grid-column-end: 6;
+}
+
+.tgrid-end07 {
+  grid-column-end: 7;
+}
+
+header {
+  top: 0em;
+  height: 2%;
+  width: 71%;
+}
\ No newline at end of file
diff --git a/assets/css/datk_theme.css b/assets/css/datk_theme.css
new file mode 100644
index 0000000..9213627
--- /dev/null
+++ b/assets/css/datk_theme.css
@@ -0,0 +1,21 @@
+:root {
+    --color-bg-head: #77A3D2;
+    --color-bg-sctn-pink: #EDCCE7;
+    --color-bg-sctn-green: #CDFB52;
+    --color-bg-sctn-blue: #52f8fb;
+    --color-bg-sctn-fuscia: #FF00C7;
+    --color-active: #FF00C7;
+    --color-visited: #4B003B;
+    --color-hover: #EDCCE7;
+    --color-link: #000000;
+    --color-icone: #fff;
+    --color-discu-pink: #FFB4EF;
+    --color-link-f: #00fa6c;
+    --color-link-block: #4B003B;
+    --color-bg: #000000;
+    --color-txt: #ffffff;
+    --color-txt-b: #000000;
+    --color-discu-pink: #4B003B;
+    --color-discu-green: #1C4D00;
+    --color-discu-blue: #00354B;
+}
\ No newline at end of file
diff --git a/assets/css/imports.css b/assets/css/imports.css
new file mode 100644
index 0000000..78a5df6
--- /dev/null
+++ b/assets/css/imports.css
@@ -0,0 +1,26 @@
+@import 'normalize.css';
+
+@font-face {
+  font-family: 'MoodboardFont';
+  font-weight: 400;
+  src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
+    url('../fonts/moodboardfont-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Queensides';
+  font-weight: 400;
+  src: url('../fonts/Queensides-3z7Ey.ttf');
+}
+
+@font-face {
+  font-family: 'QueensidesL';
+  font-weight: 300;
+  src: url('../fonts/QueensidesLight-ZVj3l.ttf');
+}
+
+@font-face {
+  font-family: 'QueensidesM';
+  font-weight: 700;
+  src: url('../fonts/QueensidesMedium-x30zV.ttf');
+}
\ No newline at end of file
diff --git a/assets/css/light_theme.css b/assets/css/light_theme.css
new file mode 100644
index 0000000..39112fa
--- /dev/null
+++ b/assets/css/light_theme.css
@@ -0,0 +1,22 @@
+:root {
+    --color-bg-head: #77A3D2;
+    --color-bg: white;
+    --color-bg-sctn-pink: #EDCCE7;
+    --color-bg-sctn-green: #CDFB52;
+    --color-bg-sctn-blue: #52f8fb;
+    --color-bg-sctn-fuscia: #FF00C7;
+    --color-active: #FF00C7;
+    --color-visited: #4B003B;
+    --color-hover: #EDCCE7;
+    --color-link: #000000;
+    --color-icone: #fff;
+    --color-discu-pink: #FFB4EF;
+    --color-link-f: #00fa6c;
+    --color-link-block: #4B003B;
+    --color-txt: #23f3f3;
+    --color-link: #000000;
+    --color-icone: #000;
+    --color-discu-pink: #FFB4EF;
+    --color-discu-green: #CEFFB2;
+    --color-discu-blue: #B4E9FF;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index cc206fb..7d32647 100644
--- a/index.html
+++ b/index.html
@@ -23,12 +23,22 @@
     <meta property="og:image:height" content="945">
     <link rel="icon" type="image/x-icon" href="assets/images/logodark.svg">
     <title>RUX Pina Vetrano — DWT — Heaj</title>
+
     <!-- CSS and Javascript -->
-    <link rel="stylesheet" href="assets/css/normalize.css">
-    <link rel="stylesheet" href="assets/css/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/normalize.css">
+    <!-- <link rel="stylesheet" href="assets/css/style.css"> -->
+    <link rel="stylesheet" href="assets/css/imports.css">
+    <link rel="stylesheet" href="assets/css/style_hactarus.css">
+    <link rel="stylesheet" media='prefers-color-scheme: dark' href="assets/css/dark_theme.css" />
+    <link rel="stylesheet" media='prefers-color-scheme: light' href="assets/css/light_theme.css" />
+    <!-- 
+    <link rel="stylesheet" media='screen and (min-width: 750px)' href="assets/css/750_phone.css" />
+    <link rel="stylesheet" media='screen and (min-width: 800px)' href="assets/css/800_tablet.css" />
+    <link rel="stylesheet" media='screen and (max-width: 1024px)' href="assets/css/1024_pc.css" /> -->
+
     <script src="assets/js/app.js" defer></script>
 </head>