silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #15 from samfearn/alignfix 

Alignfix
This commit is contained in:
Maruan 2018-06-18 09:54:53 -04:00 committed by GitHub
parent 3835ac3ac4 c54ca4dc63
commit e7822d4a89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,6 +1,6 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2017 Maruan Al-Shedivat. Copyright (c) 2018 Maruan Al-Shedivat.
Permission is hereby granted, free of charge, to any person obtaining a copy of Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in this software and associated documentation files (the "Software"), to deal in

8
README.md
View File

@ -39,13 +39,17 @@ By default, the script uses the `master` branch for the source code and deploys
The optional flag `--user` tells it to deploy to `master` and use `source` for the source code instead. The optional flag `--user` tells it to deploy to `master` and use `source` for the source code instead.
Using `master` for deployment is a convention for [user and organization pages](https://help.github.com/articles/user-organization-and-project-pages/). Using `master` for deployment is a convention for [user and organization pages](https://help.github.com/articles/user-organization-and-project-pages/).
**Note:** when deploying your user or organization page, make the `_config.yml` has `url` and `baseurl` fields as follows. **Note:** when deploying your user or organization page, make sure the `_config.yml` has `url` and `baseurl` fields as follows.
``` ```
url: # should be empty url: # should be empty
baseurl: # should be empty baseurl: # should be empty
``` ```
### Usage
Note that `_pages/about.md` is built to index.html in the published site. There is therefore no need to have a separate index page for the project. If an index page does exist in the root directory then this will prevent `_pages/about.md` from being added to the built site.
## Features ## Features
#### Ergonomic Publications #### Ergonomic Publications
@ -100,4 +104,4 @@ Style improvements and bug fixes are especially welcome.
## License ## License
MIT The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

16
_projects/1_project.markdown
View File

@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/> <img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
@ -36,8 +36,8 @@ You can also put regular text between your rows of images. Say you wanted to wri
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/> <img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -50,6 +50,6 @@ You can also put regular text between your rows of images. Say you wanted to wri
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two left" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/> <img class="col one left" src="/img/11.jpg"/>
</div> </div>

18
_projects/2_project.markdown
View File

@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/> <img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
@ -36,20 +36,20 @@ You can also put regular text between your rows of images. Say you wanted to wri
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/> <img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
</div> </div>
<br/><br/><br/> <br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two left" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/> <img class="col one left" src="/img/11.jpg"/>
</div> </div>

19
_projects/3_project.markdown
View File

@ -19,15 +19,15 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/> <img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
@ -37,20 +37,21 @@ You can also put regular text between your rows of images. Say you wanted to wri
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/> <img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
</div> </div>
<br/><br/><br/> <br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two left" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/> <img class="col one left" src="/img/11.jpg"/>
</div> </div>

19
_projects/4_project.markdown
View File

@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/> <img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
@ -36,20 +36,21 @@ You can also put regular text between your rows of images. Say you wanted to wri
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/> <img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
</div> </div>
<br/><br/><br/> <br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two left" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/> <img class="col one left" src="/img/11.jpg"/>
</div> </div>

19
_projects/5_project.markdown
View File

@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/> <img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
@ -36,20 +36,21 @@ You can also put regular text between your rows of images. Say you wanted to wri
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/> <img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
</div> </div>
<br/><br/><br/> <br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two left" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/> <img class="col one left" src="/img/11.jpg"/>
</div> </div>

19
_projects/6_project.markdown
View File

@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/> <img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
@ -36,17 +36,20 @@ You can also put regular text between your rows of images. Say you wanted to wri
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/> <img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/> <img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
</div> </div>
<br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two left" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/> <img class="col one left" src="/img/11.jpg"/>
</div> </div>

1
_sass/_gallery.scss
View File

@ -19,7 +19,6 @@ figcaption {
.col { .col {
width: 100%; width: 100%;
height: 100%; height: 100%;
float: left;
object-fit: cover; object-fit: cover;
box-sizing:border-box; box-sizing:border-box;
padding: $img-spacing; padding: $img-spacing;

1
_sass/_profile.scss
View File

@ -1,5 +1,4 @@
.profile { .profile {
float: right !important;
img { img {
box-shadow: 0 0 5px $grey-color; box-shadow: 0 0 5px $grey-color;
width: 100%; width: 100%;