Include project styles data

pull/1/head
Nikita Tokarchuk 2 years ago
parent 320d8b0608
commit 0e68a60073
Signed by: mainnika
GPG Key ID: A595FB7E3E56911C
  1. 3
      package.json
  2. 3
      web/index.js
  3. 291
      web/index.scss
  4. 9
      webpack.config.js

@ -11,6 +11,9 @@
"license": "MIT",
"devDependencies": {
"css-loader": "^6.5.1",
"postcss-loader": "^6.2.0",
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
"style-loader": "^3.3.1",
"webpack": "^5.63.0",
"webpack-cli": "^4.9.1",

@ -1 +1,2 @@
import "./font.css"
import "./font.css"
import "./index.scss"

@ -0,0 +1,291 @@
$main-color: #046380;
$text-color: #002F2F;
$background-color: #E6E2AF;
$body-font: "arial", sans-serif;
$body-font-size: 1em;
$body-font-shadow: 0em 0em 0.1em #aaa;
$menu-font: "rockwell", sans-serif;
$menu-font-size: 1.7em;
$menu-background-color: $background-color;
$menu-accent-color: $main-color;
$menu-logo-font-size: 2em;
.scroll-container {
z-index: 0;
height: 64px;
margin-top: auto;
}
.scroll-container a {
left: 50%;
margin-top: -32px;
position: absolute;
}
.scroll-container a span {
position: absolute;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
margin-top: -36px;
border-left: 1px solid $main-color;
border-bottom: 1px solid $main-color;
transform: rotate(-45deg);
animation: scroll-keyframes 1.5s infinite;
box-sizing: border-box;
}
@keyframes scroll-keyframes {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
body, html {
font-size: $body-font-size;
text-shadow: $body-font-shadow;
color: $text-color;
background-color: $background-color;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
}
img {
max-width: 70vw;
height: auto;
}
.kg-card {
max-width: 70vw;
padding: 0.2em;
border-width: 2px;
border-radius: 0.5em;
border-style: solid;
border-color: $main-color;
background-color: $main-color;
}
.kg-card img {
vertical-align: top;
border-radius: 0.2em;
}
.kg-card figcaption {
text-align: center;
color: $background-color;
text-shadow: none;
padding-top: 0.3em;
}
.kg-code-card {
background-color: #333;
}
.kg-code-card pre {
text-shadow: none;
overflow-x: auto;
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}
}
a.external::after {
content: "";
font-size: 0.6em;
vertical-align: text-top;
padding-left: 0.1em;
display: inline-block;
}
.root-container {
padding-bottom: 0.5em;
margin-left: 3em;
margin-right: 3em;
display: flex;
flex-direction: column;
}
.welcome-container {
min-height: 95vh;
}
.blog-container {
background-color: $background-color;
}
.blog-post-head {
margin-bottom: 0;
border-color: $main-color;
border-bottom-style: solid;
border-width: 2px;
}
.blog-post-head h1 {
margin-block-start: 0.43em;
margin-block-end: 0.43em;
font-family: $menu-font;
font-size: 2em;
font-weight: normal;
}
.blog-post-head-image {
text-align: center;
border-color: $main-color;
border-bottom-style: solid;
border-width: 2px;
}
.blog-post-head-image img {
vertical-align: top;
}
.blog-post-head > * {
width: 100%;
text-align: center;
}
.blog-post-tailer > * {
width: 100%;
text-align: center;
margin-top: 0;
margin-bottom: 2em;
}
.blog-post-content {
display: flex;
flex-direction: column;
align-items: center;
}
.blog-post-content > * {
width: 50vw;
}
.blog-post-content > .kg-card {
width: 100%;
}
.pinned-container {
background-color: $background-color;
z-index: 1;
}
.pinned-container .blog-post-content > * {
width: 80vw;
}
.pinned-container .blog-post-head {
display: none;
}
// .pinned-container .blog-post-tailer {
// display: none;
// }
.menu-container {
background-color: $menu-background-color;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-color: $menu-accent-color;
padding-bottom: 0.5em;
z-index: 2;
}
.menu {
display: flex;
justify-content: space-between;
font-family: $menu-font;
font-size: $menu-font-size;
}
.menu > * {
margin: 0;
padding: 0;
}
.menu a {
padding-bottom: 0.15em;
border-color: $main-color;
}
.menu a:link,
.menu a:visited {
color: $text-color;
text-decoration: none;
}
.menu a:hover,
.menu a:active {
color: $text-color;
text-decoration: none;
border-bottom-width: 0.15em;
border-bottom-style: solid;
}
.menu-logo span {
color: $main-color;
font-size: $menu-logo-font-size;
}
.menu-nav {
display: flex;
list-style: none;
}
.menu-nav > li::before {
content: '';
font-size: $menu-logo-font-size;
}
.menu-nav > li {
padding-left: 1.3em;
}
@media all and (max-width: 1024px) {
.root-container {
margin-left: 1.4em;
margin-right: 1.4em;
}
.menu-nav {
flex-direction: column;
align-items: flex-end;
}
.menu-nav > li.menu-nav-li1::before {
display: inline;
}
.menu-nav > li::before {
display: none;
}
}
@media all and (max-width: 512px) {
.root-container {
margin-left: 0.8em;
margin-right: 0.8em;
}
.menu {
flex-direction: column;
}
.menu-nav {
margin-top: 0.3em;
}
.menu-nav > li.menu-nav-li1::before {
display: none;
}
.blog-post-content > * {
width: 90vw;
}
.pinned-container .blog-post-content > * {
width: 90vw;
}
}

@ -15,6 +15,15 @@ module.exports = {
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => require('autoprefixer'),
}
}
}, {
loader: 'sass-loader'
}]
},
],

Loading…
Cancel
Save