mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-28 22:37:51 +02:00
Feat(css) Split css into files
This commit is contained in:
Hactarus
parent
478befe00a
commit
04f10627a9
7 changed files with 550 additions and 2 deletions
246
assets/css/1024_screen.css
Normal file
246
assets/css/1024_screen.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
147
assets/css/750_phone.css
Normal file
147
assets/css/750_phone.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
76
assets/css/800_tablet.css
Normal file
76
assets/css/800_tablet.css
Normal file
|
|
@ -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%;
|
||||
}
|
||||
21
assets/css/datk_theme.css
Normal file
21
assets/css/datk_theme.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
26
assets/css/imports.css
Normal file
26
assets/css/imports.css
Normal file
|
|
@ -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');
|
||||
}
|
||||
22
assets/css/light_theme.css
Normal file
22
assets/css/light_theme.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
14
index.html
14
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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue