ai_ml_operations/preview_sites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added first three mockups

Browse Source
This commit is contained in:
westfarn
2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/ePaint/assets/scss/base/_common.scss
Executable
+275
View File
@@ -0,0 +1,275 @@
/*********************************
/* Common Css Start
*********************************/
.border-none {
border: none !important;
}
.btn-round {
border-radius: 4px !important;
}
.bg-white {
background-color: $white !important;
}
.bg-color {
background: #f0ffff !important;
}
button {
&:hover,
&:focus {
outline: 0px;
}
}
/*********************************
/* Input Apperance Start
*********************************/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
border-radius: 4px;
margin-right: 2px;
-webkit-filter: invert(1);
filter: invert(1);
}
/*********************************
/* Input Apperance End
*********************************/
/*********************************
/* row Custom
*********************************/
.row > * {
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 1);
padding-left: calc(var(--bs-gutter-x) * 1);
margin-top: var(--bs-gutter-y);
}
.column-reverse {
@media screen and (max-width: 768px) {
flex-direction: column-reverse !important;
}
}
@media (min-width: 479px) and (max-width: 575px) {
.col-xs-6 {
flex: 0 0 auto;
width: 50%;
}
}
/*********************************
/* Heading Typography
*********************************/
h1 {
font-family: $default;
font-size: 65px;
line-height: 80px;
font-weight: $bold;
color: $heading;
@include respond(xl) {
font-size: 56px;
line-height: 70px;
}
@include respond(medium) {
font-size: 50px;
line-height: 60px;
}
@include respond(phone) {
font-size: 48px;
// line-height: 45px;
}
@include respond(phone-sm) {
font-size: 36px;
line-height: 45px;
}
@include respond(phone-xm) {
font-size: 32px;
}
}
h2 {
font-family: $default;
font-size: 44px;
line-height: 55px;
// font-size: 48px;
// line-height: 65px;
font-weight: $bold;
color: $heading;
@include respond(tabport) {
font-size: 42px;
line-height: 55px;
}
@include respond(phone-sm) {
font-size: 34px;
line-height: 48px;
}
@include respond(phone-mid) {
font-size: 28px;
line-height: 34px;
}
}
h3 {
font-family: $default;
font-size: 32px;
line-height: 40px;
font-weight: $bold;
color: $heading;
}
h4 {
font-family: $default;
font-size: 24px;
line-height: 28px;
font-weight: $medium;
color: $heading;
}
/*********************************
/* Content Typography
*********************************/
p {
font-family: $inter;
font-size: 16px;
font-weight: $regular;
line-height: 28px;
color: $content;
}
/*********************************
/* Section Tittle Start
*********************************/
.section__title {
margin-bottom: 50px;
max-width: 650px;
.subtitle{
font-family: $default;
font-size: 19px;
font-weight: $semibold;
line-height: 28px;
margin-bottom: 8px;
color: $primary;
text-transform: capitalize;
}
.title{
font-family: $default;
font-size: 44px;
line-height: 55px;
font-weight: $bold;
color: $heading;
margin-bottom: 0;
text-transform: capitalize;
@include respond(tabport) {
font-size: 42px;
line-height: 55px;
}
@include respond(phone-sm) {
font-size: 34px;
line-height: 48px;
}
@include respond(phone-mid) {
font-size: 27px;
line-height: 34px;
}
@include respond(phone-xm) {
br {
display: none;
}
}
}
.desc {
font-family: $inter;
font-size: 16px;
font-weight: $regular;
line-height: 28px;
color: $content;
margin: 20px 0 0;
@include respond(phone-sm) {
margin: 15px 0 0;
}
@include respond(phone-xm) {
font-size: 15px;
}
}
&.text-center {
margin: 0 auto 50px;
text-align: center;
}
&.text-start {
margin-right: auto;
text-align: left;
}
&.text-end {
margin-left: auto;
text-align: right;
}
}
/*********************************
/* Section Tittle End
*********************************/
/*********************************
/* Scroll Up Css Start
*********************************/
.scroll-top {
width: 50px;
height: 50px;
line-height: 50px;
position: fixed;
bottom: -30px;
right: 30px;
font-size: 14px;
border-radius: 50%;
z-index: 99;
color: $white;
text-align: center;
cursor: pointer;
background: $primary;
text-transform: capitalize;
transition: 1s ease;
border: none;
opacity: 0;
}
.scroll-top.open {
bottom: 30px;
opacity: 1;
right: 30px;
}
.scroll-top::after {
position: absolute;
z-index: -1;
content: "";
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 1;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
.scroll-top:hover {
background: $heading;
}
/*********************************
/* Scroll Up Css End
*********************************/
templates/ePaint/assets/scss/base/_functions.scss
Executable
+3
View File
@@ -0,0 +1,3 @@
@function themed($key) {
@return map-get($theme-map, $key);
}
templates/ePaint/assets/scss/base/_mediaQuery.scss
Executable
+69
View File
@@ -0,0 +1,69 @@
/**
* For max-width media query, device width are sets as::after
* xl = 1440
* medium = 1199
* tabland = 991
* tabport = 767
* phone
* phone-sm
* phone-mid
* phone-xm
*/
@mixin respond($device1, $device2: null) {
@if $device2 == null {
@if $device1 == xl {
@media screen and (max-width: 1440px) {
@content;
}
} @else if $device1 == medium {
@media screen and (max-width: 1199px) {
@content;
}
} @else if $device1 == tabland {
@media screen and (max-width: 991px) {
@content;
}
} @else if $device1 == tabport {
@media screen and (max-width: 767px) {
@content;
}
} @else if $device1 == phone {
@media screen and (max-width: 575px) {
@content;
}
} @else if $device1 == phone-sm {
@media screen and (max-width: 479px) {
@content;
}
} @else if $device1==phone-mid {
@media screen and (max-width: 400px) {
@content;
}
} @else if $device1==phone-xm {
@media screen and (max-width: 375px) {
@content;
}
}
} @else if $device1 == null {
@if ($device2 == lg) {
@media screen and (min-width: 1200px) {
@content;
}
} @else if $device2 == tabland {
@media screen and (min-width: 992px) {
@content;
}
}
} @else {
@if $device1 == xl and $device2 == md-xl {
@media (min-width: 1441px) and (max-width: 1600px) {
@content;
}
} @else if $device1 == tabport and $device2 == tabland {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
}
}
}
templates/ePaint/assets/scss/base/_mixins.scss
Executable
+38
View File
@@ -0,0 +1,38 @@
@mixin pseudo($t: 0, $r: 0, $b: 0, $l: 0) {
content: "";
position: absolute;
top: $t;
left: $l;
right: $r;
bottom: $b;
}
@mixin bg-props($s: cover, $p: center top, $r: no-repeat) {
background-size: $s;
background-position: $p;
background-repeat: $r;
}
@mixin bg-overlay($t: 0, $r: 0, $b: 0, $l: 0) {
position: absolute;
content: "";
top: $t;
left: $l;
right: $r;
bottom: $b;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
@mixin flexbox($a: inherit, $jc: space-between) {
align-items: $a;
display: flex;
flex-wrap: wrap;
justify-content: $jc;
}
@mixin transform($t: 50%, $l: 50%) {
position: absolute;
top: $t;
left: $l;
transform: translate(-$t, -$l);
}
templates/ePaint/assets/scss/base/_reset.scss
Executable
+68
View File
@@ -0,0 +1,68 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: transparent;
font-family: $inter;
font-weight: $regular;
font-size: 1.6rem;
line-height: 2.7rem;
}
a {
// transition: all 300ms ease-in-out;
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
outline: 0px;
}
}
button {
&:hover,
&:focus {
outline: 0px;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: $regular;
}
img {
display: block;
width: 100%;
height: auto;
}
ul {
margin: 0;
padding: 0;
list-style: inherit;
}
figure {
margin: 0;
}
section {
display: block;
position: relative;
padding: 120px 0;
width: 100%;
@include respond(tabland) {
overflow: hidden;
}
@include respond(tabport) {
padding: 100px 0;
}
@include respond(phone) {
padding: 60px 0;
}
}
templates/ePaint/assets/scss/base/_themes.scss
Executable
+15
View File
@@ -0,0 +1,15 @@
$themes: (
"light": (
bg-color: #eff1f5,
),
"dark": (
bg-color: #182037,
),
);
/**********
** Uses
@include themify($themes) {
propnname: themed('variable');
}
**/
templates/ePaint/assets/scss/base/_util.scss
Executable
+121
View File
@@ -0,0 +1,121 @@
$devices: xs, sm, md, lg, xl;
$margin_units: mb, mt, ml, mr;
$padding_units: px, py, pb, pt, pl, pr;
$colors: (
1: #fd8b60,
2: #fdb143,
3: #fed747,
4: #aed443,
5: #a0bf60,
);
// Default gutter customizing
@for $i from 1 through 5 {
.gutters-#{$i * 5} {
margin-right: -#{$i * 5}px;
margin-left: -#{$i * 5}px;
> .col,
> [class*="col-"] {
padding-right: #{$i * 5}px;
padding-left: #{$i * 5}px;
}
}
}
// For multi color
// @each $rate, $color in $colors {
// .ratings-#{$rate} {
// &::before {
// background-color: #{$color} !important;
// }
// }
// }
// Dynamic Blur - 100 to 600
// @for $i from 1 through 6 {
// .blur-#{$i * 100} {
// filter: blur($i * 100 + px) !important;
// }
// }
// margins
@each $m in $margin_units {
@for $i from 1 to 21 {
@if (($i * 5) < 10) {
.#{$m}-#{"0" + $i * 5} {
@if ($m == "mt") {
margin-top: #{$i * 5+"px"} !important;
} @else if ($m == "mb") {
margin-bottom: #{$i * 5+"px"} !important;
} @else if ($m == "ml") {
margin-left: #{$i * 5+"px"} !important;
} @else if ($m == "mr") {
margin-right: #{$i * 5+"px"} !important;
}
}
} @else {
.#{$m}-#{$i * 5} {
@if ($m == "mt") {
margin-top: #{$i * 5+"px"} !important;
} @else if ($m == "mb") {
margin-bottom: #{$i * 5+"px"} !important;
} @else if ($m == "ml") {
margin-left: #{$i * 5+"px"} !important;
} @else if ($m == "mr") {
margin-right: #{$i * 5+"px"} !important;
}
}
}
}
}
// paddings
@each $p in $padding_units {
@for $i from 1 to 10 {
@if (($i * 5) < 10) {
.#{$p}-#{"0" + $i * 5} {
@if ($p == "pt") {
padding-top: #{$i * 5+"px"} !important;
} @else if ($p == "pb") {
padding-bottom: #{$i * 5+"px"} !important;
} @else if ($p == "pl") {
padding-left: #{$i * 5+"px"} !important;
} @else if ($p == "pr") {
padding-right: #{$i * 5+"px"} !important;
} @else if ($p == "px") {
padding-left: #{$i * 5+"px"} !important;
padding-right: #{$i * 5+"px"} !important;
} @else if ($p == "py") {
padding-top: #{$i * 5+"px"} !important;
padding-bottom: #{$i * 5+"px"} !important;
}
}
} @else {
.#{$p}-#{$i * 5} {
@if ($p == "pt") {
padding-top: #{$i * 5+"px"} !important;
} @else if ($p == "pb") {
padding-bottom: #{$i * 5+"px"} !important;
} @else if ($p == "pl") {
padding-left: #{$i * 5+"px"} !important;
} @else if ($p == "pr") {
padding-right: #{$i * 5+"px"} !important;
} @else if ($p == "px") {
padding-left: #{$i * 5+"px"} !important;
padding-right: #{$i * 5+"px"} !important;
} @else if ($p == "py") {
padding-top: #{$i * 5+"px"} !important;
padding-bottom: #{$i * 5+"px"} !important;
}
}
}
}
}
// Text font size
@for $i from 10 to 33 {
.text-#{$i} {
font-size: #{$i}px !important;
}
}
templates/ePaint/assets/scss/base/_variables.scss
Executable
+31
View File
@@ -0,0 +1,31 @@
// Font family
$default: "Barlow", sans-serif;
$inter: "Inter", sans-serif;
// Font weight
$light: 300;
$regular: 400;
$medium: 500;
$semibold: 600;
$bold: 700;
$extrabold: 800;
$black: 900;
// Colors
$black: #000000;
$white: #fff;
$primary: #F52A85;
$secondary: #cf292b;
$heading: #172056;
$content: #677a85;
$green: #41914c;
$yellow: #ffd600;
$border: #eaecf0;
$bg: #f7f7f7;
// Border Radius
$radius: 8px;
$shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
// Common transition
$transition: all 300ms ease-in-out;