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