mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-23 18:56:29 +02:00
feat: Move to static site
This commit is contained in:
Phuoc Nguyen
29
styles/_common.scss
Normal file
29
styles/_common.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
:root {
|
||||
--container-width: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #e2e8f0;
|
||||
font-family: Space Grotesk, -apple-system, Arial, ui-sans-serif, system-ui;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
width: var(--container-width);
|
||||
}
|
||||
.divider {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.text--primary {
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--container-width: 48rem;
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #333;
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.block-ad {
|
||||
background: #e6e6e6;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
/* Ads */
|
||||
.carbon-img {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
.carbon-text {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.demo__live {
|
||||
height: 32rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.demo__html {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
15
styles/blocks/_card.scss
Normal file
15
styles/blocks/_card.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.card__item {
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card__link {
|
||||
color: #6366f1;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
30
styles/blocks/_category.scss
Normal file
30
styles/blocks/_category.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
:root {
|
||||
--category__name-font-size: 1.5rem;
|
||||
--category__post-num-columns: 1;
|
||||
}
|
||||
.category__name {
|
||||
font-size: var(--category__name-font-size);
|
||||
}
|
||||
.category__posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--category__post-num-columns), 1fr);
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
.category__link {
|
||||
background: #4338ca;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
margin: 1rem auto;
|
||||
width: 12rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--category__name-font-size: 2rem;
|
||||
--category__post-num-columns: 2;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.block-code {
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Source code pro';
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.block-cover {
|
||||
align-items: center;
|
||||
color: var(--color-gray-9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
width: 7rem;
|
||||
}
|
||||
.block-cover__name {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.block-cover {
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.block-cssscan {
|
||||
font-family: -apple-system, system-ui, Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block-cssscan__inner {
|
||||
max-width: 1024px;
|
||||
background: #c2fbd7;
|
||||
border-radius: 1rem;
|
||||
padding: 2.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.block-cssscan__title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.block-cssscan__desc {
|
||||
opacity: 0.8;
|
||||
color: #333;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.block-cssscan__more {
|
||||
margin: 0;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.block-cssscan__image {
|
||||
position: absolute;
|
||||
transform: rotate(-7deg);
|
||||
transition: all 0.3s;
|
||||
top: 14%;
|
||||
right: -37%;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.block-cssscan__inner:hover {
|
||||
.block-cssscan__more {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-cssscan__image {
|
||||
transform: scale(1.1) rotate(-7deg);
|
||||
top: 10%;
|
||||
right: -35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0px) and (max-width: 1010px) {
|
||||
.block-cssscan {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block-cssscan__inner {
|
||||
margin-top: 2em;
|
||||
min-height: 300px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.block-cssscan__image {
|
||||
top: initial;
|
||||
bottom: -14%;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
.block-cssscan__inner:hover .block-cssscan__image {
|
||||
top: initial;
|
||||
bottom: -10%;
|
||||
right: -5%;
|
||||
transform: scale(1.1) rotate(-7deg);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,29 @@
|
||||
.block-follow {
|
||||
background-color: #0465eb;
|
||||
.follow {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
max-width: 20rem;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
&::after {
|
||||
background-image: linear-gradient(45deg, #9333ea, #ea580c);
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
|
||||
/* Absolute position */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
margin: -0.5rem;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.follow__link {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,46 @@
|
||||
/* Footer */
|
||||
.block-footer {
|
||||
border-top: 1px solid #e1e1e1;
|
||||
padding-top: 4rem;
|
||||
:root {
|
||||
--footer-num-columns: 1;
|
||||
}
|
||||
.block-footer__copyright {
|
||||
color: #afafaf;
|
||||
margin: 2rem 0 4rem 0;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--footer-num-columns), 1fr);
|
||||
column-gap: var(--footer-column-gap, 0);
|
||||
font-size: 0.9rem;
|
||||
row-gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.footer__heading {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.footer__list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.footer__item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.footer__link {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer__author {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--footer-num-columns: 3;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--footer-column-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
.block-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
.block-header__inner {
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.block-header__cta {
|
||||
.header__breadcrumb {
|
||||
align-items: center;
|
||||
background-color: var(--mgd-color-primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.header__link {
|
||||
align-items: center;
|
||||
color: #222;
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.header__link--primary {
|
||||
background: #6366f1;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
height: 2rem;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
31
styles/blocks/_hero.scss
Normal file
31
styles/blocks/_hero.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
:root {
|
||||
--hero-margin: 2rem;
|
||||
--hero-width: 100%;
|
||||
--hero__heading-font-size: 2rem;
|
||||
}
|
||||
.hero {
|
||||
margin: var(--hero-margin) auto;
|
||||
text-align: center;
|
||||
width: var(--hero-width);
|
||||
}
|
||||
.hero__heading {
|
||||
font-size: var(--hero__heading-font-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin: 2rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
.hero__button {
|
||||
background: #6366f1;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
padding: 1rem 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--hero-margin: 3rem;
|
||||
--hero-width: 75%;
|
||||
--hero__heading-font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.block-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 64rem;
|
||||
}
|
||||
.block-hero {
|
||||
text-align: center;
|
||||
}
|
||||
.block-hero__heading--secondary {
|
||||
color: #808080;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
41
styles/blocks/_nav.scss
Normal file
41
styles/blocks/_nav.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
:root {
|
||||
--nav-flex-direction: column;
|
||||
--nav__item-margin-bottom: 1rem;
|
||||
--nav__item--next-margin-left: 0;
|
||||
--nav__item--prev-margin-right: 0;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: var(--nav-flex-direction);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav__item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
background: #60a5fa;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
color: #f9fafb;
|
||||
margin-bottom: var(--nav__item-margin-bottom);
|
||||
padding: 0.25rem 1rem;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav__item--next {
|
||||
margin-left: var(--nav__item--next-margin-left);
|
||||
}
|
||||
.nav__item--prev {
|
||||
margin-right: var(--nav__item--prev-margin-right);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--nav-flex-direction: row;
|
||||
--nav__item-margin-bottom: 0;
|
||||
--nav__item--next-margin-left: 1rem;
|
||||
--nav__item--prev-margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
127
styles/blocks/_post.scss
Normal file
127
styles/blocks/_post.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
:root {
|
||||
--post__heading-font-size: 2rem;
|
||||
--post__heading-line-height: 1.25;
|
||||
--post__content-heading-line-height: 1.25;
|
||||
}
|
||||
|
||||
.post {
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
margin: 2rem 0 2rem 0;
|
||||
padding: 2rem 1rem 1rem 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post__heading {
|
||||
color: #6366f1;
|
||||
font-size: var(--post__heading-font-size);
|
||||
font-weight: 700;
|
||||
line-height: var(--post__heading-line-height);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post__content {
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
color: #6366f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
line-height: var(--post__content-heading-line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: var(--post__content-heading-line-height);
|
||||
}
|
||||
|
||||
hr {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-step-counter;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol li {
|
||||
counter-increment: ol-step-counter;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
ol li::before {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 50%;
|
||||
content: counter(ol-step-counter);
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
margin-left: -2rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--post__heading-font-size: 2.5rem;
|
||||
--post__content-heading-line-height: 1.5;
|
||||
}
|
||||
}
|
||||
@@ -1,35 +1,13 @@
|
||||
@import './reset';
|
||||
@import './common';
|
||||
|
||||
// Blocks
|
||||
@import 'blocks/ad';
|
||||
@import 'blocks/browser-frame';
|
||||
@import 'blocks/code';
|
||||
@import 'blocks/cover';
|
||||
@import 'blocks/css-scan';
|
||||
@import 'blocks/follow';
|
||||
@import 'blocks/footer';
|
||||
@import 'blocks/header';
|
||||
@import 'blocks/layout';
|
||||
@import './blocks/card';
|
||||
@import './blocks/category';
|
||||
@import './blocks/hero';
|
||||
@import './blocks/follow';
|
||||
@import './blocks/footer';
|
||||
@import './blocks/header';
|
||||
@import './blocks/nav';
|
||||
@import './blocks/post';
|
||||
|
||||
// Pages
|
||||
@import 'pages/home';
|
||||
|
||||
// Patterns
|
||||
@import 'patterns/concave-corners';
|
||||
@import 'patterns/dropcap';
|
||||
@import 'patterns/dropdown';
|
||||
@import 'patterns/floating-label';
|
||||
@import 'patterns/folder-structure';
|
||||
@import 'patterns/inverted-corners';
|
||||
@import 'patterns/layered-card';
|
||||
@import 'patterns/masonry-grid';
|
||||
@import 'patterns/mega-menu';
|
||||
@import 'patterns/menu';
|
||||
@import 'patterns/nested-dropdowns';
|
||||
@import 'patterns/price-tag';
|
||||
@import 'patterns/radio-button-group';
|
||||
@import 'patterns/star';
|
||||
@import 'patterns/three-dimensions-card';
|
||||
@import 'patterns/tooltip';
|
||||
@import 'patterns/tree-diagram';
|
||||
@import 'patterns/zigzag-timeline';
|
||||
// Themes
|
||||
@import './themes/dracula.scss';
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
.page-home__hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-home__category {
|
||||
background: #fff;
|
||||
color: #808080;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
position: sticky;
|
||||
text-align: center;
|
||||
top: 3rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-home__category::before,
|
||||
.page-home__category::after {
|
||||
align-self: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.page-home__collection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
:root {
|
||||
--concave-corners-background: rgba(0, 0, 0, 0.3);
|
||||
--concave-corners-size: 1rem;
|
||||
}
|
||||
|
||||
.concave-corners {
|
||||
background-color: var(--concave-corners-background);
|
||||
|
||||
/* Used to position the corners */
|
||||
position: relative;
|
||||
|
||||
/* Misc */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.concave-corners__corner {
|
||||
/* Absolute position */
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: var(--concave-corners-size);
|
||||
width: var(--concave-corners-size);
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.concave-corners__corner--tl {
|
||||
/* Position */
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: 0 0 var(--concave-corners-size) 0;
|
||||
}
|
||||
|
||||
.concave-corners__corner--tr {
|
||||
/* Position */
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: 0 0 0 var(--concave-corners-size);
|
||||
}
|
||||
|
||||
.concave-corners__corner--bl {
|
||||
/* Position */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: 0 var(--concave-corners-size) 0 0;
|
||||
}
|
||||
|
||||
.concave-corners__corner--br {
|
||||
/* Position */
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: var(--concave-corners-size) 0 0 0;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.p-drop-cap:first-letter {
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
float: left;
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 0 8px;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
.p-dropdown-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-dropdown:hover .p-dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.p-floating-container label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-floating-container input:not(:placeholder-shown) + label {
|
||||
background: #fff;
|
||||
transform: translate(0, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
:root {
|
||||
--folder-structure-item-height: 1rem;
|
||||
--folder-structure-item-margin-left: 2rem;
|
||||
--folder-structure-item-padding-top: 1rem;
|
||||
}
|
||||
|
||||
.folder-structure ul {
|
||||
/* Reset */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.folder-structure li {
|
||||
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.folder-structure li::before {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.folder-structure li::after {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||
transform: translate(-100%, 0);
|
||||
|
||||
/* Size */
|
||||
width: var(--folder-structure-item-margin-left);
|
||||
}
|
||||
|
||||
/* Remove the border from the last item */
|
||||
.folder-structure li:last-child::before {
|
||||
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
:root {
|
||||
--inverted-corners-background: #52525b;
|
||||
--inverted-corners-size: 2rem;
|
||||
}
|
||||
|
||||
.inverted-corners {
|
||||
background-color: var(--inverted-corners-background);
|
||||
|
||||
/* Used to position the corner */
|
||||
position: relative;
|
||||
|
||||
/* Misc */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inverted-corners::before {
|
||||
content: '';
|
||||
|
||||
/* Absolute position */
|
||||
bottom: calc(-2 * var(--inverted-corners-size));
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: calc(2 * var(--inverted-corners-size));
|
||||
width: var(--inverted-corners-size);
|
||||
|
||||
/* Border */
|
||||
background-color: transparent;
|
||||
border-top-left-radius: var(--inverted-corners-size);
|
||||
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
|
||||
}
|
||||
|
||||
/* Use case */
|
||||
.inverted-corners--speech {
|
||||
/* Border radius */
|
||||
border-bottom-right-radius: var(--inverted-corners-size);
|
||||
border-top-left-radius: var(--inverted-corners-size);
|
||||
border-top-right-radius: var(--inverted-corners-size);
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Misc */
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
.layered-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layered-card::before {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translate(1rem, 1rem);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Display under the main content */
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
.masonry-grid {
|
||||
column-count: 3;
|
||||
column-gap: 1rem;
|
||||
|
||||
/* Misc */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.masonry-grid__item {
|
||||
/* Prevent a column from breaking into multiple columns */
|
||||
break-inside: avoid;
|
||||
|
||||
/* Misc */
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.p-mega-menu-container {
|
||||
position: relative;
|
||||
}
|
||||
.p-mega-menu-content {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
left: 0px;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
.p-mega-menu-trigger:hover .p-mega-menu-content {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.p-menu-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
.p-nested-dropdowns {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li {
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns ul {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
left: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns ul ul {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
:root {
|
||||
--price-tag-background: rgba(0, 0, 0, 0.3);
|
||||
--price-tag-height: 2rem;
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
background: var(--price-tag-background);
|
||||
color: #fff;
|
||||
|
||||
/* Center the price */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Used to position the triangle */
|
||||
position: relative;
|
||||
|
||||
/* Size */
|
||||
height: var(--price-tag-height);
|
||||
|
||||
/* Spacing */
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* The triangle */
|
||||
.price-tag::before {
|
||||
content: '';
|
||||
|
||||
border-color: transparent var(--price-tag-background) transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
|
||||
0rem;
|
||||
|
||||
/* Position */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transform: translate(-100%, 0px);
|
||||
}
|
||||
|
||||
/* The dot */
|
||||
.price-tag::after {
|
||||
content: '';
|
||||
|
||||
/* Make it like a cirle */
|
||||
background: #fff;
|
||||
border-radius: 9999rem;
|
||||
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-0.5rem, -50%);
|
||||
|
||||
/* Size */
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.p-radio-button-group label {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.p-radio-button-group label:last-child {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
.p-rating {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
justify-content: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-rating .p-rating-star:hover,
|
||||
.p-rating .p-rating-star:hover ~ .p-rating-star {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.p-rating .p-rating-star:hover:before,
|
||||
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
|
||||
color: #00449e;
|
||||
content: '\2605';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-rating-star {
|
||||
background-color: transparent;
|
||||
border: transparent;
|
||||
margin: 0 2px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
:root {
|
||||
--three-dimensions-card-left-side-width: 1rem;
|
||||
}
|
||||
|
||||
.three-dimensions-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* The left side */
|
||||
.three-dimensions-card::before {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
top: var(--three-dimensions-card-left-side-width);
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
transform: translate(-100%, 0) skewY(-45deg);
|
||||
transform-origin: left top;
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: var(--three-dimensions-card-left-side-width);
|
||||
}
|
||||
|
||||
/* The bottom side */
|
||||
.three-dimensions-card::after {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
transform: translate(0, 100%) skewX(-45deg);
|
||||
transform-origin: left top;
|
||||
|
||||
/* Size */
|
||||
height: var(--three-dimensions-card-left-side-width);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
.p-tooltip {
|
||||
position: relative;
|
||||
}
|
||||
.p-tooltip:hover .p-tooltip-arrow,
|
||||
.p-tooltip:hover .p-tooltip-content {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.p-tooltip-arrow {
|
||||
border: 8px solid transparent;
|
||||
border-top-color: #00439e;
|
||||
bottom: 100%;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 8px);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.p-tooltip-content {
|
||||
background-color: #00439e;
|
||||
border-radius: 2px;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -8px);
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
.tree-diagram ul {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* Reset */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 1rem 0.5rem 0rem 0.5rem;
|
||||
}
|
||||
|
||||
.tree-diagram ul ul::before {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tree-diagram li {
|
||||
padding: 1rem 0.5rem 0rem 0.5rem;
|
||||
position: relative;
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tree-diagram li::before {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
height: 1rem;
|
||||
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tree-diagram li::after {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tree-diagram li:first-child::before,
|
||||
.tree-diagram li:last-child::after {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
li.tree-diagram__root::before {
|
||||
border-right: none;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
.zigzag-timeline__item {
|
||||
/* Used to position the milestone */
|
||||
position: relative;
|
||||
|
||||
/* Border */
|
||||
border-bottom: 1px solid #71717a;
|
||||
|
||||
/* Take full width */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zigzag-timeline__milestone {
|
||||
/* Absolute position */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/* Circle it */
|
||||
border-radius: 50%;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
|
||||
/* Misc */
|
||||
background: #71717a;
|
||||
}
|
||||
|
||||
/* Styles for even items */
|
||||
.zigzag-timeline__item:nth-child(2n) {
|
||||
border-left: 1px solid #71717a;
|
||||
}
|
||||
.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Styles for odd items */
|
||||
.zigzag-timeline__item:nth-child(2n + 1) {
|
||||
border-right: 1px solid #71717a;
|
||||
}
|
||||
.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
124
styles/themes/_dracula.scss
Normal file
124
styles/themes/_dracula.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
// https://github.com/PrismJS/prism-themes/blob/master/themes/prism-dracula.css
|
||||
|
||||
/**
|
||||
* Dracula Theme originally by Zeno Rocha [@zenorocha]
|
||||
* https://draculatheme.com/
|
||||
*
|
||||
* Ported for PrismJS by Albert Vallverdu [@byverdu]
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #282a36;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #ff79c6;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
Reference in New Issue
Block a user