erster upload
andy
parent
2dc0f33f72
commit
d79f3e321b
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,25 @@
|
|||
css_dir = "css"
|
||||
sass_dir = "scss"
|
||||
images_dir = "img"
|
||||
javascripts_dir = "js"
|
||||
fonts_dir = "fonts"
|
||||
|
||||
output_style = :expanded
|
||||
line_comments = false
|
||||
color_output = false
|
||||
|
||||
require 'fileutils'
|
||||
on_stylesheet_saved do |file|
|
||||
if file.match('.min') == nil
|
||||
require 'compass'
|
||||
require 'susy'
|
||||
|
||||
Compass.add_configuration(
|
||||
{
|
||||
:output_style => :compressed
|
||||
},
|
||||
'min'
|
||||
)
|
||||
Compass.compiler.compile('scss/screen.scss', 'css/screen.min.css')
|
||||
end
|
||||
end
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
/*
|
||||
Error: Undefined variable: "$bg".
|
||||
on line 2 of /Users/tuc/Desktop/CSS_NAV/scss/inc/general.scss
|
||||
|
||||
1: body {
|
||||
2: background: $bg;
|
||||
3: font: 150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
|
||||
4: }
|
||||
5:
|
||||
6: .wrapper {
|
||||
7: max-width: $wrapper;
|
||||
|
||||
Backtrace:
|
||||
/Users/tuc/Desktop/CSS_NAV/scss/inc/general.scss:2
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/script/tree/variable.rb:49:in `_perform'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/script/tree/node.rb:58:in `perform'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:398:in `visit_prop'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `block in visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `block in with_base'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:115:in `with_frame'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `with_base'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:434:in `block (2 levels) in visit_rule'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:434:in `map'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:434:in `block in visit_rule'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:183:in `with_environment'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:432:in `visit_rule'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `block in visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `block in with_base'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:115:in `with_frame'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `with_base'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in `map'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in `visit_children'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:171:in `block in visit_children'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:183:in `with_environment'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:170:in `visit_children'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `block in visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:190:in `visit_root'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:161:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:10:in `visit'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/root_node.rb:36:in `css_tree'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/root_node.rb:20:in `render'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/engine.rb:284:in `render'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:494:in `update_stylesheet'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `each'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
|
||||
/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:294:in `watch'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/sass_compiler.rb:46:in `watch!'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/commands/watch_project.rb:41:in `perform'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/commands/base.rb:18:in `execute'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/commands/project_base.rb:19:in `execute'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:15:in `run!'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/bin/compass:30:in `block in <top (required)>'
|
||||
/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/bin/compass:44:in `<top (required)>'
|
||||
/usr/local/bin/compass:22:in `load'
|
||||
/usr/local/bin/compass:22:in `<main>'
|
||||
*/
|
||||
body:before {
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
content: "Error: Undefined variable: \"$bg\".\A on line 2 of /Users/tuc/Desktop/CSS_NAV/scss/inc/general.scss\A \A 1: body {\A 2: background: $bg;\A 3: font: 150% \"Roboto\", \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, Verdana, sans-serif;\A 4: }\A 5: \A 6: .wrapper {\A 7: max-width: $wrapper;"; }
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
/* NETSESSION SCSS
|
||||
* generate /css/screen.css
|
||||
* and a file /css/screen.min.css
|
||||
* have fun
|
||||
*/
|
||||
/*RESET*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
q, blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*General*/
|
||||
body {
|
||||
background: #FAFAFA;
|
||||
font: 150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
h1 {
|
||||
font-size: 1.6em;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/*NAVIGATION*/
|
||||
nav ul ul {
|
||||
display: none;
|
||||
}
|
||||
nav ul ul li {
|
||||
float: none;
|
||||
}
|
||||
nav li {
|
||||
float: left;
|
||||
}
|
||||
nav li a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 10px 20px 5px 0;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
nav li a:link, nav li a:visited {
|
||||
color: #646565;
|
||||
background: #e8e9eb;
|
||||
}
|
||||
nav li a:link:hover, nav li a:visited:hover {
|
||||
color: black;
|
||||
}
|
||||
nav li:hover ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input.toggle,
|
||||
label.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label.toggle {
|
||||
font-weight: 900;
|
||||
font-size: 1.2em;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input.toggle,
|
||||
.toggle span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ nav,
|
||||
label.toggle {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav li {
|
||||
float: none;
|
||||
}
|
||||
nav li:hover ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
nav li ul {
|
||||
display: block;
|
||||
}
|
||||
nav li ul li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
nav li a {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}body{background:#FAFAFA;font:150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif}.wrapper{max-width:960px;margin:0 auto}h1{font-size:2.8em;line-height:1.6em}@media (max-width: 960px){h1{font-size:1.6em;line-height:1em}}nav ul ul{display:none}nav ul ul li{float:none}nav li{float:left}nav li a{text-decoration:none;display:inline-block;margin:10px 20px 5px 0;padding:8px 10px}nav li a:link,nav li a:visited{color:#646565;background:#e8e9eb}nav li a:link:hover,nav li a:visited:hover{color:black}nav li:hover ul{display:block;position:absolute}input.toggle,label.toggle{display:none}label.toggle{font-weight:900;font-size:1.2em;padding:10px 20px}@media (max-width: 960px){nav{display:none}input.toggle,.toggle span{display:none}input[type=checkbox]:checked ~ nav,label.toggle{display:block;cursor:pointer}nav li{float:none}nav li:hover ul{display:block;position:relative}nav li ul{display:block}nav li ul li{margin-left:20px}nav li a{display:block;margin-left:20px}}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pure CSS Navigation</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h1>Navigation</h1>
|
||||
</header>
|
||||
<label class="toggle" for="toggle">☰ <span>Menue</span></label>
|
||||
<input class="toggle" id="toggle" type="checkbox">
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="current"><a href="#">Home</a></li>
|
||||
<li><a href="#">Arbeiten</a></li>
|
||||
<li><a href="#">Service</a></li>
|
||||
<li class="has_children"><a href="#">Labor</a>
|
||||
<ul>
|
||||
<li><a href="#">Builder</a></li>
|
||||
<li><a href="#">Snippets</a></li>
|
||||
<li><a href="#">Scripts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
nav {
|
||||
ul {
|
||||
ul {
|
||||
//second nav
|
||||
display: none;
|
||||
li {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 10px 20px 5px 0;
|
||||
padding: 8px 10px;
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $dunkelgrau;
|
||||
background: $hellgrau;
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.toggle,
|
||||
label.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label.toggle {
|
||||
font-weight: 900;
|
||||
font-size: 1.2em;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $wrapper) {
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
input.toggle,
|
||||
.toggle span {
|
||||
display: none;
|
||||
}
|
||||
input[type=checkbox]:checked ~ nav,
|
||||
label.toggle {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
nav li {
|
||||
float: none;
|
||||
&:hover ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
ul {
|
||||
display: block;
|
||||
li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
$wrapper: 960px;
|
||||
$weiss: #ffffff;
|
||||
$bg: #FAFAFA;
|
||||
$hellgrau: #e8e9eb;
|
||||
$grau: #a3a6ac;
|
||||
$dunkelgrau: #646565;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
body {
|
||||
background: $bg;
|
||||
font: 150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: $wrapper;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
line-height: 1.6em;
|
||||
@media (max-width: $wrapper) {
|
||||
font-size: 1.6em;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/* NETSESSION SCSS
|
||||
* generate /css/screen.css
|
||||
* and a file /css/screen.min.css
|
||||
* have fun
|
||||
*/
|
||||
@import "inc/variables";
|
||||
/*RESET*/
|
||||
@import "compass/reset";
|
||||
/*General*/
|
||||
@import "inc/general";
|
||||
/*NAVIGATION*/
|
||||
@import "inc/navigation";
|
||||
|
||||
Loading…
Reference in New Issue