Skip to content

Commit

Permalink
Update content
Browse files Browse the repository at this point in the history
  • Loading branch information
@geographyclub
geographyclub committed Jun 11, 2024
1 parent 9dcc7a4 commit 4bf2635
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 22 deletions.
Binary file added img/american-geography_crop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/asean_crop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/factbook_crop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 19 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
<div class="container">

<div class="box-wide">
<h3>Steve Kim is a writer/coder with experience in technical writing, education and marketing.</h3><br>
<h3 class="gowun">스티브 킴은 기술 커뮤니케이션, 교육 및 광고 분야에서 경험이 있는 작가/코더입니다.</h3>
<h3>Steve Kim is a writer/coder working in technical communication, education and marketing.</h3><br>
<h3 class="gowun">스티브 김은 기술 커뮤니케이션, 교육, 마케팅 분야에서 일하는 작가이자 코더입니다.</h3>
</div>

<div class="box-wide-title">
Expand All @@ -53,12 +53,12 @@ <h3>How to turn Linux into a complete <i>Geographic Information System</i> from

<div class="box">
<div class="image-container">
<img class="image" src="img/cali.png" alt="">
<img class="image" src="img/doubletake.png" alt="">
<div class="text-overlay white"><a href="https://github.com/geographyclub/postgis-cookbook" target="_blank">
<h1>POSTGIS</h1><h1>COOKBOOK</h1>
</a></div>
</div>
<h3>Recipes for working with geospatial data in <i>PostgreSQL</i> with <i>PostGIS</i></h3>
<h3>Recipes for working with geospatial data in <i>PostgreSQL</i> and <i>PostGIS</i></h3>
</div>

<div class="box">
Expand All @@ -68,7 +68,7 @@ <h3>Recipes for working with geospatial data in <i>PostgreSQL</i> with <i>PostGI
<h1>QGIS</h1><h1>EXPRESSIONS</h1>
</a></div>
</div>
<h3>Create and style geometries on-the-fly with these <i>QGIS</i> expression builders</h3>
<h3>Create and style geometries on-the-fly with these <i>QGIS</i> expressions</h3>
</div>

<div class="box">
Expand All @@ -82,13 +82,22 @@ <h3>Wrangling <i>US Census</i> data from database to the web</h3>
</div>

<div class="box-wide-title">
<h2>WEBSITES</h2><hr>
<h2>WEB DEVELOPMENT</h2><hr>
</div>

<div class="box-wide-websites">
<a href="https://geographyclub.github.io/factbook/" target="_blank"><img src="img/factbook.jpg" alt=""></a>
<a href="https://geographyclub.github.io/asean/" target="_blank"><img src="img/asean.jpg" alt=""></a>
<a href="https://geographyclub.github.io/american-geography/" target="_blank"><img src="img/american-geography.jpg" alt=""></a>
<div class="box">
<div class="image-container"><img class="image-website" style="background-color:#74bdcb;" src="img/factbook_crop.png" alt=""></div>
<h3><a style="color:#333; text-decoration:underline;" href="https://geographyclub.github.io/factbook/" target="_blank">World Factbook Scraper</a> an endless feed of random facts for geography lovers</h3>
</div>

<div class="box">
<div class="image-container"><img class="image-website" style="background-color:#EFE7BC;" src="img/asean_crop.png" alt=""></div>
<h3><a style="color:#333; text-decoration:underline;" href="https://geographyclub.github.io/asean/" target="_blank">ASEAN Primer</a> economic data and ranking of ASEAN countries</h3>
</div>

<div class="box">
<div class="image-container"><img class="image-website" style="background-color:#FFA384;" src="img/american-geography_crop.png" alt=""></div>
<h3><a style="color:#333; text-decoration:underline;" href="https://geographyclub.github.io/american-geography/" target="_blank">American Geography</a> how US states stack up in random census categories</h3>
</div>

<div class="box-wide-title">
Expand Down
14 changes: 2 additions & 12 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ p {font-family:'Montserrat'; font-size:18px; font-weight:400; line-height:1.2; m
a {color:#fff; text-decoration:none;}
hr {border:none; height:1px; background-color:#333; width:100%; margin:5px 0 0 0; padding:0;}
.pacifico {font-family:Pacifico; font-size:50px; font-weight:400; letter-spacing:0; margin:-10px 0 5px 0;}
.gowun{font-family:'Gowun Batang'; font-weight:400; font-size:26px; letter-spacing:0;}
.gowun{font-family:'Gowun Batang'; font-weight:400; font-size:24px; letter-spacing:0;}

.black a{color:#333;}
.black h1{color:#333;}
Expand All @@ -21,13 +21,9 @@ header h2{font-size:11px; font-weight:600; color:#333; letter-spacing:2px;}
.container {margin-top:40px; display:flex; flex-wrap:wrap; justify-content:space-around; padding:0;}
.box {flex:0 0 50%; margin:0; padding:0; box-sizing:border-box;}
.box h3 {padding:0 20px 20px 20px;}
.box-thin {flex:0 0 33%; margin:0; padding:0; box-sizing:border-box;}
.box-thin p {font-size:12px; font-weight:500; line-height:1; padding:0 20px 20px 20px; text-align:center;}
.box-wide {width:100%; margin:0; padding:40px 20px 15px 20px; box-sizing:border-box;}
.box-wide-title {width:100%; margin:0; padding:30px 20px 10px 20px; box-sizing:border-box;}
.box-wide-title h2{font-size:11px; font-weight:600; color:#333; letter-spacing:2px;}
.box-wide-websites {width:100%; margin:0; padding:0px 20px 10px 20px; text-align:center;}
.box-wide-websites img{display:inline-block; width:32%; padding:0; margin:0;}

nav {background-color:#fff; display:none; flex-direction:column; align-items:flex-start; width:100%; position:absolute; right:0; top:41px; border-bottom: 1px solid #333; padding:15px 0 15px 20px; box-sizing:border-box;}
nav.show {display:flex;}
Expand All @@ -43,19 +39,13 @@ nav p {font-family:'Montserrat'; color:#999; margin:5px 0; font-size:10px;}
}

.image-container {box-sizing:border-box; display:flex; overflow:hidden; position:relative; height:auto; width:100%; max-width:768px; padding:5px 20px; align-items:center; justify-content:center; box-sizing:border-box;}
.image-container-small {box-sizing:border-box; display:flex; overflow:hidden; position:relative; height:auto; width:100%; max-width:768px; padding:5px; align-items:center; justify-content:center; box-sizing:border-box;}
.background-container {overflow:hidden; position:relative; width:100%; max-width:768px; height:1080px; margin:0 auto;}
.image {display:block; width:100%; height:auto; max-height:100%; max-width:100%;}
.image-small {display:block; width:100%; height:auto; border-radius:5px;}
.image-overlay {position:absolute; transform:translate(-50%,-50%); height:auto;}
.image-website {display:block; width:100%; height:auto; max-height:100%; max-width:100%;}

.text-overlay {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:'#333'; text-align:center; background:rgba(0,0,0,0); margin:0; padding:0; box-sizing:border-box; z-index:2; width:80%;}
.text-overlay-left {position:absolute; top:15px; left:15px; color:'#333'; text-align:left; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; z-index:2;}
.text-overlay-right {position:absolute; top:15px; right:15px; color:'#333'; text-align:right; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; z-index:2;}
.tag-overlay {position:absolute; top:0%; left:100%; transform:translate(-100%,0%); color:#333; text-align:right; background:rgba(255,255,0,1); padding:0 3px; box-sizing:border-box; z-index:3;}
.text-background-blue {display:inline-block; background-color:rgba(52,152,219,1); margin:0; padding:5px;}
.text-background-yellow {display:inline-block; background-color:#ffff00; margin:0; padding:7px;}
.text-background-orange {display:inline-block; background-color:#ffa500; margin:0; padding:3px 5px;}
.text-background-black {display:inline-block; background-color:rgba(0,0,0,0.5); margin:5px auto; padding:5px;}
.text-background-white {display:inline-block; background-color:rgba(255,255,255,0.5); color:#333; margin:5px auto; padding:5px;}

Expand Down

0 comments on commit 4bf2635

Please sign in to comment.