feat: WIP
This commit is contained in:
71
assets/js/main.js
Normal file
71
assets/js/main.js
Normal file
@ -0,0 +1,71 @@
|
||||
'use strict';
|
||||
function reverse(str) { return str.split("").reverse().join(""); }
|
||||
function getName() { return "nomis"; }
|
||||
function getAt() { return "@"; }
|
||||
function getDomain() { return "okew"; }
|
||||
function getDot() { return "."; }
|
||||
function getTld() { return "oi"; }
|
||||
function getAddress() { return reverse(getName()) + getAt() + reverse(getDomain()) + getDot() + reverse(getTld()); }
|
||||
|
||||
function comments(elm) {
|
||||
var link = document.getElementById('comment-add');
|
||||
link.href = "mai" + "lto:" + getAddress() + "?subject=" + link.dataset.title;
|
||||
elm.remove();
|
||||
}
|
||||
|
||||
function contact() {
|
||||
var link = document.getElementById('contact');
|
||||
link.href = "mai" + "lto:" + getAddress();
|
||||
}
|
||||
|
||||
// function menu() {
|
||||
// var button = document.getElementById('menu-button'),
|
||||
// menu = document.getElementById('menu');
|
||||
//
|
||||
// button.onclick = function () {
|
||||
// if (document.body.classList.contains('menu-open')) {
|
||||
// document.body.classList.remove('menu-open');
|
||||
// } else {
|
||||
// window.scroll({ top: 0, left: 0 });
|
||||
// document.body.classList.add('menu-open');
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
|
||||
function changeTheme() {
|
||||
// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#using-javascript-local-storage
|
||||
const btn = document.querySelector(".btn-toggle");
|
||||
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
const currentTheme = localStorage.getItem("theme");
|
||||
|
||||
if (currentTheme == "dark") {
|
||||
document.body.classList.toggle("dark-theme");
|
||||
} else if (currentTheme == "light") {
|
||||
document.body.classList.toggle("light-theme");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
if (prefersDarkScheme.matches) {
|
||||
document.body.classList.toggle("light-theme");
|
||||
var theme = document.body.classList.contains("light-theme")
|
||||
? "light"
|
||||
: "dark";
|
||||
} else {
|
||||
document.body.classList.toggle("dark-theme");
|
||||
var theme = document.body.classList.contains("dark-theme")
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
|
||||
localStorage.setItem("theme", theme);
|
||||
});
|
||||
}
|
||||
|
||||
function main() {
|
||||
// menu();
|
||||
contact();
|
||||
changeTheme();
|
||||
}
|
||||
|
||||
main();
|
||||
85
assets/styles/basic/html.sass
Normal file
85
assets/styles/basic/html.sass
Normal file
@ -0,0 +1,85 @@
|
||||
html
|
||||
/*-webkit-font-smoothing: antialiased*/
|
||||
/*--moz-osx-font-smoothing: grayscale*/
|
||||
scroll-behavior: smooth
|
||||
/* 18px */
|
||||
font-size: 112.5%
|
||||
|
||||
@media screen and (max-width: $size-small)
|
||||
font-size: 100%
|
||||
|
||||
body
|
||||
font-weight: 400
|
||||
line-height: 1.65
|
||||
font-family: var(--font)
|
||||
color: var(--color-paragraph)
|
||||
background-color: var(--color-dark-background)
|
||||
min-height: 100vh
|
||||
|
||||
p
|
||||
margin-bottom: 1.15rem
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5
|
||||
font-weight: 400
|
||||
line-height: 1.15
|
||||
|
||||
h1
|
||||
font-size: 1.802em
|
||||
text-align: center
|
||||
overflow-wrap: anywhere
|
||||
//hyphens: auto
|
||||
|
||||
h2
|
||||
font-size: 1.602em
|
||||
overflow-wrap: anywhere
|
||||
//hyphens: auto
|
||||
|
||||
h3
|
||||
font-size: 1.424em
|
||||
|
||||
h4
|
||||
font-size: 1.266em
|
||||
|
||||
h5
|
||||
font-size: 1.125em
|
||||
|
||||
small,
|
||||
.text_small
|
||||
font-size: 0.889em
|
||||
|
||||
a
|
||||
color: var(--color-text)
|
||||
&:hover, &:active
|
||||
color: var(--color-text-strong)
|
||||
|
||||
h2 + blockquote
|
||||
margin-top: 1rem
|
||||
|
||||
ul.no-style
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
|
||||
blockquote
|
||||
padding: 1rem 1.5rem
|
||||
margin: 2rem 0 3rem
|
||||
width: calc(100% - 1rem)
|
||||
border: solid 2px var(--color-highlight-border)
|
||||
border-radius: var(--radius-corner)
|
||||
box-shadow: 1rem 1rem 0 0 var(--color-highlight-bg)
|
||||
background-color: var(--color-white)
|
||||
overflow-wrap: anywhere
|
||||
hyphens: auto
|
||||
|
||||
@media screen and (max-width: $size-small)
|
||||
margin: 1rem 0 1.5rem
|
||||
padding: .5rem .75rem
|
||||
width: calc(100% - .5rem)
|
||||
box-shadow: .5rem .5rem 0 0 var(--color-highlight-bg)
|
||||
|
||||
ul
|
||||
padding-left: 20px
|
||||
48
assets/styles/basic/reset.scss
Normal file
48
assets/styles/basic/reset.scss
Normal file
@ -0,0 +1,48 @@
|
||||
/*********
|
||||
Reset CSS
|
||||
*********/
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
body,
|
||||
p,
|
||||
ul[class]
|
||||
ol[class],
|
||||
li,
|
||||
figure,
|
||||
figcaption,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
35
assets/styles/font.sass
Normal file
35
assets/styles/font.sass
Normal file
@ -0,0 +1,35 @@
|
||||
@font-face
|
||||
font-family: "blackout-midnight"
|
||||
src: url("/webfonts/blackout/blackout_midnight-webfont2.woff") format("woff")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: "blackout-sunrise"
|
||||
src: url("/webfonts/blackout/blackout_sunrise-webfont.woff") format("woff")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: "blackout-two-am"
|
||||
src: url("/webfonts/blackout/blackout_two_am-webfont.woff") format("woff")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: "prociono"
|
||||
src: url("/webfonts/prociono/Prociono-Regular-webfont.woff") format("woff")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: "LeagueMono"
|
||||
src: url("/webfonts/LeagueSpartan-Light.woff2") format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: "Raleway"
|
||||
src: url("/webfonts/Raleway-Light.woff2") format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
262
assets/styles/home.sass
Normal file
262
assets/styles/home.sass
Normal file
@ -0,0 +1,262 @@
|
||||
.container
|
||||
max-width: $size-small
|
||||
margin: 0 auto
|
||||
padding: 1rem
|
||||
|
||||
&.md
|
||||
max-width: 660px
|
||||
|
||||
|
||||
header .container
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
main > section
|
||||
margin: 2rem auto
|
||||
|
||||
|
||||
#menu ul
|
||||
list-style-type: none
|
||||
li
|
||||
display: inline
|
||||
img
|
||||
display: inline
|
||||
|
||||
|
||||
#title
|
||||
margin: 4rem auto
|
||||
h1, h2
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
margin-bottom: 1rem
|
||||
|
||||
h2
|
||||
font-size: 1rem
|
||||
margin: 0 3rem
|
||||
|
||||
.highlight
|
||||
display: inline-block
|
||||
color: white
|
||||
padding: .5rem
|
||||
margin: .5rem
|
||||
font-family: "blackout-midnight"
|
||||
transform: rotate(-2deg)
|
||||
background-color: var(--color-tertiary)
|
||||
border-radius: var(--border-radius)
|
||||
// text-shadow: 4px 3px 0 #7A7A7A, 2px 2px 2px rgba(206,89,55,0)
|
||||
|
||||
&:hover
|
||||
background: var(--color-highlight)
|
||||
|
||||
#presentation
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
|
||||
section
|
||||
max-width: 16rem
|
||||
padding: 4rem 1rem 1rem
|
||||
|
||||
article
|
||||
background: var(--color-dark-background-card)
|
||||
padding: 2rem 1rem
|
||||
text-align: center
|
||||
height: 10rem
|
||||
position: relative
|
||||
border-radius: var(--border-radius)
|
||||
margin-bottom: 1rem
|
||||
|
||||
img
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
margin: -5rem auto
|
||||
|
||||
h3
|
||||
padding-top: 1rem
|
||||
hyphens: auto
|
||||
word-break: break-word
|
||||
|
||||
#contact
|
||||
// border-radius: 34% 45% 45% 38% / 34% 77% 38% 88%
|
||||
// background: var(--color-dark-background-card)
|
||||
max-width: 36rem
|
||||
padding: 3rem
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
margin: 2rem 0
|
||||
|
||||
p a
|
||||
font-size: 1.3rem
|
||||
padding: 1rem
|
||||
|
||||
#news
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
|
||||
#reflexions h3
|
||||
text-align: right
|
||||
|
||||
.more
|
||||
display: block
|
||||
text-align: center
|
||||
|
||||
#info
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
align-items: center
|
||||
section
|
||||
margin: 2rem auto
|
||||
|
||||
margin-left: -1rem
|
||||
margin-right: -1rem
|
||||
|
||||
.container
|
||||
text-align: center
|
||||
|
||||
@media screen and (min-width: $size-small)
|
||||
margin-left: calc(-100vw / 2 + #{$size-small} / 2 - 1rem)
|
||||
margin-right: calc(-100vw / 2 + #{$size-small} / 2)
|
||||
|
||||
#valeurs
|
||||
width: 50%
|
||||
|
||||
.container
|
||||
// transform: rotate(2deg)
|
||||
float: right
|
||||
width: calc(#{$size-small/2} - 2rem
|
||||
padding: .5rem
|
||||
#me
|
||||
width: 50%
|
||||
|
||||
.container
|
||||
padding: 2rem 0 2rem 2rem
|
||||
width: $size-small/2
|
||||
|
||||
h3
|
||||
text-align: center
|
||||
margin: 2rem 0
|
||||
|
||||
#valeurs
|
||||
background-color: var(--color-dark-background-card)
|
||||
|
||||
// transform: rotate(-2deg)
|
||||
padding: 1rem
|
||||
|
||||
#me
|
||||
.container
|
||||
text-align: center
|
||||
|
||||
img
|
||||
margin: 0 auto
|
||||
|
||||
#valeurs
|
||||
.container
|
||||
display: flex
|
||||
align-items: strech
|
||||
|
||||
h3
|
||||
display: block
|
||||
height: auto
|
||||
writing-mode: vertical-rl
|
||||
text-align: right
|
||||
position: relative
|
||||
padding: 0 .5rem
|
||||
margin: 2rem .5rem
|
||||
border-left: 3px dashed var(--color-white)
|
||||
// border-right: 2px solid var(--color-white)
|
||||
transform: rotate(180deg)
|
||||
|
||||
@media screen and (max-width: 630px)
|
||||
padding-right: 0
|
||||
margin-right: 0
|
||||
|
||||
|
||||
ul.card
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
|
||||
li
|
||||
background: var(--color-dark-background-card)
|
||||
// border: 2px solid var(--color-white)
|
||||
position: relative
|
||||
margin: 2rem 1rem
|
||||
padding: 2rem 1rem 1rem
|
||||
width: calc(33% - 2rem)
|
||||
text-align: center
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
border-radius: var(--border-radius)
|
||||
|
||||
@media screen and (max-width: 770px)
|
||||
width: calc(50% - 2rem)
|
||||
|
||||
@media screen and (max-width: 630px)
|
||||
width: 100%
|
||||
h4
|
||||
left: -1rem
|
||||
|
||||
&:hover
|
||||
h4
|
||||
background-color: var(--color-highlight)
|
||||
transform: rotate(2deg)
|
||||
|
||||
h4
|
||||
position: absolute
|
||||
top: -2rem
|
||||
transition-property: transform
|
||||
transition-duration: .2s
|
||||
p
|
||||
margin: 0
|
||||
|
||||
|
||||
img
|
||||
position: absolute
|
||||
background-color: white
|
||||
padding: .5rem
|
||||
border: 1px solid white
|
||||
left: -2rem
|
||||
top: -2rem
|
||||
|
||||
#me
|
||||
padding: 2rem
|
||||
text-align: center
|
||||
background-image: repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--color-dark-background-card) 0, var(--color-dark-background-card) 10px)
|
||||
|
||||
@media screen and (max-width: 630px)
|
||||
padding: 1rem
|
||||
|
||||
.container
|
||||
padding-top: 3rem
|
||||
max-width: 660px
|
||||
background: var(--color-dark-background)
|
||||
|
||||
img
|
||||
margin: 0 auto
|
||||
|
||||
h3
|
||||
margin: 2rem auto
|
||||
|
||||
#partenaire
|
||||
ul
|
||||
li
|
||||
text-align: center
|
||||
padding: .5rem
|
||||
img
|
||||
height: 75px
|
||||
margin: 0 auto
|
||||
filter: grayscale(1)
|
||||
|
||||
.container
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: flex-start
|
||||
.right
|
||||
width: 75%
|
||||
108
assets/styles/main.sass
Normal file
108
assets/styles/main.sass
Normal file
@ -0,0 +1,108 @@
|
||||
@import "./basic/reset"
|
||||
|
||||
// Variables
|
||||
@import "../../themes/hugo-theme-lowtech/assets/styles/font"
|
||||
|
||||
$size-small: 1024px
|
||||
$color-dark: #010101
|
||||
$color-light: #fffffe
|
||||
|
||||
@mixin dark-theme
|
||||
// https://www.happyhues.co/palettes/4
|
||||
--color-black: #{$color-dark}
|
||||
--color-white: #{$color-light}
|
||||
--color-highlight: #2cb67d
|
||||
--color-secondary: #72757e
|
||||
--color-tertiary: #7f5af0
|
||||
|
||||
--color-dark-background: #16161a
|
||||
--color-dark-background-card: #242629
|
||||
|
||||
--color-light-background: #242629
|
||||
--color-light-background-card: #16161a
|
||||
|
||||
--color-headline: var(--color-white)
|
||||
--color-paragraph: #94a1b2
|
||||
--color-button: var(--color-highlight)
|
||||
--color-button-text: var(--color-white)
|
||||
|
||||
@mixin light-theme
|
||||
// https://www.happyhues.co/palettes/2
|
||||
--color-black: #{$color-light}
|
||||
--color-white: #{$color-dark}
|
||||
--color-highlight: #00ebc7
|
||||
--color-secondary: #ff5470
|
||||
--color-tertiary: #fde24f
|
||||
|
||||
--color-dark-background: #fffffe
|
||||
--color-dark-background-card: #f2f4f6
|
||||
|
||||
--color-light-background: #242629
|
||||
--color-light-background-card: #16161a
|
||||
|
||||
--color-headline: #00214d
|
||||
--color-paragraph: #1b2d45
|
||||
--color-button: var(--color-highlight)
|
||||
--color-button-text: var(--color-white)
|
||||
|
||||
body
|
||||
color-scheme: light dark
|
||||
--font: "prociono"
|
||||
--background-grid: 15px
|
||||
--border-radius: 4px
|
||||
|
||||
@include light-theme
|
||||
|
||||
&.dark-theme
|
||||
@include dark-theme
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
body
|
||||
@include dark-theme
|
||||
|
||||
&.light-theme
|
||||
@include light-theme
|
||||
|
||||
// \::selection
|
||||
// background-color: invert($color-dark, $weight: 100%)
|
||||
// color: invert($color-light, $weight: 100%)
|
||||
|
||||
.btn-toggle
|
||||
font-size: 1.5rem
|
||||
background: inherit
|
||||
border: inherit
|
||||
padding: 1rem 0 1rem 1rem
|
||||
cursor: pointer
|
||||
|
||||
.light-theme .btn-toggle
|
||||
filter: grayscale(0)!important
|
||||
|
||||
.dark-theme .btn-toggle
|
||||
filter: grayscale(.5)!important
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
.btn-toggle
|
||||
filter: grayscale(.5)
|
||||
|
||||
#logo a
|
||||
width: 186px
|
||||
height: 79px
|
||||
display: block
|
||||
background-repeat: no-repeat
|
||||
background-image: url('/logos/weko-noir.svg')
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
#logo a
|
||||
background-image: url('/logos/weko-blanc.svg')
|
||||
|
||||
.light-theme #logo a
|
||||
background-image: url('/logos/weko-noir.svg')
|
||||
|
||||
.dark-theme #logo a
|
||||
background-image: url('/logos/weko-blanc.svg')
|
||||
|
||||
@import "./home"
|
||||
@import "./basic/html"
|
||||
@import "./font"
|
||||
|
||||
// @import "./elements/header"
|
||||
Reference in New Issue
Block a user