Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

garden #125

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

garden #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d46221
garden
Nov 6, 2017
31455ad
sass
Nov 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions assignment_markup_warmup
Open in desktop
Submodule assignment_markup_warmup added at 50c963
Binary file added garden.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added helmet.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 13 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Antic' rel='stylesheet'>
<title>Viking CSS Garden</title>

<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="./sassyst/sasstyl.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<!-- Main Header -->
<header id="main-header">
<h1 class="site-title">Viking CSS Garden</h1>
Expand Down Expand Up @@ -47,7 +56,7 @@ <h2 class="section-title">Norse mythology</h2>

<!-- Sidebar -->
<aside id="sidebar">
<h2 class="section-title">Other Gardens</h2>
<button class="section-title choices"><h2>Other Gardens</h2</button>

<nav class="sidebar-nav">
<ul class="nav-links">
Expand Down Expand Up @@ -77,4 +86,3 @@ <h2 class="section-title">Other Gardens</h2>
</aside>
</body>
</html>

Binary file added sass/.sass-cache/973baa1241837ba51a18b57013d0fcd5a0a356e9/style.scssc
View file
Open in desktop
Binary file not shown.
83 changes: 83 additions & 0 deletions sass/sasstyl.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions sass/sasstyl.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

107 changes: 107 additions & 0 deletions sass/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
//colors
$color_flamenco_approx: #ff8008;
$color_sunglow_approx: #ffc837;
$blue: blue;
$black: black;
$color_suva_gray_approx: #888888;
$white: white;
$black_50: rgba(0,0,0,0.5);
$red: red;

//fonts
$font_0: Roboto;
$font_1: Antic;

//urls
$url_0: url(helmet.jpg);
$url_1: url(garden.jpg);

* {
//Instead of the line below you could use @include box-sizing($bs)
box-sizing: border-box;
}
body {
font-family: $font_0;
font-size: 22px;
background: linear-gradient(to right, $color_flamenco_approx, $color_sunglow_approx);
}
#main-header {
background-image: $url_0;
background-size: 55% 100%;
background-repeat: no-repeat;
}
h2 {
padding: 5px;
}
.section-title {
background-color: $blue;
border: 2px solid $black;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 10px;
margin: 3px;
width: 50%;
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
box-shadow: 7px 8px 3px $color_suva_gray_approx;
margin-top: 10px;
}
.sidebar-nav {
position: relative;
bottom: 0;
right: 10;
padding: 10px 0;
}
.choices {
background-image: $url_1;
color: $white;
padding: 5px;
font-size: 16px;
cursor: pointer;
&:hover .nav-links {
display: inline;
}
}
#main-content {
border: 2px solid $black;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 10px;
}
.main-content-section {
float: left;
}
.nav-links {
display: none;
position: static;
width: 100%;
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
box-shadow: 0 8px 1px 0 $black_50;
z-index: 1;
margin-right: -1000px;
a:hover {
background-color: $black;
}
}
.nav-link {
position: static;
font-size: 15px;
color: $white;
padding: 0;
text-decoration: none;
display: inline;
}
.site-title {
font-family: $font_1;
font-size: 50px;
color: $white;
text-outline: 5px 2px $red;
}
.tagline {
color: $white;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar:hover .choices {
color: $blue;
}
83 changes: 83 additions & 0 deletions sassyst/sasstyl.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.