diff --git a/resources/css-2023/app.css b/resources/css-2023/app.css deleted file mode 100644 index d810ef58..00000000 --- a/resources/css-2023/app.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "variables.css"; -@import "fonts.css"; -@import "layout.css"; -@import "colours.css"; -@import "code.css"; -@import "content.css"; diff --git a/resources/css-2023/posse.css b/resources/css-2023/posse.css deleted file mode 100644 index b131bdfe..00000000 --- a/resources/css-2023/posse.css +++ /dev/null @@ -1,3 +0,0 @@ -.p-bridgy-twitter-content { - display: none; -} diff --git a/resources/css-2023/variables.css b/resources/css-2023/variables.css deleted file mode 100644 index 5aedebb8..00000000 --- a/resources/css-2023/variables.css +++ /dev/null @@ -1,22 +0,0 @@ -:root { - /* Font Family */ - --font-family-headings: "Archer SSm A", "Archer SSm B", serif; - --font-family-body: "Verlag A", "Verlag B", sans-serif; - --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace; - - /* Font Size */ - --font-size-sm: 0.75rem; /* 12px */ - --font-size-base: 1rem; /* 16px, base */ - --font-size-md: 1.25rem; /* 20px */ - --font-size-lg: 1.5rem; /* 24px */ - --font-size-xl: 1.75rem; /* 28px */ - --font-size-xxl: 2rem; /* 32px */ - --font-size-xxxl: 2.25rem; /* 36px */ - - /* Colours */ - --color-primary: oklch(36.8% 0.1 125.505); - --color-secondary: oklch(96.3% 0.1 125.505); - --color-link: oklch(48.09% 0.146 241.41); - --color-link-visited: oklch(70.44% 0.21 304.41); - --color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%); -} diff --git a/resources/css/app.css b/resources/css/app.css index 5954fd52..d810ef58 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,6 +1,6 @@ @import "variables.css"; -@import "base.css"; -@import "layout/main.css"; -@import "link-style.css"; -@import "posse.css"; -@import "user-profiles.css"; +@import "fonts.css"; +@import "layout.css"; +@import "colours.css"; +@import "code.css"; +@import "content.css"; diff --git a/resources/css/base.css b/resources/css/base.css deleted file mode 100644 index 3a89a13e..00000000 --- a/resources/css/base.css +++ /dev/null @@ -1,36 +0,0 @@ -body { - font-family: var(--font-stack-body); - font-style: normal; - font-weight: 400; - font-size: 2rem; - background-color: var(--color-background); - color: var(--color-paragraph); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: var(--font-stack-headings); - font-style: normal; - font-weight: 800; -} - -pre, -code { - font-family: var(--font-stack-monospace); - font-style: normal; - font-weight: 400; -} - -a { - color: var(--color-highlight); - text-decoration: none; -} - -.h-feed > .note, -.h-feed > .h-entry { - margin-top: 4rem; -} diff --git a/resources/css-2023/code.css b/resources/css/code.css similarity index 100% rename from resources/css-2023/code.css rename to resources/css/code.css diff --git a/resources/css-2023/colours.css b/resources/css/colours.css similarity index 100% rename from resources/css-2023/colours.css rename to resources/css/colours.css diff --git a/resources/css-2023/content.css b/resources/css/content.css similarity index 100% rename from resources/css-2023/content.css rename to resources/css/content.css diff --git a/resources/css-2023/fonts.css b/resources/css/fonts.css similarity index 100% rename from resources/css-2023/fonts.css rename to resources/css/fonts.css diff --git a/resources/css-2023/h-card.css b/resources/css/h-card.css similarity index 100% rename from resources/css-2023/h-card.css rename to resources/css/h-card.css diff --git a/resources/css-2023/layout.css b/resources/css/layout.css similarity index 100% rename from resources/css-2023/layout.css rename to resources/css/layout.css diff --git a/resources/css/layout/main.css b/resources/css/layout/main.css deleted file mode 100644 index 84ead01f..00000000 --- a/resources/css/layout/main.css +++ /dev/null @@ -1,125 +0,0 @@ -body { - display: flex; - flex-direction: column; -} - -@media screen and (max-width: 699px) { - main { - margin-left: 5px; - margin-right: 5px; - } -} - -@media screen and (min-width: 700px) { - main { - max-width: 700px; - } - - main > .note, - main > .h-entry { - padding: 0 1rem; - } -} - -main { - display: flex; - flex-direction: column; - margin: auto; -} - -main img { - max-width: 100%; -} - -main .h-entry:first-child > .bookmark-link { - padding-top: 2rem; -} - -.note { - display: flex; - flex-direction: column; -} - -.note-metadata { - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.note .client { - word-break: break-all; -} - -.note .syndication-links svg { - height: 1em; - width: 1em; -} - -.note > .e-content > .naked-link .u-photo { - margin: 2rem 0; -} - -article header > h1 { - margin-bottom: 0; -} - -.post-info { - font-size: 1.4rem; -} - -.pagination { - display: flex; - flex-flow: row wrap; - justify-content: space-evenly; - max-width: 90vw; - list-style-type: none; -} - -.personal-bio { - padding: 0 2rem; -} - -footer { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 1.5rem; -} - -@media screen and (max-width: 699px) { - input { - max-width: 95vw; - } -} - -.iwc-logo { - max-width: 100%; -} - -@media screen and (max-width: 699px) { - footer { - margin-left: 5px; - margin-right: 5px; - } -} - -#top-header { - display: flex; - flex-direction: column; - justify-content: center; -} - -#top-header h1 { - width: 100%; - text-align: center; -} - -nav { - display: flex; - justify-content: center; - flex-wrap: wrap; -} - -nav a { - margin: 0 0.5rem; -} diff --git a/resources/css/link-style.css b/resources/css/link-style.css deleted file mode 100644 index 4de5f24f..00000000 --- a/resources/css/link-style.css +++ /dev/null @@ -1,7 +0,0 @@ -.post-info a { - text-decoration: none; -} - -.syndication-links .u-syndication { - text-decoration: none; -} diff --git a/resources/css/posse.css b/resources/css/posse.css index 922b04bd..b131bdfe 100644 --- a/resources/css/posse.css +++ b/resources/css/posse.css @@ -1,4 +1,3 @@ -.p-bridgy-facebook-content, .p-bridgy-twitter-content { display: none; } diff --git a/resources/css/user-profiles.css b/resources/css/user-profiles.css deleted file mode 100644 index 915760a2..00000000 --- a/resources/css/user-profiles.css +++ /dev/null @@ -1,3 +0,0 @@ -.hovercard { - display: none; -} diff --git a/resources/css/variables.css b/resources/css/variables.css index 756b0bac..5aedebb8 100644 --- a/resources/css/variables.css +++ b/resources/css/variables.css @@ -1,20 +1,22 @@ :root { - /* fonts */ - --font-stack-body: "Whitney SSm A", "Whitney SSm B", sans-serif; - --font-stack-headings: "Quarto A", "Quarto B", serif; - --font-stack-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace; + /* Font Family */ + --font-family-headings: "Archer SSm A", "Archer SSm B", serif; + --font-family-body: "Verlag A", "Verlag B", sans-serif; + --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace; - /* colours */ - --color-background: #004643; - --color-headline: #fffffe; - --color-paragraph: #abd1c6; - --color-button: #f9bc60; - --color-button-text: #001e1d; + /* Font Size */ + --font-size-sm: 0.75rem; /* 12px */ + --font-size-base: 1rem; /* 16px, base */ + --font-size-md: 1.25rem; /* 20px */ + --font-size-lg: 1.5rem; /* 24px */ + --font-size-xl: 1.75rem; /* 28px */ + --font-size-xxl: 2rem; /* 32px */ + --font-size-xxxl: 2.25rem; /* 36px */ - /* colours - illustrations */ - --color-stroke: #001e1d; - --color-main: #e8e4e6; - --color-highlight: #f9bc60; - --color-secondary: #abd1c6; - --color-tertiary: #e16162; + /* Colours */ + --color-primary: oklch(36.8% 0.1 125.505); + --color-secondary: oklch(96.3% 0.1 125.505); + --color-link: oklch(48.09% 0.146 241.41); + --color-link-visited: oklch(70.44% 0.21 304.41); + --color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%); } diff --git a/resources/es6-orig/colours.js b/resources/es6-orig/colours.js deleted file mode 100644 index df99005c..00000000 --- a/resources/es6-orig/colours.js +++ /dev/null @@ -1,29 +0,0 @@ -//colours.js - -let link = document.querySelector('#colourScheme'); - -let css = link.getAttribute('href').split('/').pop(); - -// update selected item in colour scheme list -document.querySelector('#colourSchemeSelect [value="' + css + '"]').selected = true; - -// fix form -let form = document.getElementById('colourSchemeForm'); -let btn = form.querySelector('button'); -btn.addEventListener('click', function (event) { - event.preventDefault(); - let newCss = document.getElementById('colourSchemeSelect').value; - let css = link.getAttribute('href'); - let parts = css.split('/'); - parts.pop(); - parts.push(newCss); - link.setAttribute('href', parts.join('/')); - let formData = new FormData(form); - fetch('/update-colour-scheme', { - method: 'POST', - credentials: 'same-origin', - body: formData - }).catch(function (error) { - console.warn(error); - }); -}); diff --git a/resources/es6-orig/edit-place-icon.js b/resources/es6-orig/edit-place-icon.js deleted file mode 100644 index d9cd35c0..00000000 --- a/resources/es6-orig/edit-place-icon.js +++ /dev/null @@ -1,7 +0,0 @@ -//edit-place-icon.js - -export default function getIcon() { - let iconOption = document.querySelector('#icon'); - - return iconOption.value; -} diff --git a/resources/es6-orig/links.js b/resources/es6-orig/links.js deleted file mode 100644 index 0c287bcf..00000000 --- a/resources/es6-orig/links.js +++ /dev/null @@ -1,31 +0,0 @@ -//links.js - -let youtubeRegex = /watch\?v=([A-Za-z0-9\-_]+)\b/; -let spotifyRegex = /https:\/\/play\.spotify\.com\/(.*)\b/; - -let notes = document.querySelectorAll('.e-content'); - -for (let note of notes) { - let ytid = note.textContent.match(youtubeRegex); - if (ytid) { - let ytcontainer = document.createElement('div'); - ytcontainer.classList.add('container'); - let ytiframe = document.createElement('iframe'); - ytiframe.classList.add('youtube'); - ytiframe.setAttribute('src', 'https://www.youtube.com/embed/' + ytid[1]); - ytiframe.setAttribute('frameborder', 0); - ytiframe.setAttribute('allowfullscreen', 'true'); - ytcontainer.appendChild(ytiframe); - note.appendChild(ytcontainer); - } - let spotifyid = note.textContent.match(spotifyRegex); - if (spotifyid) { - let sid = spotifyid[1].replace('/', ':'); - let siframe = document.createElement('iframe'); - siframe.classList.add('spotify'); - siframe.setAttribute('src', 'https://embed.spotify.com/?uri=spotify:' + sid); - siframe.setAttribute('frameborder', 0); - siframe.setAttribute('allowtransparency', 'true'); - note.appendChild(siframe); - } -} diff --git a/resources/es6-orig/mapbox-utils.js b/resources/es6-orig/mapbox-utils.js deleted file mode 100644 index 76ae054d..00000000 --- a/resources/es6-orig/mapbox-utils.js +++ /dev/null @@ -1,192 +0,0 @@ -//mapbox-utils.js -import parseLocation from './parse-location'; -import selectPlaceInForm from './select-place'; - -/* - * For specific lines on this file I have disabled the `no-undef` - * rule in ESLint. This is for the mapboxgl object which is defined - * in the mapbox-gl.js file that we pull in from their CDN before - * this script gets run. - */ - -// eslint-disable-next-line no-undef -mapboxgl.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw'; - -// Define some functions to be used in the default function. -const titlecase = (string) => { - return string.split('-').map(([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase()).join(' '); -}; - -// Get the ID for the map, i.e. get the u-url of the containing note. -const getId = (map) => { - let href = map._container.parentNode.querySelector('.u-url').getAttribute('href'); - return href.substr(href.lastIndexOf('/') + 1); -}; - -const addMapTypeOption = (map, menu, option, checked = false) => { - let div = document.createElement('div'); - let input = document.createElement('input'); - let id = option + getId(map); - input.setAttribute('id', id); - input.setAttribute('type', 'radio'); - input.setAttribute('name', 'map' + getId(map)); - input.setAttribute('value', option); - if (checked == true) { - input.setAttribute('checked', 'checked'); - } - input.addEventListener('click', function () { - let source = map.getSource('points'); - map.setStyle('mapbox://styles/mapbox/' + option + '-v9'); - map.on('style.load', function () { - map.addLayer({ - 'id': 'points', - 'type': 'symbol', - 'source': { - 'type': 'geojson', - 'data': source._data - }, - 'layout': { - 'icon-image': '{icon}-15', - 'text-field': '{title}', - 'text-offset': [0, 1] - } - }); - }); - }); - let label = document.createElement('label'); - label.setAttribute('for', option + getId(map)); - label.appendChild(document.createTextNode(titlecase(option))); - div.appendChild(input); - div.appendChild(label); - menu.appendChild(div); -}; - -const makeMapMenu = (map) => { - let mapMenu = document.createElement('fieldset'); - let legend = document.createElement('legend'); - let title = document.createTextNode('Map Style'); - legend.appendChild(title); - mapMenu.appendChild(legend); - mapMenu.classList.add('map-menu'); - addMapTypeOption(map, mapMenu, 'streets', true); - addMapTypeOption(map, mapMenu, 'satellite-streets'); - return mapMenu; -}; - -// The main function. -export default function addMap(div, position = null, places = null) { - let data; - let dataLatitude = div.dataset.latitude; - let dataLongitude = div.dataset.longitude; - let dataName = div.dataset.name; - let dataMarker = div.dataset.marker; - if (dataMarker == '') { - dataMarker = 'circle'; - } - if (dataName == null) { - data = { - 'type': 'FeatureCollection', - 'features': [{ - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [dataLongitude, dataLatitude] - }, - 'properties': { - 'title': 'Current Location', - 'icon': 'circle-stroked', - 'uri': 'current-location' - } - }] - }; - } else { - data = { - 'type': 'FeatureCollection', - 'features': [{ - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [dataLongitude, dataLatitude] - }, - 'properties': { - 'title': dataName, - 'icon': dataMarker, - } - }] - }; - } - if (places != null) { - for (let place of places) { - let placeLongitude = parseLocation(place.location).longitude; - let placeLatitude = parseLocation(place.location).latitude; - data.features.push({ - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [placeLongitude, placeLatitude] - }, - 'properties': { - 'title': place.name, - 'icon': 'circle', - 'uri': place.slug - } - }); - } - } - if (position != null) { - dataLongitude = position.coords.longitude; - dataLatitude = position.coords.latitude; - } - // eslint-disable-next-line no-undef - let map = new mapboxgl.Map({ - container: div, - style: 'mapbox://styles/mapbox/streets-v9', - center: [dataLongitude, dataLatitude], - zoom: 15 - }); - if (position == null) { - map.scrollZoom.disable(); - } - // eslint-disable-next-line no-undef - map.addControl(new mapboxgl.NavigationControl()); - div.appendChild(makeMapMenu(map)); - map.on('load', function () { - map.addLayer({ - 'id': 'points', - 'type': 'symbol', - 'source': { - 'type': 'geojson', - 'data': data - }, - 'layout': { - 'icon-image': '{icon}-15', - 'text-field': '{title}', - 'text-offset': [0, 1] - } - }); - }); - if (position != null) { - map.on('click', function (e) { - let features = map.queryRenderedFeatures(e.point, { - layer: ['points'] - }); - // if there are features within the given radius of the click event, - // fly to the location of the click event - if (features.length) { - // Get coordinates from the symbol and center the map on those coordinates - map.flyTo({center: features[0].geometry.coordinates}); - selectPlaceInForm(features[0].properties.uri); - } - }); - } - if (data.features && data.features.length > 1) { - // eslint-disable-next-line no-undef - let bounds = new mapboxgl.LngLatBounds(); - for (let feature of data.features) { - bounds.extend(feature.geometry.coordinates); - } - map.fitBounds(bounds, { padding: 65}); - } - - return map; -} diff --git a/resources/es6-orig/maps.js b/resources/es6-orig/maps.js deleted file mode 100644 index 1247d4c8..00000000 --- a/resources/es6-orig/maps.js +++ /dev/null @@ -1,8 +0,0 @@ -//maps.js -import addMap from './mapbox-utils'; - -let mapDivs = document.querySelectorAll('.map'); - -for (let div of mapDivs) { - addMap(div); -} diff --git a/resources/es6-orig/parse-location.js b/resources/es6-orig/parse-location.js deleted file mode 100644 index 9b57b6e1..00000000 --- a/resources/es6-orig/parse-location.js +++ /dev/null @@ -1,10 +0,0 @@ -//parse-location.js - -//text = `POINT(lon lat)` -export default function parseLocation(text) { - let coords = /POINT\((.*)\)/.exec(text); - let parsedLongitude = coords[1].split(' ')[0]; - let parsedLatitude = coords[1].split(' ')[1]; - - return {'latitude': parsedLatitude, 'longitude': parsedLongitude}; -} diff --git a/resources/es6-orig/piwik.js b/resources/es6-orig/piwik.js deleted file mode 100644 index 80c9cd41..00000000 --- a/resources/es6-orig/piwik.js +++ /dev/null @@ -1,12 +0,0 @@ -/* global process */ - -// Piwik in its own js file to allow usage with a CSP policy -var idSite = process.env.PIWIK_ID; -var piwikTrackingApiUrl = process.env.PIWIK_URL; - -var _paq = _paq || []; -// tracker methods like "setCustomDimension" should be called before "trackPageView" -_paq.push(['setTrackerUrl', piwikTrackingApiUrl]); -_paq.push(['setSiteId', idSite]); -_paq.push(['trackPageView']); -_paq.push(['enableLinkTracking']); diff --git a/resources/es6-orig/places.js b/resources/es6-orig/places.js deleted file mode 100644 index 6aa97936..00000000 --- a/resources/es6-orig/places.js +++ /dev/null @@ -1,83 +0,0 @@ -//places.js - -import addMap from './mapbox-utils'; -import getIcon from './edit-place-icon'; - -let div = document.querySelector('.map'); -let map = addMap(div); -let isDragging; -let isCursorOverPoint; -let canvas = map.getCanvasContainer(); - -let selectElem = document.querySelector('select[name="icon"]'); -selectElem.addEventListener('click', function () { - let newIcon = getIcon(); - let source = map.getSource('points'); - if (source._data.features[0].properties.icon != newIcon) { - source._data.features[0].properties.icon = newIcon; - map.getSource('points').setData(source._data); - } -}); - -function updateFormCoords(coords) { - let latInput = document.querySelector('#latitude'); - let lonInput = document.querySelector('#longitude'); - latInput.value = coords.lat.toPrecision(6); - lonInput.value = coords.lng.toPrecision(6); -} - -function mouseDown() { - if (!isCursorOverPoint) return; - - isDragging = true; - - // Set a cursor indicator - canvas.style.cursor = 'grab'; - - // Mouse events - map.on('mousemove', onMove); - map.once('mouseup', onUp); -} - -function onMove(e) { - if (!isDragging) return; - let coords = e.lngLat; - let source = map.getSource('points'); - - // Set a UI indicator for dragging. - canvas.style.cursor = 'grabbing'; - - // Update the Point feature in `geojson` coordinates - // and call setData to the source layer `point` on it. - source._data.features[0].geometry.coordinates = [coords.lng, coords.lat]; - map.getSource('points').setData(source._data); -} - -function onUp(e) { - if (!isDragging) return; - let coords = e.lngLat; - - // Print the coordinates of where the point had - // finished being dragged to on the map. - updateFormCoords(coords); - canvas.style.cursor = ''; - isDragging = false; - - // Unbind mouse events - map.off('mousemove', onMove); -} - -// When the cursor enters a feature in the point layer, prepare for dragging. -map.on('mouseenter', 'points', function() { - canvas.style.cursor = 'move'; - isCursorOverPoint = true; - map.dragPan.disable(); -}); - -map.on('mouseleave', 'points', function() { - canvas.style.cursor = ''; - isCursorOverPoint = false; - map.dragPan.enable(); -}); - -map.on('mousedown', mouseDown); diff --git a/resources/es6-orig/select-place.js b/resources/es6-orig/select-place.js deleted file mode 100644 index f5e01f3a..00000000 --- a/resources/es6-orig/select-place.js +++ /dev/null @@ -1,11 +0,0 @@ -//select-place.js - -export default function selectPlaceInForm(uri) { - if (document.querySelector('select')) { - if (uri == 'current-location') { - document.querySelector('select [id="option-coords"]').selected = true; - } else { - document.querySelector('select [value="' + uri + '"]').selected = true; - } - } -} diff --git a/resources/es6-orig/submit-place.js b/resources/es6-orig/submit-place.js deleted file mode 100644 index e78c5342..00000000 --- a/resources/es6-orig/submit-place.js +++ /dev/null @@ -1,68 +0,0 @@ -//submit-place.js - -export default function submitNewPlace(map) { - //create the form data to send - let formData = new FormData(); - formData.append('place-name', document.querySelector('#place-name').value); - formData.append('place-description', document.querySelector('#place-description').value); - formData.append('place-latitude', document.querySelector('#place-latitude').value); - formData.append('place-longitude', document.querySelector('#place-longitude').value); - //post the new place - fetch('/micropub/places', { - //send cookies with the request - credentials: 'same-origin', - method: 'post', - body: formData - }).then(function (response) { - return response.json(); - }).then(function (placeJson) { - if (placeJson.error === true) { - throw new Error(placeJson.error_description); - } - //remove un-needed form elements - let form = document.querySelector('fieldset'); - //iterate through labels and remove parent div elements - let labels = document.querySelectorAll('.place-label'); - for (let label of labels) { - form.removeChild(label.parentNode); - } - form.removeChild(document.querySelector('#place-submit')); - let newPlaceButton = document.querySelector('#create-new-place'); - //in order to remove a DOM Node, you need to run removeChild on the parent Node - newPlaceButton.parentNode.removeChild(newPlaceButton); - //remove current location from map - let source = map.getSource('points'); - let newFeatures = source._data.features.filter(function (item) { - return item.properties.title != 'Current Location'; - }); - //add new place to map - newFeatures.push({ - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [placeJson.longitude, placeJson.latitude] - }, - 'properties': { - 'title': placeJson.name, - 'icon': 'circle', - 'uri': placeJson.uri - } - }); - let newSource = { - 'type': 'FeatureCollection', - 'features': newFeatures - }; - map.getSource('points').setData(newSource); - //add new place to select menu - let selectElement = document.querySelector('select'); - let newlyCreatedPlaceOption = document.createElement('option'); - newlyCreatedPlaceOption.setAttribute('value', placeJson.uri); - newlyCreatedPlaceOption.appendChild(document.createTextNode(placeJson.name)); - newlyCreatedPlaceOption.dataset.latitude = placeJson.latitude; - newlyCreatedPlaceOption.dataset.longitude = placeJson.longitude; - selectElement.appendChild(newlyCreatedPlaceOption); - document.querySelector('select [value="' + placeJson.uri + '"]').selected = true; - }).catch(function (placeError) { - console.error(placeError); - }); -} diff --git a/resources/js/app.js b/resources/js/app.js index 61f4beba..f65cc9bd 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1 +1 @@ -import '../css-2023/app.css'; +import '../css/app.css'; diff --git a/resources/sass-orig/_articles.scss b/resources/sass-orig/_articles.scss deleted file mode 100644 index 72095a8e..00000000 --- a/resources/sass-orig/_articles.scss +++ /dev/null @@ -1,5 +0,0 @@ -//articles.scss - -article.h-entry { - width: $mainWidth; -} diff --git a/resources/sass-orig/_base.scss b/resources/sass-orig/_base.scss deleted file mode 100644 index 4996c3f5..00000000 --- a/resources/sass-orig/_base.scss +++ /dev/null @@ -1,22 +0,0 @@ -// _base.scss - -// Fonts -html { - font-family: montserrat, sans-serif; - font-weight: 300; - font-style: normal; - font-size: 20px; -} - -h1 { - font-family: bebas-neue, sans-serif; - font-weight: 400; - font-style: normal; -} - -code { - font-family: "Operator Mono", monospace; -} - -// Variables -$mainWidth: 40rem; diff --git a/resources/sass-orig/_bio.scss b/resources/sass-orig/_bio.scss deleted file mode 100644 index 74464f45..00000000 --- a/resources/sass-orig/_bio.scss +++ /dev/null @@ -1,11 +0,0 @@ -// bio.scss - -.personal-bio { - width: $mainWidth; -} - -@media screen and (max-width: $mainWidth) { - .personal-bio { - width: 95vw; - } -} diff --git a/resources/sass-orig/_emoji.scss b/resources/sass-orig/_emoji.scss deleted file mode 100644 index a167419b..00000000 --- a/resources/sass-orig/_emoji.scss +++ /dev/null @@ -1,49 +0,0 @@ -//emoji.scss - -//thanks to http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html - -span[role=img][aria-label] { - position: relative; -} - -span[role=img][aria-label]:focus::after, -span[role=img][aria-label]:hover::after { - position: absolute; - display: block; - z-index: 1; - bottom: 1.5em; - left: 0; - padding: 0.5em 0.75em; - border: 0.05em solid rgba(255, 255, 255, 1); - border-radius: 0.2em; - box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1); - content: attr(aria-label); - background-color: rgba(0, 0, 0, 0.85); - color: rgba(255, 255, 255, 1); - font-size: 80%; - animation: TOOLTIP 0.1s ease-out 1; -} - -@keyframes TOOLTIP { - from { - bottom: 0.5em; - background-color: rgba(0, 0, 0, 0); - border: 0.05em solid rgba(255, 255, 255, 0); - color: rgba(255, 255, 255, 0); - box-shadow: 0 0 0 rgba(0, 0, 0, 1); - } - - to { - bottom: 1.5em; - background-color: rgba(0, 0, 0, 0.85); - border: 0.05em solid rgba(255, 255, 255, 1); - color: rgba(255, 255, 255, 1); - box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1); - } -} - -@media print { - span[role=img][aria-label]::after { - content: " (" attr(aria-label) ") "; - } -} diff --git a/resources/sass-orig/_footer.scss b/resources/sass-orig/_footer.scss deleted file mode 100644 index 522c4356..00000000 --- a/resources/sass-orig/_footer.scss +++ /dev/null @@ -1,38 +0,0 @@ -// footer.scss - -footer { - display: flex; - flex-direction: column; - align-items: center; - background-color: var(--white); - color: var(--black); - - a { - color: var(--blue); - text-decoration: none; - } - - form:first-child { - margin-bottom: 1rem; - } - - p { - margin-bottom: 0; - } -} - -@media screen and (max-width: $mainWidth) { - footer { - img { - width: 95%; - } - - form { - width: 95vw; - } - - select { - width: 90vw; - } - } -} diff --git a/resources/sass-orig/_main.scss b/resources/sass-orig/_main.scss deleted file mode 100644 index a7ced3a8..00000000 --- a/resources/sass-orig/_main.scss +++ /dev/null @@ -1,21 +0,0 @@ -// main.scss - -main { - display: flex; - flex-direction: column; - align-items: center; - background-color: var(--white); - color: var(--black); - - a { - color: var(--blue); - text-decoration: none; - } - - .h-entry { - margin: 3rem 0; - } -} - -@import "pagination"; -@import "bio"; diff --git a/resources/sass-orig/_mapbox.scss b/resources/sass-orig/_mapbox.scss deleted file mode 100644 index a21d9c7c..00000000 --- a/resources/sass-orig/_mapbox.scss +++ /dev/null @@ -1,5 +0,0 @@ -//mapbox.scss - -.map { - height: 200px; -} diff --git a/resources/sass-orig/_notes.scss b/resources/sass-orig/_notes.scss deleted file mode 100644 index 1760f7f7..00000000 --- a/resources/sass-orig/_notes.scss +++ /dev/null @@ -1,17 +0,0 @@ -// notes.scss - -.h-entry .note { - width: $mainWidth; -} - -@media screen and (max-width: $mainWidth) { - .h-entry .note { - width: 95vw; - - .e-content { - img { - width: 100%; - } - } - } -} diff --git a/resources/sass-orig/_pagination.scss b/resources/sass-orig/_pagination.scss deleted file mode 100644 index dde7876d..00000000 --- a/resources/sass-orig/_pagination.scss +++ /dev/null @@ -1,16 +0,0 @@ -// pagination.scss - -.pagination { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; - list-style-type: none; - width: $mainWidth; -} - -@media screen and (max-width: $mainWidth) { - .pagination { - width: 95vw; - } -} diff --git a/resources/sass-orig/_site-header.scss b/resources/sass-orig/_site-header.scss deleted file mode 100644 index 6ead7f56..00000000 --- a/resources/sass-orig/_site-header.scss +++ /dev/null @@ -1,25 +0,0 @@ -// site-header.scss - -#topheader { - display: flex; - width: 100vw; - flex-direction: column; - align-items: center; - background-color: var(--black); - - a { - color: var(--white); - text-decoration: none; - } - - h1 { - margin-top: 0; - padding-top: 1rem; - font-size: 3rem; - } - - nav { - padding-bottom: 1rem; - font-size: 1.5rem; - } -} diff --git a/resources/sass-orig/_syndication.scss b/resources/sass-orig/_syndication.scss deleted file mode 100644 index 5649a76a..00000000 --- a/resources/sass-orig/_syndication.scss +++ /dev/null @@ -1,16 +0,0 @@ -//syndication.scss - -.note-metadata { - display: flex; - flex-direction: row; - justify-content: space-between; - - .social-links { - flex-direction: row; - - svg { - height: 1em; - width: auto; - } - } -} diff --git a/resources/sass-orig/app.scss b/resources/sass-orig/app.scss deleted file mode 100644 index 430baa62..00000000 --- a/resources/sass-orig/app.scss +++ /dev/null @@ -1,18 +0,0 @@ -// app.scss - -// General styles -@import "base"; -@import "site-header"; -@import "main"; -@import "articles"; -@import "notes"; -@import "footer"; - -// Mapbox styles -@import "mapbox"; - -// The syndication links at the end of notes -@import "syndication"; - -// Accessible emoji -@import "emoji"; diff --git a/resources/sass/_base.scss b/resources/sass/_base.scss deleted file mode 100644 index 3a89a13e..00000000 --- a/resources/sass/_base.scss +++ /dev/null @@ -1,36 +0,0 @@ -body { - font-family: var(--font-stack-body); - font-style: normal; - font-weight: 400; - font-size: 2rem; - background-color: var(--color-background); - color: var(--color-paragraph); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: var(--font-stack-headings); - font-style: normal; - font-weight: 800; -} - -pre, -code { - font-family: var(--font-stack-monospace); - font-style: normal; - font-weight: 400; -} - -a { - color: var(--color-highlight); - text-decoration: none; -} - -.h-feed > .note, -.h-feed > .h-entry { - margin-top: 4rem; -} diff --git a/resources/sass/_layout-main.scss b/resources/sass/_layout-main.scss deleted file mode 100644 index e3cf8a49..00000000 --- a/resources/sass/_layout-main.scss +++ /dev/null @@ -1,132 +0,0 @@ -body { - display: flex; - flex-direction: column; -} - -main { - @media screen and (max-width: 699px) { - margin-left: 5px; - margin-right: 5px; - } - - display: flex; - flex-direction: column; - margin: auto; - - img { - max-width: 100%; - } - - @media screen and (min-width: 700px) { - max-width: 700px; - - > .note, - > .h-entry { - padding: 0 1rem; - } - } - - .h-entry:first-child { - > .bookmark-link { - padding-top: 2rem; - } - } -} - -.note { - display: flex; - flex-direction: column; - - .note-metadata { - display: flex; - flex-direction: row; - justify-content: space-between; - - .client { - word-break: break-all; - } - - .syndication-links { - svg { - height: 1em; - width: 1em; - } - } - } - - > .e-content { - > .naked-link { - .u-photo { - margin: 2rem 0; - } - } - } -} - -article { - header { - > h1 { - margin-bottom: 0; - } - - .post-info { - font-size: 1.4rem; - } - } -} - -.pagination { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - max-width: 90vw; - list-style-type: none; -} - -.personal-bio { - padding: 0 2rem; -} - -footer { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 1.5rem; - - input { - @media screen and (max-width: 699px) { - max-width: 95vw; - } - } - - .iwc-logo { - max-width: 100%; - } - - @media screen and (max-width: 699px) { - margin-left: 5px; - margin-right: 5px; - } -} - -#top-header { - display: flex; - flex-direction: column; - justify-content: center; - - h1 { - width: 100%; - text-align: center; - } - - nav { - display: flex; - justify-content: center; - flex-wrap: wrap; - - a { - margin: 0 0.5rem; - } - } -} diff --git a/resources/sass/_link-styles.scss b/resources/sass/_link-styles.scss deleted file mode 100644 index b7018a28..00000000 --- a/resources/sass/_link-styles.scss +++ /dev/null @@ -1,11 +0,0 @@ -.post-info { - a { - text-decoration: none; - } -} - -.syndication-links { - .u-syndication { - text-decoration: none; - } -} diff --git a/resources/sass/_posse.scss b/resources/sass/_posse.scss deleted file mode 100644 index 922b04bd..00000000 --- a/resources/sass/_posse.scss +++ /dev/null @@ -1,4 +0,0 @@ -.p-bridgy-facebook-content, -.p-bridgy-twitter-content { - display: none; -} diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss deleted file mode 100644 index 756b0bac..00000000 --- a/resources/sass/_variables.scss +++ /dev/null @@ -1,20 +0,0 @@ -:root { - /* fonts */ - --font-stack-body: "Whitney SSm A", "Whitney SSm B", sans-serif; - --font-stack-headings: "Quarto A", "Quarto B", serif; - --font-stack-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace; - - /* colours */ - --color-background: #004643; - --color-headline: #fffffe; - --color-paragraph: #abd1c6; - --color-button: #f9bc60; - --color-button-text: #001e1d; - - /* colours - illustrations */ - --color-stroke: #001e1d; - --color-main: #e8e4e6; - --color-highlight: #f9bc60; - --color-secondary: #abd1c6; - --color-tertiary: #e16162; -} diff --git a/resources/sass/app.scss b/resources/sass/app.scss deleted file mode 100644 index 283e72fa..00000000 --- a/resources/sass/app.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "variables"; -@import "base"; -@import "layout-main"; -@import "link-styles"; -@import "posse";