Skip to content

Commit

Permalink
More enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@VJAI
VJAI committed Feb 22, 2022
1 parent 73724ec commit 3d2cb0e
Show file tree
Hide file tree
Showing 34 changed files with 851 additions and 520 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
node_modules
*.log*
.DS_Store
dist

62 changes: 0 additions & 62 deletions gulpfile.js
View file

This file was deleted.

10 changes: 4 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"version": "3.0.4",
"description": "A simplistic read-friendly blog template built with golden ratio",
"scripts": {
"start": "webpack-dev-server --config webpack.config.js"
"start": "webpack-dev-server --config webpack.dev.config.js",
"build": "rm -rf dist && webpack"
},
"keywords": [
"template",
Expand All @@ -25,12 +26,9 @@
"devDependencies": {
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.3",
"copy-webpack-plugin": "^10.2.4",
"css-loader": "^6.6.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^5.0.0",
"gulp-webserver": "^0.9.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.5.3",
"sass": "^1.44.0",
"sass-loader": "^12.4.0",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/torn-paper.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/torn-paper1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,8 +219,8 @@ <h1>Lorem ipsum dolor sit amet consectetur</h1>
</figure>

<div class="cmp__toc cmp__responsive">
<div class="cmp__ribbon-container">
<div class="cmp__ribbon">
<div class="cmp__toc-ribbon-container">
<div class="cmp__toc-ribbon">
<div class="cmp__ribbon-content">
Table Of Contents
</div>
Expand Down
132 changes: 86 additions & 46 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,62 +138,102 @@

<!-- Page Title -->
<header class="cmp__article-header cmp__auto-layout">
<div class="cmp__page-title">
<h1 class="cmp__home-heading">
Fibonacci
</h1>
<div class="cmp__page-title cmp__home-heading">
<div class="cmp__home-heading-container">
<span>Fibonacci</span>
<span>being pragmatic...</span>
</div>
<div class="cmp__tear-paper">
<img src="assets/torn-paper1.png" style="width: 500px;" />
</div>
</div>
</header>

<!-- Carousel Component -->
<div class="cmp__carousel">
<div class="cmp__carousel-tabs">
<span>Popular Posts</span>
</div>
<div class="cmp__carousel-page">
<div class="cmp__carousel-post">
<header>
<h4>
<a href="detail.html">Lorem ipsum dolor sit amet consectetur</a>
</h4>
<figure class="cmp__article-poster">
<img src="blog_resources/agriculture-apple-blur.jpeg" alt="Apple" />
</figure>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat.
</p>
<button>Continue</button>
</main>
<main class="cmp__home-main">

<!-- Carousel Component -->
<div class="cmp__carousel cmp__home-layout">
<div class="cmp__carousel-tabs cmp__selected-first">
<a class="cmp__carousel-tab cmp__carousel-tab-selected" href="#">Popular Posts</a>
<a class="cmp__carousel-tab" href="#">Latest Posts</a>
</div>
</div>
</div>

<div class="cmp__responsive-flex">
<div class="cmp__card cmp__quote-card">
<div class="cmp__card-header">
<div class="cmp__card-title">
<h5>Quote Of Day</h5>
<div class="cmp__carousel-pages">
<div class="cmp__carousel-page">
<div class="cmp__carousel-post">
<header>
<figure class="cmp__article-poster">
<img src="blog_resources/agriculture-apple-blur.jpeg" alt="Apple"/>
</figure>
</header>

<main>
<h3>
<a href="detail.html">Lorem ipsum dolor sit amet consectetur</a>
</h3>

<div class="cmp__carousel-post-meta">

<div class="cmp__author-mini">
<a href="about.html">
<img src="blog_resources/triton_mini.png" alt="Author" style="width: 1rem" />
<span>Triton Maxwell</span>
</a>
</div>

<div class="cmp__total-comments">
<a href="#">
<cmp-icon name="chat-square-text"></cmp-icon>
<span>100 Comments</span>
</a>
</div>

<div class="cmp__tags">
<cmp-icon name="tag"></cmp-icon>
<ul>
<li>
<a href="#">#javascript</a>
</li>
<li>
<a href="#">#css</a>
</li>
<li>
<a href="#">#html</a>
</li>
</ul>
</div>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat.
</p>

<button>Continue</button>
</main>
</div>
</div>
</div>
<div class="cmp__card-footer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

<div class="cmp__carousel-nav">
<a href="#">
<cmp-icon size="24" name="arrow-left-circle-fill"></cmp-icon>
</a>
<a href="#">
<cmp-icon size="24" name="arrow-right-circle-fill"></cmp-icon>
</a>
</div>
</div>

<div class="cmp__cartoon">
<figure>
<img src="" />
</figure>
<div class="cmp__carousel-nav-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</main>
</article>
</main>

Expand Down
43 changes: 7 additions & 36 deletions src/scss/base/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,49 +41,20 @@
display: block;

.cmp__card-title {
$card-ribbon-offset-height: 3px;

@include fibMixins.create_banner_ribbon(fibFuncs.size(4), fibVars.$card-title-bg-color);
margin-top: fibVars.$sm-size;
position: relative;
left: calc(-2 * #{$card-ribbon-offset-height});
width: calc(100% + 4 * #{$card-ribbon-offset-height});
overflow: visible;
text-shadow: none;

h5 {
margin: 0;
padding: {
top: fibFuncs.size(-10);
bottom: fibFuncs.size(-10);
left: fibFuncs.size(0);
right: fibFuncs.size(0);
};
font-size: fibVars.$card-title-font-size;
font-family: fibVars.$card-title-font-family;
height: 100%;
@include fibMixins.flex_init($center: true);
font: {
family: fibVars.$card-title-font-family;
size: fibVars.$card-title-font-size;
}
letter-spacing: fibVars.$medium-letter-spacing;
color: fibVars.$card-title-color;
@include fibMixins.noisy_bg(rgba(0, 0, 0, 0.6));
}

&::before, &::after {
display: none;
content: '';
position: absolute;
top: calc(-2 * #{$card-ribbon-offset-height});
height: $card-ribbon-offset-height;

border: solid $card-ribbon-offset-height fibVars.$dark-gray;
border-top-color: transparent;
}

&::before {
left: 0;
border-left-color: transparent;
}

&::after {
right: 0;
border-right-color: transparent;
}
}

Expand Down
Loading

0 comments on commit 3d2cb0e

Please sign in to comment.