Removing all layour flots and use flex instead. Remove slicknav.
This commit is contained in:
Fredrik Jonsson
parent
4102ac9c52
commit
0b35bcb8a2
6 changed files with 28 additions and 208 deletions
|
|
@ -1,145 +0,0 @@
|
|||
// sass-lint:disable all
|
||||
|
||||
.slicknav_btn {
|
||||
position: relative;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
float: right;
|
||||
padding: .438em .625em;
|
||||
line-height: 1.125em;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
|
||||
border-radius: 4px;
|
||||
background-color: color(nearblack);
|
||||
}
|
||||
|
||||
.slicknav_menu {
|
||||
box-sizing: border-box;
|
||||
background-color: color(header-bg);
|
||||
padding: 2px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_menutxt {
|
||||
display: block;
|
||||
line-height: 1.188em;
|
||||
float: left;
|
||||
color: color(text-bg);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 3px color(text);
|
||||
}
|
||||
|
||||
.slicknav_icon {
|
||||
float: left;
|
||||
width: 1.125em;
|
||||
height: .875em;
|
||||
margin: .188em 0 0 .438em;
|
||||
}
|
||||
|
||||
.slicknav_no-text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slicknav_icon-bar {
|
||||
display: block;
|
||||
width: 1.125em;
|
||||
height: 3px;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
|
||||
background-color: color(text-bg);
|
||||
|
||||
& + .slicknav_icon-bar {
|
||||
margin-top: .188em;
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_nav {
|
||||
background-color: color(body-bg);
|
||||
color: color(link);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
margin: 2px 5px;
|
||||
text-decoration: none;
|
||||
color: color(link);
|
||||
|
||||
&:hover {
|
||||
border-radius: 6px;
|
||||
background-color: color(nearblack);
|
||||
color: color(text-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_row {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
margin: 2px 5px;
|
||||
|
||||
&:hover {
|
||||
border-radius: 6px;
|
||||
background-color: color(nearblack);
|
||||
color: color(text-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_arrow {
|
||||
margin: 0 0 0 .4em;
|
||||
}
|
||||
|
||||
.slicknav_txtnode {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.slicknav_item {
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_parent-link a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slicknav_brand {
|
||||
float: left;
|
||||
color: color(text-bg);
|
||||
line-height: 30px;
|
||||
padding: 7px 12px;
|
||||
height: 44px;
|
||||
}
|
||||
|
|
@ -1,26 +1,20 @@
|
|||
// Dependencies.
|
||||
@import 'base/headings/headings';
|
||||
@import 'components/clearfix/clearfix';
|
||||
|
||||
// Branding header
|
||||
//
|
||||
// Markup: header.twig
|
||||
//
|
||||
// Style guide: components.header
|
||||
|
||||
.header,
|
||||
%header {
|
||||
@extend %clearfix;
|
||||
@include respond-to(s) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Wrapping link for logo.
|
||||
&__logo {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
padding: 0;
|
||||
margin: 0 $zen-gutters 0 0;
|
||||
|
||||
@include rtl() {
|
||||
float: right;
|
||||
margin: 0 0 0 10px;
|
||||
margin: 0 0 0 $zen-gutters;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,15 +23,11 @@
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// Wrapper for website name and slogan.
|
||||
&__name-and-slogan {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// The name of the website.
|
||||
&__site-name {
|
||||
@extend %h1;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// The link around the name of the website.
|
||||
|
|
@ -54,23 +44,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
// The slogan (or tagline) of a website.
|
||||
&__site-slogan {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// The secondary menu (login, etc.)
|
||||
&__secondary-menu {
|
||||
float: right;
|
||||
|
||||
@include rtl() {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for any blocks placed in the header region.
|
||||
&__region {
|
||||
// Clear the logo.
|
||||
clear: both;
|
||||
@include respond-to(s) {
|
||||
margin-left: auto;
|
||||
|
||||
@include rtl() {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,8 +134,8 @@ $rem-fallback: false;
|
|||
|
||||
// Layout
|
||||
|
||||
// The max content width (the main content area).
|
||||
$max-content-width: 740px;
|
||||
// The max content width.
|
||||
$max-content-width: 960px;
|
||||
|
||||
// The default left/right gutter/padding.
|
||||
$zen-gutters: 20px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.layout {
|
||||
&__content {
|
||||
&__page {
|
||||
max-width: $max-content-width;
|
||||
}
|
||||
|
||||
|
|
@ -22,20 +22,19 @@
|
|||
@supports (display: grid) {
|
||||
|
||||
.layout {
|
||||
&__wrapper {
|
||||
&__page {
|
||||
display: grid;
|
||||
grid-template-columns: [first-start] 1fr [last-end];
|
||||
}
|
||||
|
||||
@include respond-to(s) {
|
||||
&__wrapper {
|
||||
&__page {
|
||||
grid-template-rows: [head-start] auto
|
||||
[nav-start] auto
|
||||
[page-top-start] auto
|
||||
[main-start] 1fr
|
||||
[page-bottom-start] auto
|
||||
[footer-start] auto;
|
||||
max-width: 960px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,23 +11,23 @@
|
|||
|
||||
.navbar,
|
||||
%navbar {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
@include rtl() {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__item,
|
||||
li {
|
||||
float: left;
|
||||
padding: 0 10px 0 0;
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
|
||||
@include rtl() {
|
||||
float: right;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,9 +70,6 @@
|
|||
// Custom
|
||||
@import 'custom/list-straight-left/list-straight-left';
|
||||
|
||||
// Slicknav
|
||||
@import 'slicknav';
|
||||
|
||||
// zen
|
||||
@import 'zen';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue