chore: split drawing and global
This commit is contained in:
Kazhnuz
parent
70fb39159f
commit
16f777ed2a
16 changed files with 332 additions and 317 deletions
|
|
@ -6,66 +6,8 @@
|
|||
*/
|
||||
|
||||
@import 'components/buttons';
|
||||
|
||||
@import 'components/navbars';
|
||||
@import 'components/pagination';
|
||||
@import 'components/cards';
|
||||
|
||||
@import 'components/tables';
|
||||
|
||||
@import 'components/previews';
|
||||
|
||||
strong.btn-fake {
|
||||
@include button($button_large);
|
||||
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
|
||||
}
|
||||
|
||||
a.article-nav-link-wrap {
|
||||
@include button($button_large);
|
||||
padding-left: $button_large;
|
||||
padding-right: $button_large;
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-color($color-info);
|
||||
}
|
||||
|
||||
.pigimg {
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
nav.pagination {
|
||||
padding-bottom:1.5rem;
|
||||
.nav-links {
|
||||
text-align: center;
|
||||
width:100%;
|
||||
}
|
||||
.page-numbers, .next, .prev {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-font-light);
|
||||
|
||||
&.current {
|
||||
@include button-color($color-info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-select {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
input, textarea {
|
||||
width:100%;
|
||||
background-color:$color-background;
|
||||
border-radius:0px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding:0.375rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,258 +1,12 @@
|
|||
/* --- 03. GLOBAL STYLING --- */
|
||||
/* 4 - Custom styling
|
||||
* Styles that are custom to this particular theme
|
||||
**/
|
||||
|
||||
$color-footer-back: get-color("dark2");
|
||||
$color-header-back: get-color("skyblue");
|
||||
|
||||
/*
|
||||
* Les styles "globaux" touchant toute la page.
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: 1600px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
/* ------------------ HEADERS ------------------- */
|
||||
|
||||
#page-header {
|
||||
background: $color-header-back url('img/background.png') center bottom repeat-x;
|
||||
border-top: 6px solid $color-footer-back;
|
||||
padding-top:$lineheight;
|
||||
padding-bottom:3rem;
|
||||
|
||||
.header-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"logo";
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
.navbar-area {
|
||||
grid-area: nav;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "logo nav";
|
||||
height:11*$lineheight;
|
||||
padding-bottom:0;
|
||||
.navbar-area {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
height:13*$lineheight;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
color: $color-font-light;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding-bottom:0px;
|
||||
line-height: 1.5em;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top:0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-font-light;
|
||||
a {
|
||||
color: $color-font-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
|
||||
.container-big {
|
||||
@include container-big();
|
||||
}
|
||||
|
||||
.container-blog {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.mainpane {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
.container-preview {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
}
|
||||
|
||||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.container-personnage {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
row-gap: 3rem;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas:
|
||||
"nomp nomp nomp nomp nomp nomp"
|
||||
"info info info info meta meta"
|
||||
"goss goss look look look look"
|
||||
"aime aime aime dete dete dete"
|
||||
"hist hist hist hist hist hist";
|
||||
|
||||
.card {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
.personnage {
|
||||
&-nomp {grid-area: nomp;}
|
||||
&-info {grid-area: info;}
|
||||
&-meta {grid-area: meta;}
|
||||
&-goss {grid-area: goss;}
|
||||
&-look {grid-area: look;}
|
||||
&-aime {grid-area: aime;}
|
||||
&-dete {grid-area: dete;}
|
||||
&-hist {grid-area: hist;}
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
body {
|
||||
// On colorise le background de la page complete de la même
|
||||
// couleur que le fond du footer.
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
|
||||
color: getTextColorFromBackground($color-footer-back);
|
||||
padding-top:1.5rem;
|
||||
font-size: 0.85rem!important;
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
.footer-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
&:hover, &:active, &:visited {
|
||||
color: getTextColorFromBackground($color-footer-back);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* social media */
|
||||
|
||||
ul.social {
|
||||
font-size:1.5em;
|
||||
padding-bottom:1.5em;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
li {
|
||||
margin:0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
a, a:visited {
|
||||
color: $color-footer-back;
|
||||
background-color: getTextColorFromBackground($color-footer-back);
|
||||
padding:0.3em;
|
||||
padding-left:0.36em;
|
||||
padding-right:0.36em;
|
||||
vertical-align:middle;
|
||||
border-radius:100%;
|
||||
&:hover {
|
||||
color:getTextColorFromBackground($color-footer-back);
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import 'custom/header';
|
||||
@import 'custom/footer';
|
||||
@import 'custom/blog';
|
||||
@import 'custom/personnage';
|
||||
@import 'custom/previews';
|
||||
|
|
|
|||
|
|
@ -220,3 +220,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
&-diaspora {@include button-color(#313739);}
|
||||
&-mastodon {@include button-color(#282c37);}
|
||||
}
|
||||
|
||||
strong.btn-fake {
|
||||
@include button($button_large);
|
||||
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
|
||||
}
|
||||
|
|
|
|||
11
src/scss/components/_input.scss
Normal file
11
src/scss/components/_input.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.input-group {
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
input, textarea {
|
||||
width:100%;
|
||||
background-color:$color-background;
|
||||
border-radius:0px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding:0.375rem;
|
||||
}
|
||||
}
|
||||
10
src/scss/components/_navbars.scss
Normal file
10
src/scss/components/_navbars.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-font-light;
|
||||
a {
|
||||
color: $color-font-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
17
src/scss/components/_pagination.scss
Normal file
17
src/scss/components/_pagination.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
nav.pagination {
|
||||
padding-bottom:1.5rem;
|
||||
.nav-links {
|
||||
text-align: center;
|
||||
width:100%;
|
||||
}
|
||||
.page-numbers, .next, .prev {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-font-light);
|
||||
|
||||
&.current {
|
||||
@include button-color($color-info);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/scss/core/_containers.scss
Normal file
13
src/scss/core/_containers.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
.container-big {
|
||||
@include container-big();
|
||||
}
|
||||
|
||||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
47
src/scss/custom/_blog.scss
Normal file
47
src/scss/custom/_blog.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
/* 4.3 - Blog
|
||||
* The blog related class
|
||||
**/
|
||||
|
||||
/** Layout **/
|
||||
|
||||
.container-blog {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.mainpane {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
/** Navigation **/
|
||||
|
||||
a.article-nav-link-wrap {
|
||||
@include button($button_large);
|
||||
padding-left: $button_large;
|
||||
padding-right: $button_large;
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-color($color-info);
|
||||
}
|
||||
66
src/scss/custom/_footer.scss
Normal file
66
src/scss/custom/_footer.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/* 4.2 - Footer
|
||||
* The page footer
|
||||
**/
|
||||
|
||||
/** Main styling **/
|
||||
|
||||
body {
|
||||
// On colorise le background de la page complete de la même
|
||||
// couleur que le fond du footer.
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
|
||||
color: getTextColorFromBackground($color-footer-back);
|
||||
padding-top:1.5rem;
|
||||
font-size: 0.85rem!important;
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
.footer-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
&:hover, &:active, &:visited {
|
||||
color: getTextColorFromBackground($color-footer-back);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/** Social media buttons **/
|
||||
|
||||
ul.social {
|
||||
font-size:1.5em;
|
||||
padding-bottom:1.5em;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
li {
|
||||
margin:0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
a, a:visited {
|
||||
color: $color-footer-back;
|
||||
background-color: getTextColorFromBackground($color-footer-back);
|
||||
padding:0.3em;
|
||||
padding-left:0.36em;
|
||||
padding-right:0.36em;
|
||||
vertical-align:middle;
|
||||
border-radius:100%;
|
||||
&:hover {
|
||||
color:getTextColorFromBackground($color-footer-back);
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
67
src/scss/custom/_header.scss
Normal file
67
src/scss/custom/_header.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/* 4.1 - Header
|
||||
* The page header
|
||||
**/
|
||||
|
||||
#page-header {
|
||||
background: $color-header-back url('img/background.png') center bottom repeat-x;
|
||||
border-top: 6px solid $color-footer-back;
|
||||
padding-top:$lineheight;
|
||||
padding-bottom:3rem;
|
||||
|
||||
.header-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"logo";
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
.navbar-area {
|
||||
grid-area: nav;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "logo nav";
|
||||
height:11*$lineheight;
|
||||
padding-bottom:0;
|
||||
.navbar-area {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
height:13*$lineheight;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
color: $color-font-light;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding-bottom:0px;
|
||||
line-height: 1.5em;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top:0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
11
src/scss/custom/_other.scss
Normal file
11
src/scss/custom/_other.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* 4.x - Some other stuff
|
||||
* Mix stuff used by Kazhnuz.space
|
||||
**/
|
||||
|
||||
.pigimg {
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
.card-select {
|
||||
width:100%;
|
||||
}
|
||||
38
src/scss/custom/_personnage.scss
Normal file
38
src/scss/custom/_personnage.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/* 4.4 - Personnage
|
||||
* A character sheet style
|
||||
**/
|
||||
|
||||
.container-personnage {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
row-gap: 3rem;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas:
|
||||
"nomp nomp nomp nomp nomp nomp"
|
||||
"info info info info meta meta"
|
||||
"goss goss look look look look"
|
||||
"aime aime aime dete dete dete"
|
||||
"hist hist hist hist hist hist";
|
||||
|
||||
.card {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
.personnage {
|
||||
&-nomp {grid-area: nomp;}
|
||||
&-info {grid-area: info;}
|
||||
&-meta {grid-area: meta;}
|
||||
&-goss {grid-area: goss;}
|
||||
&-look {grid-area: look;}
|
||||
&-aime {grid-area: aime;}
|
||||
&-dete {grid-area: dete;}
|
||||
&-hist {grid-area: hist;}
|
||||
}
|
||||
21
src/scss/custom/_previews.scss
Normal file
21
src/scss/custom/_previews.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/* 4.5 - Previews
|
||||
* Simple content previews
|
||||
**/
|
||||
|
||||
.container-preview {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// BORDERS AND BORDERS RADIUS MIXINS
|
||||
// Border, border radius and margin
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
|
|
@ -13,3 +13,9 @@
|
|||
@mixin border-radius($border-radius) {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,3 +57,10 @@ $screen-xxl-min: 1600px;
|
|||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: 1600px;
|
||||
margin:auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,6 @@
|
|||
|
||||
@import 'utils';
|
||||
|
||||
@import 'global';
|
||||
|
||||
@import 'drawing';
|
||||
|
||||
@import 'global';
|
||||
|
|
|
|||
Loading…
Reference in a new issue