Commit 86c563ce authored by nirgendswo's avatar nirgendswo

new icon

adding responsive css
parent 5f0c0a1b
This source diff could not be displayed because it is too large. You can view the blob instead.
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path d="M0 0h48v48h-48z" fill="none"/>
<path d="M6 36h36v-4h-36v4zm0-10h36v-4h-36v4zm0-14v4h36v-4h-36z"/>
</svg>
\ No newline at end of file
......@@ -7,7 +7,7 @@
"url": "git@github.com:nirgendswo/fuzzy-cms.git"
},
"devDependencies": {
"clean-css": "^3.4.20",
"clean-css-cli": "^4.1.6",
"concat": "^1.0.3",
"concat-cli": "^4.0.0",
"node-sass": "^4.3.0",
......@@ -23,9 +23,9 @@
"clean:js": "rimraf ../assets/js/*",
"concat:js": "concat-cli -f node_modules/zepto/dist/zepto.js js/script.js -o ../assets/js/scripts.js",
"minify:js": "uglifyjs ../assets/js/scripts.js -mc -o ../assets/js/scripts.js",
"build:css": "npm run clean:css && npm run build:scss",
"build:css": "npm run clean:css && npm run build:scss && npm run minify:css",
"clean:css": "rimraf ../assets/css/*",
"minify:css": "cleancss -o ../assets/css/styles.min.css ../assets/css/styles.css",
"minify:css": "cleancss -o ../assets/css/styles.css ../assets/css/styles.css",
"build:scss": "node-sass scss/styles.scss ../assets/css/styles.css",
"clean:svg": "rimraf build && rimraf assets",
"optimize:svg": "svgo -f linecons/src/svg -o build",
......
......@@ -9,36 +9,44 @@
.button {
background-color: $purple-color;
&:hover {
cursor: pointer;
}
&:hover, &:focus {
background-color: lighten($purple-color, 15%);
outline: 0;
}
}
.button--stories {
display: block;
}
.button__menu {
// for mobile use, to open navigation
.button-navigation {
position: fixed;
margin: 5px;
left: 0;
top: 0;
z-index: 101;
//position: absolute;
top: 15px;
left: 300px;
margin: 4px;
width: 55px;
border: 1px solid black;
color: white;
padding: 8px 12px;
padding: 8px 0;
font-weight: bold;
text-transform: uppercase;
&__icon {
fill: white;
width: 20px;
height: 20px;
margin: 0 2px;
}
@media (min-width: $reflex-lg) {
@media (min-width: $reflex-md) {
display: none;
}
}
.button__up {
// button to anchor to header
.button-up {
position: fixed;
margin: 5px;
bottom: 0;
......
......@@ -29,5 +29,17 @@ $icon__sizes: (
margin-top: -4px;
}
&--menu {
width: 30px;
height: 30px;
left: 3px;
@media (min-width: $reflex-md) {
width: 20px;
height: 20px;
left: 0;
}
}
@include icon-sizes($icon__sizes);
}
......@@ -2,12 +2,16 @@
* navigation
*
*
* @AUTHOR Björn Hase
* @author Björn Hase
*
*/
.navigation {
margin-top: 15px;
margin-top: 46px;
@media (min-width: $reflex-md) {
margin-top: 12px;
}
&__list {
list-style: none;
......
......@@ -12,6 +12,36 @@
transition: all 0.1s ease-in;
&__logo {
background-color: white;
padding: 1.2em;
@media (min-width: $reflex-sm) {
padding-top: 70px;
}
}
&__title {
display: none;
font-family: 'Oswald', sans-serif;
font-weight: bold;
line-height: 1.4;
color: $dark-color;
background-color: white;
padding: 20px 21px;
@include fontSize(1.2);
@media (min-width: $reflex-lg) {
display: block;
}
}
&__title--small {
@font-size(12px);
padding: 0 12px 0 12px;
}
@media (min-width: $reflex-md) {
width: 105px;
left: 0;
......@@ -21,41 +51,20 @@
width: 280px;
left: 0;
}
}
.site-header__translation {
-webkit-transform:translateX(105px);
-moz-transform:translateX(105px);
-ms-transform:translateX(105px);
-o-transform:translateX(105px);
transform: translateX(105px);
}
.site-header__logo {
background-color: white;
padding: 1.2em;
&--open {
-webkit-transform:translateX(105px);
-moz-transform:translateX(105px);
-ms-transform:translateX(105px);
-o-transform:translateX(105px);
transform: translateX(105px);
@media (min-width: $reflex-sm) {
padding-top: 70px;
@media (min-width: $reflex-md) {
-webkit-transform:translateX(0px);
-moz-transform:translateX(0px);
-ms-transform:translateX(0px);
-o-transform:translateX(0px);
transform: translateX(0px);
}
}
}
.site-header__title {
display: none;
font-family: 'Oswald', sans-serif;
font-weight: bold;
line-height: 1.4;
color: $dark-color;
background-color: white;
padding: 20px 21px;
@include fontSize(1.2);
@media (min-width: $reflex-lg) {
display: block;
}
}
.site-header__title--small {
@font-size(12px);
padding: 0 12px 0 12px;
}
......@@ -9,6 +9,11 @@
<link href="https://fonts.googleapis.com/css?family=Oswald:700%7CDroid+Sans:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<button class="button button-navigation">
<svg class="icon button-navigation__icon">
<use xlink:href="/assets/svg/icons.svg#menu" />
</svg>
</button>
<div class="bg bg--grey bordered">
<header class="site-header">
<div class="site-header__title">
......@@ -19,9 +24,6 @@
</div>
<div class="grid-wrap">
<main class="site-main">
<button class="button button-navigation">
Menu
</button>
@section('header')
<div class="grid">
<div class="grid__col-xs-12">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment