Initial commit
This commit is contained in:
42
Client/Css/InMemoriam/scss/bootstrap.scss
vendored
Normal file
42
Client/Css/InMemoriam/scss/bootstrap.scss
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
// Custom.scss
|
||||
// Option B: Include parts of Bootstrap
|
||||
|
||||
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||
@import "../../../../node_modules/bootstrap/scss/functions";
|
||||
|
||||
// 2. Include any default variable overrides here
|
||||
// $body-bg: #383E42;
|
||||
// $color-contrast-dark: #fff;
|
||||
// $color-contrast-light: #383E42;
|
||||
// $light: #383E42;
|
||||
// $dark: #fff;
|
||||
|
||||
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
|
||||
@import "../../../../node_modules/bootstrap/scss/variables";
|
||||
@import "../../../../node_modules/bootstrap/scss/variables-dark";
|
||||
|
||||
// 4. Include any default map overrides here
|
||||
|
||||
// 5. Include remainder of required parts
|
||||
@import "../../../../node_modules/bootstrap/scss/maps";
|
||||
@import "../../../../node_modules/bootstrap/scss/mixins";
|
||||
@import "../../../../node_modules/bootstrap/scss/root";
|
||||
|
||||
// 6. Optionally include any other parts as needed
|
||||
@import "../../../../node_modules/bootstrap/scss/utilities";
|
||||
@import "../../../../node_modules/bootstrap/scss/reboot";
|
||||
@import "../../../../node_modules/bootstrap/scss/type";
|
||||
@import "../../../../node_modules/bootstrap/scss/images";
|
||||
@import "../../../../node_modules/bootstrap/scss/containers";
|
||||
@import "../../../../node_modules/bootstrap/scss/grid";
|
||||
@import "../../../../node_modules/bootstrap/scss/helpers";
|
||||
|
||||
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
|
||||
@import "../../../../node_modules/bootstrap/scss/utilities/api";
|
||||
|
||||
// 8. Add additional custom code here
|
||||
[data-bs-theme="dark"] {
|
||||
--bs-body-bg: #383E42;
|
||||
}
|
||||
|
||||
98
Client/Css/InMemoriam/scss/inpictures.scss
Normal file
98
Client/Css/InMemoriam/scss/inpictures.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
.pictures {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 222px);
|
||||
column-gap: 20px;
|
||||
width: 100%;
|
||||
.picture {
|
||||
border: 1px solid #ccc;
|
||||
min-height: 300px;
|
||||
padding: 10px;
|
||||
background-color: rgb(96 139 168 / 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 6px;
|
||||
.buttons {
|
||||
a {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1000;
|
||||
padding: 3vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.top {
|
||||
height: 3em;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.close {
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
}
|
||||
.title {
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
height: 2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.overlay-container {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
grid-template-columns: 70% 30%;
|
||||
.picture {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 3em;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.previous {
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
}
|
||||
.next {
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
Client/Css/InMemoriam/scss/instories.scss
Normal file
29
Client/Css/InMemoriam/scss/instories.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.stories {
|
||||
width: 100%;
|
||||
.story {
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
.date {
|
||||
font-size: 0.8em;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 6px;
|
||||
.buttons {
|
||||
a {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
Client/Css/InMemoriam/scss/messages.scss
Normal file
29
Client/Css/InMemoriam/scss/messages.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.messages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 350px);
|
||||
column-gap: 20px;
|
||||
width: 100%;
|
||||
.message {
|
||||
border: 1px solid #ccc;
|
||||
min-height: 300px;
|
||||
padding: 10px;
|
||||
background-color: rgb(96 139 168 / 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.content {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-style: italic;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
Client/Css/InMemoriam/scss/styles.scss
Normal file
98
Client/Css/InMemoriam/scss/styles.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
@import "./bootstrap";
|
||||
@import "./inpictures.scss";
|
||||
@import "./instories.scss";
|
||||
@import "./messages.scss";
|
||||
|
||||
body {
|
||||
font-family: "Quicksand", serif !important;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
.home-dates {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
h2 {
|
||||
margin-top: auto;
|
||||
font-size: 4em;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#dnn_MenuPane,
|
||||
header > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
}
|
||||
ul.homemenu,
|
||||
ul.mainmenu,
|
||||
ul.rightmenu {
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
li.active {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.rightmenu {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
div.language-object {
|
||||
display: inline;
|
||||
li {
|
||||
a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#loginContainer,
|
||||
#registrationContainer,
|
||||
.doublePane,
|
||||
.triplePane {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#loginContainer {
|
||||
padding-top: 200px;
|
||||
> div {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
#registrationContainer {
|
||||
padding-top: 100px;
|
||||
> div {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
.dnnHelperTip {
|
||||
display: none;
|
||||
}
|
||||
.password-strength-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.dnnFormMessage.dnnFormError {
|
||||
background-color: transparent;
|
||||
color: red;
|
||||
padding: 0;
|
||||
}
|
||||
ul.dnnActions {
|
||||
list-style-type: none;
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
div.defaultContainer {
|
||||
padding: 20px;
|
||||
}
|
||||
36
Client/Css/InMemoriam/webpack.config.js
Normal file
36
Client/Css/InMemoriam/webpack.config.js
Normal file
@@ -0,0 +1,36 @@
|
||||
var path = require("path"),
|
||||
MiniCssExtractPlugin = require("mini-css-extract-plugin"),
|
||||
FileManagerPlugin = require("filemanager-webpack-plugin");
|
||||
|
||||
var outPath = path.resolve(__dirname, "../../../Themes/Skins/InMemoriamSkin");
|
||||
|
||||
var inmemoriamAppConfig = {
|
||||
context: path.join(__dirname, "."),
|
||||
entry: "./scss/styles.scss",
|
||||
output: {
|
||||
path: outPath,
|
||||
filename: "skin.css.js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "skin.css"
|
||||
}),
|
||||
new FileManagerPlugin({
|
||||
events: {
|
||||
onEnd: {
|
||||
delete: [outPath + "/skin.css.js"],
|
||||
},
|
||||
},
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = inmemoriamAppConfig;
|
||||
Reference in New Issue
Block a user