-
- Monolith of Minds Blog Custom Ghost blog theme
-
-
- JHC Illustration Online portfolio for a graphic designer
-
-
- JJay Berthume Music Online portfolio for a composer
-
-
- Wallyworks Construction Website for construction company
-
-
- Owl Sprit Cafe Website for a small restaurant
-
-
- Better Living Coffee Website for a coffee shop
-
-
- PT Defense Website for a Lawyer
-
-
- JAC Defenders Website for attorneys
-
+
WEBSITES
+
+
+
+
+ 01.
+
+
Webites that are beautifully designed are usually slow and spagetti under the hood. Conversly: websites that are well-made often aren't much to look at. Striking the balance in this trade-off is key to a well crafted website.
+
+
+
+ 02.Ghost blog. Created using the Handlebars templating language, HTML, and CSS.
+
+
Most websites have too many fonts with too many sizes, poor color choices, and inconsistent designs that distract rather than clarify. Implementing an appropriate typeface and type-scale, simple color scheme, and consistent rules is the base for a good design.
+
+ 03.
+
+
+
+
+
+
+
+
+ 04.
+ 05.
+
+
Working face-to-face with clients, you can get a sense of what they value and can incorporate that in the work. If you do it right it will resonate with them.
+
+
+
+
+
+ 06.
+ 07.
+
-
- Web Applications
- Contents
-
-
- BTech Time Tracker
-
-
- Workdesk
-
-
- BTech CNA Charting
-
-
- Workroom
-
-
- BTech Time Tracker
- Track and manage sessionsDjango, HTML5, SCSS
-
-
-
- Welcome page
-
-
- Student profile and recent activity
-
-
- Past sessions (pagination)
-
-
- Scan a QR code to clock in
-
-
- Instructor home page shows activity for department
-
-
-
-
-
-
Workdesk
- Shift assignments and preferencesDjango, Stimulusjs, HTML5, CSS3
-
-
-
- All shifts
-
-
- Type to filter shifts
-
-
- See employee details
-
-
- Employee can sort their shift preferences
-
-
-
-
-
-
BTech CNA Charting
- Certified Nurse Assistant Charting ApplicationDjango, Stimulusjs, HTML5, CSS3
-
-
-
- Track charting information
-
-
- Create a new chart
-
-
- Add a new entry
-
-
- Input patient vitals
-
-
- Review information recorded, automatically sorted by time
-
-
-
-
-
-
Workroom
- Timecards and labor trackingDjango, HTML5, CSS3
-
-
-
- Employee timecard
-
-
- Input daily tasks
-
-
- Manage projects for consistent naming
-
-
- See and edit task details
-
-
-
-
-
-
-
- Assignments and projects
- I'm currently attending Bridgerland Technical College and this page is a collection of links to projects and assignments I've made. A portfolio from school.
-
- PHP Work
-
- Website /
- Github
-
-
- MySQL
- Github SQL Sandbox
- Github BTech Time Tracker
-
- Website /
- Github
-
- With Django, Postgresql, Javascript
-
- Python Exercises
- Github Typing Test with Javascript
-
- Website /
- Github
-
-
- Analog Clock with Javascript
-
- Website /
- Github
-
-
-
-
↑
-
diff --git a/scripts/carousel.js b/scripts/carousel.js
deleted file mode 100644
index 9797479..0000000
--- a/scripts/carousel.js
+++ /dev/null
@@ -1,110 +0,0 @@
-export default class Carousel {
- constructor (element) {
- this.element = element;
- this.itemClassName = 'carousel__photo';
- this.items = this.element.querySelectorAll(`.${this.itemClassName}`);
- this.totalItems = this.items.length;
- this.slide = 0;
- this.moving = true;
-
- this.start();
- }
-
- setInitialClasses () {
- this.items[0].classList.add('active');
- this.items[1].classList.add('next');
- }
-
- attachEventListeners () {
- const next = this.element.querySelector('.carousel__button--next');
- const prev = this.element.querySelector('.carousel__button--prev');
-
- next.addEventListener('click', this.moveNext.bind(this));
- prev.addEventListener('click', this.movePrev.bind(this));
- }
-
- moveCarouselTo (slide) {
- // Check if carousel is moving, if not, allow interaction
- if (!this.moving) {
- // temporarily disable interactivity
- this.disableInteraction();
- // Update the 'old' adjacent slides with 'new' ones
- let newPrevious = slide - 1,
- newNext = slide + 1,
- oldPrevious = slide - 2,
- oldNext = slide + 2;
- // Test if carousel has more than three items
- if ((this.totalItems - 1) > 2) {
- // Checks and updates if the new slides are out of bounds
- if (newPrevious <= 0) {
- oldPrevious = (this.totalItems - 1);
- } else if (newNext >= (this.totalItems - 1)) {
- oldNext = 0;
- }
- // Checks and updates if slide is at the beginning/end
- if (slide === 0) {
- newPrevious = (this.totalItems - 1);
- oldPrevious = (this.totalItems - 2);
- oldNext = (slide + 1);
- } else if (slide === (this.totalItems - 1)) {
- newPrevious = (slide - 1);
- newNext = 0;
- oldNext = 1;
- }
- // Now we've worked out where we are and where we're going,
- // by adding/removing classes we'll trigger the transitions.
- // Reset old next/prev elements to default classes
- this.items[oldPrevious].className = this.itemClassName;
- this.items[oldNext].className = this.itemClassName; // Add new classes
- this.items[newPrevious].className = this.itemClassName + ' prev';
- this.items[slide].className = this.itemClassName + ' active';
- this.items[newNext].className = this.itemClassName + ' next';
- }
- }
- }
-
- moveNext () {
- // Check if moving
- if (!this.moving) {
- // If it's the last slide, reset to 0, else +1
- if (this.slide === (this.totalItems - 1)) {
- this.slide = 0;
- } else {
- this.slide++;
- }
- // Move carousel to updated slide
- this.moveCarouselTo(this.slide);
- }
- }
-
- movePrev () {
- // Check if moving
- if (!this.moving) {
- // If it's the first slide, set as the last slide, else -1
- if (this.slide === 0) {
- this.slide = (this.totalItems - 1);
- } else {
- this.slide--;
- }
- // Move carousel to updated slide
- this.moveCarouselTo(this.slide);
- }
- }
-
- disableInteraction () {
- // Set 'moving' to true for the same duration as our transition.
- // (0.5s = 500ms)
- this.moving = true;
- // setTimeout runs its function once after the given time
- setTimeout(() => {
- this.moving = false
- }, 500);
- }
-
- start () {
- this.setInitialClasses();
- this.attachEventListeners();
- // Set moving to false so that the carousel becomes interactive
- this.moving = false;
- }
-}
diff --git a/scripts/index.js b/scripts/index.js
old mode 100755
new mode 100644
index 96fc387..3f0bcb1
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -1,15 +1,3 @@
-import Carousel from './carousel.js';
-
-const btechTimeTrackerEl = document.querySelector('.btech-time-tracker');
-const workdeskEl = document.querySelector('.workdesk');
-const cnaEl = document.querySelector('.btech-cna-charting');
-const workroomEl = document.querySelector('.workroom-carousel');
-
-new Carousel(btechTimeTrackerEl);
-new Carousel(workdeskEl);
-new Carousel(cnaEl);
-new Carousel(workroomEl);
-
// Current year in footer
const currentYear = new Date().getFullYear();
document.querySelector('#year').innerHTML = currentYear;
@@ -34,4 +22,4 @@ toTopButton.addEventListener('click', topFunction);
window.onscroll = () => {
scrollFunction();
-};
+};
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
old mode 100755
new mode 100644
index ccf1d84..6ea854e
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,142 +1,173 @@
-/*@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');*/
@import url('/fonts/franklin-gothic/franklin-gothic.css');
:root {
- --fg-color: #000;
- --bg-color: #ffffff;
- --primary-color: #00AFD7;
- --border-color: #b9bfbb;
+ /* Font sizes */
+ --large: 5.653rem;
+ --normal: 1rem;
+ --small: 0.707rem;
+
+ /* Colors */
+ --fg: #000;
+ --bg: #ececec;
+ --orange: #ff4828;
+ --orange-bg: #e05e47;
+ --blue: #00afd7;
+ --grey: #ececec;
+ --border: #bdc3c7;
+
+ /* Screen sizes */
+ --large-screen: 1440px;
+ --normal-screen: 1024px;
+ --tablet-screen: 900px;
+ --phone-screen: 600px;
+ --small-screen: 300px;
}
-html {
- font-size: 150%;
+
+/* Reset
+ ==============================================================
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, img, ins, kbd, q, s, samp,
+small, strike, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+
+
+/* Typography
+ ==============================================================
+*/
+
+html {
+ font-size: 150%; /*24px*/
+}
+ @media (max-width: 600px) {
+ html {
+ font-size: 112.5%;
+ }
+ }
body {
margin: 0;
padding: 0;
- background-color: var(--bg-color);
- color: var(--fg-color);
+ background-color: var(--grey);
font-family: 'Franklin Gothic', sans-serif;
font-weight: 400;
- line-height: 1.65;
+ line-height: 1.3;
+ color: #000000;
}
-header {
- max-width: 42.67rem;
- margin: 0 auto 3rem;
-}
-
-header h1 {
- margin-bottom: 0;
-}
-
-header p {
- margin-top: 0;
-}
-
-
-main {
- max-width: 42.67rem;
- margin: 0 auto;
-}
-
-
-/* Text Elements */
-
p {
- margin-bottom: 1.15rem;
+ margin-bottom: 1rem;
+ text-rendering: optimizeLegibility;
}
+
h1, h2, h3, h4, h5 {
- margin: 3rem 0 1.05rem;
+ margin: 1rem 0;
+ font-family: 'Franklin Gothic', sans-serif;
font-weight: 700;
- line-height: 1.15;
-}
-h1:first-child,
-h2:first-child,
-h3:first-child,
-h4:first-child,
-h5:first-child {
- margin-top: 1rem;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
}
h1 {
- font-size: 2.488rem;
+ font-size: 5.653rem;
+ letter-spacing: -0.083rem;
}
+
h2 {
- font-size: 2.074rem;
+ font-size: 3.998rem;
+ letter-spacing: -0.083rem;
}
+
h3 {
- font-size: 1.728rem;
+ font-size: 2.827rem;
+ line-height: 1.25;
}
+
h4 {
- font-size: 1.44rem;
-}
-h3 + h4 {
- margin-top: 0;
+ font-size: 1.999rem;
}
+
h5 {
- font-size: 1.2rem;
+ font-size: 1.414rem;
}
+
small {
- font-size: 0.833rem;
+ font-size: 0.707rem;
+}
+
+mark {
+ background-color: unset;
+ color: var(--orange);
}
a {
- color: var(--primary-color);
- cursor: pointer;
- text-decoration: none;
- white-space: nowrap;
+ color: var(--fg);
+ text-rendering: optimizeLegibility;
}
a:hover {
- color: var(--fg-color);
+ color: var(--blue);
}
-ol,
ul {
+ margin: 0;
padding-left: 0;
list-style-position: inside;
-}
-
-dl dt {
- font-style: italic;
- font-weight: bold;
-}
-
-dd + dt {
- margin-top: 1.15rem;
+ list-style-type: square;
}
img {
width: 100%;
+ height: 100%;
box-sizing: border-box;
-}
-
-nav {
- margin: 0 0 1.05rem;
- display: flex;
-}
-
-nav a {
- color: var(--fg-color);
- font-weight: bold;
-}
-nav a:not(:last-child) {
- margin-right: 2rem;
-}
-nav a.--active {
- text-decoration: underline;
-}
-
-section {
- margin-bottom: 3rem;
+ object-fit: cover;
}
iframe {
- border: 0;
- width: 100%;
- /*height: 24rem;*/
+ border: 0;
+ width: 100%;
}
figure {
@@ -146,52 +177,441 @@ figure {
}
figure img {
- border: 0.0625rem solid #bdc3c7;
+ border: 0.0625rem solid var(--border);
}
figure figcaption {
- text-align: center;
- font-style: italic;
- font-size: 0.833rem;
+ font-size: var(--small);
+ text-transform: lowercase;
+ font-variant: small-caps;
+ letter-spacing: 0.1rem;
+}
+
+
+
+/* Main Elements
+ ==============================================================
+*/
+
+body > header {
+ height: 100vh;
+ box-sizing: border-box;
+}
+
+main section,
+footer section,
+.wrapper {
+ /*max-width: var(--large-screen);*/
+ margin: 0 auto;
+}
+
+
+
+
+/* Site Header
+ ==============================================================
+*/
+
+.site__header {
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ padding: 1rem;
+ gap: 1rem;
+ margin-bottom: 3rem;
+ background-color: var(--orange-bg);
+ color: var(--bg);
+}
+
+.site__header mark {
+ color: var(--fg);
+}
+
+.site__header a {
+ color: var(--bg);
+}
+
+.site__header a:hover {
+ color: var(--fg);
+}
+
+
+
+/* Site Navigation
+ ==============================================================
+*/
+
+.site__nav {
+ /*font-size: var(--small);*/
+}
+
+.site__nav ul {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1rem;
}
+/* Banner
+ ==============================================================
+*/
+.site__banner {
+ align-self: center;
+}
+ @media (max-width: 600px) {
+ .site__banner {
+ display: flex;
+ align-items: center;
-.albums-list,
-.website-list {
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ direction: rtl;
+ }
+ .site__banner h1 {
+ margin: 0;
+ line-height: 1.5;
+ transform: rotate(180deg);
+ }
+ }
+
+.header__preamble {
+ font-size: 1.5rem;
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: repeat(12, 1fr);
+ gap: 1rem;
+}
+ @media (max-width: 600px) {
+ .header__preamble {
+ font-size: 1rem;
+ }
+ }
+
+.header__preamble p {
+ grid-column: 1/7;
+ margin-bottom: 0;
+}
+ @media (max-width: 600px) {
+ .header__preamble p {
+ grid-column: 1/13;
+ grid-row: 2;
+ }
+ }
+
+.header__preamble p + p {
+ grid-column: 8/13;
+}
+ @media (max-width: 600px) {
+ .header__preamble p + p {
+ grid-column: 1/13;
+ grid-row: 1;
+ }
+ }
+
+.preamble__arrow {
+ font-size: 9rem;
+}
+
+
+
+
+
+/* Articles
+ ==============================================================
+*/
+article section {
+ padding: 0 1rem;
+}
+
+article section h2 {
+ grid-column: span 12;
+}
+
+article section p {
+ grid-column: span 2;
+}
+
+.project__item {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ grid-template-rows: repeat(12, 1fr);
+ gap: 1rem;
+ margin: 4rem 0;
+}
+
+.project__description {
+ margin-bottom: 0;
+
+}
+
+/* A */
+.project__a .project__figure {
+ grid-column: 1/8;
+ grid-row: 1/13;
+}
+ @media (max-width: 900px) {
+ .project__a .project__figure {
+ grid-column: 1/10;
+ }
+ }
+ @media (max-width: 600px) {
+ .project__a .project__figure {
+ grid-column: 1/13;
+ grid-row: 1/10;
+ }
+ }
+
+.project__a .project__description {
+ grid-column: 11/13;
+ grid-row: 1/3;
+}
+ @media (max-width: 900px) {
+ .project__a .project__description {
+ grid-column: 10/13;
+
+ }
+ }
+ @media (max-width: 600px) {
+ .project__a {
+ grid-template-rows: repeat(3, 1fr);
+ }
+ .project__a .project__description {
+ grid-column: 1/13;
+ grid-row: 11/13;
+ }
+ }
+
+/* B */
+.project__b {
+ grid-template-rows: repeat(3, 1fr) auto;
+}
+.project__b .project__figure {
+ grid-column: 1/13;
+ grid-row: 1/4;
+}
+.project__b .project__description {
+ grid-column: 1/3;
+ grid-row: 4;
+ align-self: end;
+}
+ @media (max-width: 900px) {
+ .project__b .project__description {
+ grid-column: 1/4;
+ }
+ }
+ @media (max-width: 600px) {
+ .project__b .project__description {
+ grid-column: 1/13;
+ grid-row: 4;
+ }
+ }
+
+/* C */
+.project__c .project__figure {
+ grid-column: 5/13;
+ grid-row: 1/13;
+}
+ @media (max-width: 900px) {
+ .project__c .project__figure {
+ grid-column: 4/13;
+ }
+ }
+ @media (max-width: 600px) {
+ .project__c {
+ grid-template-rows: repeat(3, 1fr) auto;
+ }
+ .project__c .project__figure {
+ grid-column: 1/13;
+ grid-row: 1/4;
+ }
+ }
+.project__c .project__description {
+ grid-column: 1/3;
+ grid-row: 11/13;
+ align-self: end;
+}
+ @media (max-width: 900px) {
+ .project__c .project__description {
+ grid-column: 1/4;
+ }
+ }
+ @media (max-width: 600px) {
+ .project__c .project__description {
+ grid-column: 1/13;
+ grid-row: 4;
+ }
+ }
+
+/* D */
+.project__d .project__figure_a {
+ grid-column: 1/5;
+ grid-row: 1/13;
+}
+.project__d .project__figure_a img {
+ object-position: left;
+}
+
+.project__d .project__figure_b {
+ grid-column: 5/9;
+ grid-row: 1/13;
+
+}
+ @media (max-width: 900px) {
+ .project__d .project__figure_a {
+ }
+ .project__d .project__figure_b {
+ }
+ }
+ @media (max-width: 600px) {
+ .project__d {
+ grid-template-rows: repeat(2, 1fr) auto auto;
+ }
+ .project__d .project__figure_a {
+ grid-column: 1/13;
+ grid-row: 1;
+ }
+ .project__d .project__figure_b {
+ grid-column: 1/13;
+ grid-row: 2;
+ }
+ }
+
+.project__d .project__description_a {
+ grid-column: 11/13;
+ grid-row: 7/10;
+ align-self: end;
+}
+
+.project__d .project__description_b {
+ grid-column: 11/13;
+ grid-row: 10/13;
+ align-self: end;
+}
+ @media (max-width: 900px) {
+ .project__d .project__description_a {
+ grid-column: 9/13;
+ }
+ .project__d .project__description_b {
+ grid-column: 9/13;
+
+ }
+ }
+ @media (max-width: 600px) {
+ .project__d .project__description_a {
+ grid-column: 1/13;
+ grid-row: 3;
+ }
+ .project__d .project__description_b {
+ grid-column: 1/13;
+ grid-row: 4;
+ }
+ }
+
+/* E */
+.project__e .project__figure_a {
+ grid-column: 1/6;
+ grid-row: 1/7;
+
+}
+.project__e .project__figure_b {
+ grid-column: 1/6;
+ grid-row: 7/13;
+
+}
+ @media (max-width: 900px) {
+ .project__e .project__figure_a {
+ grid-column: 1/10;
+ }
+ .project__e .project__figure_b {
+ grid-column: 1/10;
+ }
+ }
+ @media (max-width: 600px) {
+ .project__e .project__figure_a {
+ grid-column: 1/13;
+ grid-row: 1/6;
+ }
+ .project__e .project__figure_b {
+ grid-column: 1/13;
+ grid-row: 6/11;
+ }
+ }
+
+.project__e .project__description_a {
+ grid-column: 6/8;
+ grid-row: 11;
+ align-self: end;
+}
+
+.project__e .project__description_b {
+ grid-column: 6/8;
+ grid-row: 12;
+ align-self: end;
+}
+ @media (max-width: 900px) {
+ .project__e .project__description_a {
+ grid-column: 10/13;
+ }
+ .project__e .project__description_b {
+ grid-column: 10/13;
+ }
+ }
+ @media (max-width: 600px) {
+ .project__e .project__description_a {
+ grid-column: 1/13;
+ grid-row: 11;
+ }
+ .project__e .project__description_b {
+ grid-column: 1/13;
+ grid-row: 12;
+ }
+ }
+
+
+/* Website List
+ ==============================================================
+*/
+.website-list {
+ grid-column: span 8;
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
gap: 1rem;
}
.website-list__item {
+ text-decoration: none;
display: flex;
flex-direction: column;
- /*max-width: 400px;*/
+ grid-column: span 3;
margin-bottom: 2rem;
- /*font-weight: bold;*/
color: var(--fg-color);
}
+
.website-list__item img {
- border: 0.0625rem solid var(--border-color);
+ margin-bottom: 0.25rem;
+ border: 0.0625rem solid var(--border);
}
@media all and (max-width: 1000px) {
.website-list__item {
max-width: 100%;
- margin-bottom: 2rem;
}
}
+
+
+
+
+/* Site Footer
+ ==============================================================
+*/
footer {
- text-align: center;
- color: white;
- background-color: var(--fg-color);
+ text-align: center;
+ color: var(--bg);
+ background-color: var(--fg);
padding: 2rem 0 1rem;
}
@@ -200,145 +620,15 @@ footer section {
margin: 0 auto 2rem;
}
+footer a {
+ color: var(--blue);
+}
footer a:hover {
color: white;
}
-@media all and (max-width: 600px) {
- header {
- padding: 0 1rem;
- flex-flow: column;
- justify-content: space-around;
- }
- main {
- padding: 0 1rem;
- }
- .website-list {
- grid-template-columns: 1fr;
- }
- .website-list__item {
- max-width: 100%;
- margin-bottom: 2rem;
- }
-}
-
-
-
-.carousel-wrapper {
- overflow: hidden;
-}
-.carousel-wrapper * {
- box-sizing: border-box;
-}
-
-.carousel {
- transform-style: preserve-3d;
-}
-
-.carousel__photo {
- opacity: 0;
- position: absolute;
- top:0;
- width: 100%;
- margin: auto;
- padding: 1rem 4rem;
- z-index: 100;
- transition: transform .5s, opacity .5s, z-index .5s;
-}
-
-@media all and (max-width: 600px) {
- .carousel__photo {
- padding: 1rem 2rem;
- }
-}
-
-.carousel__photo.initial,
-.carousel__photo.active {
- opacity: 1;
- position: relative;
- z-index: 900;
-}
-
-.carousel__photo.prev,
-.carousel__photo.next {
- z-index: 800;
-}.carousel__photo.prev {
- transform: translateX(-100%); /* Move 'prev' item to the left */
-}.carousel__photo.next {
- transform: translateX(100%); /* Move 'next' item to the right */
-}
-
-
-.carousel__button--prev,
-.carousel__button--next {
- position: absolute;
- top:50%;
- width: 3rem;
- height: 3rem;
- background-color: #fff;
- transform: translateY(-50%);
- border-radius: 50%;
- cursor: pointer;
- z-index: 1001; /* Sit on top of everything */
- border: 1px solid black;
-}.carousel__button--prev {
- left:0;
-}.carousel__button--next {
- right:0;
-}.carousel__button--prev::after,
-.carousel__button--next::after {
- content: " ";
- position: absolute;
- width: 10px;
- height: 10px;
- top: 50%;
- left: 54%;
- border-right: 2px solid black;
- border-bottom: 2px solid black;
- transform: translate(-50%, -50%) rotate(135deg);
-}.carousel__button--next::after {
- left: 47%;
- transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-@media all and (max-width: 600px) {
- .carousel__button--prev,
- .carousel__button--next {
- width: 1.5rem;
- height: 1.5rem;
- }
-}
-
-
-
-/* To-top button */
-/* Scroll-to-top button
- ========================================================================== */
-#to-top-button {
- display: none;
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- z-index: 99;
- cursor: pointer;
- padding: 1rem;
- font-size: 1.25rem;
- /*box-shadow: 0 0.125rem 0.75rem var(--gray);*/
-}
-
-button {
- border: 0.125rem solid var(--border-color);
- background-color: white;
- cursor: pointer;
- font-weight: 700;
- font-size: 1rem;
- transition: background-color 0.1s ease-in-out;
-}
-
-button:hover {
- color: white;
- background-color: var(--primary-color);
- border-color: var(--primary-color);
+.color__accent {
+ color: var(--orange);
}
\ No newline at end of file
diff --git a/styles/normalize.css b/styles/normalize.css
old mode 100755
new mode 100644
diff --git a/templates/_base.html b/templates/_base.html
index e3c0f03..56c0327 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -14,17 +14,18 @@
-
+
-