custom.css (3894B)
1 .links a { 2 color: #111; 3 text-decoration: none; 4 } 5 6 .text-med { 7 font-size: 105% 8 } 9 10 .text-inc { 11 font-size: 125% 12 } 13 14 .slant-up { 15 clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); 16 } 17 18 .slant-t-up { 19 clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); 20 } 21 22 .pt-7 { 23 padding-top: 9rem !important; 24 } 25 26 .change-icon > .fa + .fa, 27 .change-icon:hover > .fa { 28 display: none; 29 } 30 .change-icon:hover > .fa + .fa { 31 display: inherit; 32 } 33 34 /* 404 page */ 35 .error { 36 margin: 10px auto; 37 max-width: 600px; 38 text-align: center; 39 h1 { 40 margin: 30px 0; 41 font-size: 10em; 42 line-height: 1; 43 letter-spacing: -1px; 44 } 45 } 46 47 .btn-effect a { 48 padding: 0 20px; 49 height: 45px; 50 line-height: 45px; 51 position: relative; 52 display: inline-block; 53 margin: 15px 25px; 54 letter-spacing: 1px; 55 font-weight: 400; 56 text-shadow: 0 0 1px rgba(255,255,255,0.3); 57 } 58 59 .btn-effect a::before, 60 .btn-effect a::after { 61 position: absolute; 62 width: 45px; 63 height: 1px; 64 background: #777; 65 content: ''; 66 -webkit-transition: all 0.3s; 67 -moz-transition: all 0.3s; 68 transition: all 0.3s; 69 pointer-events: none; 70 } 71 72 .btn-effect a::before { 73 top: 0; 74 left: 0; 75 -webkit-transform: rotate(90deg); 76 -moz-transform: rotate(90deg); 77 transform: rotate(90deg); 78 -webkit-transform-origin: 0 0; 79 -moz-transform-origin: 0 0; 80 transform-origin: 0 0; 81 } 82 83 .btn-effect a::after { 84 right: 0; 85 bottom: 0; 86 -webkit-transform: rotate(90deg); 87 -moz-transform: rotate(90deg); 88 transform: rotate(90deg); 89 -webkit-transform-origin: 100% 0; 90 -moz-transform-origin: 100% 0; 91 transform-origin: 100% 0; 92 } 93 94 .btn-effect a:hover::before, 95 .btn-effect a:focus::before { 96 left: 50%; 97 -webkit-transform: rotate(0deg) translateX(-50%); 98 -moz-transform: rotate(0deg) translateX(-50%); 99 transform: rotate(0deg) translateX(-50%); 100 } 101 102 .btn-effect a:hover::after, 103 .btn-effect a:focus::after { 104 right: 50%; 105 -webkit-transform: rotate(0deg) translateX(50%); 106 -moz-transform: rotate(0deg) translateX(50%); 107 transform: rotate(0deg) translateX(50%); 108 } 109 110 /* Cover Section */ 111 #cover { 112 height: 100vh; 113 font-family: "Raleway", sans-serif; 114 display: flex; 115 flex-direction: column; 116 position: relative; 117 text-transform: uppercase; 118 } 119 120 .top-link { 121 position: absolute; 122 top: 30px; 123 left: 30px; 124 color: white; 125 text-decoration: none; 126 font-size: 14px; 127 text-transform: uppercase; 128 letter-spacing: 1px; 129 text-shadow: 0 0 2px darkgrey; 130 } 131 132 .top-link:hover { 133 text-decoration: underline; 134 } 135 136 .cover-content { 137 margin-top: auto; 138 padding: 40px; 139 color: white; 140 display: flex; 141 justify-content: space-between; 142 align-items: flex-end; 143 } 144 145 #cover h1 { 146 font-size: 3rem; 147 font-weight: 600; 148 margin-bottom: 10px; 149 text-shadow: 0 0 5px darkgrey; 150 } 151 152 #cover time { 153 font-size: 1.2rem; 154 font-weight: 300; 155 text-shadow: 0 0 5px darkgrey; 156 } 157 158 .scroll-button { 159 background: white; 160 color: #1e1e1e; 161 border: none; 162 padding: 15px 30px; 163 font-size: 1rem; 164 cursor: pointer; 165 text-decoration: none; 166 display: inline-block; 167 transition: background 0.3s; 168 } 169 170 .scroll-button:hover { 171 background: #f0f0f0; 172 } 173 174 /* Responsive */ 175 @media (max-width: 768px) { 176 .cover-text h1 { 177 font-size: 2rem; 178 } 179 180 .cover-content { 181 flex-direction: column; 182 align-items: flex-start; 183 gap: 20px; 184 } 185 } 186 187 /* Galleries index page */ 188 ed-galleries { 189 display: flex; 190 flex-wrap: wrap; 191 justify-content: center; /* space-around */ 192 align-items: stretch; 193 } 194 195 /* Gallery item */ 196 ed-galleries a { 197 flex: 1 0 auto; 198 margin: 10px; 199 text-align: center; 200 transition: transform 0.3s ease; 201 202 text-decoration: none; 203 color: inherit; 204 205 display: grid; 206 gap: 10px; 207 margin-top: 10px; 208 } 209 210 /* Gallery cover photo */ 211 ed-galleries a img { 212 width: 100%; 213 height: 400px; 214 object-fit: cover; 215 object-position: center; 216 max-width: 100%; 217 border-radius: 8px; 218 } 219 220 /* Animate entry */ 221 ed-galleries a:hover { 222 transform: translateY(-10px); 223 }