Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@geographyclub
geographyclub committed Apr 1, 2024
1 parent 8d8bd46 commit ffd095f
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 28 deletions.
83 changes: 66 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Serif+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Steve's Geography Works</title>
<title>Geography Resources</title>
</head>
<body>

Expand All @@ -33,17 +34,21 @@
<div class="image-container">
<img class="image" src="img/cat1.png" alt="">
<div class="text-overlay">
<h4 style="width:70%; margin:-3px auto;">Steve Kim's</h4>
<h3 style="padding-bottom:3px; width:70%; margin:0 auto;">Geography Works</h3>
<h3>Geography</h3>
<h3>Resources</h3>
<h4>for developers</h4>
</div>
</div>
</div>

<div class="box" id="home">
<div class="image-container">
<img class="image" src="img/washington.png" alt="">
<div class="text-overlay-left">
<div class="text-background-black"><a href="https://github.com/geographyclub/postgis-cookbook" target="_blank"><h1>POSTGIS</h1><h1>COOKBOOK</h1><p>COOKING WITH SPATIAL SQL</p></a></div>
<img class="image" src="misc/boston.png" alt="">
<div class="text-overlay">
<div class="white"><a href="https://github.com/geographyclub/postgis-cookbook" target="_blank">
<h1>POSTGIS</h1><h1>COOKBOOK</h1>
<p class="text-background-black">Recipes for working with spatial data in PostgreSQL/PostGIS</p>
</a></div>
</div>
</div>
</div>
Expand All @@ -52,8 +57,11 @@ <h3 style="padding-bottom:3px; width:70%; margin:0 auto;">Geography Works</h3>
<div class="image-container">
<img class="image" src="img/ascii_space.png" alt="ascii_space.png">
<div class="color-overlay" style="background:#fdbf6f;"></div>
<div class="text-overlay-left">
<div class="text-background-black"><a href="https://github.com/geographyclub/gis-from-command-line" target="_blank"><h1>GIS FROM</h1><h1>COMMAND LINE</h1><p>NO GUI? NO PROBLEM.</p></a></div>
<div class="text-overlay">
<div class="white"><a href="https://github.com/geographyclub/gis-from-command-line" target="_blank">
<h1>GIS FROM</h1><h1>COMMAND LINE >_</h1>
<p class="text-background-black">How to turn Linux into a complete<br>Geographic Information System</p>
</a></div>
</div>
</div>
</div>
Expand All @@ -62,35 +70,47 @@ <h3 style="padding-bottom:3px; width:70%; margin:0 auto;">Geography Works</h3>
<div class="image-container">
<img class="image" src="img/toronto_buildings.png" alt="toronto_buildings.png">
<div class="color-overlay" style="background: rgba(166, 206, 227, 1);"></div>
<div class="text-overlay-left">
<div class="text-background-black"><a href="https://github.com/geographyclub/qgis-expressions" target="_blank"><h1>QGIS EXPRESSIONS</h1><p>EXPRESS YOURSELF (IN QGIS)</p></a></div>
<div class="text-overlay">
<div class="white"><a href="https://github.com/geographyclub/qgis-expressions" target="_blank">
<h1>QGIS</h1><h1 class="pacifico">Expressions</h1>
<p class="text-background-black">Create and style geometries<br>on-the-fly with these expressions</p>
</a></div>
</div>
</div>
</div>

<div class="box">
<div class="image-container">
<img class="image" src="img/brooklyn.png" alt="">
<div class="text-overlay-left">
<div class="text-background-black"><a href="https://github.com/geographyclub/american-geography" target="_blank"><h1>AMERICAN</h1><h1>GEOGRAPHY</h1><p>WRANGLING US CENSUS DATA</p></a></div>
<div class="text-overlay">
<div class="white"><a href="https://github.com/geographyclub/american-geography" target="_blank">
<h1>AMERICAN</h1><h1>GEOGRAPHY</h1>
<p class="text-background-black">Step-by-step guide to working with US Census data in PostgreSQL/PostGIS</p>
</a></div>
</div>
</div>
</div>

<div class="box">
<div class="image-container">
<img class="image" src="img/frame_000027.png" alt="">
<div class="text-overlay-left">
<div class="text-background-black"><a href="https://github.com/geographyclub/weather-to-video" target="_blank"><h1>WEATHER-TO-VIDEO</h1><p>SCRIPT YOUR OWN WEATHER VISUALIZER</p></a></div>
<div class="text-overlay">
<div class="white"><a href="https://github.com/geographyclub/weather-to-video" target="_blank">
<h1>WEATHER</h1><h1 style="font-size:28px; margin-top:3px;">-TO-</h1><h1>VIDEO</h1>
<p class="text-background-black">Scripts to download and make your own weather visualizer</p>
</a></div>
</div>
</div>
</div>

<div class="box">
<div class="image-container">
<img class="image" src="img/chicago.png" alt="">
<div class="text-overlay-left">
<div class="text-background-black"><a href="https://github.com/geographyclub/imagemagick-for-mapmakers" target="_blank"><h1>IMAGEMAGICK</h1><h1>FOR MAPMAKERS</h1><p>IMAGE PROCESSING BY THE POWER OF MAGICK</p></a></div>
<div class="text-overlay">
<div class="white"><a href="https://github.com/geographyclub/imagemagick-for-mapmakers" target="_blank">
<h1>IMAGEMAGICK</h1><h1 style="font-size:28px; margin-top:3px;">FOR MAPMAKERS</h1>
<p class="text-background-black">Image processing with the power of magick</p>
</a></div>
</div>
</div>
</div>
Expand All @@ -99,7 +119,7 @@ <h3 style="padding-bottom:3px; width:70%; margin:0 auto;">Geography Works</h3>
<div class="image-container">
<img class="image" src="img/cat2.png" alt="">
<div class="text-overlay">
<h3 style="padding-bottom:3px;">Do you crave a geography-themed website?</h3>
<h3>Do you crave a geography-themed website?</h3>
</div>
</div>
</div>
Expand All @@ -121,6 +141,35 @@ <h1>Web developer and map maker with a background in Geography and English.</h1>
</div>
</div>

<!--
<div class="flex-column">
<h2 id="data">Data Sources</h2><hr>
<p>Global forecasts of potential weather scenarios up to 16 days at 10 to 15km resolution from the <a href="https://www.weather.gc.ca/ensemble/index_e.html" target="_blank">Canadian GEM model</a>.</p><br>
<p>Current weather reports at over 5,000 <a href="https://aviationweather.gov/data/metar/" target="_blank">METAR stations</a> around the world.</p><br>
<p>Long-term trends in temperature and precipitation thru the <a href="https://www.ncei.noaa.gov/products/land-based-station/global-historical-climatology-network-monthly" target="_blank">Global Historical Climatology Network</a> and <a href="https://worldclim.org/data/index.html" target="_blank">WorldClim</a> datasets.</p><br>
<p>Global 30m Digital Terrain Model from the Japanese Aerospace Exploration Agency's <a href="https://www.eorc.jaxa.jp/ALOS/en/dataset/aw3d30/aw3d30_e.htm" target="_blank">ALOS World 3D-30m</a>.</p><br>
<p>Global 90m and 30m Digital Elevation Model from NASA's Shuttle Radar Topography Mission <a href="https://www.earthdata.nasa.gov/sensors/srtm" target="_blank">SRTM</a>.</p><br>
<p>Medium-resolution multispectral imagery from NASA's workhorse <a href="https://landsat.gsfc.nasa.gov/" target="_blank">Landsat</a> program for land cover, forest management, biodiversity and more.</p><br>
<p>Global compendium of hydrological and environmental characteristics for sub-basins, rivers and lakes at multiple scales from <a href="https://www.hydrosheds.org/hydroatlas" target="_blank">HydroATLAS</a>.</p><br>
<p>The WWF's <a href="https://www.worldwildlife.org/publications/terrestrial-ecoregions-of-the-world" target="_blank">Terrestrial Ecoregions of the World</a> provides a map of 867 terrestrial ecoregions, classified into 14 different biomes.</p><br>
<p>The Global Biodiversity Information Facility <a href="https://www.gbif.org/" target="_blank">GBIF</a> is an international network funded by the world's governments and aimed at providing open access to data about all types of life on Earth.</p><br>
<p><a href="https://wiki.openstreetmap.org/wiki/Main_Page" target="_blank">OpenStreetMap</a> is a community-driven map of the world—the open source Google Maps—with extensive data on roads, buildings, places and more.</p><br>
<p>Population, demographics and dynamics from <a href="https://ghsl.jrc.ec.europa.eu/" target="_blank">Global Human Settlement Layer</a> and a focus on low and middle income countries from <a href="https://hub.worldpop.org/" target="_blank">WorldPop</a>.</p><br>
<p>Population and housing information from the US Census <a href="https://www.census.gov/programs-surveys/acs/" target="_blank">American Community Survey</a>.</p>
</div>
-->

</div> <!-- end container -->

<script>
Expand Down
Binary file added misc/boston.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 misc/manhattan_ghost.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.
28 changes: 17 additions & 11 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
h1 {font-family:'Montserrat'; font-size:20px; font-weight:900; line-height:0.9; margin:0; padding:0; letter-spacing:-1px;}
h1 {font-family:'Montserrat'; font-size:40px; font-weight:900; line-height:0.8; margin:0; padding:0; letter-spacing:-2px;}
h2 {font-family:'Montserrat'; font-size:14px; font-weight:600; line-height:1; margin:0; padding:0;}
h3 {font-family:'DM Serif Display'; font-size:30px; font-weight:900; line-height:0.8; margin:0; padding:0;}
h4 {font-family:'DM Serif Display'; font-size:14px; font-weight:900; line-height:0.8; margin:0; padding:0;}
p {font-family:'Montserrat'; font-size:12px; font-weight:600; line-height:1; margin:0; padding:0;}
h3 {font-family:'DM Serif Display'; font-size:30px; line-height:0.8; margin:0; padding:0;}
h4 {font-family:'DM Serif Display'; font-size:14px; line-height:0.8; margin:0; padding:0;}
p {font-family:'Noto Sans'; font-size:12px; font-weight:600; line-height:1; margin:0; padding:0;}
a {color:#fff; text-decoration:none;}
hr {border:none; height:1px; background-color:#fff; width:50%;}
.pacifico {font-family:Pacifico; font-size:45px; font-weight:400; letter-spacing:0; margin:-7px 0 5px 0;}

body {color:#333; background-color:#eee; margin:0; padding:0; box-sizing:border-box; font-family:Sans;}
.black a{color:#333;}
.black h1{text-shadow:2px 2px 2px #eee;}
.white a{color:#fff;}
.white h1{text-shadow:2px 2px 0 #888;}

body {color:#333; background-color:#eee; margin:0; padding:0; box-sizing:border-box;}
header {color:#333; background-color:#ddd; display:flex; justify-content:space-between; align-items:center; padding:0 10px; position:fixed; height:50px; width:100%; top:0; z-index:1000;}

.container {margin-top:50px; display:flex; flex-wrap:wrap; justify-content:space-around; padding:0;}
Expand All @@ -32,15 +38,15 @@ nav p {color:#333; margin:10px; font-size:10px;}
.image-large {display:block; width:90%; height:auto; max-height:100%; max-width:100%; margin:auto; border-radius:10px;}
.image-overlay {position:absolute; transform:translate(-50%,-50%); height:auto;}

.text-overlay {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:'#333'; text-align:center; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; width:90%; z-index:2;}
.text-overlay-left {position:absolute; bottom:5px; left:5px; 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; bottom:5px; right:5px; color:'#333'; text-align:right; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; z-index:2;}
.text-overlay {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:'#333'; text-align:center; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; z-index:2;}
.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-white {display:inline-block; background-color:rgba(255,255,255,0.5); margin:0; padding:7px;}
.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.3); margin:0; padding:7px;}
.text-background-black {display:inline-block; background-color:rgba(0,0,0,0.5); margin:5px auto; padding:5px;}

.collapsible {cursor:pointer; padding:18px; border:1px solid #ddd; text-align:center; background-color:#f1f1f1; margin:10px;}
.collapsible-content {display:none; padding:10px; border-top:1px solid #ddd;}
Expand All @@ -51,5 +57,5 @@ nav p {color:#333; margin:10px; font-size:10px;}

.footer {background-color:#ddd; color:#333; max-width:1920px; padding:15px 15px 30px 15px;}
.footer a{color:#333; text-decoration:underline;}
.footer h1{font-family:'Noto Sans'; font-size:16px; font-weight:400; line-height:1.2; letter-spacing:0;}
.footer p{font-family:'Noto Sans'; font-size:10px; color:#999; padding-top:10px; }
.footer h1{font-family:'Noto Sans'; font-size:14px; font-weight:400; line-height:1.2; letter-spacing:0;}
.footer p{font-family:'Noto Sans'; font-size:9px; color:#999; padding-top:10px; }

0 comments on commit ffd095f

Please sign in to comment.