first commit
This commit is contained in:
@@ -0,0 +1,171 @@
|
||||
.blog-header {
|
||||
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
&.blog-header-image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
h1, h2 {
|
||||
color: $header-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-top: 0;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
& + .blog-content {
|
||||
padding-top: $padding-vert;
|
||||
}
|
||||
}
|
||||
|
||||
// List Blog Item
|
||||
.list-item {
|
||||
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: $padding-vert;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.list-blog-header {
|
||||
position: relative;
|
||||
h4 {
|
||||
|
||||
margin-bottom: 0.5rem;
|
||||
a {
|
||||
color: $core-text;
|
||||
&:hover {
|
||||
color: $core-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.list-blog-date {
|
||||
float: right;
|
||||
text-align: center;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.75rem;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 110%;
|
||||
}
|
||||
em {
|
||||
display: block;
|
||||
border-top: 1px solid $border-color;
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bigger first para
|
||||
.blog-content-item {
|
||||
.list-blog-padding > p:nth-child(2) {
|
||||
font-size: $core-font-size + 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Tags
|
||||
.tags {
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: $core-font-size - 0.2rem;
|
||||
border: 1px solid $core-accent;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.1rem 0.4rem;
|
||||
margin-bottom: 0.2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// Archives & Related-Pages
|
||||
.archives, .related-pages {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
border-bottom: 1px solid $border-color;
|
||||
line-height: $core-font-size + 1rem;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related-pages {
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.score {
|
||||
display: block;
|
||||
float: right;
|
||||
color: #999;
|
||||
font-size: 85%
|
||||
}
|
||||
}
|
||||
|
||||
// Syndicate
|
||||
.syndicate {
|
||||
a {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumbs
|
||||
div#breadcrumbs {
|
||||
padding-left: 0;
|
||||
@include breakpoint(mobile-only) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
#sidebar {
|
||||
padding-left: 3rem;
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.sidebar-content {
|
||||
h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p, ul {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
margin-bottom: $padding-vert;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
ul.pagination {
|
||||
margin: 0 0 $padding-vert;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Prev / Next
|
||||
.prev-next {
|
||||
margin-top: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.bullets {
|
||||
margin: $leading-margin 0;
|
||||
margin-left: -$leading-margin / 2;
|
||||
margin-right: -$leading-margin / 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bullet {
|
||||
float: left;
|
||||
padding: 0 $leading-margin / 2;
|
||||
}
|
||||
|
||||
.two-column-bullet {
|
||||
@include columns(2);
|
||||
@include breakpoint(mobile-only) {
|
||||
@include columns(1);
|
||||
}
|
||||
}
|
||||
|
||||
.three-column-bullet {
|
||||
@include columns(3);
|
||||
@include breakpoint(mobile-only) {
|
||||
@include columns(1);
|
||||
}
|
||||
}
|
||||
|
||||
.four-column-bullet {
|
||||
@include columns(4);
|
||||
@include breakpoint(mobile-only) {
|
||||
@include columns(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-icon {
|
||||
float: left;
|
||||
background: $bullet-icon-color-1;
|
||||
padding: $bullet-icon-size / 4;
|
||||
width: $bullet-icon-size;
|
||||
height: $bullet-icon-size;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-size: $bullet-icon-size / 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bullet-icon-1 {
|
||||
background: $bullet-icon-color-1;
|
||||
}
|
||||
|
||||
.bullet-icon-2 {
|
||||
background: $bullet-icon-color-2;
|
||||
}
|
||||
|
||||
.bullet-icon-3 {
|
||||
background: $bullet-icon-color-3;
|
||||
}
|
||||
|
||||
.bullet-content {
|
||||
margin-left: $bullet-icon-size * 1.3;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.button {
|
||||
@extend %button;
|
||||
@include button-color($core-accent);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@extend %button;
|
||||
@include button-color($secondary-link);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
html, body {
|
||||
height: 100%; // use !important to override slidebars.min.css
|
||||
}
|
||||
|
||||
body {
|
||||
background: $page-bg;
|
||||
color: $core-text;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $core-accent;
|
||||
&:hover {
|
||||
color: darken($core-accent, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $font-weight-bold
|
||||
}
|
||||
|
||||
// Global Container
|
||||
#container {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Fullwidth styles
|
||||
.fullwidth {
|
||||
#body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#header, #breadcrumbs, .blog-header, .blog-content-item, .content-wrapper, ul.pagination, #body > .modular-row {
|
||||
@extend .padding-horiz;
|
||||
}
|
||||
}
|
||||
|
||||
// Global body styling
|
||||
#body {
|
||||
@extend .default-animation;
|
||||
@extend .padding-horiz;
|
||||
|
||||
background: $page-bg;
|
||||
padding-top: $header-height + $padding-vert;
|
||||
padding-bottom: $footer-height + $padding-vert + 2rem;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
// Your custom SCSS should be written here...
|
||||
|
||||
.grav-lightslider {
|
||||
.lSSlideOuter {
|
||||
.lSPager.lSpg {
|
||||
> li a {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#body > script:first-child + .grav-lightslider {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Error specific styling
|
||||
#error {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding-bottom: 6rem;
|
||||
|
||||
h1 {
|
||||
font-size: $core-font-size + 4.0rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.default-animation {
|
||||
@include transition(all 0.5s ease);
|
||||
}
|
||||
|
||||
.padding-horiz {
|
||||
padding-left: 20rem;
|
||||
padding-right: $padding-horiz;
|
||||
@include breakpoint(desktop-only) {
|
||||
padding-left: 10rem;
|
||||
padding-right: $padding-horiz - 3rem;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: $padding-horiz - 10rem;
|
||||
padding-right: $padding-horiz - 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-vert {
|
||||
padding-top: 10rem;
|
||||
padding-bottom: $padding-vert;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
|
||||
h1,h2,h3{
|
||||
font-family: $style-name-bold;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p, ul, li{
|
||||
font-family: $style-name-regular;
|
||||
font-weight: normal;
|
||||
font-size: $fontp;
|
||||
line-height: $fontp + 0.5rem;
|
||||
}
|
||||
|
||||
em, blockquote > p{
|
||||
font-family: $style-name-slanted;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
section{
|
||||
blockquote{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
strong > em{
|
||||
font-family: $style-name-boldslanted;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: $fonth1;
|
||||
line-height: $fonth1 - 0.2rem;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: $fonth2;
|
||||
line-height: $fonth2 + 0.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: $fonth3;
|
||||
line-height: $fonth3 + 0.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
li > a, ol > a{
|
||||
&:hover{
|
||||
font-family: $style-name-bold;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.underline > a {
|
||||
font-family: $style-name-bold;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block{
|
||||
& > a {
|
||||
text-decoration: underline;
|
||||
font-family: $style-name-bold;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
// Import Google Web Fonts
|
||||
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
// Footer styling
|
||||
#footer {
|
||||
position: absolute;
|
||||
background: $footer-bg;
|
||||
height: $footer-height;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@extend .padding-horiz;
|
||||
color: $footer-text;
|
||||
text-align: center;
|
||||
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.totop {
|
||||
position: absolute;
|
||||
bottom: $footer-height - 1rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
span {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.5rem;
|
||||
background: $footer-bg;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
border-radius: $border-radius;
|
||||
display: inline-block;
|
||||
text-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %vertical-align;
|
||||
margin: 0;
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
fieldset {
|
||||
border: 1px solid $core-border-color;
|
||||
}
|
||||
|
||||
textarea, #{$all-text-inputs}, select[multiple=multiple] {
|
||||
background-color: white;
|
||||
border: 1px solid $core-border-color;
|
||||
box-shadow: $core-box-shadow;
|
||||
|
||||
&:hover {
|
||||
border-color: $core-border-color-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $core-border-color-focus;
|
||||
box-shadow: $core-box-shadow-focus;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@extend strong;
|
||||
}
|
||||
|
||||
// Forms
|
||||
.form-field {
|
||||
.required {
|
||||
color: #F3443F;
|
||||
font-size: $core-font-size + 2rem;
|
||||
line-height: $core-font-size + 2rem;
|
||||
vertical-align: top;
|
||||
height: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
body{
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#header{
|
||||
z-index: 1;
|
||||
width: $header-width;
|
||||
height: 100%;
|
||||
padding-top: 1.5rem;
|
||||
padding-left: 30px;
|
||||
position: fixed;
|
||||
background: white;
|
||||
|
||||
#logo{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
#navbar{
|
||||
padding-left: 15px;
|
||||
|
||||
.sous-menu{
|
||||
height: $fonth2;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition-delay: 0.5s;
|
||||
& > ol{
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
margin-left: 30px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
height: 100px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
& > a {
|
||||
text-decoration: underline;
|
||||
&::after {
|
||||
@include background-nav-sm('../images/trait.svg');
|
||||
}
|
||||
}
|
||||
& > ol{
|
||||
visibility: visible;
|
||||
transition: all 0.5s linear;
|
||||
transition-delay: 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.underline{
|
||||
&::before{
|
||||
@include background-nav('../images/point_b.svg');
|
||||
}
|
||||
}
|
||||
.block{
|
||||
height: 100px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&::before{
|
||||
@include background-nav('../images/point_b.svg');
|
||||
}
|
||||
& > a::after {
|
||||
@include background-nav-sm('../images/trait.svg');
|
||||
}
|
||||
ol{
|
||||
visibility: visible;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
ul > li, ol{
|
||||
&::before{
|
||||
@include background-nav-content-b;
|
||||
@include background-nav-b('../images/point.svg');
|
||||
}
|
||||
.underline{
|
||||
&::before{
|
||||
@include background-nav('../images/point_b.svg');
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
&::before{
|
||||
@include background-nav('../images/point_b.svg');
|
||||
}
|
||||
&> a{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.separation{
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 1.5rem;
|
||||
background: black;
|
||||
&::before{
|
||||
@include background-nav-content-s;
|
||||
@include background-nav('../images/point_b.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
body{
|
||||
.content{
|
||||
img{
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.fullpage{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: white;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
&::before{
|
||||
@include background-nav-content;
|
||||
@include background-link('../images/fleche.svg');
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background: red;
|
||||
z-index: 999;
|
||||
}
|
||||
.full{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 1vw;
|
||||
height: auto;
|
||||
transform: translateX(-50%);
|
||||
margin-left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
$sidebar-color: #333;
|
||||
$panel-padding: 1rem;
|
||||
$panel-text: #ddd;
|
||||
|
||||
.sb-slidebar {
|
||||
background-color: $sidebar-color !important;
|
||||
}
|
||||
|
||||
#panel {
|
||||
padding-top: $panel-padding;
|
||||
color: $panel-text;
|
||||
.navigation {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $panel-text;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: lighten($panel-text,20%);
|
||||
background-color: darken($sidebar-color,5%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > a {
|
||||
background: #fff;
|
||||
color: $core-text;
|
||||
&:hover {
|
||||
color: $core-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid lighten($sidebar-color,4%);
|
||||
&:first-child {
|
||||
border-top: 1px solid lighten($sidebar-color,4%);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
border: 0 !important;
|
||||
a {
|
||||
color: darken($panel-text, 10%);
|
||||
padding: 0.2rem 1rem 0.2rem 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
li a {
|
||||
padding-left: 3rem;
|
||||
li a {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
& > a {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section{
|
||||
position: absolute;
|
||||
left: $header-width;
|
||||
width: auto;
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
p{
|
||||
margin: 1rem 0;
|
||||
}
|
||||
h2 ~ p{
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
h2 + p, h3 +p{
|
||||
margin: 0!important;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: underline;
|
||||
&::after{
|
||||
@include background-nav-content;
|
||||
@include background-link('../images/fleche.svg');
|
||||
transition: all 1s;
|
||||
}
|
||||
&:hover{
|
||||
&::after{
|
||||
transition: all 1s;
|
||||
margin: auto 0px 1px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:not(#recherche-artistique){
|
||||
filter: blur(5px);
|
||||
transition: all 2s;
|
||||
color: grey;
|
||||
}
|
||||
& > .net{
|
||||
filter: blur(0px)!important;
|
||||
transition: filter 0.5s!important;
|
||||
color: black!important;
|
||||
}
|
||||
& > div{
|
||||
overflow-y: auto;
|
||||
// width: $column-width;
|
||||
width: calc(50vw - 10rem);
|
||||
// min-width:$header-width;
|
||||
// max-width: $header-width * 3;
|
||||
|
||||
h3:first-of-type{
|
||||
padding-top: 0px!important;
|
||||
}
|
||||
}
|
||||
& > div:not(#recherche-artistique){
|
||||
padding: 0 20px;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#recherche-artistique.net > div:first-child{
|
||||
filter: blur(0px)!important;
|
||||
transition: filter 0.5s!important;
|
||||
color: black!important;
|
||||
}
|
||||
|
||||
#recherche-artistique{
|
||||
display: inline-flex;
|
||||
width: 200rem;
|
||||
// width: calc(100% - 20rem);
|
||||
// min-width:$header-width *3;
|
||||
// max-width: $header-width * 9;
|
||||
|
||||
& > .net{
|
||||
filter: blur(0px)!important;
|
||||
transition: filter 0.5s!important;
|
||||
color: black!important;
|
||||
}
|
||||
& > div{
|
||||
filter: blur(5px);
|
||||
transition: filter 2s;
|
||||
color: grey;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#commentaire-philosophe{
|
||||
ul{
|
||||
& > li{
|
||||
& > ul{
|
||||
max-height: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.5s;
|
||||
opacity: 0;
|
||||
& > li{
|
||||
&::before{
|
||||
@include background-nav-b('../images/point.svg');
|
||||
@include background-nav-content;
|
||||
}
|
||||
& > ol{
|
||||
max-height: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.5s;
|
||||
opacity: 0;
|
||||
& > li{
|
||||
// margin: -8px 0;
|
||||
// color: transparent;
|
||||
// transition: color 1s;
|
||||
&::before{
|
||||
// visibility: visible!important;
|
||||
@include background-nav-b('../images/point.svg');
|
||||
@include background-nav-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
& > ul{
|
||||
max-height: 300px;
|
||||
visibility: visible;
|
||||
transition: all 1s;
|
||||
opacity: 1;
|
||||
margin-left: 30px;
|
||||
& > li{
|
||||
&:hover{
|
||||
& > ol{
|
||||
max-height: 300px;
|
||||
visibility: visible;
|
||||
transition: all 1s;
|
||||
opacity: 1;
|
||||
margin-left: 30px;
|
||||
& > li{
|
||||
// &:hover{
|
||||
// color: black;
|
||||
// transition: color 1s;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mCSB_container{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.simplesearch {
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
max-width: 30rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.search-image {
|
||||
margin-top: 1rem;
|
||||
img {
|
||||
border-radius: 4px;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-item {
|
||||
@include breakpoint(mobile-only) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
.search-submit {
|
||||
height: 52px;
|
||||
padding: 0 10px;
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-details {
|
||||
float: right;
|
||||
margin-top: -2.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
color: lighten($core-text,20%);
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
float: none;
|
||||
margin-top: -0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
table {
|
||||
border: 1px solid lighten($core-border-color,5%);
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
th {
|
||||
@extend strong;
|
||||
background: lighten($core-border-color,10%);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid lighten($core-border-color,5%);
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
// Body Base
|
||||
html, body, button, input, select, textarea, .pure-g, .pure-g [class *= "pure-u"] {
|
||||
font-family: $font-family-default;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-header;
|
||||
font-weight: 400;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: -0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h2-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h2-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h3-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h3-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h4-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h4-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
letter-spacing: -3px;
|
||||
font-size: 2.5rem!important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin: -2rem 0 2rem 0;
|
||||
@include breakpoint(tablet-range) {
|
||||
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-family: $font-family-default;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 + h3 {
|
||||
margin: 0.5rem 0 2rem 0;
|
||||
font-size: 2rem;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-family: $font-family-default;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: 10px solid $rule-color;
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: #999;
|
||||
}
|
||||
cite {
|
||||
display: block;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// NOTES!!!!
|
||||
blockquote > blockquote > blockquote {
|
||||
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
|
||||
padding: 15px;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
margin-top: 0rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
// Yellow
|
||||
margin-left: -71px;
|
||||
border-left: 10px solid $notes-info-border;
|
||||
background: $notes-info-bg;
|
||||
color: darken($notes-info-border,15%);
|
||||
a {
|
||||
color: darken($notes-info-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-info-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> blockquote > p {
|
||||
// Red
|
||||
margin-left: -94px;
|
||||
border-left: 10px solid $notes-warning-border;
|
||||
background: $notes-warning-bg;
|
||||
color: darken($notes-warning-border,15%);
|
||||
a {
|
||||
color: darken($notes-warning-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-warning-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> blockquote > blockquote > p {
|
||||
// Blue
|
||||
margin-left: -118px;
|
||||
border-left: 10px solid $notes-note-border;
|
||||
background: $notes-note-bg;
|
||||
color: darken($notes-note-border,15%);
|
||||
a {
|
||||
color: darken($notes-note-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-note-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> blockquote > blockquote > blockquote > p {
|
||||
// Green
|
||||
margin-left: -142px;
|
||||
border-left: 10px solid $notes-success-border;
|
||||
background: $notes-success-bg;
|
||||
color: darken($notes-success-border,15%);
|
||||
a {
|
||||
color: darken($notes-success-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-success-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Inline and Code
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-mono;
|
||||
}
|
||||
|
||||
code {
|
||||
background: $code-bg;
|
||||
color: darken($code-text,10%);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 2rem;
|
||||
background: $pre-bg;
|
||||
border: 1px solid $core-border-color;
|
||||
border-radius: 3px;
|
||||
code {
|
||||
color: $pre-text;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Extras
|
||||
hr {
|
||||
border-bottom: 4px solid $rule-color;
|
||||
}
|
||||
|
||||
// Page Title
|
||||
.page-title {
|
||||
margin-top: -25px;
|
||||
padding: 25px;
|
||||
float: left;
|
||||
clear: both;
|
||||
background: $core-accent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Label
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
background: $core-accent;
|
||||
border-radius: 100%;
|
||||
color: $white;
|
||||
height: 1rem;
|
||||
min-width: 1rem;
|
||||
line-height: 1rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: $core-font-size - 0.3rem;
|
||||
font-family: $font-family-header;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "showcase";
|
||||
@import "features";
|
||||
@import "text";
|
||||
|
||||
.modular {
|
||||
.modular-row:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
// Modular Showcase styling
|
||||
.modular {
|
||||
.features {
|
||||
padding: 6rem 0;
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
font-size: $core-font-size + 0.2rem;
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $core-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-items {
|
||||
margin-top: 2rem;
|
||||
@supports not (flex-wrap: wrap) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
display:block;
|
||||
float: left;
|
||||
width: 25%;
|
||||
vertical-align: top;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
@include breakpoint(large-mobile-range) {
|
||||
margin-top: 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
@include breakpoint(small-mobile-range) {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-size: 2rem;
|
||||
color: $core-accent;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: $core-font-size;
|
||||
margin: 0.2rem 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
|
||||
text-align: center;
|
||||
|
||||
.feature {
|
||||
width: 50%;
|
||||
@include breakpoint(small-mobile-range) {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-size: 3rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
padding-right: 2rem;
|
||||
|
||||
&.icon-offset {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
// Modular Showcase styling
|
||||
.modular {
|
||||
|
||||
// special case for header
|
||||
&.header-image {
|
||||
|
||||
#header {
|
||||
background-color: rgba(255,255,255,0);
|
||||
box-shadow: none;
|
||||
|
||||
#logo h3 {
|
||||
color: $header-text;
|
||||
}
|
||||
#navbar a {
|
||||
color: $header-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showcase {
|
||||
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
background-color: #666;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
text-align: center;
|
||||
color: $header-text;
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-top: 0;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .default-animation;
|
||||
color: $header-text;
|
||||
padding: 0.7rem 2rem;
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0);
|
||||
border: 1px solid $header-text;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: none;
|
||||
font-size: $core-font-size + 0.3rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// variables
|
||||
$text-bg: #f6f6f6;
|
||||
$text-padding: 6rem;
|
||||
$image-margin: 2rem;
|
||||
|
||||
// styling
|
||||
.callout {
|
||||
background: $text-bg;
|
||||
padding: $text-padding $content-padding;
|
||||
@include breakpoint(desktop-only) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
float: left;
|
||||
margin-right: $image-margin;
|
||||
@include breakpoint(desktop-only) {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
float: right;
|
||||
margin-left: $image-margin;
|
||||
@include breakpoint(desktop-only) {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
// Buttons
|
||||
@import "buttons";
|
||||
@@ -0,0 +1,24 @@
|
||||
%button {
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
|
||||
&.button-small {
|
||||
padding: 3px 10px;
|
||||
font-size: $core-font-size - 0.1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin button-color($color) {
|
||||
background: $white;
|
||||
color: $color;
|
||||
border: 1px solid $color;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: $color;
|
||||
color: $white;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0 1px 0 darken($color, 12%);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user