gcg/gcg-website
gcg/gcg-website
1
1
Fork 0
Code Issues 4 Pull Requests Actions Projects 3 Wiki Activity

convert common from sass to css

Browse Source
This commit is contained in:
Denys Konovalov 2023-06-10 22:35:45 +02:00
parent 96f6f10146
commit 074e7a8760
2 changed files with 463 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

463
assets/scss/_common.css Normal file
View File

@ -0,0 +1,463 @@
:root {
--gcg-color-primary: #ffbc3b;
--gcg-color-primary-light: #ffde9c;
--gcg-color-secondary: #1a1a37;
--gcg-color-light-1x: #ededf1;
--gcg-color-light-2x: #f8f9fe;
--gcg-font-primary: "Ubuntu", sans-serif;
--gcg-font-header: "Fira Sans", sans-serif;
--gcg-font-icon: "Material Design Icons";
}
body {
background-color: white;
overflow-x: hidden;
}
::selection {
background: var(--gcg-color-primary-light);
color: var(--bs-tertiary-color);
}
/* preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffbc3b;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
ol,
ul {
list-style-type: none;
margin: 0;
}
img {
vertical-align: middle;
border: 0;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a {
color: inherit;
}
a,
button,
select {
cursor: pointer;
transition: 0.2s ease;
}
a:focus,
button:focus,
select:focus {
outline: 0;
}
a:hover {
color: var(--gcg-color-primary);
}
a.text-primary:hover {
color: var(--gcg-color-primary) !important;
}
h4 {
transition: 0.2s ease;
}
a h4:hover {
color: var(--gcg-color-primary);
}
.slick-slide {
outline: 0;
}
.section {
padding-top: 90px;
padding-bottom: 90px;
}
.section-sm {
padding-top: 40px;
padding-bottom: 40px;
}
.section-title {
margin-bottom: 30px;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.border-primary {
border-color: var(--gcg-color-light-1x) !important;
}
/* overlay */
.overlay {
position: relative;
}
.overlay::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: var(--gcg-color-secondary);
opacity: 0.7;
}
.bg-primary {
background: var(--gcg-color-primary) !important;
}
.bg-secondary {
background: var(--gcg-color-secondary) !important;
}
.text-primary {
color: var(--gcg-color-primary) !important;
}
.text-muted {
color: #b5b5b7 !important;
}
.font-header {
font-family: var(--gcg-font-header);
}
.vertical-align-middle {
vertical-align: middle;
}
.icon-s {
font-size: 28px;
}
.icon-md {
font-size: 36px;
}
.page-title-section {
padding: 200px 0 80px;
}
.list-styled {
padding-left: 25px;
}
.list-styled li {
position: relative;
margin-bottom: 15px;
}
.list-styled li::before {
position: absolute;
content: "";
height: 10px;
width: 10px;
border-radius: 50%;
background: var(--gcg-color-primary);
left: -25px;
top: 5px;
}
textarea.form-control {
height: 200px;
padding: 20px;
}
.post-thumb-sm {
max-width: 100px;
}
/* pagination */
.pagination {
justify-content: center;
}
.pagination .page-item .page-link {
color: var(--bs-secondary-color);
}
.pagination .page-item.active .page-link {
background: var(--gcg-color-primary);
color: white;
border-color: var(--gcg-color-primary);
}
.content * {
margin-bottom: 20px;
}
.content a {
text-decoration: underline;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
margin-bottom: 10px;
}
.content ol {
padding-left: 20px;
list-style-type: decimal;
}
.content ul {
padding-left: 0;
}
.content ul li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
list-style-type: none;
}
.content ul li::before {
position: absolute;
content: "\f0B2A";
font-family: var(--gcg-font-icon);
font-size: 14px;
left: 0;
top: 1px;
color: #ffbc3b;
transition: 0.3s ease;
}
.content img {
max-width: 100%;
}
.content table {
text-align: left;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
table-layout: fixed;
}
.content table th,
td {
padding: 0.75rem;
vertical-align: top;
border: 1px solid #dee2e6;
}
.content table thead {
background: var(--gcg-color-light-1x);
}
.content table tbody {
background: var(--gcg-color-light-2x);
}
.content table tbody td {
text-align: left !important;
}
.content blockquote {
border: 1px solid var(--gcg-color-light-1x);
border-left: 5px solid var(--gcg-color-primary);
padding: 20px;
padding-left: 40px;
background-color: var(--gcg-color-light-2x);
}
.content blockquote p {
color: var(--bs-secondary-color);
font-style: italic !important;
}
.content blockquote * {
margin-bottom: 0 !important;
}
.content pre {
padding: 10px 20px;
background: var(--gcg-color-light-2x);
}
summary {
font-weight: 900;
font-size: 22px;
color: var(--gcg-color-secondary);
}
summary.hover {
color: var(--gcg-color-primary);
}
details[open] {
padding: 0.5em;
padding-bottom: 0;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
@media only screen and (min-width: 768px) {
.termin-tc {
width: 25%;
}
}
/* hero */
.hero-section {
padding: 250px 0 200px;
}
.hs-banner {
padding: 50px 0 200px;
}
.hero-slider .prevArrow,
.hero-slider .nextArrow {
position: absolute;
bottom: -123px;
z-index: 9;
padding: 15px;
color: rgba(white, 0.5);
border: 0;
font-size: 30px;
transition: all linear 0.2s;
background: transparent;
}
.hero-slider .prevArrow:focus,
.hero-slider .nextArrow:focus {
outline: 0;
}
.hero-slider .prevArrow:hover,
.hero-slider .nextArrow:hover {
color: var(--gcg-color-primary);
}
.hero-slider .prevArrow {
right: 60px;
}
.hero-slider .nextArrow {
right: 0;
}
.hero-slider .arrowIcon {
font-size: 40px;
}
.hero-slider .slick-dots {
position: absolute;
left: 0;
bottom: -100px;
padding-left: 0;
}
.hero-slider .slick-dots li {
display: inline-block;
margin: 0 6px;
}
.hero-slider .slick-dots li.slick-active button {
background: var(--gcg-color-primary);
}
.hero-slider .slick-dots li button {
color: transparent;
padding: 0;
overflow: hidden;
height: 10px;
width: 10px;
background: rgba(white, 0.5);
border: 0;
outline: 0;
}
/* /hero */
.top-banner {
padding-top: 160px !important;
}
.pts-banner {
padding: 80px 0 80px;
}
.content-justify {
text-align: justify;
}
.fb-tile-color {
display: flex;
justify-content: center;
align-items: center;
height: 195px;
}
.fb-tile-icon {
font-size: 96px;
}
#wc-canvas {
width: 100%;
height: 600px;
}
.filter-controls li {
cursor: pointer;
transition: 0.1s ease;
}
.filter-controls li.active {
font-weight: 600;
color: var(--gcg-color-primary);
}
.filter-controls li:hover {
color: var(--gcg-color-primary);
}
.tag-list a {
display: block;
padding: 5px 10px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
.tag-list a:hover {
background: var(--gcg-color-primary);
color: white;
}

479
assets/scss/_common.scss
View File

@ -1,479 +0,0 @@
:root {
--gcg-color-primary: #ffbc3b;
--gcg-color-primary-light: #ffde9c;
--gcg-color-secondary: #1a1a37;
--gcg-color-light-1x: #ededf1;
--gcg-color-light-2x: #f8f9fe;
--gcg-font-primary: 'Ubuntu', sans-serif;
--gcg-font-header: 'Fira Sans', sans-serif;
--gcg-font-icon: 'Material Design Icons';
}
body {
background-color: white;
overflow-x: hidden;
}
::selection {
background: var(--gcg-color-primary-light);
color: var(--bs-tertiary-color);
}
/* preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffbC3b;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
ol,
ul {
list-style-type: none;
margin: 0;
}
img {
vertical-align: middle;
border: 0;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a {
color: inherit;
}
a,
button,
select {
cursor: pointer;
transition: .2s ease;
&:focus {
outline: 0;
}
}
a:hover {
color: var(--gcg-color-primary);
}
a.text-primary:hover {
color: var(--gcg-color-primary) !important;
}
h4 {
transition: .2s ease;
}
a h4 {
&:hover {
color: var(--gcg-color-primary);
}
}
.slick-slide {
outline: 0;
}
.section {
padding-top: 90px;
padding-bottom: 90px;
&-sm {
padding-top: 40px;
padding-bottom: 40px;
}
&-title {
margin-bottom: 30px;
}
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.border-primary {
border-color: var(--gcg-color-light-1x) !important;
}
/* overlay */
.overlay {
position: relative;
&::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background: var(--gcg-color-secondary);
opacity: .7;
}
}
.bg-primary {
background: var(--gcg-color-primary) !important;
}
.bg-secondary {
background: var(--gcg-color-secondary) !important;
}
.text-primary {
color: var(--gcg-color-primary) !important;
}
.text-muted {
color: #b5b5b7 !important;
}
.font-header {
font-family: var(--gcg-font-header);
}
.vertical-align-middle {
vertical-align: middle;
}
.icon-s {
font-size: 28px;
}
.icon-md {
font-size: 36px;
}
.page-title-section {
padding: 200px 0 80px;
}
.list-styled {
padding-left: 25px;
li {
position: relative;
margin-bottom: 15px;
&::before {
position: absolute;
content: "";
height: 10px;
width: 10px;
border-radius: 50%;
background: var(--gcg-color-primary);
left: -25px;
top: 5px;
}
}
}
textarea.form-control {
height: 200px;
padding: 20px;
}
.post-thumb-sm {
max-width: 100px;
}
/* pagination */
.pagination {
justify-content: center;
.page-item {
&.active {
.page-link {
background: var(--gcg-color-primary);
color: white;
border-color: var(--gcg-color-primary);
}
}
.page-link {
color: var(--bs-secondary-color);
}
}
}
.content {
* {
margin-bottom: 20px;
}
a {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 10px;
}
ol {
padding-left: 20px;
list-style-type: decimal;
}
ul {
padding-left: 0;
li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
list-style-type: none;
&::before {
position: absolute;
content: "\f0B2A";
font-family: var(--gcg-font-icon);
font-size: 14px;
left: 0;
top: 1px;
color: #ffbc3b;
transition: .3s ease;
}
}
}
img {
max-width: 100%;
}
table {
text-align: left;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
table-layout: fixed;
th,
td {
padding: .75rem;
vertical-align: top;
border: 1px solid #dee2e6
}
thead {
background: var(--gcg-color-light-1x);
}
tbody {
background: var(--gcg-color-light-2x);
td {
text-align: left !important;
}
}
}
blockquote {
border: 1px solid var(--gcg-color-light-1x);
border-left: 5px solid var(--gcg-color-primary);
padding: 20px;
padding-left: 40px;
background-color: var(--gcg-color-light-2x);
p {
color: var(--bs-secondary-color);
font-style: italic !important;
}
* {
margin-bottom: 0 !important;
}
}
pre {
padding: 10px 20px;
background: var(--gcg-color-light-2x);
}
}
summary {
font-weight: 900;
font-size: 22px;
color: var(--gcg-color-secondary);
&.hover {
color: var(--gcg-color-primary);
}
}
details[open] {
padding: .5em;
padding-bottom: 0;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: .5em;
}
@media only screen and (min-width: 768px) {
.termin-tc {
width: 25%;
}
}
/* hero */
.hero-section {
padding: 250px 0 200px;
}
.hs-banner {
padding: 50px 0 200px;
}
.hero-slider {
.prevArrow,
.nextArrow {
position: absolute;
bottom: -123px;
z-index: 9;
padding: 15px;
color: rgba($color: white, $alpha: .5);
border: 0;
font-size: 30px;
transition: all linear .2s;
background: transparent;
&:focus {
outline: 0;
}
&:hover {
color: var(--gcg-color-primary);
}
}
.prevArrow {
right: 60px;
}
.nextArrow {
right: 0;
}
.arrowIcon {
font-size: 40px;
}
.slick-dots {
position: absolute;
left: 0;
bottom: -100px;
padding-left: 0;
li {
display: inline-block;
margin: 0 6px;
&.slick-active {
button {
background: var(--gcg-color-primary);
}
}
button {
color: transparent;
padding: 0;
overflow: hidden;
height: 10px;
width: 10px;
background: rgba($color: white, $alpha: .5);
border: 0;
outline: 0;
}
}
}
}
/* /hero */
.top-banner {
padding-top: 160px !important;
}
.pts-banner {
padding: 80px 0 80px;
}
.content-justify {
text-align: justify;
}
.fb-tile-color {
display: flex;
justify-content: center;
align-items: center;
height: 195px;
}
.fb-tile-icon {
font-size: 96px;
}
#wc-canvas {
width: 100%;
height: 600px;
}
.filter-controls{
li{
cursor: pointer;
transition: .1s ease;
&.active{
font-weight: 600;
color: var(--gcg-color-primary);
}
&:hover{
color: var(--gcg-color-primary);
}
}
}
.tag-list {
a {
display: block;
padding: 5px 10px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
&:hover{
background: var(--gcg-color-primary);
color: white;
}
}
}